diff --git a/TAILWIND_SETUP.md b/TAILWIND_SETUP.md new file mode 100644 index 00000000..8e0130e5 --- /dev/null +++ b/TAILWIND_SETUP.md @@ -0,0 +1,150 @@ +# Hugo Native Tailwind CSS Setup + +MiloDocs theme now supports Hugo's native Tailwind CSS v4 processing, eliminating the need for separate build tools. + +## Quick Setup + +### 1. Install Dependencies + +In your Hugo site root, install the required dependencies: + +```bash +npm install -D @tailwindcss/postcss autoprefixer postcss postcss-import tailwindcss +``` + +### 2. Create PostCSS Configuration + +Create `postcss.config.js` in your site root: + +```javascript +module.exports = { + plugins: [ + require('postcss-import')({ + path: ['themes/milodocs/assets/css'] + }), + require('@tailwindcss/postcss'), + require('autoprefixer') + ] +} +``` + +### 3. Create Tailwind Configuration + +Create `tailwind.config.js` in your site root: + +```javascript +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "content/**/*.md", + "layouts/**/*.html", + "themes/milodocs/layouts/**/*.html", + "themes/milodocs/content/**/*.md", + "assets/js/**/*.js" + ], + theme: { + extend: { + colors: { + brand: "var(--color-brand)", + "brand-1": "var(--color-brand-1)", + "brand-2": "var(--color-brand-2)", + "brand-3": "var(--color-brand-3)", + "brand-4": "var(--color-brand-4)", + "brand-5": "var(--color-brand-5)", + "brand-6": "var(--color-brand-6)", + "brand-7": "var(--color-brand-7)", + surface: "var(--color-surface)", + "surface-hover": "var(--color-surface-hover)", + "surface-active": "var(--color-surface-active)", + text: { + primary: "var(--color-text-primary)", + secondary: "var(--color-text-secondary)", + tertiary: "var(--color-text-tertiary)", + inverse: "var(--color-text-inverse)", + }, + bg: { + primary: "var(--color-bg-primary)", + secondary: "var(--color-bg-secondary)", + tertiary: "var(--color-bg-tertiary)", + inverse: "var(--color-bg-inverse)", + }, + border: { + primary: "var(--color-border-primary)", + secondary: "var(--color-border-secondary)", + focus: "var(--color-border-focus)", + }, + }, + fontFamily: { + "brand": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], + "nvidia": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], + "nvidia-mono": ["RobotoMono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"], + }, + fontSize: { + 'xs': ['0.875rem', { lineHeight: '1.4' }], + 'sm': ['0.875rem', { lineHeight: '1.5' }], + 'base': ['1rem', { lineHeight: '1.6' }], + 'lg': ['1.125rem', { lineHeight: '1.75' }], + 'xl': ['1.25rem', { lineHeight: '1.75' }], + '2xl': ['1.5rem', { lineHeight: '2' }], + '3xl': ['1.875rem', { lineHeight: '2.25' }], + }, + }, + }, + plugins: [], +}; +``` + +### 4. Create Theme Symlink + +For the example site to work, create a symlink to the theme: + +```bash +mkdir -p themes +ln -sf ../../ themes/milodocs +``` + +## How It Works + +1. **Hugo Processing**: Hugo automatically detects the PostCSS configuration and processes CSS files through PostCSS +2. **Tailwind v4**: The `@tailwindcss/postcss` plugin handles Tailwind CSS v4 compilation +3. **Component Imports**: PostCSS Import resolves the theme's component CSS files +4. **No Build Step**: Everything happens automatically when you run `hugo server` or `hugo build` + +## Benefits + +- ✅ **No separate build tools**: Hugo handles everything natively +- ✅ **Live reload**: CSS changes are reflected immediately during development +- ✅ **Optimized output**: Hugo automatically minifies and fingerprints CSS in production +- ✅ **Tailwind v4**: Latest Tailwind CSS features and performance improvements +- ✅ **Theme integration**: Full access to theme components and design tokens + +## Troubleshooting + +### CSS Import Errors + +If you see import path errors, ensure: +1. The theme symlink exists: `themes/milodocs` → `../../` +2. PostCSS import path is configured: `path: ['themes/milodocs/assets/css']` + +### Missing Dependencies + +Ensure you have Hugo Extended version for PostCSS support: +```bash +hugo version # Should show "extended" +``` + +### Development vs Production + +- **Development**: CSS is processed but not minified for faster builds +- **Production**: CSS is automatically minified and fingerprinted by Hugo + +## Migration from PostCSS Build + +If you're migrating from the previous PostCSS build setup: + +1. Remove build scripts from `package.json` +2. Delete generated `assets/css/main.css` +3. Remove theme-level `postcss.config.js` and `tailwind.config.js` +4. Follow the setup steps above + +The theme now handles CSS processing through Hugo's native capabilities, providing a much cleaner and more maintainable setup. diff --git a/assets/css/architecture/animation-system.css b/assets/css/architecture/animation-system.css deleted file mode 100644 index 90ea00a7..00000000 --- a/assets/css/architecture/animation-system.css +++ /dev/null @@ -1,370 +0,0 @@ -/* 🎯 Universal Animation System - Single Source of Truth - * ===================================================== - * - * This file establishes consistent timing, easing, and animation patterns - * across the entire theme to eliminate timing chaos and performance issues. - */ - -:root { - /* ✨ TIMING TOKENS - Only these 4 speeds allowed site-wide */ - --timing-instant: 0.1s; /* Micro-interactions (hover, focus) */ - --timing-fast: 0.2s; /* Standard interactions (buttons, links) */ - --timing-medium: 0.3s; /* Complex interactions (collapse, expand) */ - --timing-slow: 0.5s; /* Dramatic reveals (page transitions) */ - - /* ✨ EASING TOKENS - Only these 3 curves allowed site-wide */ - --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Default - smooth start/end */ - --easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* Dramatic - bouncy feel */ - --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Gentle - soft motion */ - - /* 🎯 COLLAPSE TOKENS - Universal collapse/expand behavior */ - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); - --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; /* Never use 'none' or 'auto' - breaks animation */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - - /* 🎨 TRANSFORM TOKENS - 3D acceleration friendly */ - --transform-scale-down: scale(0.95); - --transform-scale-up: scale(1.05); - --transform-scale-normal: scale(1); - --transform-translate-up: translateY(-4px); - --transform-translate-down: translateY(4px); - --transform-translate-none: translateY(0); - - /* 🌟 OPACITY TOKENS - Visibility states */ - --opacity-hidden: 0; - --opacity-faded: 0.6; - --opacity-visible: 1; - - /* 🎨 COMPONENT-SPECIFIC TOKENS - From design-tokens.css merge */ - - /* Card & Tile Tokens */ - --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.1); - --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.15); - --card-shadow-active: 0 8px 25px rgba(0,0,0,0.15); - --card-transform-hover: translateY(-2px); - --card-transform-active: translateY(-1px) scale(0.98); - --card-border-radius: 0.5rem; - - /* ✨ ADDITIONAL TRANSFORM PATTERNS - From component analysis */ - --transform-lift-subtle: translateY(-1px); /* Buttons, small elements */ - --transform-lift-medium: translateY(-2px); /* Cards, medium elements */ - --transform-lift-dramatic: translateY(-4px); /* Hero elements */ - --transform-slide-in-up: translateY(20px); /* Entry animations */ - --transform-slide-in-down: translateY(-20px); /* Dropdown animations */ - --transform-scale-hover: scale(1.02); /* Hover scale up */ - --transform-scale-active: scale(0.98); /* Active scale down */ - --transform-scale-entrance: scale(0.95); /* Entry scale */ - - /* ✨ COMBINED TRANSFORMS - Common combinations */ - --transform-lift-and-scale: translateY(-2px) scale(1.02); - --transform-press-down: translateY(1px) scale(0.98); - --transform-bounce-in: translateY(10px) scale(0.95); - --transform-slide-up-fade: translateY(15px); - - /* Interaction Tokens */ - --hover-scale: 1.02; - --active-scale: 0.98; - --focus-ring-width: 2px; - --focus-ring-offset: 2px; - --focus-ring-color: rgba(var(--color-brand-rgb), 0.2); - - /* Loading State Tokens */ - --loading-opacity: 0.6; - --loading-blur: blur(1px); - --loading-skeleton-bg: linear-gradient(90deg, - rgba(var(--color-brand-rgb), 0.1) 25%, - rgba(var(--color-brand-rgb), 0.2) 50%, - rgba(var(--color-brand-rgb), 0.1) 75%); - --loading-skeleton-size: 200% 100%; - - /* Feedback Tokens */ - --feedback-success: #10b981; - --feedback-warning: #f59e0b; - --feedback-error: #ef4444; - --feedback-info: #3b82f6; - --feedback-slide-in: translateY(-10px); - --feedback-slide-out: translateY(-20px); - - /* Progressive Reveal Tokens */ - --reveal-stagger-delay: 0.05s; - --reveal-batch-delay: 0.15s; - --reveal-slide-distance: 20px; -} - -/* 🌙 DARK MODE ENHANCEMENTS */ -.dark { - --focus-ring-color: rgba(var(--color-brand-rgb), 0.3); - - /* Enhanced loading states for dark mode */ - --loading-skeleton-bg: linear-gradient(90deg, - rgba(255, 255, 255, 0.05) 25%, - rgba(255, 255, 255, 0.1) 50%, - rgba(255, 255, 255, 0.05) 75%); - - /* Enhanced shadows for dark mode */ - --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.3); - --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4); - --card-shadow-active: 0 8px 25px rgba(0,0,0,0.5); -} - -/* 🚨 ACCESSIBILITY - Respect user preferences */ -@media (prefers-reduced-motion: reduce) { - :root { - --timing-instant: 0.01s; - --timing-fast: 0.01s; - --timing-medium: 0.01s; - --timing-slow: 0.01s; - } - - * { - animation-duration: 0.01s !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01s !important; - } -} - -/* ✅ UNIVERSAL COLLAPSE COMPONENT - * ================================ - * Use these classes on any collapsible content for consistent behavior - */ - -/* Base collapsible container */ -.collapse-container { - position: relative; - overflow: hidden; -} - -/* Collapsible content body */ -.collapse-body { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing); -} - -/* Expanded state */ -.collapse-body.expanded { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); -} - -/* Duplicated component/data state rules moved to architecture/component-states.css */ -/* Keeping this section intentionally empty to avoid divergence. */ - -/* ✅ PERFORMANCE-OPTIMIZED HOVER STATES - * ====================================== - * Use specific property transitions instead of "transition: all" - */ - -.interactive-element { - transition: - transform var(--timing-fast) var(--easing-standard), - opacity var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} - -.interactive-element:hover { - transform: var(--transform-translate-up); - opacity: var(--opacity-visible); -} - -.interactive-element:active { - transform: var(--transform-scale-down); - transition-duration: var(--timing-instant); /* Instant feedback */ -} - -/* ✅ COMPONENT-SPECIFIC CUSTOMIZATION - * ==================================== - * Override tokens for specific component needs - */ - -/* OpenAPI components need larger heights for complex content */ -.openapi-response { - --collapse-height-expanded: 3000px; - --collapse-timing: var(--timing-medium); -} - -/* Notebook cells should be snappier */ -.notebook-cell { - --collapse-height-expanded: 2000px; - --collapse-timing: var(--timing-fast); -} - -/* Tutorial sections can be more dramatic */ -.tutorial-section { - --collapse-height-expanded: 2500px; - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-emphasized); -} - -/* Tabs need instant switching for good UX */ -.tab-content { - --collapse-height-expanded: 1500px; - --collapse-timing: var(--timing-fast); -} - -/* ✅ SIDEBAR NAVIGATION TREE - Optimized for hierarchical content */ -.nested-content { - --collapse-height-expanded: 2000px; - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); - - /* Performance optimization for tree navigation */ - will-change: max-height, opacity; - transform: translateZ(0); /* Force hardware acceleration */ -} - -/* ✅ UTILITY CLASSES - * =================== - * Common animation patterns as reusable classes - */ - -.fade-in { - opacity: var(--opacity-hidden); - animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; -} - -.fade-out { - opacity: var(--opacity-visible); - animation: fadeOut var(--timing-medium) var(--easing-standard) forwards; -} - -.slide-up { - transform: var(--transform-translate-down); - animation: slideUp var(--timing-medium) var(--easing-standard) forwards; -} - -.slide-in-up { - transform: var(--transform-slide-in-up); - opacity: var(--opacity-hidden); - animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; -} - -.slide-in-down { - transform: var(--transform-slide-in-down); - opacity: var(--opacity-hidden); - animation: slideInDown var(--timing-medium) var(--easing-standard) forwards; -} - -.scale-in { - transform: var(--transform-scale-down); - opacity: var(--opacity-hidden); - animation: scaleIn var(--timing-medium) var(--easing-emphasized) forwards; -} - -.bounce-in { - transform: var(--transform-bounce-in); - opacity: var(--opacity-hidden); - animation: bounceIn var(--timing-slow) var(--easing-emphasized) forwards; -} - -.lift-on-hover { - transition: transform var(--timing-fast) var(--easing-standard); -} - -.lift-on-hover:hover { - transform: var(--transform-lift-medium); -} - -/* ✅ KEYFRAME ANIMATIONS - * ======================= - * Standard animations used across components - */ - -@keyframes fadeIn { - to { - opacity: var(--opacity-visible); - } -} - -@keyframes fadeOut { - to { - opacity: var(--opacity-hidden); - } -} - -@keyframes slideUp { - to { - transform: var(--transform-translate-none); - } -} - -@keyframes slideInUp { - to { - transform: var(--transform-translate-none); - opacity: var(--opacity-visible); - } -} - -@keyframes slideInDown { - to { - transform: var(--transform-translate-none); - opacity: var(--opacity-visible); - } -} - -@keyframes scaleIn { - to { - transform: var(--transform-scale-normal); - opacity: var(--opacity-visible); - } -} - -@keyframes bounceIn { - 0% { - transform: var(--transform-bounce-in); - opacity: var(--opacity-hidden); - } - 50% { - transform: translateY(-5px) scale(1.02); - opacity: var(--opacity-faded); - } - 100% { - transform: var(--transform-translate-none); - opacity: var(--opacity-visible); - } -} - -/* ✅ STAGGER ANIMATIONS - * ====================== - * For animating groups of elements with delays - */ - -.stagger-children > * { - animation-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); -} - -.stagger-fade-in > * { - opacity: var(--opacity-hidden); - animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; -} - -.stagger-slide-up > * { - transform: var(--transform-slide-in-up); - opacity: var(--opacity-hidden); - animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; -} - -/* ✅ DEBUG MODE - * ============== - * Uncomment to visualize animation timing (development only) - */ - -/* -.collapse-body { - border: 2px dashed red !important; -} - -.collapse-body.expanded { - border-color: green !important; -} - -[data-collapse-state] { - outline: 2px solid blue !important; -} -*/ \ No newline at end of file diff --git a/assets/css/architecture/component-states.css b/assets/css/architecture/component-states.css deleted file mode 100644 index 8e5a644d..00000000 --- a/assets/css/architecture/component-states.css +++ /dev/null @@ -1,304 +0,0 @@ -/* 🎯 Universal Component State Management System - * ============================================== - * - * This file establishes consistent state management patterns across all - * interactive components, replacing inconsistent class-based approaches - * with data-attribute driven state management. - */ - -/* ✅ COLLAPSE STATE MANAGEMENT - * ============================= - * Universal collapse/expand states using data attributes - */ - -/* Base collapsed state - applies to any element with data-collapse-state */ -[data-collapse-state="collapsed"] { - max-height: var(--collapse-height-collapsed, 0); - opacity: var(--collapse-opacity-collapsed, 0); - overflow: hidden; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} - -/* Transitioning state - shows element is mid-animation */ -[data-collapse-state="transitioning"] { - overflow: hidden; /* Ensure no content spillage during animation */ - pointer-events: none; /* Prevent interaction during transition */ -} - -/* Expanded state - fully visible and interactive */ -[data-collapse-state="expanded"] { - max-height: var(--collapse-height-expanded, 2000px); - opacity: var(--collapse-opacity-expanded, 1); - overflow: visible; /* Allow content to be fully visible when expanded */ - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} - -/* ✅ COMPONENT LIFECYCLE STATES - * ============================== - * Standard states for component initialization and interaction - */ - -/* Loading state - component is being initialized */ -[data-component-state="loading"] { - opacity: var(--opacity-faded, 0.6); - pointer-events: none; - cursor: wait; - transition: opacity var(--timing-fast) var(--easing-standard); -} - -/* Ready state - component is initialized and interactive */ -[data-component-state="ready"] { - opacity: var(--opacity-visible, 1); - pointer-events: auto; - transition: opacity var(--timing-fast) var(--easing-standard); -} - -/* Disabled state - component is non-interactive */ -[data-component-state="disabled"] { - opacity: var(--opacity-faded, 0.6); - pointer-events: none; - cursor: not-allowed; - filter: grayscale(50%); - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* Error state - component has encountered an error */ -[data-component-state="error"] { - opacity: var(--opacity-visible, 1); - border-color: var(--color-danger, #ef4444); - background-color: rgba(239, 68, 68, 0.05); - transition: - border-color var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard); -} - -/* ✅ LEGACY CLASS SUPPORT (Backward Compatibility) - * ================================================= - * Bridge classes for existing components that use class-based states - */ - -/* Support for existing .expanded classes */ -.expanded { - max-height: var(--collapse-height-expanded, 2000px) !important; - opacity: var(--collapse-opacity-expanded, 1) !important; - overflow: visible !important; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} - -/* Support for existing .collapsed classes */ -.collapsed { - max-height: var(--collapse-height-collapsed, 0) !important; - opacity: var(--collapse-opacity-collapsed, 0) !important; - overflow: hidden !important; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} - -/* ✅ INTERACTIVE STATES - * ===================== - * Consistent hover, focus, and active states - */ - -/* Interactive elements with hover states */ -[data-interactive="true"]:hover, -.interactive:hover { - transform: var(--transform-translate-up, translateY(-2px)); - transition: transform var(--timing-fast) var(--easing-standard); -} - -/* Interactive elements with focus states */ -[data-interactive="true"]:focus-visible, -.interactive:focus-visible { - outline: 2px solid var(--color-brand, #3b82f6); - outline-offset: 2px; - border-radius: 0.25rem; -} - -/* Interactive elements with active states */ -[data-interactive="true"]:active, -.interactive:active { - transform: var(--transform-scale-down, scale(0.98)); - transition: transform var(--timing-instant) var(--easing-standard); -} - -/* ✅ COMPONENT-SPECIFIC STATE OVERRIDES - * ====================================== - * Customization for specific component types - */ - -/* OpenAPI Components */ -.openapi-response[data-collapse-state], -.openapi-endpoint[data-collapse-state], -.openapi-parameter[data-collapse-state] { - --collapse-height-expanded: 3000px; /* Complex API content needs more space */ - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); -} - -/* Notebook Components */ -.notebook-cell[data-collapse-state], -.notebook-output[data-collapse-state] { - --collapse-height-expanded: 2000px; /* Code and output content */ - --collapse-timing: var(--timing-fast); /* Snappier interaction */ - --collapse-easing: var(--easing-standard); -} - -/* Tutorial Components */ -.tutorial-section[data-collapse-state], -.section-content[data-collapse-state] { - --collapse-height-expanded: 2500px; /* Text-heavy content */ - --collapse-timing: var(--timing-slow); /* More dramatic for educational content */ - --collapse-easing: var(--easing-emphasized); -} - -/* Tab Components */ -.tab-content[data-collapse-state], -[data-tabcontent][data-collapse-state] { - --collapse-height-expanded: 1500px; /* Tab content usually more compact */ - --collapse-timing: var(--timing-fast); /* Quick switching expected */ - --collapse-easing: var(--easing-standard); -} - -/* ✅ UTILITY CLASSES - * =================== - * Quick state application classes - */ - -/* Force immediate state without animation */ -.state-immediate { - transition: none !important; -} - -/* Force slow animation timing */ -.state-slow { - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-smooth); -} - -/* Force fast animation timing */ -.state-fast { - --collapse-timing: var(--timing-fast); - --collapse-easing: var(--easing-standard); -} - -/* Emphasized dramatic animation */ -.state-dramatic { - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-emphasized); -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Enhanced states for screen readers and assistive technology - */ - -/* ✅ REMOVED: Enhanced focus indicators causing ancestry tree echoing - * The :focus-within pseudo-class was applying styling to ALL ancestor elements - * with data-collapse-state attributes, creating the visual "echo" effect. - * Focus should be handled by individual interactive elements instead. - */ - -/* Screen reader friendly state announcements */ -[data-collapse-state="collapsed"][aria-label]::before { - content: "Collapsed: "; - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} - -[data-collapse-state="expanded"][aria-label]::before { - content: "Expanded: "; - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} - -/* ✅ MOTION REDUCTION SUPPORT - * ============================ - * Respect user motion preferences - */ - -@media (prefers-reduced-motion: reduce) { - [data-collapse-state], - [data-component-state], - .expanded, - .collapsed, - [data-interactive] { - transition: none !important; - animation: none !important; - transform: none !important; - } -} - -/* ✅ HIGH CONTRAST MODE SUPPORT - * ============================== - * Enhanced visibility for high contrast users - */ - -@media (prefers-contrast: high) { - [data-component-state="error"] { - border-width: 2px; - border-style: solid; - } - - /* ✅ REMOVED: focus-within outline for high contrast mode - * This was also contributing to the ancestry tree echo effect - */ -} - -[data-interactive="true"]:focus-visible { - outline-width: 3px; - outline-style: solid; -} - -/* ✅ DEBUG MODE (Development Only) - * ================================= - * Uncomment to visualize state management in development - */ - -/* -[data-collapse-state] { - position: relative; -} - -[data-collapse-state]::before { - content: "State: " attr(data-collapse-state); - position: absolute; - top: -1.5rem; - left: 0; - background: #000; - color: #fff; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - border-radius: 0.25rem; - z-index: 1000; - pointer-events: none; -} - -[data-component-state]::after { - content: "Component: " attr(data-component-state); - position: absolute; - top: -3rem; - left: 0; - background: #3b82f6; - color: #fff; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - border-radius: 0.25rem; - z-index: 1000; - pointer-events: none; -} -*/ \ No newline at end of file diff --git a/assets/css/architecture/elevation-system.css b/assets/css/architecture/elevation-system.css deleted file mode 100644 index 3e3a1cc1..00000000 --- a/assets/css/architecture/elevation-system.css +++ /dev/null @@ -1,347 +0,0 @@ -/* 🎯 Universal Elevation System - * ============================== - * - * This file centralizes all box-shadow patterns to create a consistent - * elevation system across the theme. Based on Material Design principles - * but adapted for our brand aesthetic. - */ - -:root { - /* ✨ ELEVATION LEVELS (0-24dp equivalent) */ - --elevation-0: none; - /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.1); */ - --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06); - /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1); */ - --elevation-2: 0 1px 3px rgba(0, 0, 0, 0.08); - /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.1); */ - --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.08); - /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.1); */ - --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.1); - /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.1); */ - --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.12); - /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.1); */ - --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.12); - /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.1); */ - --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.14); - /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.1); */ - --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.14); - /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.15); */ - --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.16); - - /* ✨ INTERACTIVE ELEVATION (hover states) */ - /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.15); */ - --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.12); - /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.15); */ - --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.14); - /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.15); */ - --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.14); - /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.15); */ - --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.16); - /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.15); */ - --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.18); - /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.2); */ - --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.2); - - /* ✨ BRAND-COLORED ELEVATIONS */ - --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); - --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.2); - --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); - - /* ✨ SPECIALIZED ELEVATIONS */ - --elevation-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1); - --elevation-inset-deep: inset 0 2px 6px rgba(0, 0, 0, 0.15); - --elevation-outline: 0 0 0 1px rgba(0, 0, 0, 0.1); - --elevation-outline-brand: 0 0 0 1px var(--color-brand); - - /* ✨ ERROR/WARNING/SUCCESS ELEVATIONS */ - --elevation-error: 0 4px 12px rgba(239, 68, 68, 0.2); - --elevation-warning: 0 4px 12px rgba(245, 158, 11, 0.2); - --elevation-success: 0 4px 12px rgba(16, 185, 129, 0.2); - --elevation-info: 0 4px 12px rgba(59, 130, 246, 0.2); - - /* ✨ OVERLAYS AND MODALS */ - --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.3); - --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.4); - --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15); - --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.2); -} - -/* 🌙 DARK MODE ELEVATION ADJUSTMENTS */ -.dark { - /* Stronger shadows for dark mode */ - /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); */ - --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.25); - /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); */ - --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.28); - /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.4); */ - --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.34); - /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); */ - --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.36); - /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); */ - --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.4); - /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.5); */ - --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.48); - /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.5); */ - --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.5); - /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.6); */ - --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.56); - /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.7); */ - --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.6); - - /* Enhanced hover states for dark mode */ - /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.5); */ - --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.44); - /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.5); */ - --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.48); - /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.6); */ - --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.5); - /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.6); */ - --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.54); - /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.7); */ - --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.58); - /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.8); */ - --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.62); - - /* Enhanced brand elevations for dark mode */ - --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.2); - --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.25); - --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); - --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); - - /* Enhanced overlay elevations for dark mode */ - --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.8); - --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.9); - --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6); - --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.7); -} - -/* ✅ ELEVATION UTILITY CLASSES - * ============================= - * Apply these classes for consistent elevation - */ - -.elevation-0 { box-shadow: var(--elevation-0); } -.elevation-1 { box-shadow: var(--elevation-1); } -.elevation-2 { box-shadow: var(--elevation-2); } -.elevation-3 { box-shadow: var(--elevation-3); } -.elevation-4 { box-shadow: var(--elevation-4); } -.elevation-6 { box-shadow: var(--elevation-6); } -.elevation-8 { box-shadow: var(--elevation-8); } -.elevation-12 { box-shadow: var(--elevation-12); } -.elevation-16 { box-shadow: var(--elevation-16); } -.elevation-24 { box-shadow: var(--elevation-24); } - -/* Hover elevation classes */ -.elevation-hover-1:hover { box-shadow: var(--elevation-hover-1); } -.elevation-hover-2:hover { box-shadow: var(--elevation-hover-2); } -.elevation-hover-3:hover { box-shadow: var(--elevation-hover-3); } -.elevation-hover-4:hover { box-shadow: var(--elevation-hover-4); } -.elevation-hover-6:hover { box-shadow: var(--elevation-hover-6); } -.elevation-hover-8:hover { box-shadow: var(--elevation-hover-8); } - -/* Brand elevation classes */ -.elevation-brand-subtle { box-shadow: var(--elevation-brand-subtle); } -.elevation-brand-medium { box-shadow: var(--elevation-brand-medium); } -.elevation-brand-strong { box-shadow: var(--elevation-brand-strong); } -.elevation-brand-glow { box-shadow: var(--elevation-brand-glow); } - -/* Focus elevation */ -.elevation-focus:focus-visible { - box-shadow: var(--elevation-brand-focus); - outline: none; -} - -/* ✅ COMPONENT-SPECIFIC ELEVATION MAPPINGS - * ========================================= - * Semantic elevation assignments for common components - */ - -/* Surface elements */ -.surface { - box-shadow: var(--elevation-0); -} - -.surface-raised { - box-shadow: var(--elevation-1); -} - -/* Cards */ -.card-flat { - box-shadow: var(--elevation-1); -} - -.card-raised { - box-shadow: var(--elevation-2); -} - -.card-elevated { - box-shadow: var(--elevation-4); -} - -.card-floating { - box-shadow: var(--elevation-8); -} - -/* Interactive cards with hover */ -.card-interactive { - box-shadow: var(--elevation-2); - transition: box-shadow var(--timing-medium) var(--easing-standard); -} - -.card-interactive:hover { - box-shadow: var(--elevation-hover-4); -} - -/* Buttons */ -.btn-flat { - box-shadow: var(--elevation-0); -} - -.btn-raised { - box-shadow: var(--elevation-1); -} - -.btn-floating { - box-shadow: var(--elevation-6); -} - -.btn-raised:hover, -.btn-floating:hover { - box-shadow: var(--elevation-hover-2); -} - -/* Navigation */ -.nav-bar { - box-shadow: var(--elevation-2); -} - -.nav-drawer { - box-shadow: var(--elevation-16); -} - -.nav-tabs { - box-shadow: var(--elevation-1); -} - -/* Overlays */ -.dropdown-menu { - box-shadow: var(--elevation-dropdown); -} - -.modal-content { - box-shadow: var(--elevation-modal); -} - -.tooltip { - box-shadow: var(--elevation-tooltip); -} - -.popover { - box-shadow: var(--elevation-8); -} - -/* Content sections */ -.content-section { - box-shadow: var(--elevation-1); -} - -.featured-content { - box-shadow: var(--elevation-4); -} - -.hero-section { - box-shadow: var(--elevation-8); -} - -/* ✅ STATE-BASED ELEVATIONS - * ========================== - * Elevation changes based on component state - */ - -/* Loading states get reduced elevation */ -[data-component-state="loading"] { - box-shadow: var(--elevation-1) !important; - opacity: var(--opacity-faded); -} - -/* Error states get error elevation */ -[data-component-state="error"] { - box-shadow: var(--elevation-error) !important; -} - -/* Focus states for accessibility */ -[data-component-state="focused"] { - box-shadow: var(--elevation-brand-focus) !important; -} - -/* ✅ COMBINED ELEVATIONS - * ======================= - * Multiple shadows for complex effects - */ - -.elevation-layered { - box-shadow: - var(--elevation-2), - var(--elevation-brand-glow); -} - -.elevation-outlined { - box-shadow: - var(--elevation-4), - var(--elevation-outline); -} - -.elevation-brand-outlined { - box-shadow: - var(--elevation-4), - var(--elevation-outline-brand); -} - -/* ✅ PERFORMANCE OPTIMIZATIONS - * ============================= - * Enable hardware acceleration for elements with elevation changes - */ - -.elevation-animated { - will-change: box-shadow; - transform: translateZ(0); /* Force hardware acceleration */ -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * High contrast and reduced motion support - */ - -@media (prefers-contrast: high) { - /* Enhance shadows for better visibility */ - :root { - --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); - --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); - --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); - --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); - } -} - -@media (prefers-reduced-motion: reduce) { - /* Remove shadow transitions for reduced motion */ - .card-interactive, - .btn-raised, - .btn-floating, - .elevation-animated { - transition: none !important; - } -} - -/* ✅ PRINT STYLES - * ================ - * Remove shadows for print media - */ - -@media print { - * { - box-shadow: none !important; - } -} \ No newline at end of file diff --git a/assets/css/architecture/index.css b/assets/css/architecture/index.css deleted file mode 100644 index b72eb49b..00000000 --- a/assets/css/architecture/index.css +++ /dev/null @@ -1,162 +0,0 @@ -/* 🎯 Architecture System - Complete Import - * ========================================= - * - * This file imports all architectural foundation files in the correct order - * to ensure proper CSS cascade and prevent conflicts. - * - * Import this single file to get the complete architectural system. - */ - -/* ✅ STEP 1: ANIMATION FOUNDATION - * ================================ - * Must be first - provides timing tokens, easing curves, and base animation patterns - * that other systems depend on. - */ -@import './animation-system.css'; - -/* ✅ STEP 2: COMPONENT STATE MANAGEMENT - * ====================================== - * Depends on animation tokens. Provides state management patterns that - * interaction and loading systems build upon. - */ -@import './component-states.css'; - -/* ✅ STEP 3: LAYOUT FOUNDATIONS - * ============================== - * Independent system that provides spacing, positioning, and layout tokens. - * Can be loaded in parallel with other systems. - */ -@import './layout-foundations.css'; - -/* ✅ STEP 3.5: TYPOGRAPHY SYSTEM - * =============================== - * Global type rules and article typography. - */ -@import './typography-system.css'; - -/* ✅ STEP 4: ELEVATION SYSTEM - * ============================ - * Independent shadow system. Provides elevation tokens that interaction - * patterns will reference. - */ -@import './elevation-system.css'; - -/* ✅ STEP 5: INTERACTION PATTERNS - * ================================ - * Depends on animation tokens and elevation tokens. Provides unified - * hover, focus, and active state patterns. - */ -@import './interaction-patterns.css'; - -/* ✅ STEP 6: LOADING STATES - * ========================== - * Depends on animation tokens and layout tokens. Provides loading patterns - * and skeleton components. - */ -@import './loading-states.css'; - -/* 🎯 ARCHITECTURE SYSTEM SUMMARY - * =============================== - * - * This architecture system provides: - * - * 1. **Animation System** (animation-system.css) - * - Consistent timing tokens (--timing-*) - * - Easing curves (--easing-*) - * - Transform patterns (--transform-*) - * - Collapse/expand behaviors - * - Utility animation classes - * - * 2. **Component States** (component-states.css) - * - Data-attribute driven state management - * - Lifecycle states (loading, ready, disabled, error) - * - Collapse states (collapsed, transitioning, expanded) - * - Interactive states with accessibility support - * - * 3. **Layout Foundations** (layout-foundations.css) - * - Comprehensive spacing scale (--space-*) - * - Semantic spacing tokens (--space-xs, --space-md, etc.) - * - Border radius system (--radius-*) - * - Z-index scale (--z-*) - * - Max-width tokens (--max-width-*) - * - Layout pattern classes (.container, .stack, .cluster, etc.) - * - * 4. **Elevation System** (elevation-system.css) - * - Consistent shadow elevation levels (--elevation-*) - * - Interactive hover elevations (--elevation-hover-*) - * - Brand-colored elevations (--elevation-brand-*) - * - State-specific elevations (error, focus, etc.) - * - Semantic elevation classes (.card-elevated, .btn-floating, etc.) - * - * 5. **Interaction Patterns** (interaction-patterns.css) - * - Unified hover/focus/active behaviors - * - Interactive element classes (.interact-subtle, .interact-dramatic, etc.) - * - Consistent focus management - * - Disabled and loading state patterns - * - Touch device optimizations - * - * 6. **Loading States** (loading-states.css) - * - Loading state classes (.loading, .loading-blur, etc.) - * - Spinner components (.spinner, .spinner-dots, etc.) - * - Skeleton loading patterns (.skeleton, .skeleton-text, etc.) - * - Progressive loading behaviors - * - Async operation state management - * - * USAGE EXAMPLES: - * =============== - * - * // Use architectural tokens in components: - * .my-component { - * padding: var(--space-md); - * border-radius: var(--radius-card); - * box-shadow: var(--elevation-2); - * transition: var(--transition-interactive); - * } - * - * .my-component:hover { - * transform: var(--transform-lift-medium); - * box-shadow: var(--elevation-hover-4); - * } - * - * // Apply architectural classes: - *
- *
...
- *
- * - * // Use state management: - *
- *
Content
- *
- * - * BENEFITS: - * ========= - * - * ✅ **Consistency**: All components use the same timing, spacing, and interaction patterns - * ✅ **Maintainability**: Changes to timing/spacing/shadows happen in one place - * ✅ **Performance**: Optimized transitions and hardware acceleration - * ✅ **Accessibility**: Built-in support for reduced motion, high contrast, screen readers - * ✅ **Developer Experience**: Semantic tokens and utility classes speed up development - * ✅ **Brand Coherence**: Consistent elevation and interaction patterns across all components - * ✅ **Scalability**: Easy to extend with new tokens and patterns - * - * MIGRATION GUIDE: - * ================ - * - * To migrate existing components to use this architecture: - * - * 1. Replace hardcoded timing values with --timing-* tokens - * 2. Replace hardcoded shadows with --elevation-* tokens - * 3. Replace hardcoded transforms with --transform-* tokens - * 4. Use .interact-* classes instead of custom hover states - * 5. Use data-attributes for state management instead of classes - * 6. Replace loading patterns with .skeleton and .loading classes - * - * PERFORMANCE NOTES: - * ================== - * - * - All animations use transform and opacity for 60fps performance - * - Hardware acceleration is enabled on interactive elements - * - Reduced motion preferences are respected throughout - * - Z-index values are managed to prevent stacking conflicts - * - Specific property transitions prevent layout thrashing - */ \ No newline at end of file diff --git a/assets/css/architecture/interaction-patterns.css b/assets/css/architecture/interaction-patterns.css deleted file mode 100644 index 7eee6690..00000000 --- a/assets/css/architecture/interaction-patterns.css +++ /dev/null @@ -1,314 +0,0 @@ -/* 🎯 Universal Interaction Patterns System - * ======================================== - * - * This file centralizes all hover, focus, active, and interactive patterns - * to eliminate the hundreds of scattered transform/transition definitions - * across component files. - */ - -:root { - /* ✨ INTERACTION TRANSFORM TOKENS */ - --hover-lift-subtle: translateY(-1px); /* Buttons, small elements */ - --hover-lift-medium: translateY(-2px); /* Cards, medium elements */ - --hover-lift-dramatic: translateY(-4px); /* Hero cards, dramatic elements */ - --hover-scale-up: scale(1.02); /* Slight growth on hover */ - --hover-scale-down: scale(0.98); /* Slight shrink on active */ - --hover-combined-lift: translateY(-2px) scale(1.02); /* Combined lift + scale */ - - /* ✨ SHADOW ELEVATION TOKENS */ - --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.1); - --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.1); - --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.15); - --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.12); - --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); - --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); - - /* ✨ TRANSITION SETS - Reusable combinations */ - --transition-interactive: - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - - --transition-elevation: - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - - --transition-button: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} - -/* ✅ INTERACTION BEHAVIOR CLASSES - * ================================ - * Apply these classes for consistent interactive behavior - */ - -/* Subtle interactive elements (buttons, small cards) */ -.interact-subtle { - transition: var(--transition-interactive); - cursor: pointer; -} - -.interact-subtle:hover { - transform: var(--hover-lift-subtle); - box-shadow: var(--shadow-hover-subtle); -} - -.interact-subtle:active { - transform: var(--hover-scale-down); - transition-duration: var(--timing-instant); -} - -/* Medium interactive elements (content cards, tiles) */ -.interact-medium { - transition: var(--transition-elevation); - cursor: pointer; -} - -.interact-medium:hover { - transform: var(--hover-lift-medium); - box-shadow: var(--shadow-hover-medium); -} - -.interact-medium:active { - transform: var(--hover-scale-down); - transition-duration: var(--timing-instant); -} - -/* Dramatic interactive elements (hero cards, featured content) */ -.interact-dramatic { - transition: var(--transition-elevation); - cursor: pointer; -} - -.interact-dramatic:hover { - transform: var(--hover-lift-dramatic); - box-shadow: var(--shadow-hover-dramatic); - border-color: var(--color-brand); -} - -.interact-dramatic:active { - transform: var(--hover-combined-lift); - transition-duration: var(--timing-instant); -} - -/* ✅ BUTTON INTERACTION PATTERNS - * =============================== - * Specialized patterns for button-like elements - */ - -.btn-interact { - transition: var(--transition-button); - position: relative; - overflow: hidden; -} - -.btn-interact:hover { - transform: var(--hover-lift-subtle); - box-shadow: var(--shadow-hover-medium); -} - -.btn-interact:active { - transform: var(--hover-scale-down); - transition-duration: var(--timing-instant); -} - -.btn-interact:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: var(--shadow-focus); -} - -/* ✅ BRAND-FOCUSED INTERACTIONS - * ============================== - * Elements that should emphasize brand colors - */ - -.interact-brand { - transition: var(--transition-elevation); - cursor: pointer; -} - -.interact-brand:hover { - transform: var(--hover-lift-medium); - box-shadow: - var(--shadow-hover-medium), - var(--shadow-brand-glow); - border-color: var(--color-brand); -} - -.interact-brand:hover h1, -.interact-brand:hover h2, -.interact-brand:hover h3, -.interact-brand:hover h4, -.interact-brand:hover h5, -.interact-brand:hover h6 { - color: var(--color-brand); - transition: color var(--timing-fast) var(--easing-standard); -} - -/* ✅ FOCUS MANAGEMENT - * ==================== - * Consistent focus indicators across all interactive elements - */ - -.focusable { - border-radius: 0.25rem; /* Ensure focus outline has proper shape */ -} - -.focusable:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: var(--shadow-focus); - transition: - outline-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} - -/* ✅ DISABLED STATES - * =================== - * Consistent disabled behavior - */ - -.interact-disabled, -[data-interactive="false"], -.interact-subtle:disabled, -.interact-medium:disabled, -.interact-dramatic:disabled { - opacity: var(--opacity-faded); - cursor: not-allowed; - pointer-events: none; - filter: grayscale(50%); - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* ✅ LOADING STATES - * ================== - * Interactive elements in loading state - */ - -.interact-loading { - opacity: var(--loading-opacity); - cursor: wait; - pointer-events: none; - filter: var(--loading-blur); - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* ✅ NESTED INTERACTION INHERITANCE - * ================================== - * Child elements inherit parent interaction states - */ - -.interact-subtle:hover .nested-text, -.interact-medium:hover .nested-text, -.interact-dramatic:hover .nested-text { - color: var(--color-brand); - transition: color var(--timing-fast) var(--easing-standard); -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Enhanced interaction patterns for accessibility - */ - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .focusable:focus-visible { - outline-width: 3px; - outline-style: solid; - } - - .interact-subtle:hover, - .interact-medium:hover, - .interact-dramatic:hover { - border-width: 2px; - border-style: solid; - border-color: var(--color-brand); - } -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .interact-subtle, - .interact-medium, - .interact-dramatic, - .btn-interact, - .interact-brand { - transition: none !important; - transform: none !important; - } - - .interact-subtle:hover, - .interact-medium:hover, - .interact-dramatic:hover, - .btn-interact:hover, - .interact-brand:hover { - transform: none !important; - } -} - -/* ✅ TOUCH DEVICE OPTIMIZATIONS - * ============================== - * Better interactions for touch devices - */ - -@media (hover: none) and (pointer: coarse) { - /* Reduce hover effects on touch devices */ - .interact-subtle:hover, - .interact-medium:hover, - .interact-dramatic:hover { - transform: none; - box-shadow: var(--shadow-rest); - } - - /* Enhance active states for touch feedback */ - .interact-subtle:active, - .interact-medium:active, - .interact-dramatic:active { - transform: var(--hover-scale-down); - opacity: 0.8; - } -} - -/* ✅ DARK MODE ENHANCEMENTS - * ========================== - * Enhanced shadows and interactions for dark mode - */ - -.dark { - --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.3); - --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.3); - --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.4); - --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.5); - --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); - --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); -} - -/* ✅ COMPONENT-SPECIFIC OVERRIDES - * ================================ - * Allow components to customize interaction patterns - */ - -/* Cards and tiles can use larger transforms */ -.card, -.tile { - /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ -} - -/* Buttons get subtle interactions by default */ -.btn { - /* Use .btn-interact class instead of custom transforms */ -} - -/* Navigation items get subtle interactions */ -.nav-item, -.sidebar__item { - /* Use .interact-subtle class instead of custom transforms */ -} \ No newline at end of file diff --git a/assets/css/architecture/layout-foundations.css b/assets/css/architecture/layout-foundations.css deleted file mode 100644 index 87ddfe16..00000000 --- a/assets/css/architecture/layout-foundations.css +++ /dev/null @@ -1,601 +0,0 @@ -/* 🎯 Universal Layout Foundations System - * ======================================= - * - * This file centralizes common spacing, positioning, and layout patterns - * to ensure consistent spatial relationships across all components. - */ - -:root { - /* ✨ SPACING SCALE (based on 0.25rem = 4px base) */ - --space-0: 0; - --space-px: 1px; - --space-0-5: 0.125rem; /* 2px */ - --space-1: 0.25rem; /* 4px */ - --space-1-5: 0.375rem; /* 6px */ - --space-2: 0.5rem; /* 8px */ - --space-2-5: 0.625rem; /* 10px */ - --space-3: 0.75rem; /* 12px */ - --space-3-5: 0.875rem; /* 14px */ - --space-4: 1rem; /* 16px */ - --space-5: 1.25rem; /* 20px */ - --space-6: 1.5rem; /* 24px */ - --space-7: 1.75rem; /* 28px */ - --space-8: 2rem; /* 32px */ - --space-9: 2.25rem; /* 36px */ - --space-10: 2.5rem; /* 40px */ - --space-11: 2.75rem; /* 44px */ - --space-12: 3rem; /* 48px */ - --space-14: 3.5rem; /* 56px */ - --space-16: 4rem; /* 64px */ - --space-20: 5rem; /* 80px */ - --space-24: 6rem; /* 96px */ - --space-28: 7rem; /* 112px */ - --space-32: 8rem; /* 128px */ - --space-36: 9rem; /* 144px */ - --space-40: 10rem; /* 160px */ - --space-44: 11rem; /* 176px */ - --space-48: 12rem; /* 192px */ - --space-52: 13rem; /* 208px */ - --space-56: 14rem; /* 224px */ - --space-60: 15rem; /* 240px */ - --space-64: 16rem; /* 256px */ - --space-72: 18rem; /* 288px */ - --space-80: 20rem; /* 320px */ - --space-96: 24rem; /* 384px */ - - /* ✨ SEMANTIC SPACING TOKENS */ - --space-xs: var(--space-1); /* 4px - Minimal spacing */ - --space-sm: var(--space-2); /* 8px - Small spacing */ - --space-md: var(--space-4); /* 16px - Medium spacing */ - --space-lg: var(--space-6); /* 24px - Large spacing */ - --space-xl: var(--space-8); /* 32px - Extra large spacing */ - --space-2xl: var(--space-12); /* 48px - Double extra large */ - --space-3xl: var(--space-16); /* 64px - Triple extra large */ - - /* ✨ CONTENT SPACING TOKENS */ - --content-gap-tight: var(--space-2); /* 8px - Tight content */ - --content-gap-normal: var(--space-4); /* 16px - Normal content */ - --content-gap-relaxed: var(--space-6); /* 24px - Relaxed content */ - --content-gap-loose: var(--space-8); /* 32px - Loose content */ - - /* ✨ COMPONENT SPACING TOKENS */ - --component-padding-sm: var(--space-3); /* 12px - Small components */ - --component-padding-md: var(--space-4); /* 16px - Medium components */ - --component-padding-lg: var(--space-6); /* 24px - Large components */ - --component-padding-xl: var(--space-8); /* 32px - Extra large components */ - - /* ✨ BORDER RADIUS SCALE */ - --radius-none: 0; - --radius-sm: 0.125rem; /* 2px */ - --radius-base: 0.25rem; /* 4px */ - --radius-md: 0.375rem; /* 6px */ - --radius-lg: 0.5rem; /* 8px */ - --radius-xl: 0.75rem; /* 12px */ - --radius-2xl: 1rem; /* 16px */ - --radius-3xl: 1.5rem; /* 24px */ - --radius-full: 9999px; /* Full radius */ - - /* ✨ SEMANTIC BORDER RADIUS TOKENS */ - --radius-button: var(--radius-md); /* Button border radius */ - --radius-card: var(--radius-lg); /* Card border radius */ - --radius-modal: var(--radius-xl); /* Modal border radius */ - --radius-input: var(--radius-base); /* Input border radius */ - - /* ✨ Z-INDEX SCALE */ - --z-behind: -1; - --z-base: 0; - --z-low: 10; - --z-medium: 100; - --z-high: 1000; - --z-overlay: 10000; - --z-modal: 100000; - --z-popover: 1000000; - --z-tooltip: 10000000; - --z-top: 999999999; - - /* ✨ SEMANTIC Z-INDEX TOKENS */ - --z-dropdown: var(--z-overlay); - --z-sticky-header: var(--z-high); - --z-sidebar: var(--z-medium); - --z-loading-overlay: var(--z-modal); - --z-toast: var(--z-overlay); - - /* ✨ MAX WIDTH SCALE */ - --max-width-xs: 20rem; /* 320px */ - --max-width-sm: 24rem; /* 384px */ - --max-width-md: 28rem; /* 448px */ - --max-width-lg: 32rem; /* 512px */ - --max-width-xl: 36rem; /* 576px */ - --max-width-2xl: 42rem; /* 672px */ - --max-width-3xl: 48rem; /* 768px */ - --max-width-4xl: 56rem; /* 896px */ - --max-width-5xl: 64rem; /* 1024px */ - --max-width-6xl: 72rem; /* 1152px */ - --max-width-7xl: 80rem; /* 1280px */ - --max-width-full: 100%; - --max-width-prose: 65ch; /* Optimal reading width */ - --max-width-screen-sm: 640px; - --max-width-screen-md: 768px; - --max-width-screen-lg: 1024px; - --max-width-screen-xl: 1280px; - --max-width-screen-2xl: 1536px; - - /* ✨ SEMANTIC MAX WIDTH TOKENS */ - --max-width-content: var(--max-width-4xl); /* Main content area */ - --max-width-sidebar: var(--max-width-xs); /* Sidebar width */ - --max-width-modal: var(--max-width-2xl); /* Modal dialogs */ - --max-width-form: var(--max-width-lg); /* Form containers */ - - /* ✨ LAYOUT SHELL TOKENS (moved from input.css) */ - --left-rail-width: 18rem; /* xl left rail */ - --right-rail-width: 22rem; /* xl right rail */ - --layout-gap-xl: var(--space-8);/* xl gap */ - --left-rail-width-2xl: 20rem; /* 2xl left rail */ - --right-rail-width-2xl: 28rem; /* 2xl right rail */ - --layout-gap-2xl: var(--space-16); /* 2xl gap */ - - /* ✨ GRID/TILE TOKENS (moved from input.css) */ - --grid-card-min: 280px; /* minimum card width for auto-fit grids */ - --tile-glass-blur: 12px; /* tile glass blur amount */ - --tile-glass-saturate: 140%; /* tile glass saturation */ - - /* ✨ GLASSMORPHISM TOKENS (unified) */ - --glass-blur: 8px; - --glass-saturate: 1.15; - --glass-bg: rgba(255, 255, 255, 0.45); - --glass-border-color: rgba(255, 255, 255, 0.22); - --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); -} - -/* Dark mode glass adjustments */ -.dark { - --glass-bg: rgba(17, 17, 17, 0.5); - --glass-border-color: rgba(255, 255, 255, 0.10); - --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); -} - -/* Right-rail presence attribute hook */ -main.layout-shell[data-has-right-rail="false"] { - /* Slightly increase center column breathing room when right rail is hidden */ - --layout-gap-xl: var(--space-8); - --layout-gap-2xl: var(--space-12); - --max-width-content: var(--max-width-5xl); -} - -/* Density presets - Apply by adding a class on or
, or via future param-driven mapping */ -.layout-density--compact { - --grid-card-min: 320px; /* wider cards to reduce row count */ - --layout-gap-xl: var(--space-6); /* slightly tighter gap */ - --layout-gap-2xl: var(--space-10); -} - -.layout-density--comfortable { - --grid-card-min: 280px; - --layout-gap-xl: var(--space-8); - --layout-gap-2xl: var(--space-16); -} - -/* ✅ SPACING UTILITY CLASSES - * =========================== - * Consistent spacing patterns for common use cases - */ - -/* Margin utilities */ -.m-auto { margin: auto; } -.mx-auto { margin-left: auto; margin-right: auto; } -.my-auto { margin-top: auto; margin-bottom: auto; } - -/* Padding utilities */ -.p-0 { padding: var(--space-0); } -.p-1 { padding: var(--space-1); } -.p-2 { padding: var(--space-2); } -.p-3 { padding: var(--space-3); } -.p-4 { padding: var(--space-4); } -.p-6 { padding: var(--space-6); } -.p-8 { padding: var(--space-8); } - -/* Semantic spacing classes */ -.gap-tight { gap: var(--content-gap-tight); } -.gap-normal { gap: var(--content-gap-normal); } -.gap-relaxed { gap: var(--content-gap-relaxed); } -.gap-loose { gap: var(--content-gap-loose); } - -/* Component padding classes */ -.padding-sm { padding: var(--component-padding-sm); } -.padding-md { padding: var(--component-padding-md); } -.padding-lg { padding: var(--component-padding-lg); } -.padding-xl { padding: var(--component-padding-xl); } - -/* ✅ LAYOUT PATTERN CLASSES - * ========================== - * Common layout patterns as reusable classes - */ - -/* Container patterns */ -.container { - width: 100%; - max-width: var(--max-width-content); - margin-left: auto; - margin-right: auto; - padding-left: var(--space-4); - padding-right: var(--space-4); -} - -.container-narrow { - max-width: var(--max-width-2xl); -} - -.container-wide { - max-width: var(--max-width-6xl); -} - -.container-full { - max-width: none; - padding-left: 0; - padding-right: 0; -} - -/* Content sections */ -.section { - padding-top: var(--space-12); - padding-bottom: var(--space-12); -} - -.section-sm { - padding-top: var(--space-8); - padding-bottom: var(--space-8); -} - -.section-lg { - padding-top: var(--space-16); - padding-bottom: var(--space-16); -} - -/* Stack layouts (vertical spacing) */ -.stack > * + * { - margin-top: var(--content-gap-normal); -} - -.stack-tight > * + * { - margin-top: var(--content-gap-tight); -} - -.stack-relaxed > * + * { - margin-top: var(--content-gap-relaxed); -} - -.stack-loose > * + * { - margin-top: var(--content-gap-loose); -} - -/* Cluster layouts (horizontal spacing) */ -.cluster { - display: flex; - flex-wrap: wrap; - gap: var(--content-gap-normal); - align-items: center; -} - -.cluster-tight { - gap: var(--content-gap-tight); -} - -.cluster-relaxed { - gap: var(--content-gap-relaxed); -} - -/* Grid patterns */ -.grid-auto { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: var(--content-gap-normal); -} - -.grid-auto-sm { - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); -} - -.grid-auto-lg { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); -} - -/* Flexbox patterns */ -.flex-between { - display: flex; - justify-content: space-between; - align-items: center; -} - -.flex-center { - display: flex; - justify-content: center; - align-items: center; -} - -.flex-start { - display: flex; - justify-content: flex-start; - align-items: center; -} - -.flex-end { - display: flex; - justify-content: flex-end; - align-items: center; -} - -/* ✅ POSITIONING UTILITIES - * ========================= - * Common positioning patterns - */ - -.relative { position: relative; } -.absolute { position: absolute; } -.fixed { position: fixed; } -.sticky { position: sticky; } - -/* Absolute positioning helpers */ -.absolute-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.absolute-top-left { - position: absolute; - top: var(--space-2); - left: var(--space-2); -} - -.absolute-top-right { - position: absolute; - top: var(--space-2); - right: var(--space-2); -} - -.absolute-bottom-left { - position: absolute; - bottom: var(--space-2); - left: var(--space-2); -} - -.absolute-bottom-right { - position: absolute; - bottom: var(--space-2); - right: var(--space-2); -} - -/* Z-index utilities */ -.z-behind { z-index: var(--z-behind); } -.z-base { z-index: var(--z-base); } -.z-low { z-index: var(--z-low); } -.z-medium { z-index: var(--z-medium); } -.z-high { z-index: var(--z-high); } -.z-overlay { z-index: var(--z-overlay); } -.z-modal { z-index: var(--z-modal); } -.z-top { z-index: var(--z-top); } - -/* ✅ BORDER RADIUS UTILITIES - * =========================== - * Consistent border radius patterns - */ - -.rounded-none { border-radius: var(--radius-none); } -.rounded-sm { border-radius: var(--radius-sm); } -.rounded { border-radius: var(--radius-base); } -.rounded-md { border-radius: var(--radius-md); } -.rounded-lg { border-radius: var(--radius-lg); } -.rounded-xl { border-radius: var(--radius-xl); } -.rounded-2xl { border-radius: var(--radius-2xl); } -.rounded-3xl { border-radius: var(--radius-3xl); } -.rounded-full { border-radius: var(--radius-full); } - -/* Semantic border radius */ -.rounded-button { border-radius: var(--radius-button); } -.rounded-card { border-radius: var(--radius-card); } -.rounded-modal { border-radius: var(--radius-modal); } -.rounded-input { border-radius: var(--radius-input); } - -/* ✅ MAX WIDTH UTILITIES - * ======================= - * Consistent content width constraints - */ - -.max-w-xs { max-width: var(--max-width-xs); } -.max-w-sm { max-width: var(--max-width-sm); } -.max-w-md { max-width: var(--max-width-md); } -.max-w-lg { max-width: var(--max-width-lg); } -.max-w-xl { max-width: var(--max-width-xl); } -.max-w-2xl { max-width: var(--max-width-2xl); } -.max-w-3xl { max-width: var(--max-width-3xl); } -.max-w-4xl { max-width: var(--max-width-4xl); } -.max-w-5xl { max-width: var(--max-width-5xl); } -.max-w-6xl { max-width: var(--max-width-6xl); } -.max-w-7xl { max-width: var(--max-width-7xl); } -.max-w-full { max-width: var(--max-width-full); } -.max-w-prose { max-width: var(--max-width-prose); } - -/* Semantic max width */ -.max-w-content { max-width: var(--max-width-content); } -.max-w-sidebar { max-width: var(--max-width-sidebar); } -.max-w-modal { max-width: var(--max-width-modal); } -.max-w-form { max-width: var(--max-width-form); } - -/* ✅ RESPONSIVE PATTERNS - * ======================= - * Mobile-first responsive design patterns - */ - -@media (min-width: 640px) { - .sm\:container { - max-width: var(--max-width-screen-sm); - } - - .sm\:section { - padding-top: var(--space-16); - padding-bottom: var(--space-16); - } - - .sm\:padding-lg { - padding: var(--component-padding-lg); - } -} - -@media (min-width: 768px) { - .md\:container { - max-width: var(--max-width-screen-md); - } - - .md\:section { - padding-top: var(--space-20); - padding-bottom: var(--space-20); - } - - .md\:padding-xl { - padding: var(--component-padding-xl); - } - - .md\:grid-2 { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 1024px) { - .lg\:container { - max-width: var(--max-width-screen-lg); - } - - .lg\:section { - padding-top: var(--space-24); - padding-bottom: var(--space-24); - } - - .lg\:grid-3 { - grid-template-columns: repeat(3, 1fr); - } -} - -@media (min-width: 1280px) { - .xl\:container { - max-width: var(--max-width-screen-xl); - } - - .xl\:grid-4 { - grid-template-columns: repeat(4, 1fr); - } -} - -@media (min-width: 1536px) { - .\32xl\:container { - max-width: var(--max-width-screen-2xl); - } -} - -/* ✅ CONTENT FLOW PATTERNS - * ========================= - * Typography and content spacing patterns - */ - -/* Prose content */ -.prose { - max-width: var(--max-width-prose); - line-height: 1.7; -} - -.prose > * + * { - margin-top: var(--space-4); -} - -.prose h1, -.prose h2, -.prose h3, -.prose h4, -.prose h5, -.prose h6 { - margin-top: var(--space-8); - margin-bottom: var(--space-4); -} - -.prose h1:first-child, -.prose h2:first-child, -.prose h3:first-child, -.prose h4:first-child, -.prose h5:first-child, -.prose h6:first-child { - margin-top: 0; -} - -.prose p + h1, -.prose p + h2, -.prose p + h3 { - margin-top: var(--space-12); -} - -.prose p + h4, -.prose p + h5, -.prose p + h6 { - margin-top: var(--space-8); -} - -/* List spacing */ -.prose ul, -.prose ol { - padding-left: var(--space-6); -} - -.prose li + li { - margin-top: var(--space-2); -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Spacing and layout for accessibility - */ - -/* Focus spacing */ -.focus-spacing:focus-visible { - outline-offset: var(--space-1); -} - -/* Touch target sizing */ -.touch-target { - min-height: 44px; - min-width: 44px; - padding: var(--space-2); -} - -/* Screen reader spacing */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -/* ✅ PRINT OPTIMIZATIONS - * ======================= - * Layout adjustments for print media - */ - -@media print { - .section { - padding-top: var(--space-6); - padding-bottom: var(--space-6); - } - - .container { - padding-left: 0; - padding-right: 0; - } - - .stack > * + * { - margin-top: var(--space-3); - } -} \ No newline at end of file diff --git a/assets/css/architecture/loading-states.css b/assets/css/architecture/loading-states.css deleted file mode 100644 index a28de5df..00000000 --- a/assets/css/architecture/loading-states.css +++ /dev/null @@ -1,570 +0,0 @@ -/* 🎯 Universal Loading States System - * =================================== - * - * This file centralizes all loading patterns, skeletons, and async state - * management to ensure consistent loading experiences across components. - */ - -:root { - /* ✨ LOADING TIMING TOKENS */ - --loading-duration-fast: 1s; - --loading-duration-normal: 1.5s; - --loading-duration-slow: 2s; - --loading-pulse-duration: 2s; - --loading-shimmer-duration: 1.5s; - - /* ✨ LOADING VISUAL TOKENS */ - --loading-opacity: 0.6; - --loading-blur: blur(1px); - --loading-grayscale: grayscale(30%); - --loading-backdrop: rgba(255, 255, 255, 0.8); - --loading-spinner-size: 2rem; - --loading-spinner-border: 2px; - - /* ✨ SKELETON TOKENS */ - --skeleton-bg-base: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.1); - --skeleton-bg-shimmer: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.2); - --skeleton-border-radius: 0.25rem; - --skeleton-height-text: 1rem; - --skeleton-height-title: 1.5rem; - --skeleton-height-button: 2.5rem; - --skeleton-height-avatar: 3rem; - - /* ✨ SHIMMER GRADIENT */ - --shimmer-gradient: linear-gradient( - 90deg, - var(--skeleton-bg-base) 25%, - var(--skeleton-bg-shimmer) 50%, - var(--skeleton-bg-base) 75% - ); - - /* ✨ PULSE GRADIENT */ - --pulse-gradient: linear-gradient( - 45deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.3) 50%, - rgba(var(--color-brand-rgb), 0.1) 100% - ); -} - -/* 🌙 DARK MODE LOADING ADJUSTMENTS */ -.dark { - --loading-backdrop: rgba(0, 0, 0, 0.8); - --skeleton-bg-base: rgba(255, 255, 255, 0.1); - --skeleton-bg-shimmer: rgba(255, 255, 255, 0.2); - - --shimmer-gradient: linear-gradient( - 90deg, - var(--skeleton-bg-base) 25%, - var(--skeleton-bg-shimmer) 50%, - var(--skeleton-bg-base) 75% - ); -} - -/* ✅ LOADING STATE CLASSES - * ========================= - * Apply these classes to show loading states - */ - -/* Basic loading state */ -.loading { - opacity: var(--loading-opacity); - pointer-events: none; - cursor: wait; - transition: opacity var(--timing-fast) var(--easing-standard); -} - -/* Loading with blur effect */ -.loading-blur { - opacity: var(--loading-opacity); - filter: var(--loading-blur); - pointer-events: none; - cursor: wait; - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* Loading with grayscale effect */ -.loading-muted { - opacity: var(--loading-opacity); - filter: var(--loading-grayscale); - pointer-events: none; - cursor: wait; - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* Loading overlay */ -.loading-overlay { - position: relative; -} - -.loading-overlay::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--loading-backdrop); - backdrop-filter: blur(2px); - z-index: var(--z-overlay); - opacity: 0; - pointer-events: none; - transition: opacity var(--timing-medium) var(--easing-standard); -} - -.loading-overlay.is-loading::before { - opacity: 1; - pointer-events: auto; -} - -/* ✅ SPINNER COMPONENTS - * ====================== - * Various spinner patterns - */ - -/* Basic spinner */ -.spinner { - width: var(--loading-spinner-size); - height: var(--loading-spinner-size); - border: var(--loading-spinner-border) solid rgba(var(--color-brand-rgb), 0.2); - border-top: var(--loading-spinner-border) solid var(--color-brand); - border-radius: 50%; - animation: spin var(--loading-duration-fast) linear infinite; - display: inline-block; -} - -.spinner-sm { - --loading-spinner-size: 1rem; - --loading-spinner-border: 1px; -} - -.spinner-lg { - --loading-spinner-size: 3rem; - --loading-spinner-border: 3px; -} - -/* Dots spinner */ -.spinner-dots { - display: inline-flex; - gap: 0.25rem; -} - -.spinner-dots::before, -.spinner-dots::after { - content: ''; - width: 0.5rem; - height: 0.5rem; - background: var(--color-brand); - border-radius: 50%; - animation: pulse var(--loading-pulse-duration) ease-in-out infinite; -} - -.spinner-dots::before { - animation-delay: 0s; -} - -.spinner-dots::after { - animation-delay: 0.5s; -} - -/* Pulse spinner */ -.spinner-pulse { - width: var(--loading-spinner-size); - height: var(--loading-spinner-size); - background: var(--color-brand); - border-radius: 50%; - animation: pulse var(--loading-pulse-duration) ease-in-out infinite; -} - -/* ✅ SKELETON COMPONENTS - * ======================= - * Skeleton loading patterns for different content types - */ - -/* Base skeleton */ -.skeleton { - background: var(--skeleton-bg-base); - border-radius: var(--skeleton-border-radius); - position: relative; - overflow: hidden; -} - -.skeleton::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--shimmer-gradient); - animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; -} - -/* Skeleton variations */ -.skeleton-text { - height: var(--skeleton-height-text); - width: 100%; -} - -.skeleton-text-short { - width: 75%; -} - -.skeleton-text-long { - width: 90%; -} - -.skeleton-title { - height: var(--skeleton-height-title); - width: 60%; - margin-bottom: var(--space-2); -} - -.skeleton-button { - height: var(--skeleton-height-button); - width: 120px; - border-radius: var(--radius-button); -} - -.skeleton-avatar { - width: var(--skeleton-height-avatar); - height: var(--skeleton-height-avatar); - border-radius: 50%; -} - -.skeleton-card { - height: 200px; - border-radius: var(--radius-card); -} - -.skeleton-image { - height: 150px; - width: 100%; - border-radius: var(--radius-base); -} - -/* ✅ SKELETON LAYOUTS - * ==================== - * Complete skeleton layouts for common components - */ - -/* Article skeleton */ -.skeleton-article { - padding: var(--space-6); -} - -.skeleton-article .skeleton-title { - margin-bottom: var(--space-4); -} - -.skeleton-article .skeleton-text { - margin-bottom: var(--space-3); -} - -.skeleton-article .skeleton-text:last-child { - width: 65%; - margin-bottom: 0; -} - -/* Card skeleton */ -.skeleton-card-content { - padding: var(--space-4); -} - -.skeleton-card-content .skeleton-image { - margin-bottom: var(--space-4); -} - -.skeleton-card-content .skeleton-title { - margin-bottom: var(--space-3); -} - -.skeleton-card-content .skeleton-text { - margin-bottom: var(--space-2); -} - -/* List item skeleton */ -.skeleton-list-item { - display: flex; - align-items: center; - gap: var(--space-3); - padding: var(--space-3); -} - -.skeleton-list-item .skeleton-avatar { - flex-shrink: 0; -} - -.skeleton-list-item .skeleton-content { - flex: 1; -} - -.skeleton-list-item .skeleton-text { - margin-bottom: var(--space-1); -} - -.skeleton-list-item .skeleton-text:last-child { - width: 40%; - margin-bottom: 0; -} - -/* ✅ PROGRESSIVE LOADING - * ======================= - * Progressive reveal patterns - */ - -.progressive-load { - opacity: 0; - transform: var(--transform-slide-in-up); - transition: - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); -} - -.progressive-load.loaded { - opacity: 1; - transform: var(--transform-translate-none); -} - -/* Staggered progressive loading */ -.progressive-load-stagger > * { - opacity: 0; - transform: var(--transform-slide-in-up); - transition: - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - transition-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); -} - -.progressive-load-stagger.loaded > * { - opacity: 1; - transform: var(--transform-translate-none); -} - -/* ✅ ASYNC OPERATION STATES - * ========================== - * Loading states for different async operations - */ - -/* Button loading states */ -.btn-loading { - position: relative; - color: transparent !important; - cursor: wait; - pointer-events: none; -} - -.btn-loading::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 1rem; - height: 1rem; - border: 2px solid rgba(255, 255, 255, 0.3); - border-top: 2px solid currentColor; - border-radius: 50%; - animation: spin var(--loading-duration-fast) linear infinite; -} - -/* Form loading states */ -.form-loading { - opacity: var(--loading-opacity); - pointer-events: none; -} - -.form-loading input, -.form-loading textarea, -.form-loading select { - cursor: wait; - background-color: var(--color-surface-muted); -} - -/* Content loading states */ -.content-loading { - min-height: 200px; - display: flex; - align-items: center; - justify-content: center; -} - -/* ✅ ERROR AND RETRY STATES - * ========================== - * Loading error and retry patterns - */ - -.loading-error { - padding: var(--space-6); - text-align: center; - color: var(--color-text-secondary); -} - -.loading-error-icon { - width: 3rem; - height: 3rem; - margin: 0 auto var(--space-4); - opacity: 0.5; -} - -.retry-button { - margin-top: var(--space-4); -} - -/* ✅ KEYFRAME ANIMATIONS - * ======================= - * Loading-specific animations - */ - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 0.3; - transform: scale(1); - } - 50% { - opacity: 1; - transform: scale(1.1); - } -} - -@keyframes shimmer { - 0% { - left: -100%; - } - 100% { - left: 100%; - } -} - -@keyframes fade-pulse { - 0%, 100% { - opacity: 0.3; - } - 50% { - opacity: 0.7; - } -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Loading states for screen readers and reduced motion - */ - -/* Screen reader announcements */ -.sr-loading-text { - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .spinner, - .spinner-pulse, - .skeleton::after { - animation: fade-pulse var(--loading-duration-slow) ease-in-out infinite; - } - - .progressive-load, - .progressive-load-stagger > * { - transition: opacity var(--timing-fast) ease; - transform: none !important; - } -} - -/* High contrast mode */ -@media (prefers-contrast: high) { - .skeleton { - background: rgba(0, 0, 0, 0.2); - border: 1px solid rgba(0, 0, 0, 0.3); - } - - .dark .skeleton { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); - } -} - -/* ✅ COMPONENT INTEGRATION - * ========================= - * Integration with existing component systems - */ - -/* Loading states for data attributes */ -[data-loading="true"] { - opacity: var(--loading-opacity); - pointer-events: none; - cursor: wait; -} - -[data-loading-type="skeleton"] { - background: var(--skeleton-bg-base); - border-radius: var(--skeleton-border-radius); - position: relative; - overflow: hidden; -} - -[data-loading-type="skeleton"]::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--shimmer-gradient); - animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; -} - -/* Loading states for component states */ -[data-component-state="loading"] { - opacity: var(--loading-opacity); - filter: var(--loading-blur); - pointer-events: none; - cursor: wait; -} - -/* ✅ PERFORMANCE OPTIMIZATIONS - * ============================= - * Hardware acceleration for loading animations - */ - -.spinner, -.skeleton::after, -.progressive-load { - will-change: transform, opacity; - transform: translateZ(0); /* Force hardware acceleration */ -} - -/* ✅ UTILITY CLASSES - * =================== - * Quick loading state utilities - */ - -.is-loading { opacity: var(--loading-opacity); pointer-events: none; } -.is-skeleton { background: var(--skeleton-bg-base); } -.has-shimmer { position: relative; overflow: hidden; } -.has-shimmer::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--shimmer-gradient); - animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; -} \ No newline at end of file diff --git a/assets/css/architecture/typography-system.css b/assets/css/architecture/typography-system.css deleted file mode 100644 index 0ae70f20..00000000 --- a/assets/css/architecture/typography-system.css +++ /dev/null @@ -1,54 +0,0 @@ -/* Typography System - Base type scales and article text - Centralizes type sizing tokens and base rules. */ - -/* Global Headings */ -h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* 24px–28px */ - line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; -} - -h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); /* 20px–22px */ - line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; -} - -h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* 17px–19px */ - line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; -} - -h4 { letter-spacing: -0.01em; } - -/* Body */ -body { - font-size: clamp(1rem, 2vw, 1.0625rem); /* 16px–17px */ - line-height: 1.6; - letter-spacing: 0.01em; -} - -/* Brand font on main */ -main { font-family: var(--font-family-brand, inherit); } - -/* Article Content Typography */ -.article-content { - color: var(--color-text-primary); - font-size: 1rem; /* mobile-first */ - line-height: 1.65; /* mobile-first */ - letter-spacing: 0.01em; -} - -@media (min-width: 768px) { - .article-content { - font-size: 1.0625rem; /* 17px */ - line-height: 1.6; - } -} \ No newline at end of file diff --git a/assets/css/colors-enterprise.css b/assets/css/colors-enterprise.css deleted file mode 100644 index 566f113a..00000000 --- a/assets/css/colors-enterprise.css +++ /dev/null @@ -1,128 +0,0 @@ -:root { - --primary-gradient-color: #ffffff; - --secondary-gradient-color: rgba(99, 102, 241, 0.1); - - /* Enterprise Brand Colors */ - --color-brand: #6366f1; /* primary color - Enterprise indigo */ - --color-brand-rgb: 99, 102, 241; /* RGB values for alpha transparency */ - --color-brand-1: #4338ca; /* secondary color - darker indigo */ - --color-brand-2: #5145cd; /* tertiary color - mid indigo */ - --color-brand-3: #86a6cf; /* note color */ - --color-brand-4: #ADD9F4; /* tip color */ - --color-brand-5: #059669; /* security color - enterprise green */ - --color-brand-6: #d97706; /* warning color - enterprise amber */ - --color-brand-7: #dc2626; /* danger color - enterprise red */ - - /* Semantic Color System for Light Mode */ - --color-text-primary: #111827; - --color-text-secondary: #6b7280; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #ffffff; - - --color-bg-primary: #ffffff; - --color-bg-secondary: #f9fafb; - --color-bg-tertiary: #f3f4f6; - --color-bg-inverse: #111827; - - --color-border-primary: #e5e7eb; - --color-border-secondary: #d1d5db; - --color-border-focus: var(--color-brand); - - --color-surface: #ffffff; - --color-surface-hover: #f9fafb; - --color-surface-active: #f3f4f6; - - /* Interactive states */ - --color-hover: rgba(var(--color-brand-rgb), 0.1); - --color-active: rgba(var(--color-brand-rgb), 0.2); - --color-focus: rgba(var(--color-brand-rgb), 0.3); - - /* Semantic status colors (light) */ - --color-success: #10b981; --color-success-rgb: 16, 185, 129; - --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; - --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; - --color-danger: #ef4444; --color-danger-rgb: 239, 68, 68; - --color-note: #6366f1; --color-note-rgb: 99, 102, 241; - --color-tip: #22c55e; --color-tip-rgb: 34, 197, 94; - --color-security: #a855f7; --color-security-rgb: 168, 85, 247; - --color-snack: #ec4899; --color-snack-rgb: 236, 72, 153; - - /* HTTP method colors (light) */ - --http-get-bg: #22c55e; --http-get-text: #ffffff; - --http-post-bg: #3b82f6; --http-post-text: #ffffff; - --http-put-bg: #f59e0b; --http-put-text: #ffffff; - --http-patch-bg: #8b5cf6; --http-patch-text: #ffffff; - --http-delete-bg: #ef4444; --http-delete-text: #ffffff; - --http-head-bg: #6b7280; --http-head-text: #ffffff; - --http-options-bg: #9333ea; --http-options-text: #ffffff; - - /* Response status colors (light) */ - --status-2xx-bg: #22c55e; --status-2xx-text: #ffffff; - --status-3xx-bg: #3b82f6; --status-3xx-text: #ffffff; - --status-4xx-bg: #f59e0b; --status-4xx-text: #ffffff; - --status-5xx-bg: #ef4444; --status-5xx-text: #ffffff; - --status-dxx-bg: #6b7280; --status-dxx-text: #ffffff; - - /* Schema type badge colors (light) */ - --type-string-bg: rgba(34, 197, 94, 0.1); --type-string-text: #059669; - --type-number-bg: rgba(59, 130, 246, 0.1); --type-number-text: #2563eb; - --type-integer-bg: rgba(59, 130, 246, 0.1); --type-integer-text: #2563eb; - --type-boolean-bg: rgba(168, 85, 247, 0.1); --type-boolean-text: #7c3aed; - --type-array-bg: rgba(245, 158, 11, 0.1); --type-array-text: #d97706; - --type-object-bg: rgba(239, 68, 68, 0.1); --type-object-text: #dc2626; - --type-null-bg: rgba(107, 114, 128, 0.1); --type-null-text: #4b5563; -} - -.dark { - --primary-gradient-color: rgba(99, 102, 241, 0.3); - --secondary-gradient-color: #0f1419; - - /* Semantic Color System for Dark Mode - Enterprise Theme */ - --color-text-primary: #f9fafb; - --color-text-secondary: #d1d5db; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #111827; - - --color-bg-primary: #0f1419; - --color-bg-secondary: #1a202c; - --color-bg-tertiary: #2d3748; - --color-bg-inverse: #ffffff; - - --color-border-primary: #2d3748; - --color-border-secondary: #4a5568; - --color-border-focus: var(--color-brand); - - --color-surface: #1a202c; - --color-surface-hover: #2d3748; - --color-surface-active: #4a5568; - - /* Interactive states for dark mode */ - --color-hover: rgba(var(--color-brand-rgb), 0.2); - --color-active: rgba(var(--color-brand-rgb), 0.3); - --color-focus: rgba(var(--color-brand-rgb), 0.4); - - /* HTTP method colors (dark) */ - --http-get-bg: #059669; --http-get-text: #ffffff; - --http-post-bg: #2563eb; --http-post-text: #ffffff; - --http-put-bg: #d97706; --http-put-text: #ffffff; - --http-patch-bg: #7c3aed; --http-patch-text: #ffffff; - --http-delete-bg: #dc2626; --http-delete-text: #ffffff; - --http-head-bg: #4b5563; --http-head-text: #ffffff; - --http-options-bg: #7c3aed; --http-options-text: #ffffff; - - /* Response status colors (dark) */ - --status-2xx-bg: #059669; --status-2xx-text: #ffffff; - --status-3xx-bg: #2563eb; --status-3xx-text: #ffffff; - --status-4xx-bg: #d97706; --status-4xx-text: #111827; - --status-5xx-bg: #dc2626; --status-5xx-text: #ffffff; - --status-dxx-bg: #4b5563; --status-dxx-text: #ffffff; - - /* Schema type badge colors (dark) */ - --type-string-bg: rgba(34, 197, 94, 0.15); --type-string-text: #10b981; - --type-number-bg: rgba(59, 130, 246, 0.15); --type-number-text: #3b82f6; - --type-integer-bg: rgba(59, 130, 246, 0.15); --type-integer-text: #3b82f6; - --type-boolean-bg: rgba(168, 85, 247, 0.15); --type-boolean-text: #8b5cf6; - --type-array-bg: rgba(245, 158, 11, 0.15); --type-array-text: #f59e0b; - --type-object-bg: rgba(239, 68, 68, 0.15); --type-object-text: #ef4444; - --type-null-bg: rgba(107, 114, 128, 0.15); --type-null-text: #9ca3af; -} \ No newline at end of file diff --git a/assets/css/colors-nvidia.css b/assets/css/colors-nvidia.css deleted file mode 100644 index 50081fd5..00000000 --- a/assets/css/colors-nvidia.css +++ /dev/null @@ -1,132 +0,0 @@ -:root { - --primary-gradient-color: #ffffff; - --secondary-gradient-color: rgba(118, 185, 0, 0.1); - - /* NVIDIA Brand Colors - Official Palette */ - --color-brand: #76B900; /* primary color - NVIDIA green */ - --color-brand-rgb: 118, 185, 0; /* RGB values for alpha transparency */ - --color-brand-1: #265600; /* secondary color - NVIDIA green dark 2 */ - --color-brand-2: #3f8500; /* tertiary color - NVIDIA green dark 1 */ - --color-brand-3: #0074df; /* note color - NVIDIA blue */ - --color-brand-4: #7cd7fe; /* tip color - NVIDIA blue light 1 */ - --color-brand-5: #76B900; /* security color - NVIDIA green */ - --color-brand-6: #f9c500; /* warning color - NVIDIA yellow */ - --color-brand-7: #e52020; /* danger color - NVIDIA red */ - - /* NVIDIA Font Families */ - --font-family-brand: NVIDIA, Arial, Helvetica, sans-serif; - --font-family-mono: RobotoMono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; - - /* Semantic Color System for Light Mode - NVIDIA Grays */ - --color-text-primary: #313131; /* NVIDIA gray dark 2 */ - --color-text-secondary: #757575; /* NVIDIA gray */ - --color-text-tertiary: #a7a7a7; /* NVIDIA gray light 1 */ - --color-text-inverse: #ffffff; - - --color-bg-primary: #ffffff; - --color-bg-secondary: #f9fafb; - --color-bg-tertiary: #f3f4f6; - --color-bg-inverse: #111827; - - --color-border-primary: #e0e0e0; /* NVIDIA gray light 2 */ - --color-border-secondary: #a7a7a7; /* NVIDIA gray light 1 */ - --color-border-focus: var(--color-brand); - - --color-surface: #ffffff; - --color-surface-hover: #f9fafb; - --color-surface-active: #f3f4f6; - - /* Interactive states */ - --color-hover: rgba(var(--color-brand-rgb), 0.1); - --color-active: rgba(var(--color-brand-rgb), 0.2); - --color-focus: rgba(var(--color-brand-rgb), 0.3); - - /* Semantic status colors (light) */ - --color-success: #10b981; --color-success-rgb: 16, 185, 129; - --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; - --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; - --color-danger: #ef4444; --color-danger-rgb: 239, 68, 68; - --color-note: #6366f1; --color-note-rgb: 99, 102, 241; - --color-tip: #22c55e; --color-tip-rgb: 34, 197, 94; - --color-security: #a855f7; --color-security-rgb: 168, 85, 247; - --color-snack: #ec4899; --color-snack-rgb: 236, 72, 153; - - /* HTTP method colors (light) */ - --http-get-bg: #22c55e; --http-get-text: #ffffff; - --http-post-bg: #3b82f6; --http-post-text: #ffffff; - --http-put-bg: #f59e0b; --http-put-text: #ffffff; - --http-patch-bg: #8b5cf6; --http-patch-text: #ffffff; - --http-delete-bg: #ef4444; --http-delete-text: #ffffff; - --http-head-bg: #6b7280; --http-head-text: #ffffff; - --http-options-bg: #9333ea; --http-options-text: #ffffff; - - /* Response status colors (light) */ - --status-2xx-bg: #22c55e; --status-2xx-text: #ffffff; - --status-3xx-bg: #3b82f6; --status-3xx-text: #ffffff; - --status-4xx-bg: #f59e0b; --status-4xx-text: #ffffff; - --status-5xx-bg: #ef4444; --status-5xx-text: #ffffff; - --status-dxx-bg: #6b7280; --status-dxx-text: #ffffff; - - /* Schema type badge colors (light) */ - --type-string-bg: rgba(34, 197, 94, 0.1); --type-string-text: #059669; - --type-number-bg: rgba(59, 130, 246, 0.1); --type-number-text: #2563eb; - --type-integer-bg: rgba(59, 130, 246, 0.1); --type-integer-text: #2563eb; - --type-boolean-bg: rgba(168, 85, 247, 0.1); --type-boolean-text: #7c3aed; - --type-array-bg: rgba(245, 158, 11, 0.1); --type-array-text: #d97706; - --type-object-bg: rgba(239, 68, 68, 0.1); --type-object-text: #dc2626; - --type-null-bg: rgba(107, 114, 128, 0.1); --type-null-text: #4b5563; -} - -.dark { - --primary-gradient-color: rgba(118, 185, 0, 0.3); - --secondary-gradient-color: #0f0f0f; - - /* Semantic Color System for Dark Mode - NVIDIA Theme */ - --color-text-primary: #f9fafb; - --color-text-secondary: #d1d5db; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #111827; - - --color-bg-primary: #0f0f0f; - --color-bg-secondary: #1a1a1a; - --color-bg-tertiary: #262626; - --color-bg-inverse: #ffffff; - - --color-border-primary: #313131; /* NVIDIA gray dark 2 */ - --color-border-secondary: #4b4b4b; /* NVIDIA gray dark 1 */ - --color-border-focus: var(--color-brand); - - --color-surface: #1a1a1a; - --color-surface-hover: #262626; - --color-surface-active: #313131; /* NVIDIA gray dark 2 */ - - /* Interactive states for dark mode */ - --color-hover: rgba(var(--color-brand-rgb), 0.2); - --color-active: rgba(var(--color-brand-rgb), 0.3); - --color-focus: rgba(var(--color-brand-rgb), 0.4); - - /* HTTP method colors (dark) */ - --http-get-bg: #059669; --http-get-text: #ffffff; - --http-post-bg: #2563eb; --http-post-text: #ffffff; - --http-put-bg: #d97706; --http-put-text: #ffffff; - --http-patch-bg: #7c3aed; --http-patch-text: #ffffff; - --http-delete-bg: #dc2626; --http-delete-text: #ffffff; - --http-head-bg: #4b5563; --http-head-text: #ffffff; - --http-options-bg: #7c3aed; --http-options-text: #ffffff; - - /* Response status colors (dark) */ - --status-2xx-bg: #059669; --status-2xx-text: #ffffff; - --status-3xx-bg: #2563eb; --status-3xx-text: #ffffff; - --status-4xx-bg: #d97706; --status-4xx-text: #111827; - --status-5xx-bg: #dc2626; --status-5xx-text: #ffffff; - --status-dxx-bg: #4b5563; --status-dxx-text: #ffffff; - - /* Schema type badge colors (dark) */ - --type-string-bg: rgba(34, 197, 94, 0.15); --type-string-text: #10b981; - --type-number-bg: rgba(59, 130, 246, 0.15); --type-number-text: #3b82f6; - --type-integer-bg: rgba(59, 130, 246, 0.15); --type-integer-text: #3b82f6; - --type-boolean-bg: rgba(168, 85, 247, 0.15); --type-boolean-text: #8b5cf6; - --type-array-bg: rgba(245, 158, 11, 0.15); --type-array-text: #f59e0b; - --type-object-bg: rgba(239, 68, 68, 0.15); --type-object-text: #ef4444; - --type-null-bg: rgba(107, 114, 128, 0.15); --type-null-text: #9ca3af; -} \ No newline at end of file diff --git a/assets/css/colors-opensource.css b/assets/css/colors-opensource.css deleted file mode 100644 index 1d39c1fe..00000000 --- a/assets/css/colors-opensource.css +++ /dev/null @@ -1,128 +0,0 @@ -:root { - --primary-gradient-color: #ffffff; - --secondary-gradient-color: rgba(138, 171, 193, 0.5); - - /* HPE Brand Colors */ - --color-brand: #8ab5c1; /*primary color*/ - --color-brand-rgb: 138, 181, 193; /*RGB values for alpha transparency*/ - --color-brand-1: rgba(131, 122, 117, 0.667); /*secondary color*/ - --color-brand-2: #acc18a; /*tertiary color*/ - --color-brand-3: #86a6cf; /*note color*/ - --color-brand-4: #ADD9F4; /*tip color */ - --color-brand-5: #dbd985; /*security color */ - --color-brand-6: #d4ac84; /*warning color */ - --color-brand-7: #F3B3A6; /*danger color */ - - /* Semantic Color System for Light Mode */ - --color-text-primary: #111827; - --color-text-secondary: #6b7280; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #ffffff; - - --color-bg-primary: #ffffff; - --color-bg-secondary: #f9fafb; - --color-bg-tertiary: #f3f4f6; - --color-bg-inverse: #111827; - - --color-border-primary: #e5e7eb; - --color-border-secondary: #d1d5db; - --color-border-focus: var(--color-brand); - - --color-surface: #ffffff; - --color-surface-hover: #f9fafb; - --color-surface-active: #f3f4f6; - - /* Interactive states */ - --color-hover: rgba(var(--color-brand-rgb), 0.1); - --color-active: rgba(var(--color-brand-rgb), 0.2); - --color-focus: rgba(var(--color-brand-rgb), 0.3); - - /* Semantic status colors (light) */ - --color-success: #10b981; --color-success-rgb: 16, 185, 129; - --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; - --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; - --color-danger: #ef4444; --color-danger-rgb: 239, 68, 68; - --color-note: #6366f1; --color-note-rgb: 99, 102, 241; - --color-tip: #22c55e; --color-tip-rgb: 34, 197, 94; - --color-security: #a855f7; --color-security-rgb: 168, 85, 247; - --color-snack: #ec4899; --color-snack-rgb: 236, 72, 153; - - /* HTTP method colors (light) */ - --http-get-bg: #22c55e; --http-get-text: #ffffff; - --http-post-bg: #3b82f6; --http-post-text: #ffffff; - --http-put-bg: #f59e0b; --http-put-text: #ffffff; - --http-patch-bg: #8b5cf6; --http-patch-text: #ffffff; - --http-delete-bg: #ef4444; --http-delete-text: #ffffff; - --http-head-bg: #6b7280; --http-head-text: #ffffff; - --http-options-bg: #9333ea; --http-options-text: #ffffff; - - /* Response status colors (light) */ - --status-2xx-bg: #22c55e; --status-2xx-text: #ffffff; - --status-3xx-bg: #3b82f6; --status-3xx-text: #ffffff; - --status-4xx-bg: #f59e0b; --status-4xx-text: #ffffff; - --status-5xx-bg: #ef4444; --status-5xx-text: #ffffff; - --status-dxx-bg: #6b7280; --status-dxx-text: #ffffff; - - /* Schema type badge colors (light) */ - --type-string-bg: rgba(34, 197, 94, 0.1); --type-string-text: #059669; - --type-number-bg: rgba(59, 130, 246, 0.1); --type-number-text: #2563eb; - --type-integer-bg: rgba(59, 130, 246, 0.1); --type-integer-text: #2563eb; - --type-boolean-bg: rgba(168, 85, 247, 0.1); --type-boolean-text: #7c3aed; - --type-array-bg: rgba(245, 158, 11, 0.1); --type-array-text: #d97706; - --type-object-bg: rgba(239, 68, 68, 0.1); --type-object-text: #dc2626; - --type-null-bg: rgba(107, 114, 128, 0.1); --type-null-text: #4b5563; -} - -.dark { - --primary-gradient-color: rgba(138, 152, 193, 0.3); - --secondary-gradient-color: #1a1a1a; - - /* Semantic Color System for Dark Mode - Open Source Theme */ - --color-text-primary: #f9fafb; - --color-text-secondary: #d1d5db; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #111827; - - --color-bg-primary: #1a1a1a; - --color-bg-secondary: #2a2a2a; - --color-bg-tertiary: #3a3a3a; - --color-bg-inverse: #ffffff; - - --color-border-primary: #3a3a3a; - --color-border-secondary: #4a4a4a; - --color-border-focus: var(--color-brand); - - --color-surface: #2a2a2a; - --color-surface-hover: #3a3a3a; - --color-surface-active: #4a4a4a; - - /* Interactive states for dark mode */ - --color-hover: rgba(var(--color-brand-rgb), 0.2); - --color-active: rgba(var(--color-brand-rgb), 0.3); - --color-focus: rgba(var(--color-brand-rgb), 0.4); - - /* HTTP method colors (dark) */ - --http-get-bg: #059669; --http-get-text: #ffffff; - --http-post-bg: #2563eb; --http-post-text: #ffffff; - --http-put-bg: #d97706; --http-put-text: #ffffff; - --http-patch-bg: #7c3aed; --http-patch-text: #ffffff; - --http-delete-bg: #dc2626; --http-delete-text: #ffffff; - --http-head-bg: #4b5563; --http-head-text: #ffffff; - --http-options-bg: #7c3aed; --http-options-text: #ffffff; - - /* Response status colors (dark) */ - --status-2xx-bg: #059669; --status-2xx-text: #ffffff; - --status-3xx-bg: #2563eb; --status-3xx-text: #ffffff; - --status-4xx-bg: #d97706; --status-4xx-text: #111827; - --status-5xx-bg: #dc2626; --status-5xx-text: #ffffff; - --status-dxx-bg: #4b5563; --status-dxx-text: #ffffff; - - /* Schema type badge colors (dark) */ - --type-string-bg: rgba(34, 197, 94, 0.15); --type-string-text: #10b981; - --type-number-bg: rgba(59, 130, 246, 0.15); --type-number-text: #3b82f6; - --type-integer-bg: rgba(59, 130, 246, 0.15); --type-integer-text: #3b82f6; - --type-boolean-bg: rgba(168, 85, 247, 0.15); --type-boolean-text: #8b5cf6; - --type-array-bg: rgba(245, 158, 11, 0.15); --type-array-text: #f59e0b; - --type-object-bg: rgba(239, 68, 68, 0.15); --type-object-text: #ef4444; - --type-null-bg: rgba(107, 114, 128, 0.15); --type-null-text: #9ca3af; -} diff --git a/assets/css/colors.css b/assets/css/colors.css deleted file mode 100644 index ad78b783..00000000 --- a/assets/css/colors.css +++ /dev/null @@ -1,129 +0,0 @@ -:root { - --primary-gradient-color: #ffffff; - --secondary-gradient-color: rgb(138, 193, 149, 0.500); - - /* Default Brand Colors */ - --color-brand: #8ac195; /*primary color*/ - --color-brand-rgb: 138, 193, 149; /*RGB values for alpha transparency*/ - --color-brand-1: rgba(131, 122, 117, 0.667); /*secondary color*/ - --color-brand-2: #acc18a; /*tertiary color*/ - --color-brand-3: #86a6cf; /*note color*/ - --color-brand-4: #ADD9F4; /*tip color */ - --color-brand-5: #dbd985; /*security color */ - --color-brand-6: #d4ac84; /*warning color */ - --color-brand-7: #F3B3A6; /*danger color */ - - /* Semantic Color System for Light Mode */ - --color-text-primary: #111827; - --color-text-secondary: #6b7280; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #ffffff; - - --color-bg-primary: #ffffff; - --color-bg-secondary: #f9fafb; - --color-bg-tertiary: #f3f4f6; - --color-bg-inverse: #111827; - - --color-border-primary: #e5e7eb; - --color-border-secondary: #d1d5db; - --color-border-focus: var(--color-brand); - - --color-surface: #ffffff; - --color-surface-hover: #f9fafb; - --color-surface-active: #f3f4f6; - - /* Interactive states */ - --color-hover: rgba(var(--color-brand-rgb), 0.1); - --color-active: rgba(var(--color-brand-rgb), 0.2); - --color-focus: rgba(var(--color-brand-rgb), 0.3); - - /* Semantic status colors (light) */ - --color-success: #10b981; --color-success-rgb: 16, 185, 129; - --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; - --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; - --color-danger: #ef4444; --color-danger-rgb: 239, 68, 68; - /* Extended status aliases */ - --color-note: #6366f1; --color-note-rgb: 99, 102, 241; - --color-tip: #22c55e; --color-tip-rgb: 34, 197, 94; - --color-security: #a855f7; --color-security-rgb: 168, 85, 247; - --color-snack: #ec4899; --color-snack-rgb: 236, 72, 153; - - /* HTTP method colors (light) */ - --http-get-bg: #22c55e; --http-get-text: #ffffff; - --http-post-bg: #3b82f6; --http-post-text: #ffffff; - --http-put-bg: #f59e0b; --http-put-text: #ffffff; - --http-patch-bg: #8b5cf6; --http-patch-text: #ffffff; - --http-delete-bg: #ef4444; --http-delete-text: #ffffff; - --http-head-bg: #6b7280; --http-head-text: #ffffff; - --http-options-bg: #9333ea; --http-options-text: #ffffff; - - /* Response status colors (light) */ - --status-2xx-bg: #22c55e; --status-2xx-text: #ffffff; - --status-3xx-bg: #3b82f6; --status-3xx-text: #ffffff; - --status-4xx-bg: #f59e0b; --status-4xx-text: #ffffff; - --status-5xx-bg: #ef4444; --status-5xx-text: #ffffff; - --status-dxx-bg: #6b7280; --status-dxx-text: #ffffff; - - /* Schema type badge colors (light) */ - --type-string-bg: rgba(34, 197, 94, 0.1); --type-string-text: #059669; - --type-number-bg: rgba(59, 130, 246, 0.1); --type-number-text: #2563eb; - --type-integer-bg: rgba(59, 130, 246, 0.1); --type-integer-text: #2563eb; - --type-boolean-bg: rgba(168, 85, 247, 0.1); --type-boolean-text: #7c3aed; - --type-array-bg: rgba(245, 158, 11, 0.1); --type-array-text: #d97706; - --type-object-bg: rgba(239, 68, 68, 0.1); --type-object-text: #dc2626; - --type-null-bg: rgba(107, 114, 128, 0.1); --type-null-text: #4b5563; -} - -.dark { - --primary-gradient-color: rgb(138, 193, 149, 0.300); - --secondary-gradient-color: #111827; - - /* Semantic Color System for Dark Mode */ - --color-text-primary: #f9fafb; - --color-text-secondary: #d1d5db; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #111827; - - --color-bg-primary: #111827; - --color-bg-secondary: #1f2937; - --color-bg-tertiary: #374151; - --color-bg-inverse: #ffffff; - - --color-border-primary: #374151; - --color-border-secondary: #4b5563; - --color-border-focus: var(--color-brand); - - --color-surface: #1f2937; - --color-surface-hover: #374151; - --color-surface-active: #4b5563; - - /* Interactive states for dark mode */ - --color-hover: rgba(var(--color-brand-rgb), 0.2); - --color-active: rgba(var(--color-brand-rgb), 0.3); - --color-focus: rgba(var(--color-brand-rgb), 0.4); - - /* HTTP method colors (dark) */ - --http-get-bg: #059669; --http-get-text: #ffffff; - --http-post-bg: #2563eb; --http-post-text: #ffffff; - --http-put-bg: #d97706; --http-put-text: #ffffff; - --http-patch-bg: #7c3aed; --http-patch-text: #ffffff; - --http-delete-bg: #dc2626; --http-delete-text: #ffffff; - --http-head-bg: #4b5563; --http-head-text: #ffffff; - --http-options-bg: #7c3aed; --http-options-text: #ffffff; - - /* Response status colors (dark) */ - --status-2xx-bg: #059669; --status-2xx-text: #ffffff; - --status-3xx-bg: #2563eb; --status-3xx-text: #ffffff; - --status-4xx-bg: #d97706; --status-4xx-text: #111827; - --status-5xx-bg: #dc2626; --status-5xx-text: #ffffff; - --status-dxx-bg: #4b5563; --status-dxx-text: #ffffff; - - /* Schema type badge colors (dark) */ - --type-string-bg: rgba(34, 197, 94, 0.15); --type-string-text: #10b981; - --type-number-bg: rgba(59, 130, 246, 0.15); --type-number-text: #3b82f6; - --type-integer-bg: rgba(59, 130, 246, 0.15); --type-integer-text: #3b82f6; - --type-boolean-bg: rgba(168, 85, 247, 0.15); --type-boolean-text: #8b5cf6; - --type-array-bg: rgba(245, 158, 11, 0.15); --type-array-text: #f59e0b; - --type-object-bg: rgba(239, 68, 68, 0.15); --type-object-text: #ef4444; - --type-null-bg: rgba(107, 114, 128, 0.15); --type-null-text: #9ca3af; -} \ No newline at end of file diff --git a/assets/css/components/README.md b/assets/css/components/README.md deleted file mode 100644 index 8d27e453..00000000 --- a/assets/css/components/README.md +++ /dev/null @@ -1,76 +0,0 @@ -# CSS Components and Architecture Map - -This project uses a hybrid approach: -- Architecture layer (tokens, systems): `assets/css/architecture/` -- Component layer (thin semantic classes): `assets/css/components/` -- Tailwind utilities for layout/spacing/typography/states - -## Where things live -- Architecture - - `animation-system.css`: timing, easing, transforms - - `layout-foundations.css`: spacing scale, radius, z-index, max-widths, layout tokens - - Rails and gaps: `--left-rail-width`, `--right-rail-width`, `--layout-gap-*` - - Content width: `--max-width-content` - - Grid/card: `--grid-card-min` - - Glass tokens: `--tile-glass-blur`, `--tile-glass-saturate` - - Hooks and presets: - - `main.layout-shell[data-has-right-rail="false"]` adjusts gaps and `--max-width-content` - - `.layout-density--compact` / `.layout-density--comfortable` -- Components - - `tiles.css`, `child-links.css`, `article-header.css`, etc. - - New utility classes (declared in `assets/css/src/input.css` under `@layer components`): - - `.layout-shell`: 3-column shell controlled by tokens - - `.grid-autofit`: responsive auto-fit grid using `--grid-card-min` - - `.page-container`: sets `max-width: var(--max-width-content)` - -## Using layout tokens -- Site-wide defaults (config/_default/params.yaml): -```yaml -layout: - rightRail: true - leftRailWidth: 18rem - rightRailWidth: 22rem - density: comfortable # or compact - skeleton: false -``` -- Per-page override (front matter): -```yaml -layoutConfig: - rightRail: false - leftRailWidth: 20rem - density: compact - skeleton: true -``` - -## Template blocks and utilities -- Blocks in `layouts/_default/baseof.html`: - - `head-extra`, `pre-content`, `post-content`, `scripts`, `page-header`, `list`, `home` -- Utilities (partials): - - `utils/layout-config.html`: merges site/page layout config - - `utils/right-rail.html`: decides if right rail should render - - `utils/page-kind.html`: `{ isHome, isSection, isTaxonomy, isTerm, isSingle }` - - `utils/title-guard.html`: show H1 if content doesn’t start with `# ` - - `utils/meta.html`: normalized SEO meta dict - - `utils/breadcrumbs-data.html`: data for breadcrumbs - -## Conventions -- Prefer Tailwind utilities for one-off layout, spacing, states -- Create component classes only when reused or when selectors are complex -- Comment out lines when replacing existing code (no `*-new` suffixes) -- Never edit generated CSS (`assets/css/main.css`); use source files - -## Examples -- Adaptive grid in a template: -```html -
…
-``` -- Shell usage in base template: -```html -
…
-``` -- Page override via front matter: -```yaml -layoutConfig: - rightRail: false - density: compact -``` \ No newline at end of file diff --git a/assets/css/components/article-header.css b/assets/css/components/article-header.css deleted file mode 100644 index cd6f915c..00000000 --- a/assets/css/components/article-header.css +++ /dev/null @@ -1,600 +0,0 @@ -/* Article Header Component - Parent container managing breadcrumbs and metadata */ - -.article-header { - position: relative; - margin-bottom: 1.5rem; -} - -/* Navigation container - holds breadcrumbs and toggle button */ -.article-header__navigation { - display: flex; - align-items: center; - justify-content: space-between; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - border-radius: 0.75rem; - /* padding: 1rem 1.25rem; */ - padding: 0.5rem 0.75rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - background: var(--glass-bg); - box-shadow: var(--glass-shadow); - transition: background-color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard); -} - -/* Reduced hover effect intentionally disabled to keep things airy */ - -/* Actions Container - holds copy page and metadata toggle */ -.article-header__actions { - display: flex; - align-items: center; - gap: 0.75rem; -} - -/* Copy Page Component Styles */ -.article-header__copy-page { - position: relative; -} - -.article-header__copy-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-radius: 0.625rem; - background: var(--color-surface); - color: var(--color-text-primary); - border: 1px solid var(--color-border-primary); - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - font-family: var(--font-brand); -} - -.article-header__copy-toggle:hover { - background: var(--color-bg-secondary); - border-color: var(--color-brand); - color: var(--color-brand); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); -} - -.article-header__copy-toggle:focus { - outline: 2px solid rgba(var(--color-brand-rgb), 0.5); - outline-offset: 2px; -} - -/* Copy Page Dropdown Styles */ -.article-header__copy-dropdown { - position: absolute; - right: 0; - margin-top: 0.5rem; - width: 14rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-radius: 0.5rem; - /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */ - box-shadow: var(--glass-shadow); - z-index: 999; - overflow: hidden; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); -} - -.dark .article-header__copy-dropdown { - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); -} - -.article-header__copy-dropdown[data-state="hidden"] { - display: none; -} - -.article-header__copy-dropdown-content { - padding: 0.25rem; - /* Elevate glass on inner wrapper to ensure effect covers menu content */ - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - border-radius: 0.75rem; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); -} - -/* Dropdown Menu Items */ -.copy-page-menu-item { - width: 100%; - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.5rem 0.75rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-primary); - background: transparent; - border: none; - border-radius: 0.375rem; - cursor: pointer; - transition: all 0.2s ease; - text-decoration: none; -} - -.copy-page-menu-item:hover { - background: var(--color-surface-hover); - color: var(--color-brand); -} - -.copy-page-menu-item:focus { - outline: 2px solid rgba(var(--color-brand-rgb), 0.5); - outline-offset: -2px; -} - -.copy-page-menu-item svg { - width: 1rem; - height: 1rem; - flex-shrink: 0; - color: var(--color-text-secondary); - transition: color 0.2s ease; -} - -.copy-page-menu-item:hover svg { - color: var(--color-brand); -} - -/* Menu Separator */ -.copy-page-separator { - margin: 0.25rem 0; - border: 0; - border-top: 1px solid var(--color-border-primary); -} - -/* Menu Section Header */ -.copy-page-section-header { - padding: 0.25rem 0.75rem; - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-tertiary); - text-transform: uppercase; - letter-spacing: 0.05em; - background: var(--color-bg-tertiary); - margin: 0.25rem 0; -} - -/* Icon Styles */ -.article-header__copy-icon, -.article-header__copy-arrow { - width: 1rem; - height: 1rem; - flex-shrink: 0; - color: var(--color-text-secondary); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.article-header__copy-toggle:hover .article-header__copy-icon, -.article-header__copy-toggle:hover .article-header__copy-arrow { - color: var(--color-brand); -} - -/* Dropdown arrow rotation */ -.article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { - transform: rotate(180deg); -} - -/* Copy feedback states */ -.copy-page-menu-item.copying { - background: var(--color-brand); - color: var(--color-text-inverse); -} - -.copy-page-menu-item.copying svg { - color: var(--color-text-inverse); -} - -.copy-page-menu-item.success { - background: var(--color-brand-5); - color: var(--color-text-inverse); -} - -.copy-page-menu-item.success svg { - color: var(--color-text-inverse); -} - -.copy-page-menu-item.error { - background: var(--color-brand-7); - color: var(--color-text-inverse); -} - -.copy-page-menu-item.error svg { - color: var(--color-text-inverse); -} - -.article-header__copy-text { - white-space: nowrap; -} - -.article-header__copy-icon, -.article-header__copy-arrow { - width: 1rem; - height: 1rem; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { - transform: rotate(180deg); -} - -.article-header__copy-dropdown { - position: absolute; - right: 0; - top: 100%; - margin-top: 0.5rem; - width: 14rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-radius: 0.75rem; - /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--glass-shadow); - z-index: 50; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; -} - -.article-header__copy-dropdown .p-1 { - padding: 0.25rem; -} - -/* Stronger glassmorphism for dropdown readability over underlying text */ -.article-header__copy-dropdown { - /* Locally override glass tokens for this component */ - --glass-blur: 14px; - --glass-saturate: 1.25; - --glass-bg: rgba(255, 255, 255, 0.72); - --glass-border-color: rgba(255, 255, 255, 0.32); - --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); - - /* Ensure it visually floats above overlapping content */ - z-index: 1000; - background-clip: padding-box; - /* Let inner content own the visual surface to avoid double borders */ - background: transparent; - border: none; -} - -.dark .article-header__copy-dropdown { - --glass-bg: rgba(17, 17, 17, 0.72); - --glass-border-color: rgba(255, 255, 255, 0.18); - --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .article-header__actions { - gap: 0.5rem; - } - - .article-header__copy-text { - display: none; - } - - .article-header__copy-dropdown { - width: 12rem; - right: -2rem; - } -} - -/* Metadata Toggle Button */ -.article-header__metadata-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-radius: 0.625rem; - background: var(--color-brand); - color: var(--color-text-inverse); - border: none; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), - transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); - font-family: var(--font-brand); -} - -.article-header__metadata-toggle:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.2) 0%, - transparent 50%, - rgba(255, 255, 255, 0.1) 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -.article-header__metadata-toggle:hover { - background: var(--color-brand-1); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.4); -} - -.article-header__metadata-toggle:hover:before { - opacity: 1; -} - -.article-header__metadata-toggle:focus { - outline: 2px solid rgba(var(--color-brand-rgb), 0.5); - outline-offset: 2px; -} - -.article-header__metadata-toggle:active { - transform: translateY(0); -} - -.article-header__toggle-text { - white-space: nowrap; -} - -.article-header__toggle-icon { - width: 1rem; - height: 1rem; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Rotate icon when expanded */ -.article-header__metadata-toggle[aria-expanded="true"] .article-header__toggle-icon { - transform: rotate(180deg); -} - -/* Metadata Panel */ -.article-header__metadata-panel { - max-height: 0; - overflow: hidden; - margin-top: 1rem; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - opacity: 0; - transform: translateY(-10px); -} - -.article-header__metadata-panel[aria-hidden="false"] { - max-height: 200px; /* More reasonable max height for metadata */ - opacity: 1; - transform: translateY(0); -} - -/* Enhanced UX styles for horizontal metadata flow within article header */ -.article-header__metadata-panel .metadata { - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.75rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - margin-top: 0.75rem; -} - -.article-header__metadata-panel .metadata__flow { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0.75rem; - padding: 1rem 1.25rem; -} - -.article-header__metadata-panel .metadata__item { - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 0.5rem; - padding: 0.5rem 0.75rem; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - color: var(--color-text-secondary); - position: relative; - overflow: hidden; - font-size: 0.875rem; - line-height: 1.4; - font-weight: 400; - white-space: nowrap; -} - -.article-header__metadata-panel .metadata__item:before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -.article-header__metadata-panel .metadata__item:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); - padding-left: calc(0.75rem + 2px); - border-left: 2px solid var(--color-brand); -} - -.article-header__metadata-panel .metadata__item:hover:before { - opacity: 1; -} - -/* Secondary metadata items (like last modified) */ -.article-header__metadata-panel .metadata__item--secondary { - color: var(--color-text-tertiary); - font-size: 0.8125rem; -} - -.article-header__metadata-panel .metadata__item--secondary:hover { - color: var(--color-text-secondary); -} - -/* Metadata separators removed - clean horizontal flow */ - -/* Override global SVG styles for metadata icons - very specific targeting */ -.article-header__metadata-panel .metadata .metadata__icon, -.article-header__metadata-panel .metadata__icon, -.article-header__metadata-panel svg { - height: 1.25rem !important; - width: 1.25rem !important; - max-height: 1.25rem !important; - max-width: 1.25rem !important; - min-height: 1.25rem !important; - min-width: 1.25rem !important; - flex-shrink: 0 !important; - display: inline-block !important; -} - -/* Mobile responsive styles */ -@media (max-width: 768px) { - .article-header__metadata-panel .metadata__flow { - padding: 0.75rem 1rem; - gap: 0.5rem; - flex-direction: column; - align-items: flex-start; - } - - .article-header__metadata-panel .metadata__item { - font-size: 0.8125rem; - padding: 0.375rem 0.5rem; - width: 100%; - } - - /* Separators removed - no longer needed */ - - .article-header__metadata-panel .metadata .metadata__icon, - .article-header__metadata-panel .metadata__icon, - .article-header__metadata-panel svg { - height: 1rem !important; - width: 1rem !important; - max-height: 1rem !important; - max-width: 1rem !important; - min-height: 1rem !important; - min-width: 1rem !important; - } -} - -/* Additional responsive styles for navigation */ -@media (max-width: 768px) { - .article-header__navigation { - flex-direction: column; - gap: 1rem; - align-items: stretch; - } - - .article-header__metadata-toggle { - justify-content: center; - width: 100%; - } -} - -/* Loading State */ -.article-header.loading .article-header__metadata-toggle { - pointer-events: none; - opacity: 0.7; -} - -.article-header.loading .article-header__toggle-icon { - animation: spin 1s linear infinite; -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -/* Focus states for accessibility */ -.article-header__metadata-toggle:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.625rem; -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .article-header__navigation { - border-width: 2px; - } - - .article-header__metadata-toggle { - border: 2px solid var(--color-brand); - } -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .article-header__metadata-panel, - .article-header__toggle-icon { - transition: none; - } - - .article-header__navigation:hover { - transform: none; - } -} - -/* Fix stacking context issues when dropdown is open */ -body:has(.article-header__copy-dropdown:not(.hidden)) h1[id] { - position: static; -} - -body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { - display: none; -} - -/* :has() Article Header Enhancements */ - -/* Breadcrumb navigation with interactive states */ -.article-header:has(.breadcrumb__current[aria-expanded="true"]) .article-header__navigation { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - var(--color-surface) 100% - ); - border-color: rgba(var(--color-brand-rgb), 0.2); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.08), - 0 0 0 1px rgba(var(--color-brand-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -/* Enhanced metadata panel visibility */ -.article-header:has(.article-header__metadata-panel[aria-hidden="false"]) { - margin-bottom: 2.5rem; -} \ No newline at end of file diff --git a/assets/css/components/article/page-resources.css b/assets/css/components/article/page-resources.css deleted file mode 100644 index 01ceb175..00000000 --- a/assets/css/components/article/page-resources.css +++ /dev/null @@ -1,8 +0,0 @@ -/* Page Resources component minor rules */ - -/* Hide resources block in print to reduce clutter */ -@media print { - [data-component="article-page-resources"] { display: none; } -} - - diff --git a/assets/css/components/article/related-content.css b/assets/css/components/article/related-content.css deleted file mode 100644 index b4478d24..00000000 --- a/assets/css/components/article/related-content.css +++ /dev/null @@ -1,332 +0,0 @@ -/* Related Content component styles migrated from page-enhancements.css */ - -.related-content { - position: relative; - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - padding: 1.25rem; - transition: background-color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - box-shadow: var(--glass-shadow); -} - -.related-content__header { - border-bottom: 1px solid var(--glass-border-color); - padding-bottom: 0.75rem; - margin-bottom: 1rem; -} - -.related-content__header h2 { - margin: 0; - color: var(--color-text-primary); - font-weight: 600; -} - -/* View Toggle Buttons */ -.related-content__view-toggle { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - border-radius: 0.5rem; - background-color: var(--color-surface); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-primary); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - cursor: pointer; - min-width: 2.25rem; - min-height: 2.25rem; -} - -.related-content__view-toggle:hover { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); - border-color: var(--color-border-secondary); - transform: translateY(-1px); -} - -.related-content__view-toggle.active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-color: var(--color-brand); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); -} - -.related-content__view-toggle:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -.related-content__collapse-toggle { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - border-radius: 0.5rem; - background-color: var(--color-surface); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-primary); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - cursor: pointer; - min-width: 2.25rem; - min-height: 2.25rem; -} - -.related-content__collapse-toggle:hover { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); - border-color: var(--color-border-secondary); - transform: translateY(-1px); -} - -.related-content__collapse-toggle[data-collapsed="true"] svg { - transform: rotate(180deg); -} - -.related-content__collapse-toggle:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -.related-content__container[data-collapsed="true"] { - display: none; -} - -/* Compact View Styles */ -.related-content__view--compact .related-content__item { - position: relative; - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - border-radius: 0.5rem; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; - box-shadow: var(--glass-shadow); -} - -.related-content__view--compact .related-content__item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -.related-content__view--compact .related-content__item:hover { - border-color: rgba(var(--color-brand-rgb), 0.45); - background: var(--color-surface-hover); - transform: translateY(-1px); - box-shadow: var(--elevation-2); -} - -.related-content__view--compact .related-content__item:hover::before { - opacity: 1; -} - -.related-content__view--compact .related-content__item a { - position: relative; - z-index: 1; - text-decoration: none; - color: inherit; -} - -.related-content__view--compact .related-content__item a:hover { - text-decoration: none; -} - -.related-content__view--compact .related-content__item .font-medium { - color: var(--color-text-primary); - transition: color 0.2s ease; -} - -.related-content__view--compact .related-content__item:hover .font-medium { - color: var(--color-brand); -} - -/* Enhanced Card View Styles */ -.related-content__card { - position: relative; - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; - box-shadow: var(--glass-shadow); -} - -.related-content__card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.03) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.related-content__card:hover { - transform: translateY(-3px); - border-color: rgba(var(--color-brand-rgb), 0.45); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), var(--elevation-brand-subtle); -} - -.related-content__card:hover::before { - opacity: 1; -} - -.related-content__card:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: translateY(-2px); -} - -.related-content__card a { - position: relative; - z-index: 1; - text-decoration: none; - color: inherit; - display: block; -} - -.related-content__card a:hover { - text-decoration: none; -} - -.related-content__card .text-base { - color: var(--color-text-primary); - transition: color 0.2s ease; -} - -.related-content__card:hover .text-base { - color: var(--color-brand); -} - -.related-content__card .text-gray-600 { - color: var(--color-text-secondary); -} - -.related-content__card .text-gray-500 { - color: var(--color-text-tertiary); -} - -/* Dark mode enhancements */ -.dark .related-content { - border-color: var(--color-border-secondary); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .related-content__view-toggle, -.dark .related-content__collapse-toggle { - border-color: var(--color-border-secondary); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .related-content__view-toggle:hover, -.dark .related-content__collapse-toggle:hover { - border-color: var(--color-border-primary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.dark .compact-view .compact-item { - border-color: var(--color-border-secondary); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); -} - -.dark .compact-view .compact-item:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.dark .resource-card-compact { - border-color: var(--color-border-secondary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .resource-card-compact:hover { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--color-brand-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -/* Improved responsive behavior */ -@media (max-width: 768px) { - .related-content { - padding: 1rem; - margin-top: 1.5rem; - } - - .related-header { - flex-direction: column; - gap: 0.75rem; - align-items: flex-start; - } - - .related-content__view--compact .related-content__item { - padding: 0.75rem; - } - - .related-content__view--compact .related-content__item time { - display: none; - } - - .related-content__card { - padding: 1rem; - } - - .related-content__view--cards .grid { - grid-template-columns: 1fr; - } - - .related-content__view--compact .related-content__item:hover, - .related-content__card:hover { - transform: translateY(-1px); - } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .related-content { border-width: 2px; } - .related-content__view-toggle, .related-content__collapse-toggle { border-width: 2px; } - .related-content__view--compact .related-content__item { border-width: 2px; } - .related-content__card { border-width: 2px; } -} - -/* Animation for view transitions */ -.related-content__view--compact, .related-content__view--cards { - animation: fadeIn 0.3s ease-in-out; -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } -} - -/* Print styles */ -@media print { - .related-content { display: none; } -} - - diff --git a/assets/css/components/breadcrumbs.css b/assets/css/components/breadcrumbs.css deleted file mode 100644 index dbb47d0f..00000000 --- a/assets/css/components/breadcrumbs.css +++ /dev/null @@ -1,308 +0,0 @@ -/* Breadcrumbs Navigation Component - Pure navigation styling */ - -.breadcrumb { - flex: 1; - min-width: 0; -} - -.breadcrumb__list { - display: flex; - flex-wrap: wrap; - align-items: center; - font-size: 0.875rem; - line-height: 1.25rem; - margin: 0; - padding: 0; - list-style: none; -} - -.breadcrumb__item { - display: flex; - align-items: center; -} - -.breadcrumb__link { - position: relative; - display: inline-flex; - align-items: center; - border-radius: var(--radius-lg); - /* padding: 0.5rem 0.75rem; */ - padding: 0.25rem 0.5rem; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - background-color: transparent; - color: var(--color-text-secondary); - text-decoration: none; - font-weight: 500; - overflow: hidden; -} - -.breadcrumb__link:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.03) 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -.breadcrumb__link:hover { - color: var(--color-brand); - /* background-color: var(--color-surface-hover); */ - /* transform: var(--transform-lift-subtle); */ - /* box-shadow: var(--elevation-4); */ -} - -.breadcrumb__link:hover:before { - opacity: 1; -} - -.breadcrumb__link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - color: var(--color-brand); - background-color: var(--color-surface-hover); - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); /* Enhanced double focus ring */ -} - -.breadcrumb__separator { - margin-left: 0.75rem; - margin-right: 0.75rem; - font-size: 1.125rem; - line-height: 1.75rem; - color: var(--color-text-tertiary); - transition: - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - font-weight: 300; -} - -.breadcrumb:hover .breadcrumb__separator { - color: var(--color-brand); - transform: scale(1.1); -} - -.breadcrumb__current { - display: inline-flex; - align-items: center; - border-radius: var(--radius-lg); - /* padding: 0.5rem 0.75rem; */ - padding: 0.25rem 0.5rem; - font-weight: 600; - /* background-color: var(--color-brand); */ - /* color: var(--color-text-inverse); */ - background: var(--glass-bg); - color: var(--color-text-primary); - border: 1px solid var(--glass-border-color); - position: relative; - overflow: hidden; -} - -/* Clickable current breadcrumb for metadata toggle */ -.breadcrumb__current--clickable { - cursor: pointer; - transition: color 0.2s ease, background-color 0.2s ease; - border: none; - gap: 0.5rem; - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -.breadcrumb__current--clickable:hover { - background-color: var(--color-surface-hover); -} - -.breadcrumb__current--clickable:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: - 0 0 0 2px var(--color-text-inverse), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.5); -} - -.breadcrumb__current--clickable:active { - transform: translateY(0); -} - -.breadcrumb__metadata-icon { - width: 1rem; - height: 1rem; - opacity: 0.8; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.breadcrumb__current--clickable:hover .breadcrumb__metadata-icon { - opacity: 1; - transform: scale(1.1); -} - -.breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { - opacity: 1; - transform: rotate(180deg); -} - -.breadcrumb__current:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.2), - transparent 50%, - rgba(255, 255, 255, 0.1) - ); - pointer-events: none; -} - -/* Entrance Animation */ -.breadcrumb__current, -.breadcrumb__link { - animation: breadcrumb-enter 0.3s ease-out; - animation-fill-mode: both; -} - -@keyframes breadcrumb-enter { - 0% { - opacity: 0; - transform: translateX(-10px); - } - 100% { - opacity: 1; - transform: translateX(0); - } -} - -/* Responsive Design */ -@media (max-width: 768px) { - .breadcrumb__list { - font-size: 0.75rem; - line-height: 1rem; - } - - .breadcrumb__link, - .breadcrumb__current { - padding: 0.375rem 0.5rem; - } - - .breadcrumb__metadata-icon { - width: 0.875rem; - height: 0.875rem; - } - - .breadcrumb__separator { - margin-left: 0.5rem; - margin-right: 0.5rem; - font-size: 1rem; - } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .breadcrumb__link { - border: 1px solid transparent; - } - - .breadcrumb__link:hover, - .breadcrumb__link:focus { - border-color: var(--color-brand); - } - - .breadcrumb__current { - border: 2px solid var(--color-brand); - } - - .breadcrumb__current--clickable:hover, - .breadcrumb__current--clickable:focus { - border: 2px solid var(--color-text-inverse); - } -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .breadcrumb__link, - .breadcrumb__separator, - .breadcrumb__current--clickable, - .breadcrumb__metadata-icon { - transition: none; - } - - .breadcrumb__current, - .breadcrumb__link { - animation: none; - } - - .breadcrumb__link:hover, - .breadcrumb__current--clickable:hover { - transform: none; - } - - .breadcrumb:hover .breadcrumb__separator { - transform: none; - } - - .breadcrumb__current--clickable:hover .breadcrumb__metadata-icon, - .breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { - transform: none; - } -} - -/* ========================================================================== - :has() Breadcrumb Component Enhancements - ========================================================================== */ - -/* Breadcrumb container awareness of metadata panel state */ -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 100% - ); - border-radius: var(--radius-lg); - margin: -0.25rem; - padding: 0.25rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Enhanced separator styling when metadata is expanded */ -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__separator { - color: var(--color-brand); - transform: scale(1.2); -} - -/* Interactive breadcrumb links when metadata is open */ -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link { - background-color: rgba(var(--color-brand-rgb), 0.05); - border-radius: 0.375rem; -} - -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link:hover { - background-color: rgba(var(--color-brand-rgb), 0.15); - transform: var(--transform-lift-medium); - box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.2); -} - -/* Hover context awareness */ -.breadcrumb:has(.breadcrumb__link:hover) { - background: rgba(var(--color-surface), 0.5); - border-radius: var(--radius-lg); - transition: all 0.2s ease; -} - -.breadcrumb:has(.breadcrumb__link:hover) .breadcrumb__current { - transform: scale(1.02); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); -} \ No newline at end of file diff --git a/assets/css/components/buttons.css b/assets/css/components/buttons.css deleted file mode 100644 index 9cdb5b6c..00000000 --- a/assets/css/components/buttons.css +++ /dev/null @@ -1,328 +0,0 @@ -/* Buttons Component - Enhanced button system with NVIDIA styling */ - -/* Enhanced Button System */ -.btn { - @apply inline-flex items-center justify-center px-4 py-2 - font-medium focus:outline-none focus:ring-2 focus:ring-offset-2; - border-radius: var(--radius-button); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); - min-height: 2.5rem; - text-decoration: none; - cursor: pointer; - position: relative; - overflow: hidden; -} - -.btn:disabled { - @apply opacity-50 cursor-not-allowed; -} - -.btn--primary { - background-color: var(--color-brand); - color: var(--color-text-inverse); - --tw-ring-color: var(--color-brand); -} - -.btn--primary:hover:not(:disabled) { - background-color: var(--color-brand-1); - transform: var(--transform-lift-subtle); - box-shadow: var(--elevation-hover-2); -} - -.btn--secondary { - background-color: var(--color-surface); - color: var(--color-text-primary); - border: 1px solid var(--color-border-primary); - --tw-ring-color: var(--color-brand); -} - -.btn--secondary:hover:not(:disabled) { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - transform: var(--transform-lift-subtle); -} - -.btn--ghost { - background-color: transparent; - color: var(--color-text-secondary); - --tw-ring-color: var(--color-brand); -} - -.btn--ghost:hover:not(:disabled) { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); -} - -.btn--danger { - background-color: var(--color-brand-7); - color: var(--color-text-inverse); - --tw-ring-color: var(--color-brand-7); -} - -.btn--danger:hover:not(:disabled) { - /* background-color: #dc2626; */ - background-color: var(--feedback-error); - transform: var(--transform-lift-subtle); -} - -.btn--sm { - /* @apply px-3 py-1 text-sm; */ - @apply text-sm; - min-height: 2rem; - min-width: 2rem; - padding: 0.375rem 0.5rem; /* tighter, more square */ -} - -.btn--lg { - @apply px-6 py-3 text-lg; - min-height: 3rem; -} - -.btn__icon { - /* @apply w-4 h-4 mr-2; */ - width: 1rem; - height: 1rem; - margin-right: 0.375rem; - display: inline-block; - vertical-align: middle; -} - -/* Icon-only small buttons: remove right margin for centering */ -.btn--sm .btn__icon:only-child { - margin-right: 0; -} - -.btn__icon--right { - @apply w-4 h-4 ml-2 mr-0; -} - -/* Enhanced loading state */ -.btn--loading { - @apply opacity-75 cursor-wait; -} - -.btn--loading::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 1rem; - height: 1rem; - margin: -0.5rem 0 0 -0.5rem; - border: 2px solid transparent; - border-top-color: currentColor; - border-radius: 50%; - animation: spin 1s linear infinite; -} - -/* Topbar Button Component */ -.topbar__button { - position: relative; - padding: 0.5rem; - border-radius: var(--radius-lg); - min-width: 2.25rem; - min-height: 2.25rem; - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -} - -.topbar__button::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at center, rgba(var(--color-brand-rgb), 0.1) 0%, transparent 70%); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.topbar__button:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-hover-2); -} - -.topbar__button:hover::before { - opacity: 1; -} - -.topbar__button:active { - transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-1); -} - -.topbar__button img { - width: 1.125rem; - height: 1.125rem; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); - flex-shrink: 0; -} - -.topbar__button:hover img { - filter: brightness(1); - transform: scale(1.1); -} - -/* Legacy toggle-btn support for backward compatibility */ -.toggle-btn { - position: relative; - padding: 0.5rem; - border-radius: var(--radius-lg); - min-width: 2.25rem; - min-height: 2.25rem; - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - --tw-ring-color: var(--color-brand); -} - -.toggle-btn:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand); -} - -.toggle-btn::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient( - circle at center, - rgba(var(--color-brand-rgb), 0.1) 0%, - transparent 70% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.toggle-btn:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-hover-2); -} - -.toggle-btn:hover::before { - opacity: 1; -} - -.toggle-btn:active { - transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-1); -} - -.toggle-btn--active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-color: var(--color-brand); -} - -.toggle-btn--active:hover { - background-color: var(--color-brand-1); - color: var(--color-text-inverse); -} - -.toggle-btn img { - width: 1.125rem !important; /* Properly sized icons */ - height: 1.125rem !important; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); - flex-shrink: 0; /* Prevent icon compression */ -} - -.toggle-btn:hover img { - filter: brightness(1); - transform: scale(1.1); -} - -.toggle-btn--active img { - filter: brightness(1) invert(1); -} - -/* Button Ripple Effects */ -.ripple { - position: absolute !important; - border-radius: 50%; - background: rgba(255, 255, 255, 0.3); - transform: scale(0); - /* ✅ FIXED: Use animation tokens for ripple effect */ - animation: ripple-animation var(--timing-slow) linear; - pointer-events: none; - z-index: 1; - /* Ensure it doesn't affect layout */ - top: 0; - left: 0; - width: 0; - height: 0; -} - -.dark .ripple { - background: rgba(255, 255, 255, 0.2); -} - -/* ✅ KEYFRAME: Ripple animation using animation tokens */ -@keyframes ripple-animation { - to { - transform: scale(4); - opacity: var(--opacity-hidden); - } -} - -/* Ensure buttons have proper positioning for ripple containment */ -button, .btn { - position: relative; - overflow: hidden; -} \ No newline at end of file diff --git a/assets/css/components/cards.css b/assets/css/components/cards.css deleted file mode 100644 index 2ea873f7..00000000 --- a/assets/css/components/cards.css +++ /dev/null @@ -1,398 +0,0 @@ -/* Cards Component - Resource cards, content metadata, and generic card styles */ - -/* Base Card Styles */ -.card { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); -} - -.card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -/* Enhanced hover states - Use architectural classes instead */ -.card { - /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ -} - -.card:hover::before { - opacity: 1; -} - -/* Resource Card Styles */ -.card--resource { - @apply card; - /* padding: 1.5rem; */ - padding: 1rem; - margin-bottom: 1rem; -} - -.card--resource h3 { - color: var(--color-text-primary); - font-weight: 600; - font-size: 1.125rem; - line-height: 1.3; - margin-bottom: 0.75rem; - transition: color 0.2s ease; -} - -.card--resource:hover h3 { - color: var(--color-brand); -} - -.card--resource p { - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.875rem; - margin-bottom: 1rem; -} - -.card--resource a { - color: var(--color-brand); - text-decoration: none; - font-weight: 500; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - position: relative; -} - -.card--resource a::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: var(--color-brand); - /* transition: width 0.3s ease; */ - transition: width var(--timing-medium) var(--easing-standard); -} - -.card--resource a:hover::after { - width: 100%; -} - -.card--resource .icon { - width: 1.5rem; - height: 1.5rem; - margin-bottom: 0.75rem; - filter: brightness(0.8); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.card--resource:hover .icon { - filter: brightness(1); - transform: scale(1.05); -} - -/* Content Metadata Styles */ -.content-metadata { - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - padding: 1rem 1.25rem; - font-size: 0.875rem; - color: var(--color-text-secondary); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; -} - -.content-metadata:hover { - border-color: var(--color-brand); - color: var(--color-text-primary); -} - -.content-metadata .icon { - width: 1rem; - height: 1rem; - flex-shrink: 0; - opacity: 0.7; - transition: opacity 0.2s ease; -} - -.content-metadata:hover .icon { - opacity: 1; -} - -.content-metadata time, -.content-metadata span { - white-space: nowrap; -} - -/* Article Card Styles */ -.article-card { - @apply card; - padding: 1.5rem; - margin-bottom: 1.5rem; - display: flex; - flex-direction: column; - height: 100%; -} - -.article-card .card-header { - display: flex; - align-items: flex-start; - gap: 1rem; - margin-bottom: 1rem; -} - -.article-card .card-icon { - width: 2rem; - height: 2rem; - flex-shrink: 0; - filter: brightness(0.8); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.article-card:hover .card-icon { - filter: brightness(1); - transform: scale(1.05); -} - -.article-card .card-title { - color: var(--color-text-primary); - font-weight: 600; - font-size: 1.125rem; - line-height: 1.3; - margin: 0; - transition: color 0.2s ease; -} - -.article-card:hover .card-title { - color: var(--color-brand); -} - -.article-card .card-description { - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.875rem; - margin-bottom: 1rem; - flex: 1; -} - -.article-card .card-meta { - color: var(--color-text-tertiary); - font-size: 0.75rem; - display: flex; - align-items: center; - gap: 0.5rem; - margin-top: auto; - padding-top: 1rem; - border-top: 1px solid var(--color-border-primary); -} - -/* Interactive Card States */ -.card-interactive { - cursor: pointer; - user-select: none; -} - -.card-interactive:active { - transform: var(--transform-press-down); -} - -/* Focus states for accessibility */ -.card:focus-within, -.resource-card:focus-within, -.article-card:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .resource-card, - .article-card { - padding: 1rem; - margin-bottom: 1rem; - } - - .card:hover, - .resource-card:hover, - .article-card:hover { - transform: var(--transform-lift-medium); - } - - .content-metadata { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} - -/* Dark mode enhancements */ -.dark .card, -.dark .resource-card, -.dark .content-metadata, -.dark .article-card { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .card:hover, -.dark .resource-card:hover, -.dark .article-card:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -/* Animation improvements */ -.card, -.resource-card, -.article-card { - animation: card-enter 0.4s ease-out; - animation-fill-mode: both; -} - -@keyframes card-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Card grid layouts */ -.card-grid { - display: grid; - gap: 1.5rem; -} - -.card-grid .card, -.card-grid .resource-card, -.card-grid .article-card { - height: 100%; - display: flex; - flex-direction: column; -} - -/* Stagger animation for card grids */ -.card-grid .card:nth-child(1), -.card-grid .resource-card:nth-child(1), -.card-grid .article-card:nth-child(1) { animation-delay: 0s; } -.card-grid .card:nth-child(2), -.card-grid .resource-card:nth-child(2), -.card-grid .article-card:nth-child(2) { animation-delay: 0.1s; } -.card-grid .card:nth-child(3), -.card-grid .resource-card:nth-child(3), -.card-grid .article-card:nth-child(3) { animation-delay: 0.2s; } -.card-grid .card:nth-child(4), -.card-grid .resource-card:nth-child(4), -.card-grid .article-card:nth-child(4) { animation-delay: 0.3s; } - -/* :has() Content-Aware Card Layouts */ - -/* Cards with images get different padding */ -.card:has(.card__image) { - padding-top: 0; -} - -.card:has(.card__image) .card__content { - padding-top: 1.5rem; -} - -/* Cards with icons get enhanced layout */ -.card:has(.card__icon) .card__title { - margin-left: 3rem; - position: relative; -} - -.card:has(.card__icon) .card__content { - padding-left: 1rem; -} - -/* Resource cards with descriptions get enhanced spacing */ -.card--resource:has(.card__description) { - min-height: 180px; -} - -.card--resource:has(.card__description) .card__footer { - margin-top: auto; - border-top: 1px solid var(--color-border-primary); - padding-top: 1rem; -} - -/* Cards with actions get enhanced bottom padding */ -.card:has(.card__actions) { - padding-bottom: 1rem; -} - -.card:has(.card__actions) .card__content { - padding-bottom: 2rem; -} - -/* Interactive card states based on content */ -.card:has(a:hover) { - transform: var(--transform-lift-and-scale); - /* box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.12), - 0 4px 16px rgba(0, 0, 0, 0.08); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); - border-color: rgba(var(--color-brand-rgb), 0.3); -} \ No newline at end of file diff --git a/assets/css/components/chat.css b/assets/css/components/chat.css deleted file mode 100644 index af4dacd6..00000000 --- a/assets/css/components/chat.css +++ /dev/null @@ -1,534 +0,0 @@ -/* Chat Component - Enhanced chat interface with premium styling */ - -/* Chat Header */ -.chat__header { - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-radius: 0.75rem 0.75rem 0 0; /* Top corners rounded to match design system */ -} - -/* Chat header icon styling for proper dark mode */ -.chat__header-icon { - filter: brightness(0) saturate(100%) invert(42%) sepia(15%) saturate(566%) hue-rotate(202deg) brightness(96%) contrast(87%); -} - -.dark .chat__header-icon { - filter: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(593%) hue-rotate(202deg) brightness(91%) contrast(92%); -} - -/* Danger button variant for delete action */ -.topbar__button--danger:hover { - background-color: rgba(239, 68, 68, 0.1) !important; - border-color: rgb(239, 68, 68) !important; - color: rgb(239, 68, 68) !important; -} - -.topbar__button--danger:hover img { - filter: brightness(0) saturate(100%) invert(35%) sepia(96%) saturate(2067%) hue-rotate(346deg) brightness(89%) contrast(94%) !important; -} - -/* Chat Container - Clean transparent design */ -#chatContainer { - background: transparent; - border: none; - box-shadow: none; - border-radius: 0.75rem; /* Add consistent border radius */ - /* margin-right: 1.5rem; Align with page container padding */ - /* Replaced: remove right margin on wide screens to avoid pinching */ - margin-top: 1rem; /* Match the pageContainer's top padding to align with content start */ -} - -/* On xl+, let chat use full sidebar column width */ -@screen xl { - #chatContainer { - margin-right: 0; - } -} - -/* Enhanced Chat Interface - Clean transparent design */ -.chat__controls { - background: transparent; - border: none; - border-radius: 0 0 0.75rem 0.75rem; /* Bottom corners rounded to match container */ -} - -.chat__form { - @apply w-full; -} - -.chat__input { - @apply focus:outline-none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - border-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard); - font-family: var(--font-brand); - line-height: 1.4; -} - -.chat__input:hover { - border-color: var(--color-brand); - box-shadow: var(--elevation-4); -} - -.chat__input:focus { - border-color: var(--color-brand); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.1), - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1); -} - -/* Old styling moved to enhanced section below */ - -/* Smooth transitions for chat container */ -#chatContainer { - /* ✅ FIXED: Use animation tokens for consistent timing */ - /* transition (was medium for all) */ - transition: - width var(--timing-medium) var(--easing-smooth), - max-width var(--timing-medium) var(--easing-smooth), - /* slower transform and shadow for more graceful feel */ - box-shadow var(--timing-slow) var(--easing-smooth), - transform var(--timing-slow) var(--easing-smooth), - border-radius var(--timing-slow) var(--easing-standard), - /* include background/border transitions for softer state change */ - background-color var(--timing-medium) var(--easing-smooth), - border-color var(--timing-medium) var(--easing-smooth), - backdrop-filter var(--timing-medium) var(--easing-smooth); - transform-origin: top right; - will-change: width, transform, box-shadow; -} - -/* Expanded Chat State - Enhanced Liquid Glass */ -.chat-expanded { - /* Lighter translucent surface */ - background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border: 1px solid var(--glass-border-color); - border-left-width: 3px; - /* box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08), 0 8px 28px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.18); */ - box-shadow: var(--glass-shadow); - transform: translateY(-2px); - overflow: visible; - display: flex; - flex-direction: column; -} - -/* Dark theme tuning: slightly lighter sheet */ -.dark .chat-expanded { - background: var(--glass-bg); - border-color: var(--glass-border-color); -} - -/* Ensure messages area scrolls within viewport when expanded */ -.chat-expanded #chat-messages { - flex: 1 1 auto; - min-height: 0; /* required for flex children to allow overflow */ - overflow-y: auto; - max-height: none; /* use container max-height instead */ -} - -/* Modal overlay for expanded chat */ -.chat-overlay { - position: fixed; - inset: 0; - background: rgba(0,0,0,0.22); - opacity: 0; - transition: opacity var(--timing-medium) var(--easing-smooth); - z-index: 50; /* below chat container (which uses 60) */ -} - -.chat-overlay.visible { - opacity: 1; -} - -/* Enhanced input styling for expanded state */ -.chat-expanded .chat__input { - @apply text-base; - font-size: 15px; /* Slightly larger for better UX */ - line-height: 1.5; -} - -/* Micro-interaction for expand button */ -.chat__header button { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard); -} - -.chat__header button:hover { - transform: scale(1.1); - background-color: var(--color-surface-hover); -} - -.chat__header button:active { - transform: scale(0.95); -} - -/* Enhanced focus states */ -.chat-expanded .chat__input:focus { - box-shadow: - 0 0 0 3px rgba(var(--color-brand-rgb), 0.12), - 0 4px 20px rgba(0, 0, 0, 0.1); - border-color: var(--color-brand); -} - -/* Subtle animation for chat messages in expanded state */ -.chat-expanded .chat__messages { - /* ✅ FIXED: Use animation tokens */ - animation: subtle-fade-in var(--timing-medium) var(--easing-standard) var(--reveal-stagger-delay) both; -} - -@keyframes subtle-fade-in { - from { - opacity: 0.8; - transform: translateY(4px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Liquid Glass Hover Effect */ -#chatContainer:not(.chat-expanded):hover { - background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-color: var(--glass-border-color); - /* transform: translateX(-1px); */ - box-shadow: var(--glass-shadow); -} - -/* Auto-resize textarea styling with liquid glass focus */ -.chat-input { - overflow-y: hidden; - scrollbar-width: none; - -ms-overflow-style: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} - -.chat-input::-webkit-scrollbar { - display: none; -} - -.chat-input:focus { - background: rgba(255, 255, 255, 0.08) !important; - /* backdrop-filter: blur(12px) !important; */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; - border-color: rgba(255, 255, 255, 0.15) !important; - box-shadow: - 0 0 0 2px rgba(var(--color-brand-rgb), 0.1), - 0 4px 12px rgba(0, 0, 0, 0.06); -} - -/* Enhanced send button styling */ -#sendButton { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -/* :has() Chat Interface Enhancements */ - -/* Chat container responds to input focus (no scale to avoid clipping) */ -#chatContainer:has(.chat__input:focus) { - transform: translateY(-1px); - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.15), - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - border-color: var(--color-brand); - overflow: visible; -} - -/* Match header with lighter sheet while expanded */ -.chat-expanded .chat__header { - background: rgba(255, 255, 255, 0.08) !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.14); -} -.dark .chat-expanded .chat__header { - background: rgba(255, 255, 255, 0.05) !important; - border-bottom-color: rgba(255, 255, 255, 0.12); -} - -/* Enhanced expanded state with input focus */ -.chat-expanded:has(.chat__input:focus) { - border-left-width: 4px; - border-color: var(--color-brand); - background: rgba(255, 255, 255, 0.15); -} - -/* Chat form with content gets enhanced styling */ -#chatContainer:has(.chat__input:not(:placeholder-shown)) .chat__header { - background: linear-gradient(135deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.05) 100%); - border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.2); -} - -/* Send button activation based on input content */ -#chatContainer:has(.chat__input:not(:placeholder-shown)) #sendButton { - background-color: var(--color-brand) !important; - color: var(--color-text-inverse) !important; - transform: scale(1.05); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.3), - 0 2px 8px rgba(0, 0, 0, 0.1); -} - -#sendButton:not(:disabled) { - background-color: var(--color-brand) !important; - color: var(--color-text-inverse) !important; -} - -#sendButton:not(:disabled):hover { - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); - filter: brightness(1.1); -} - -#sendButton:not(:disabled):active { - transform: scale(0.95); - filter: brightness(0.9); -} - -#sendButton:disabled { - background-color: var(--color-bg-secondary) !important; - color: var(--color-text-tertiary) !important; -} - -/* Chat input improvements */ -.chat__input:focus { - box-shadow: - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), - 0 4px 12px rgba(0, 0, 0, 0.1); - border-color: var(--color-brand) !important; -} - -.chat__input::placeholder { - color: var(--color-text-tertiary); -} - -/* Header button hover effects with enhanced micro-interactions */ -.chat__header button:hover svg { - transform: scale(1.15) rotate(2deg); - transition: transform var(--timing-fast) var(--easing-standard); -} - -/* Smooth state transitions for expand button icon */ -.chat__header button svg { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: transform var(--timing-medium) var(--easing-standard); -} - -/* Chat bubble improvements - tighter spacing and better hierarchy */ -.chat-bubble { - @apply p-3 rounded-xl shadow-sm relative max-w-none; /* Reduced padding from p-4 to p-3 */ - word-wrap: break-word; - word-break: break-word; - overflow-wrap: break-word; - hyphens: auto; - white-space: pre-wrap; - line-height: 1.5; /* Slightly tighter line height */ - font-family: var(--font-brand); - border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent rounded corners with tail */ -} - -.chat-bubble--user { - @apply ml-6; /* Reduced margin */ - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-radius: 1rem 1rem 0.25rem 1rem; /* User tail on right */ - box-shadow: var(--elevation-4); -} - -.chat-bubble--bot { - @apply mr-6; /* Reduced margin */ - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; /* Bot tail on left */ - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} - -/* Enhanced Chat Messages */ -#chat-messages { - @apply flex flex-col space-y-3 p-4; /* Tighter spacing */ - max-height: calc(100vh - 12rem); - overflow-y: auto; - scroll-behavior: smooth; -} - -.chat-bubble--error { - @apply mr-6; /* Consistent with other bubbles */ - background: linear-gradient( - 135deg, - rgba(239, 68, 68, 0.1) 0%, - rgba(239, 68, 68, 0.05) 100% - ); - border: 1px solid rgba(239, 68, 68, 0.2); - color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent tail */ -} - -/* Chat message formatting */ -.chat-bubble p { - @apply mb-3 last:mb-0; - word-wrap: break-word; - overflow-wrap: break-word; -} - -.chat-bubble code { - @apply px-2 py-1 rounded text-sm; - background-color: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; - word-break: break-all; -} - -.chat-bubble pre { - @apply p-3 rounded-lg overflow-x-auto text-sm my-3; - background-color: var(--color-bg-tertiary); - border: 1px solid var(--color-border-primary); -} - -.chat-bubble pre code { - @apply p-0; - background: none; - color: var(--color-text-primary); -} - -/* Chat message animations */ -.chat-bubble { - /* ✅ FIXED: Use animation tokens */ - animation: chat-message-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; -} - -@keyframes chat-message-enter { - from { - opacity: 0; - transform: translateY(10px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Enhanced typing indicator */ -.typing-indicator { - @apply flex items-center space-x-2 p-4 rounded-xl mr-8; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); -} - -.typing-indicator::after { - content: ''; - display: inline-block; - width: 4px; - height: 4px; - border-radius: 50%; - background-color: var(--color-text-secondary); - animation: typing-dot 1.4s infinite; -} - -.typing-indicator::before { - content: ''; - display: inline-block; - width: 4px; - height: 4px; - border-radius: 50%; - background-color: var(--color-text-secondary); - /* ✅ FIXED: Use animation tokens for stagger */ - animation: typing-dot 1.4s infinite var(--reveal-batch-delay); - margin-right: 4px; -} - -@keyframes typing-dot { - 0%, 60%, 100% { - opacity: 0.3; - transform: scale(1); - } - 30% { - opacity: 1; - transform: scale(1.2); - } -} - -/* Chat pair container - tighter spacing */ -.chat-pair { - @apply space-y-3; /* Slightly increased for better breathing room */ - position: relative; - margin-bottom: 1rem; -} - -/* Improved delete button styling aligned with design system */ -.chat-delete { - @apply absolute -top-1 -right-1 w-5 h-5 - rounded-full flex items-center justify-center text-xs - opacity-0 group-hover:opacity-100 - focus:outline-none focus:ring-2 focus:ring-offset-1; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - opacity var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - font-size: 0.75rem; - line-height: 1; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - /* backdrop-filter: blur(8px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -} - -.chat-delete:hover { - background-color: rgba(239, 68, 68, 0.1); - border-color: rgb(239, 68, 68); - color: rgb(239, 68, 68); - transform: scale(1.1); - box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2); -} - -.chat-delete:active { - transform: scale(0.95); - /* ✅ FIXED: Use animation tokens */ - animation: delete-shake var(--timing-medium) var(--easing-standard); -} - -.chat-pair:hover .chat-delete { - opacity: 1; -} - -/* Delete shake animation */ -@keyframes delete-shake { - 0%, 100% { transform: scale(0.95) rotate(0deg); } - 25% { transform: scale(0.95) rotate(-2deg); } - 75% { transform: scale(0.95) rotate(2deg); } -} \ No newline at end of file diff --git a/assets/css/components/child-links.css b/assets/css/components/child-links.css deleted file mode 100644 index 95c35f0f..00000000 --- a/assets/css/components/child-links.css +++ /dev/null @@ -1,131 +0,0 @@ -/* Child Links Component - Flexbox layout approach */ - -.child-links-container { - /* Position directly beneath description with consistent spacing */ - margin-top: 0.75rem; - padding-top: 0; -} - -.child-links-list { - display: flex; - flex-wrap: wrap; - list-style: none; - padding: 0; - margin: 0; - gap: 0.5rem; - align-items: flex-start; -} - -.child-link-item { - margin: 0; - padding: 0; -} - -.child-link-pill { - display: inline-block; - font-size: 0.75rem; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - border: 1px solid var(--color-border-primary); - background-color: var(--color-bg-secondary); - color: var(--color-text-secondary); - text-decoration: none; - white-space: nowrap; - line-height: 1.4; -} - -.child-link-pill:hover { - color: var(--color-brand); - border-color: var(--color-brand); - background-color: var(--color-hover); - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.child-link-pill:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -/* Simplest approach: Main link fills most space, child links follow naturally */ -.grid .tile { - display: flex; - flex-direction: column; - position: relative; -} - -.grid .tile > a { - /* Main link fills available space for maximum clickability */ - flex: 1; - display: flex; - flex-direction: column; - margin-bottom: 0.75rem; /* Space for child links */ -} - -.grid .tile .space-y-3 { - display: flex; - flex-direction: column; - height: 100%; -} - -.grid .tile .space-y-3 > p { - /* Description takes only the space it needs */ - flex: 0 0 auto; -} - -/* Child links sit naturally after main content area */ -.grid .tile .child-links-container { - flex: 0 0 auto; - margin-top: 0; - padding-top: 0; -} - -/* Dark mode support */ -.dark .child-link-pill { - border-color: var(--color-border-secondary); - background-color: var(--color-surface); -} - -.dark .child-link-pill:hover { - background-color: var(--color-brand); - color: var(--color-text-inverse); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .child-links-container { - padding-top: 0.5rem; - } - - .child-link-pill { - font-size: 0.7rem; - padding: 0.2rem 0.6rem; - } -} - -/* Animation for child links appearance */ -.child-link-item { - animation: child-link-appear 0.3s ease-out; - animation-fill-mode: both; -} - -.child-link-item:nth-child(1) { animation-delay: 0.1s; } -.child-link-item:nth-child(2) { animation-delay: 0.15s; } -.child-link-item:nth-child(3) { animation-delay: 0.2s; } -.child-link-item:nth-child(4) { animation-delay: 0.25s; } -.child-link-item:nth-child(5) { animation-delay: 0.3s; } -.child-link-item:nth-child(6) { animation-delay: 0.35s; } -.child-link-item:nth-child(7) { animation-delay: 0.4s; } - -@keyframes child-link-appear { - from { - opacity: 0; - transform: translateY(10px) scale(0.9); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} \ No newline at end of file diff --git a/assets/css/components/code.css b/assets/css/components/code.css deleted file mode 100644 index 128fea70..00000000 --- a/assets/css/components/code.css +++ /dev/null @@ -1,96 +0,0 @@ -/* Code Blocks - align with header/tabs glass surface and tokens */ - -.code-block-enhanced { - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); - overflow: hidden; -} - -/* Light mode: strengthen wrapper border for visibility */ -@media (prefers-color-scheme: light) { - .code-block-enhanced { - border-color: var(--color-border-primary); - } -} - -.code-block-enhanced .code-header { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.75rem; - padding: 0.5rem 0.75rem; - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); -} - -/* Light mode: strengthen header divider similar to article header */ -@media (prefers-color-scheme: light) { - .code-block-enhanced .code-header { - border-bottom-color: var(--color-border-primary); - } -} - -.code-block-enhanced .code-language { - color: var(--color-text-secondary); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.04em; - font-size: 0.75rem; -} - -.code-block-enhanced .code-actions .btn { - border-radius: 0.5rem; -} - -.code-block-enhanced .code-actions .btn.btn--ghost { - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); -} - -.code-block-enhanced .code-actions .btn.btn--ghost:hover { - background: var(--color-surface-hover); - color: var(--color-brand); - border-color: rgba(var(--color-brand-rgb), 0.35); -} - -.code-block-enhanced .code-content { - background: transparent; -} - -.code-block-enhanced .code-content .highlight, -.code-block-enhanced .code-content .highlight pre, -.code-block-enhanced .code-content pre, -.code-block-enhanced .code-content code { - background: transparent; -} - -.code-block-enhanced .code-content pre { - margin: 0; - padding: 0.75rem 1rem; -} - -.code-block-enhanced .code-content code { - display: block; -} - -/* Dark mode glow tuning aligns with header action glow */ -@media (prefers-color-scheme: dark) { - .code-block-enhanced { - box-shadow: var(--elevation-4); - } -} - -/* Copy button icon alignment and sizing - Ensure the single SVG icon in the copy button is visually centered and consistent */ -.code-block-enhanced .code-actions .copy-code .btn__icon { - margin-right: 0; /* no trailing space for icon-only buttons */ - width: 1rem; /* enforce square icon */ - height: 1rem; - display: block; /* remove inline alignment quirks */ -} - - diff --git a/assets/css/components/collapse.css b/assets/css/components/collapse.css deleted file mode 100644 index 8025efe5..00000000 --- a/assets/css/components/collapse.css +++ /dev/null @@ -1,461 +0,0 @@ -/* Enhanced Collapse Component - Modern collapsible content with animations */ - -/* ========================================================================== - Base Collapse Component - ========================================================================== */ - -.collapse { - position: relative !important; - margin: 1.5rem 0 !important; - border-radius: 1rem !important; - overflow: hidden !important; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard) !important; - animation: collapse-enter var(--timing-medium) var(--easing-standard) !important; - animation-fill-mode: both !important; - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; - visibility: visible !important; - display: block !important; -} - -.collapse:hover { - transform: translateY(-2px) !important; - box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.12), - 0 0 20px rgba(var(--color-brand-rgb), 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; -} - -/* ========================================================================== - Collapse Header (Trigger) - ========================================================================== */ - -.collapse__header { - position: relative; - cursor: pointer; - padding: 1.25rem 1.5rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - border-color var(--timing-medium) var(--easing-standard), - background var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - display: flex; - align-items: center; - gap: 1rem; - user-select: none; -} - -.collapse__header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity var(--timing-medium) var(--easing-standard); - pointer-events: none; - border-radius: inherit; -} - -.collapse__header:hover::before { - opacity: 1; -} - -.collapse__header:hover { - border-color: var(--color-brand); - background: linear-gradient( - 135deg, - var(--color-surface-hover) 0%, - var(--color-bg-tertiary) 100% - ); -} - -.collapse.expanded .collapse__header { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-bottom-color: transparent; -} - -/* ========================================================================== - Collapse Icon - ========================================================================== */ - -.collapse__icon-wrapper { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - border-radius: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.1); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.collapse__header:hover .collapse__icon-wrapper { - background: rgba(var(--color-brand-rgb), 0.15); - transform: scale(1.05); -} - -.collapse__icon { - width: 1.25rem; - height: 1.25rem; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); - stroke: var(--color-brand); - stroke-width: 2.5; - filter: drop-shadow(0 1px 2px rgba(var(--color-brand-rgb), 0.3)); -} - -.collapse.expanded .collapse__icon { - transform: rotate(90deg); -} - -/* ========================================================================== - Collapse Content - ========================================================================== */ - -.collapse__content-wrapper { - flex: 1; - min-width: 0; -} - -.collapse__title { - margin: 0 0 0.25rem 0; - font-family: var(--font-family-brand); - font-size: 1.125rem; - font-weight: 600; - line-height: 1.4; - color: var(--color-text-primary); - transition: all 0.2s ease; -} - -.collapse__header:hover .collapse__title { - color: var(--color-brand); - transform: translateX(2px); -} - -.collapse__description { - margin: 0; - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - transition: color 0.2s ease; -} - -.collapse__header:hover .collapse__description { - color: var(--color-text-primary); -} - -/* ========================================================================== - Collapse Body (Collapsible Content) - ========================================================================== */ - -.collapse__body { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-top: none; - border-bottom-left-radius: 1rem; - border-bottom-right-radius: 1rem; - - /* Height-based collapse (consistent with all components) */ - max-height: 0; - opacity: 0; - overflow: hidden; - - /* Configure collapse behavior via CSS custom properties */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1.5rem; - /* ✅ FIXED: Use animation tokens */ - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); -} - -/* ✅ MIGRATED: Class-based to data-attribute system */ -.collapse[data-collapse-state="expanded"] .collapse__body, -.collapse.expanded .collapse__body { - border-color: var(--color-brand); -} - -.collapse__body-content { - /* ✅ FIXED: Use animation tokens */ - transition: transform var(--timing-medium) var(--easing-standard); - transform: translateY(-10px); -} - -/* ✅ MIGRATED: Support both class-based and data-attribute systems */ -.collapse[data-collapse-state="expanded"] .collapse__body-content, -.collapse.expanded .collapse__body-content { - transform: translateY(0); -} - -/* Enhanced content styling */ -.collapse__body-content > *:first-child { - margin-top: 0; -} - -.collapse__body-content > *:last-child { - margin-bottom: 0; -} - -.collapse__body-content p { - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1rem; -} - -.collapse__body-content code { - background: rgba(var(--color-brand-rgb), 0.1); - border-radius: 0.375rem; - padding: 0.125rem 0.375rem; - font-size: 0.875rem; - font-family: var(--font-family-mono); - color: var(--color-brand); -} - -.collapse__body-content pre { - background: var(--color-bg-tertiary); - border-radius: 0.5rem; - padding: 1rem; - margin: 1rem 0; - overflow-x: auto; - border: 1px solid var(--color-border-primary); -} - -/* ========================================================================== - Status Variants - ========================================================================== */ - -/* Info variant */ -.collapse--info .collapse__header { - background: linear-gradient( - 135deg, - rgba(59, 130, 246, 0.05) 0%, - rgba(59, 130, 246, 0.02) 100% - ); - border-color: rgba(59, 130, 246, 0.2); -} - -.collapse--info .collapse__icon-wrapper { - background: rgba(59, 130, 246, 0.1); -} - -.collapse--info .collapse__icon { - stroke: #3b82f6; -} - -.collapse--info .collapse__header:hover .collapse__title { - color: #1d4ed8; -} - -/* Warning variant */ -.collapse--warning .collapse__header { - background: linear-gradient( - 135deg, - rgba(245, 158, 11, 0.05) 0%, - rgba(245, 158, 11, 0.02) 100% - ); - border-color: rgba(245, 158, 11, 0.2); -} - -.collapse--warning .collapse__icon-wrapper { - background: rgba(245, 158, 11, 0.1); -} - -.collapse--warning .collapse__icon { - stroke: #f59e0b; -} - -.collapse--warning .collapse__header:hover .collapse__title { - color: #d97706; -} - -/* Danger variant */ -.collapse--danger .collapse__header { - background: linear-gradient( - 135deg, - rgba(239, 68, 68, 0.05) 0%, - rgba(239, 68, 68, 0.02) 100% - ); - border-color: rgba(239, 68, 68, 0.2); -} - -.collapse--danger .collapse__icon-wrapper { - background: rgba(239, 68, 68, 0.1); -} - -.collapse--danger .collapse__icon { - stroke: #ef4444; -} - -.collapse--danger .collapse__header:hover .collapse__title { - color: #dc2626; -} - -/* Success variant */ -.collapse--success .collapse__header { - background: linear-gradient( - 135deg, - rgba(34, 197, 94, 0.05) 0%, - rgba(34, 197, 94, 0.02) 100% - ); - border-color: rgba(34, 197, 94, 0.2); -} - -.collapse--success .collapse__icon-wrapper { - background: rgba(34, 197, 94, 0.1); -} - -.collapse--success .collapse__icon { - stroke: #22c55e; -} - -.collapse--success .collapse__header:hover .collapse__title { - color: #15803d; -} - -/* ========================================================================== - Animations - ========================================================================== */ - -@keyframes collapse-enter { - 0% { - opacity: 0; - transform: translateY(10px) scale(0.98); - } - 100% { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .collapse { - margin: 1rem 0; - border-radius: 0.75rem; - } - - .collapse__header { - padding: 1rem; - border-radius: 0.75rem; - gap: 0.75rem; - } - - .collapse.expanded .collapse__body { - padding: 1rem; - } - - .collapse__title { - font-size: 1rem; - } - - .collapse__description { - font-size: 0.8125rem; - } - - .collapse__icon-wrapper { - width: 1.75rem; - height: 1.75rem; - } - - .collapse__icon { - width: 1rem; - height: 1rem; - } -} - -/* ========================================================================== - Dark Mode Support - ========================================================================== */ - -@media (prefers-color-scheme: dark) { - .collapse__body-content code { - background: rgba(255, 255, 255, 0.1); - } -} - -/* ✅ DATA-ATTRIBUTE INTEGRATION - * ======================================================================= - * Integration with the Universal Component State Management System - * This allows collapse components to work with both class-based legacy - * and modern data-attribute approaches - */ - -/* Data-attribute collapsed state */ -.collapse[data-collapse-state="collapsed"] .collapse__body, -.collapse__body[data-collapse-state="collapsed"] { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - padding: var(--collapse-padding-collapsed); - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing), - padding var(--collapse-timing) var(--collapse-easing); -} - -/* Data-attribute transitioning state */ -.collapse[data-collapse-state="transitioning"] .collapse__body { - overflow: hidden; /* Prevent content spillage during animation */ - pointer-events: none; /* Prevent interaction during transition */ -} - -/* Data-attribute expanded state */ -.collapse[data-collapse-state="expanded"] .collapse__body, -.collapse__body[data-collapse-state="expanded"] { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - overflow: var(--collapse-overflow-expanded); - padding: var(--collapse-padding-expanded); - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing), - padding var(--collapse-timing) var(--collapse-easing); -} - -/* Icon rotation for data-attribute system */ -.collapse[data-collapse-state="expanded"] .collapse__icon { - transform: rotate(180deg); -} - -/* Enhanced accessibility for data-attribute system */ -.collapse[data-collapse-state] .collapse__header { - /* Ensure proper ARIA attributes are communicated visually */ -} - -.collapse[data-collapse-state="expanded"] .collapse__header[aria-expanded="true"] { - /* Visual confirmation of expanded state */ - border-color: var(--color-brand); -} - -/* Migration helper - components can use either system */ -.collapse:not([data-collapse-state]) { - /* Legacy class-based system continues to work */ -} \ No newline at end of file diff --git a/assets/css/components/glossary.css b/assets/css/components/glossary.css deleted file mode 100644 index a9dcfe53..00000000 --- a/assets/css/components/glossary.css +++ /dev/null @@ -1,278 +0,0 @@ -/* Glossary Component - Enhanced UX for glossary entries and navigation */ - -/* Base Glossary Entry Styles */ -.glossary-entry { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-xl); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - margin-bottom: 1rem; -} - -.glossary-entry::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -/* Enhanced hover states */ -.glossary-entry:hover { - border-color: var(--color-brand); - /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ -} - -.glossary-entry:hover::before { - opacity: 1; -} - -/* Focus states for accessibility */ -.glossary-entry:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: translateY(-2px); -} - -/* Glossary entry content */ -.glossary-entry a { - display: block; - color: inherit; - text-decoration: none; - width: 100%; - position: relative; - z-index: 2; -} - -.glossary-entry h2 { - color: var(--color-text-primary); - font-weight: 700; - font-size: 1.25rem; - line-height: 1.3; - margin-bottom: 0.5rem; - transition: color 0.2s ease; - position: relative; -} - -.glossary-entry:hover h2 { - color: var(--color-brand); -} - -.glossary-entry h2::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: linear-gradient( - 90deg, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.5) 100% - ); - transition: width 0.3s ease; -} - -.glossary-entry:hover h2::after { - width: 100%; -} - -/* Glossary entry descriptions */ -.glossary-entry p { - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.95rem; - margin: 0; - transition: color 0.2s ease; -} - -.glossary-entry:hover p { - color: var(--color-text-primary); -} - -/* Glossary letter headers */ -.glossary-entry + h1 { - color: var(--color-text-primary); - font-size: 2rem; - font-weight: 800; - margin: 3rem 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 3px solid var(--color-brand); - position: relative; -} - -.glossary-entry + h1 a { - color: inherit; - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.glossary-entry + h1 a:hover { - color: var(--color-brand); - transform: translateX(4px); -} - -/* First letter styling for glossary headers */ -h1[id] { - color: var(--color-text-primary); - font-size: 2rem; - font-weight: 800; - margin: 3rem 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 3px solid var(--color-brand); - position: relative; - scroll-margin-top: var(--header-offset, 64px); -} - -h1[id] a { - color: inherit; - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: inline-block; -} - -h1[id] a:hover { - color: var(--color-brand); - transform: translateX(4px); -} - -h1[id]::before { - content: ''; - position: absolute; - bottom: -3px; - left: 0; - width: 100%; - height: 3px; - background: linear-gradient( - 90deg, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.3) 70%, - transparent 100% - ); -} - -/* Glossary container */ -#enteries-container { - padding: 1rem 0; -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .glossary-entry { - margin-bottom: 1rem; - padding: 1rem; - } - - .glossary-entry:hover { - transform: translateY(-2px); - } - - h1[id] { - font-size: 1.5rem; - margin: 2rem 0 1rem 0; - } -} - -/* Dark mode enhancements */ -.dark .glossary-entry { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .glossary-entry:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -/* Animation improvements */ -.glossary-entry { - animation: glossary-enter 0.4s ease-out; - animation-fill-mode: both; -} - -@keyframes glossary-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.98); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Stagger animation for multiple entries */ -.glossary-entry:nth-child(odd) { animation-delay: 0s; } -.glossary-entry:nth-child(even) { animation-delay: 0.1s; } - -/* Glossary navigation enhancements */ -.glossary-nav { - position: sticky; - top: 2rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - border-radius: var(--radius-xl); - padding: 1rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - margin-bottom: 2rem; -} - -.glossary-nav a { - display: inline-block; - padding: 0.5rem; - margin: 0.25rem; - border-radius: var(--radius-lg); - color: var(--color-text-secondary); - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - font-weight: 500; -} - -.glossary-nav a:hover { - background-color: var(--color-brand); - color: var(--color-text-inverse); - transform: translateY(-1px); -} \ No newline at end of file diff --git a/assets/css/components/navigation-api.css b/assets/css/components/navigation-api.css deleted file mode 100644 index a4c3d1f8..00000000 --- a/assets/css/components/navigation-api.css +++ /dev/null @@ -1,174 +0,0 @@ -/* Navigation API Endpoint Styling */ -/* Enhanced styling for API endpoints in the main navigation sidebar */ - -/* ========================================================================== - API Endpoint Items - ========================================================================== */ - -.api-endpoint-item { - display: flex; - align-items: center; - gap: 0.5rem; - width: 100%; -} - -/* ========================================================================== - HTTP Method Badges - ========================================================================== */ - -.http-method-badge { - display: inline-block; - padding: 0.125rem 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - border-radius: 0.25rem; - min-width: 3rem; - text-align: center; - letter-spacing: 0.025em; - flex-shrink: 0; -} - -/* GET - Green */ -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .http-method-badge--get { background: #10b981; color: white; } */ -.http-method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } - -/* POST - Blue */ -/* .http-method-badge--post { background: #3b82f6; color: white; } */ -.http-method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } - -/* PUT - Orange */ -/* .http-method-badge--put { background: #f59e0b; color: white; } */ -.http-method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } - -/* PATCH - Purple */ -/* .http-method-badge--patch { background: #8b5cf6; color: white; } */ -.http-method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } - -/* DELETE - Red */ -/* .http-method-badge--delete { background: #ef4444; color: white; } */ -.http-method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } - -/* HEAD, OPTIONS - Gray */ -/* .http-method-badge--head, .http-method-badge--options { background: #6b7280; color: white; } */ -.http-method-badge--head, -.http-method-badge--options { background: var(--http-head-bg); color: var(--http-head-text); } - -/* ========================================================================== - API Endpoint Path and Summary - ========================================================================== */ - -.api-endpoint-path { - font-weight: 500; - color: var(--color-text-primary); - font-size: 0.8125rem; - line-height: 1.3; - word-break: break-all; - flex: 1; -} - -.api-endpoint-summary { - display: block; - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.3; - margin-top: 0.25rem; - font-weight: 400; - font-style: italic; -} - -/* ========================================================================== - Enhanced Sidebar Item Styling for API Endpoints - ========================================================================== */ - -/* Make API endpoint links have more vertical space */ -.sidebar__link:has(.api-endpoint-item) { - padding: 0.75rem; - align-items: flex-start; -} - -/* Ensure the text wrapper takes full width */ -.sidebar__text:has(.api-endpoint-item) { - width: 100%; -} - -/* ========================================================================== - Hover and Active States - ========================================================================== */ - -/* Hover states are implicitly handled by dark-mode tokens; leaving hover overrides minimal */ -.sidebar__link:hover .http-method-badge--get { background: var(--http-get-bg); } - -.sidebar__link:hover .http-method-badge--post { background: var(--http-post-bg); } - -.sidebar__link:hover .http-method-badge--put { background: var(--http-put-bg); } - -.sidebar__link:hover .http-method-badge--patch { background: var(--http-patch-bg); } - -.sidebar__link:hover .http-method-badge--delete { background: var(--http-delete-bg); } - -.sidebar__link:hover .http-method-badge--head, -.sidebar__link:hover .http-method-badge--options { background: var(--http-head-bg); } - -/* Active state enhancements */ -.sidebar__link--active .api-endpoint-path { - color: var(--color-brand-primary); - font-weight: 600; -} - -.sidebar__link--active .api-endpoint-summary { - color: var(--color-text-secondary); -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .http-method-badge { - min-width: 2.5rem; - font-size: 0.625rem; - padding: 0.125rem 0.25rem; - } - - .api-endpoint-path { - font-size: 0.75rem; - } - - .api-endpoint-summary { - font-size: 0.6875rem; - } - - .sidebar__link:has(.api-endpoint-item) { - padding: 0.5rem; - } -} - -/* ========================================================================== - Dark Mode Support - ========================================================================== */ - -/* Dark mode handled via CSS variables in :root/.dark */ - -/* ========================================================================== - Focus States for Accessibility - ========================================================================== */ - -.sidebar__link:focus-visible:has(.api-endpoint-item) { - outline: 2px solid var(--color-brand-primary); - outline-offset: 2px; -} - -/* ========================================================================== - Animation and Transitions - ========================================================================== */ - -.http-method-badge { - transition: background-color 0.15s ease; -} - -.api-endpoint-path, -.api-endpoint-summary { - transition: color 0.15s ease; -} \ No newline at end of file diff --git a/assets/css/components/navigation.css b/assets/css/components/navigation.css deleted file mode 100644 index d67af288..00000000 --- a/assets/css/components/navigation.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Navigation Component - Modular navigation system with NVIDIA styling */ - -/* Import modular navigation components */ -@import 'navigation/index.css'; \ No newline at end of file diff --git a/assets/css/components/navigation/README.md b/assets/css/components/navigation/README.md deleted file mode 100644 index fb6a6843..00000000 --- a/assets/css/components/navigation/README.md +++ /dev/null @@ -1,104 +0,0 @@ -# Navigation Module System - -This directory contains the modularized navigation components for the NVIDIA Hugo theme. The navigation system has been broken down into logical, reusable modules for better maintainability and organization. - -## Structure - -``` -navigation/ -├── index.css # Main import file for all navigation modules -├── base.css # Container queries, shared foundations, and base nav styling -├── chat-toc-toggle.css # Interactive toggle between chat and table of contents -├── sidebar.css # Main navigation sidebar with responsive behavior -├── topbar.css # Horizontal navigation bar with CSS Grid layout -├── toc.css # Table of Contents navigation (inline and sidebar) -├── dropdown.css # Dropdown menus for navigation links -└── README.md # This documentation file -``` - -## Module Descriptions - -### `base.css` -- Container query definitions for responsive behavior -- Shared navigation link styling and animations -- Base nested content styling using the animation system -- Expand toggle button styling -- Focus states and accessibility features - -### `chat-toc-toggle.css` -- Interactive toggle component for switching between chat and TOC views -- Hover states, active states, and focus accessibility -- Ripple effects and smooth transitions -- Initialization handling - -### `sidebar.css` -- Main navigation sidebar container styling -- Responsive behavior (desktop sticky, mobile overlay) -- LinkTree component styling -- Sidebar item hierarchy (levels 1-4 and default) -- Mobile header and close button styling -- Dark mode background overrides - -### `topbar.css` -- Horizontal navigation bar using CSS Grid layout -- Responsive grid areas: logo, navigation, search, controls -- Mobile-first responsive behavior -- Logo, navigation links, search, and controls styling - -### `toc.css` -- Table of Contents styling for both inline and sidebar variants -- TOC link styling with hover states and active indicators -- Heading level variations (h1, h2, h3) -- Smooth scrolling progress indicator -- Enhanced animations and responsive adjustments -- Dark mode background overrides - -### `dropdown.css` -- Dropdown menu styling for navigation links -- Backdrop filter and shadow effects -- Hover and focus states -- Smooth show/hide animations -- Positioning and arrow indicators - -## Usage - -### Importing the Complete System -```css -@import 'navigation/index.css'; -``` - -### Importing Individual Modules -```css -@import 'navigation/base.css'; -@import 'navigation/topbar.css'; -@import 'navigation/sidebar.css'; -/* etc. */ -``` - -## Key Features - -- **Modular Architecture**: Each component is self-contained and can be imported individually -- **Responsive Design**: Uses container queries for advanced responsive behavior -- **Animation System Integration**: Leverages the theme's animation tokens for consistency -- **Accessibility**: Enhanced focus states and ARIA-compliant interactions -- **Dark Mode Support**: Proper theme integration with dark mode overrides -- **Performance Optimized**: Specific transition properties to avoid layout thrashing - -## Dependencies - -- CSS Custom Properties (CSS Variables) for theming -- Animation system tokens (`--timing-*`, `--easing-*`, `--collapse-*`) -- Tailwind CSS utilities (via `@apply` directives) -- Container query support - -## Maintenance Notes - -- When adding new navigation components, create a new module file and add it to `index.css` -- Follow the existing naming conventions: `.component-name__element--modifier` -- Use the shared animation tokens from the animation system -- Ensure responsive behavior uses container queries where appropriate -- Test accessibility features (focus states, keyboard navigation) when making changes - -## Migration from Monolithic File - -The original `navigation.css` file has been refactored into this modular system. The main file now simply imports `navigation/index.css`, ensuring backward compatibility while providing the benefits of modular architecture. \ No newline at end of file diff --git a/assets/css/components/navigation/base.css b/assets/css/components/navigation/base.css deleted file mode 100644 index 3d9fe016..00000000 --- a/assets/css/components/navigation/base.css +++ /dev/null @@ -1,120 +0,0 @@ -/* Navigation Base - Container queries and shared navigation foundations */ - -/* ======================================== - Container Query Context - ======================================== */ - -.sidebar-container, -.topbar, -.chat-toc-toggle { - container-type: inline-size; -} - -.sidebar-container { - container-name: sidebar; - container-type: inline-size; -} - -.topbar { - container-name: topbar; -} - -.chat-toc-toggle { - container-name: toggle; -} - -/* Base navigation link styling */ -.nav-link { - position: relative; - padding: 0.5rem 0.75rem; - border-radius: var(--radius-md); - font-weight: 400; - font-size: 0.875rem; - line-height: 1.2; - min-height: 2.25rem; - color: var(--color-text-primary); - text-decoration: none; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - white-space: nowrap; - overflow: hidden; /* Essential for ripple containment */ - display: flex; - align-items: center; - cursor: pointer; -} - -/* Enhanced focus states for nav-links */ -.nav-link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); /* Double focus ring */ -} - -.nav-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.03) 100% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.nav-link:hover, -.nav-link:focus { - color: var(--color-brand); - /* Removed transform and background for cleaner minimal look */ -} - -.nav-link:hover::before, -.nav-link:focus::before { - opacity: 0.5; /* More subtle hover effect */ -} - -/* Base nested content styling - use new animation system */ -.nested-content { - /* Use animation bridge collapse system instead of display:none */ - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing); -} - -/* Enhanced hover states - use animation tokens for consistency */ -.nested-content a:hover { - transform: translateX(4px); - transition: transform var(--timing-fast) var(--easing-standard); -} - -/* Expand toggle button - use animation tokens */ -.expand-toggle { - padding: 0.25rem; - border-radius: var(--radius-base); - color: var(--color-text-secondary); - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); -} - -.expand-toggle:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); -} - -.expand-toggle svg { - transition: transform var(--timing-fast) var(--easing-standard); -} \ No newline at end of file diff --git a/assets/css/components/navigation/chat-toc-toggle.css b/assets/css/components/navigation/chat-toc-toggle.css deleted file mode 100644 index eec2e6b0..00000000 --- a/assets/css/components/navigation/chat-toc-toggle.css +++ /dev/null @@ -1,129 +0,0 @@ -/* Chat/TOC Toggle Component - Interactive toggle between chat and table of contents */ - -/* Chat/TOC Toggle Component */ -.chat-toc-toggle { - display: flex; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - overflow: hidden; - box-shadow: var(--elevation-4); - height: 2.25rem; - min-width: 72px; /* Ensure minimum visibility */ - - /* Prevent flash during initialization */ - opacity: 1; - transition: opacity var(--timing-instant) var(--easing-standard); - - /* Enhance visibility */ - position: relative; -} - -.chat-toc-toggle.initialized { - opacity: 1; - animation: none; /* Cancel fallback animation */ -} - -@keyframes fallback-show { - to { opacity: 1; } -} - -.chat-toc-toggle__option { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - min-width: 2.25rem; - min-height: 2.25rem; - border: none; - background: transparent; - color: var(--color-text-secondary); - cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - overflow: hidden; -} - -.chat-toc-toggle__option:hover { - background: var(--color-surface-hover); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - box-shadow: 0 4px 8px color-mix(in srgb, black 10%, transparent); -} - -.chat-toc-toggle__option--active { - background: var(--color-brand); - color: var(--color-text-inverse); -} - -.chat-toc-toggle__option--active:hover { - background: var(--color-brand-1); - transform: var(--transform-lift-subtle); -} - -.chat-toc-toggle__icon { - width: 1.125rem; - height: 1.125rem; - flex-shrink: 0; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); -} - -.chat-toc-toggle__option:hover .chat-toc-toggle__icon { - filter: brightness(1); - transform: scale(1.1); -} - -.chat-toc-toggle__option--active .chat-toc-toggle__icon { - filter: brightness(0) invert(1); -} - -.chat-toc-toggle__option--active:hover .chat-toc-toggle__icon { - filter: brightness(0) invert(1); - transform: scale(1.1); -} - -/* Focus states for accessibility */ -.chat-toc-toggle__option:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand); - z-index: 1; -} - -/* Ripple effect on click */ -.chat-toc-toggle__option::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient( - circle at center, - color-mix(in srgb, var(--color-brand) 10%, transparent) 0%, - transparent 70% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.chat-toc-toggle__option:hover::before { - opacity: 1; -} - -.chat-toc-toggle__option:active::before { - opacity: 1; -} - -.chat-toc-toggle__option:active { - transform: translateY(0); - box-shadow: 0 2px 4px color-mix(in srgb, black 10%, transparent); -} \ No newline at end of file diff --git a/assets/css/components/navigation/dropdown.css b/assets/css/components/navigation/dropdown.css deleted file mode 100644 index f4f857c8..00000000 --- a/assets/css/components/navigation/dropdown.css +++ /dev/null @@ -1,82 +0,0 @@ -/* Dropdown Navigation - Dropdown menus for navigation links */ - -.topbar__dropdown { - @apply absolute left-0 mt-2 w-52 rounded-xl overflow-hidden - shadow-xl p-2 transition-all duration-300; - /* background-color: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - opacity: 0; - visibility: hidden; - transform: translateY(-10px) scale(0.95); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); -} - -.group:hover .topbar__dropdown { - @apply block; - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); -} - -.topbar__dropdown::before { - content: ''; - position: absolute; - top: -6px; - left: 20px; - width: 12px; - height: 12px; - /* background-color: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-bottom: none; - border-right: none; - transform: rotate(45deg); - z-index: -1; -} - -.topbar__dropdown-link { - @apply flex items-center px-4 py-3 text-sm rounded-lg - transition-all duration-200 focus:outline-none focus:ring-2 - relative overflow-hidden; - color: var(--color-text-primary); - --tw-ring-color: var(--color-brand); - text-decoration: none; - margin: 2px 0; -} - -.topbar__dropdown-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.topbar__dropdown-link:hover, -.topbar__dropdown-link:focus { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); - border-inline-start: 3px solid var(--color-brand); - padding-inline-start: calc(1rem - 3px); -} - -.topbar__dropdown-link:hover::before, -.topbar__dropdown-link:focus::before { - opacity: 1; -} \ No newline at end of file diff --git a/assets/css/components/navigation/index.css b/assets/css/components/navigation/index.css deleted file mode 100644 index b7ae3c93..00000000 --- a/assets/css/components/navigation/index.css +++ /dev/null @@ -1,10 +0,0 @@ -/* Navigation Module - Main import file for all navigation components */ - -/* Import all navigation modules in proper order */ -@import 'base.css'; -@import 'chat-toc-toggle.css'; -@import 'sidebar.css'; -@import 'topbar.css'; -@import 'toc.css'; -@import 'dropdown.css'; -@import 'language-switcher.css'; \ No newline at end of file diff --git a/assets/css/components/navigation/language-switcher.css b/assets/css/components/navigation/language-switcher.css deleted file mode 100644 index 910153de..00000000 --- a/assets/css/components/navigation/language-switcher.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Language Switcher transitions migrated from page-enhancements.css */ - -.language-switcher .hidden { - opacity: 0; - transform: translateY(-8px); - transition: opacity 0.2s ease-out, transform 0.2s ease-out; -} - -.language-switcher .block { - opacity: 1; - transform: translateY(0); -} - -@media (max-width: 640px) { - .language-switcher { position: relative; } -} - - diff --git a/assets/css/components/navigation/sidebar.css b/assets/css/components/navigation/sidebar.css deleted file mode 100644 index b494cec6..00000000 --- a/assets/css/components/navigation/sidebar.css +++ /dev/null @@ -1,342 +0,0 @@ -/* Sidebar Navigation - Main navigation sidebar with responsive behavior */ - -/* Sidebar Container Styling */ -.sidebar, -.sidebar-container { - background-color: transparent; - color: var(--color-text-primary); - border-inline-end: none; - /* Enable named container for container queries in this file */ - container-type: inline-size; - container-name: sidebar; -} - -/* Desktop sidebar styling */ -/* -@container sidebar (min-width: 768px) { - .sidebar, - .sidebar-container { - background-color: transparent; - border-inline-end: none; - transform: translateX(0) !important; - position: sticky !important; - display: flex !important; - } -} -*/ - -/* FALLBACK: Media query for desktop sidebar visibility */ -/* -@media (min-width: 768px) { - .sidebar-container { - transform: translateX(0) !important; - position: sticky !important; - display: flex !important; - } -} -*/ - -/* Mobile sidebar styling */ -@container sidebar (max-width: 767px) { - .sidebar-container { - /* Ensure it starts hidden on mobile */ - position: fixed; - z-index: 40; - width: 20rem; /* w-80 equivalent */ - height: 100vh; - top: 0; - left: 0; - transform: translateX(-100%); - /* ✅ FIXED: Use animation tokens */ - transition: transform var(--timing-medium) var(--easing-standard); - } - - .sidebar.translate-x-0, - .sidebar-container.translate-x-0 { - transform: translateX(0) !important; - } -} - -/* Mobile Header Styling - Force hide on desktop */ -.sidebar-header { - border-bottom: none; - background-color: transparent; - color: var(--color-text-primary); - display: flex; -} - -/* Force hide sidebar header on desktop */ -@container sidebar (min-width: 768px) { - .sidebar__header, - .sidebar-header { - display: none !important; - } -} - -/* Fallback: Hide mobile navigation elements on desktop */ -@media (min-width: 768px) { - .sidebar__header, - .sidebar-header { - display: none !important; - } - - [data-component="navigation-mobile-toggle"] { - display: none !important; - } -} - -/* Ensure sidebar starts hidden on mobile */ -@container sidebar (max-width: 767px) { - .sidebar:not(.translate-x-0), - .sidebar-container:not(.translate-x-0) { - transform: translateX(-100%) !important; - } -} - -.sidebar__close-button, -.sidebar-close-btn { - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - border: none; - background: transparent; - cursor: pointer; -} - -.sidebar__close-button:hover, -.sidebar-close-btn:hover { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); - border-radius: var(--radius-lg); -} - -.sidebar__close-button:focus, -.sidebar-close-btn:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -/* LinkTree Styling */ -[data-link-tree], -#linkTree { - background-color: transparent; - color: var(--color-text-primary); - width: 100%; -} - -/* Desktop linkTree padding adjustment */ -@container sidebar (min-width: 768px) { - [data-link-tree], - #linkTree { - padding-inline-start: 4px; /* Add space for focus ring to prevent clipping */ - padding-inline-end: 0; - } -} - -/* Mobile linkTree styling */ -@container sidebar (max-width: 767px) { - [data-link-tree], - #linkTree { - padding: 1rem; - } -} - -/* Prevent layout shift during initialization */ -/* -#linkTree:not(.initialized) { - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); -} -*/ - -[data-link-tree].initialized, -#linkTree.initialized { - opacity: 1; -} - -/* Robust expansion using :has() based on aria-expanded (fallback if JS state desyncs) */ -li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="true"]) > .nested-content { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - overflow: visible; -} - -li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested-content { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; -} - -/* Allow interaction inside nested content while its parent is transitioning */ -.nested-content[data-collapse-state="transitioning"] { - /* Override global pattern that disables all pointer events during transitions */ - pointer-events: auto; -} - -/* ✅ NEW ANIMATION SYSTEM - Use data attributes for consistent behavior */ -/* Ensure animations only work after initialization */ -[data-link-tree].initialized .nested-content[data-collapse-state="expanded"], -#linkTree.initialized .nested-content[data-collapse-state="expanded"] { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - overflow: visible; /* Allow content to be fully visible */ -} - -[data-link-tree].initialized .nested-content[data-collapse-state="collapsed"], -#linkTree.initialized .nested-content[data-collapse-state="collapsed"] { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; -} - -[data-link-tree].initialized .nested-content[data-collapse-state="transitioning"], -#linkTree.initialized .nested-content[data-collapse-state="transitioning"] { - overflow: hidden; /* Prevent content spillage during animation */ -} - -/* Sidebar Navigation Components - Cohesive Design */ -.sidebar__item { - @apply flex items-center rounded-md transition-all duration-200; - background-color: transparent; - margin: 1px 0; -} - -.sidebar__item:hover { - background-color: var(--color-surface-hover); -} - -.sidebar__link { - @apply flex items-center flex-grow p-2 transition-all duration-200 - focus:outline-none focus:ring-2 rounded-l-md; - color: var(--color-text-primary); - text-decoration: none; - --tw-ring-color: var(--color-brand); - min-height: 2.5rem; /* Consistent touch target */ -} - -.sidebar__link:hover, -.sidebar__link:focus { - color: var(--color-brand); -} - -.sidebar__link--active { - color: var(--color-brand); - background-color: var(--color-hover); -} - -.sidebar__icon { - /* Reduced icon size for tighter look */ - /* @apply w-5 h-5 mr-3 flex-shrink-0; */ - @apply w-4 h-4 mr-3 flex-shrink-0; -} - -.sidebar__text { - @apply flex-grow; -} - -.sidebar__expander { - @apply p-2 transition-all duration-200 focus:outline-none focus:ring-2 - rounded-r-md flex items-center justify-center; - color: var(--color-text-secondary); - min-width: 2.5rem; - min-height: 2.5rem; - --tw-ring-color: var(--color-brand); -} - -.sidebar__expander:hover, -.sidebar__expander:focus { - color: var(--color-brand); - background-color: var(--color-surface-active); -} - -.sidebar__chevron { - @apply w-4 h-4 transition-transform duration-200; -} - -/* Level-specific styling */ -.sidebar__item--level-1 .sidebar__text { - /* Step down one size from text-lg and slightly reduce weight */ - /* @apply text-lg font-brand font-bold; */ - @apply text-base font-brand font-semibold; -} - -.sidebar__item--level-1 { - @apply mb-1; -} - -.sidebar__item--level-2 { - @apply ml-4; -} - -.sidebar__item--level-2 .sidebar__text { - /* Step down one size from text-base */ - /* @apply font-normal text-base; */ - @apply font-normal text-sm; -} - -.sidebar__item--level-3 { - @apply ml-6; -} - -.sidebar__item--level-3 .sidebar__text { - /* Step down one size from text-sm */ - /* @apply font-light text-sm; */ - @apply font-light text-xs; -} - -.sidebar__item--level-4 { - @apply ml-8; -} - -.sidebar__item--level-4 .sidebar__text { - /* Step down one size from text-sm */ - /* @apply text-sm; */ - @apply text-xs; -} - -.sidebar__item--level-default { - @apply ml-10; -} - -.sidebar__item--level-default .sidebar__text { - @apply text-xs; -} - -/* Ensure text-brand utility works with sidebar items */ -.sidebar__link.text-brand { - color: var(--color-brand) !important; -} - -/* Enhanced active state for the whole item */ -.sidebar__item:has(.sidebar__link--active) { - background-color: var(--color-hover); - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ - box-shadow: var(--elevation-brand-subtle); -} - -/* Performance hints for hover states (localize former global rules) */ -.sidebar:has(.sidebar__item:hover), -.sidebar-container:has(.sidebar__item:hover) { - will-change: transform; - contain: layout; -} - -/* Right Sidebar Styling - Remove background in dark mode */ -#sidebar-right { - background: transparent; -} - -.dark #sidebar-right { - background: transparent !important; - background-color: transparent !important; -} - -/* Remove chat controls background in dark mode */ -.dark .chat-controls { - background: transparent !important; - background-color: transparent !important; - border: none !important; - box-shadow: none !important; -} \ No newline at end of file diff --git a/assets/css/components/navigation/toc.css b/assets/css/components/navigation/toc.css deleted file mode 100644 index 479430d3..00000000 --- a/assets/css/components/navigation/toc.css +++ /dev/null @@ -1,229 +0,0 @@ -/* Table of Contents (TOC) - Navigation within content and sidebar TOC */ - -/* Enhanced TOC Styling */ -.toc { - @apply rounded-lg p-6 mb-8; - background: transparent; - border: none; - box-shadow: none; -} - -.toc-header { - @apply flex items-center mb-4 pb-3; - border: none; - color: var(--color-text-primary); -} - -.toc-content a { - @apply inline-block py-2 px-3 rounded-lg transition-all duration-200; - color: var(--color-text-secondary); - text-decoration: none; -} - -.toc-content a:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); -} - -/* Enhanced Right Sidebar TOC */ -.toc { - @apply p-6 text-sm; - background: transparent; - border-radius: var(--radius-xl); - color: var(--color-text-primary); -} - -.toc__nav { - position: relative; -} - -.toc__nav::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 3px; - height: 100%; - background: linear-gradient( - to bottom, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.3) 50%, - transparent 100% - ); - border-radius: 2px; -} - -.toc ul { - @apply list-none pl-4 space-y-1; - margin: 0; -} - -.toc ul ul { - @apply pl-4 mt-2 border-l border-opacity-20; - border-color: var(--color-border-primary); -} - -/* TOC Link Styling */ -.toc-link { - @apply block py-2 px-3 rounded-lg transition-all duration-200 - relative overflow-hidden; - color: var(--color-text-secondary); - text-decoration: none; - line-height: 1.4; - font-weight: 400; - cursor: pointer; /* Ensure ripple-ready */ -} - -.toc-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.toc-link:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); - padding-inline-start: calc(0.75rem + 2px); - border-inline-start: 2px solid var(--color-brand); -} - -.toc-link:hover::before { - opacity: 1; -} - -.toc-link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - color: var(--color-brand); - /* box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); */ /* Enhanced double focus ring */ - box-shadow: - var(--elevation-brand-focus), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); -} - -/* Reading progress bar animation */ -#progress-bar { - transition: width 0.3s ease-out; -} - -/* Heading Level Variations */ -.toc-link--h1 { - font-weight: 600; - /* Slightly reduce H1 TOC size for a lighter hierarchy */ - /* font-size: 0.95em; */ - font-size: 0.9em; - color: var(--color-text-primary); -} - -.toc-link--h2 { - font-weight: 500; - color: var(--color-brand); - opacity: 0.9; -} - -.toc-link--h3 { - /* Slightly reduce H3 TOC size in tandem with sidebar tightening */ - /* font-size: 0.85em; */ - font-size: 0.8em; - color: var(--color-text-tertiary); - font-weight: 400; -} - -/* Active state styling */ -.toc-link.active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - font-weight: 500; - transform: translateX(2px); - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); */ - box-shadow: var(--elevation-brand-subtle); -} - -.toc-link.active::before { - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 0.2) 0%, - transparent 100% - ); - opacity: 1; -} - -/* Smooth scrolling indicator */ -.toc-progress { - position: absolute; - top: 0; - left: 0; - width: 2px; - height: 0%; - background-color: var(--color-brand); - transition: height var(--timing-medium) var(--easing-standard); - border-radius: 1px; -} - -/* Enhanced animations */ -.toc { - /* ✅ FIXED: Use animation tokens */ - animation: toc-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; -} - -@keyframes toc-enter { - from { - opacity: 0; - transform: translateX(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateX(0) scale(1); - } -} - -/* Responsive adjustments */ -@container (max-width: 1024px) { - .toc { - @apply p-4 text-xs; - } - - .toc-link { - @apply py-1.5 px-2; - } -} - -/* Remove TOC sidebar background in dark mode */ -.dark .toc { - background: transparent !important; -} - -/* Enhanced active state context */ -.toc:has(.toc-link.active) .toc__nav::before { - opacity: 1; - transform: scaleY(1.1); - background: linear-gradient( - to bottom, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.5) 50%, - transparent 100% - ); -} - -/* Localized performance hint for hover state */ -.toc:has(.toc-link:hover) { - will-change: transform; - contain: layout; -} \ No newline at end of file diff --git a/assets/css/components/navigation/topbar.css b/assets/css/components/navigation/topbar.css deleted file mode 100644 index d35a6f01..00000000 --- a/assets/css/components/navigation/topbar.css +++ /dev/null @@ -1,140 +0,0 @@ -/* Topbar Navigation - Main horizontal navigation bar with responsive grid layout */ - -/* Clean CSS Grid Topbar Layout */ -.topbar { - position: sticky; - top: 0; - z-index: 50; - /* background-color: var(--color-bg-primary); */ - /* border-bottom: 1px solid var(--color-border-primary); */ - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - - /* CSS Grid Layout */ - display: grid; - grid-template-columns: auto 1fr auto auto; - grid-template-areas: "logo navigation search controls"; - align-items: center; - gap: 1rem; - /* padding: 0.75rem 1.5rem; */ - padding: 0.5rem 0.75rem; - /* min-height: 4rem; */ - min-height: 3rem; - box-shadow: var(--glass-shadow); -} - -/* Grid Areas */ -.topbar__logo { - grid-area: logo; - display: flex; - align-items: center; - flex-shrink: 0; -} - -.topbar__logo-link { - display: flex; - align-items: center; - text-decoration: none; - transition: opacity var(--timing-fast) var(--easing-standard); -} - -.topbar__logo-link:hover { - opacity: 0.8; -} - -.topbar__logo-image { - width: 1.25rem; - height: 1.25rem; - object-fit: contain; -} - -.topbar__navigation { - grid-area: navigation; - display: flex; - align-items: center; - gap: 0.75rem; - min-width: 0; /* Allow shrinking */ -} - -.topbar__search { - grid-area: search; - display: flex; - align-items: center; - justify-content: center; - min-width: 0; /* Allow shrinking */ -} - -.topbar__controls { - grid-area: controls; - display: flex; - align-items: center; - gap: 0.5rem; - flex-shrink: 0; -} - -/* Responsive Grid Layout */ -@container topbar (max-width: 1024px) { - .topbar { - grid-template-columns: auto auto 1fr auto; - grid-template-areas: "logo navigation search controls"; - gap: 0.75rem; - padding: 0.5rem 1rem; - } -} - -@container topbar (max-width: 768px) { - .topbar { - grid-template-columns: auto 1fr auto; - grid-template-areas: "logo search controls"; - gap: 0.5rem; - padding: 0.5rem 0.5rem; - min-height: 2.75rem; - } - - /* Hide navigation on mobile - it should be in a hamburger menu */ - .topbar__navigation { - display: none; - } -} - -/* Updated Navigation Links for Grid Layout */ -.topbar__links { - display: flex; - align-items: center; - gap: 0.5rem; /* Tighter spacing for minimal look */ - font-family: var(--font-brand); - font-weight: 300; - font-size: 0.875rem; - color: var(--color-text-primary); -} - -/* Hide navigation links on mobile */ -@container (max-width: 768px) { - .topbar__link { - display: none; /* Hidden on mobile, shown via hamburger menu */ - } -} - -/* Topbar links */ -.topbar__link { - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.25rem 0.5rem; - color: var(--color-text-primary); - text-decoration: none; - transition: color var(--timing-fast) var(--easing-standard); -} - -.topbar__link:hover, -.topbar__link:focus-visible { - color: var(--color-brand); - outline: none; -} \ No newline at end of file diff --git a/assets/css/components/next-prev.css b/assets/css/components/next-prev.css deleted file mode 100644 index 32abdfaf..00000000 --- a/assets/css/components/next-prev.css +++ /dev/null @@ -1,313 +0,0 @@ -/* Next-Prev Navigation Component - Enhanced UX for page navigation */ - -/* Base Navigation Container */ -[data-component="article-next-prev"] { - margin-top: 2rem; - margin-bottom: 1rem; - position: relative; -} - -/* Next-Prev Navigation Link Base Styles - Scoped to avoid topbar conflicts */ -[data-component="article-next-prev"] .article-next-prev__link { - position: relative; - display: flex; - align-items: center; - padding: 1.25rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - color: var(--color-text-primary); - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - overflow: hidden; - min-height: 4rem; - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -[data-component="article-next-prev"] .article-next-prev__link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.04); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -/* Navigation Link Hover States */ -[data-component="article-next-prev"] .article-next-prev__link:hover { - border-color: var(--color-brand); - transform: translateY(-2px); - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.1), - 0 2px 8px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -[data-component="article-next-prev"] .article-next-prev__link:hover::before { - opacity: 1; -} - -[data-component="article-next-prev"] .article-next-prev__link:hover div > div[class*="font-medium"], -[data-component="article-next-prev"] .article-next-prev__link:hover .article-next-prev__title { - color: var(--color-brand) !important; -} - -[data-component="article-next-prev"] .article-next-prev__link:hover svg { - color: var(--color-brand); - transform: translateX(2px); -} - -/* Previous link - align icon to left, slide left on hover */ -[data-component="article-next-prev"] .article-next-prev__link:hover:has(svg[class*="mr-"]) svg { - transform: translateX(-2px); -} - -/* Navigation Link Typography */ -[data-component="article-next-prev"] .article-next-prev__link .text-xs { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} - -/* Target the title content specifically, avoiding Tailwind utility classes */ -[data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], -[data-component="article-next-prev"] .article-next-prev__title { - color: var(--color-text-primary) !important; - font-size: 0.9375rem !important; - font-weight: 600 !important; - line-height: 1.3 !important; - transition: color 0.2s ease !important; - font-family: var(--font-brand) !important; -} - -[data-component="article-next-prev"] .article-next-prev__link:hover .text-xs { - color: var(--color-text-secondary); -} - -/* SVG Icons */ -[data-component="article-next-prev"] .article-next-prev__link svg { - color: var(--color-text-secondary); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - flex-shrink: 0; -} - -/* Disabled Navigation Links */ -[data-component="article-next-prev"] .article-next-prev__link--disabled { - background: linear-gradient( - 135deg, - var(--color-bg-secondary) 0%, - rgba(var(--color-surface), 0.5) 100% - ); - border-color: var(--color-border-secondary); - color: var(--color-text-tertiary); - cursor: not-allowed; - pointer-events: none; - opacity: 0.6; -} - -[data-component="article-next-prev"] .article-next-prev__link--disabled svg { - color: var(--color-text-tertiary); - opacity: 0.5; -} - -[data-component="article-next-prev"] .article-next-prev__link--disabled .text-xs, -[data-component="article-next-prev"] .article-next-prev__link--disabled div > div[class*="font-medium"] { - color: var(--color-text-tertiary) !important; -} - -/* Focus States for Accessibility */ -[data-component="article-next-prev"] .article-next-prev__link:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -[data-component="article-next-prev"] .article-next-prev__link:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -/* Enhanced Visual Hierarchy */ -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { - border-left: 3px solid transparent; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-left-color var(--timing-fast) var(--easing-standard); -} - -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { - border-right: 3px solid transparent; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-right-color var(--timing-fast) var(--easing-standard); -} - -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"]:hover { - border-left-color: var(--color-brand); -} - -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"]:hover { - border-right-color: var(--color-brand); -} - -/* Responsive Adjustments */ -@media (max-width: 768px) { - [data-component="article-next-prev"] { - margin-top: 1.5rem; - } - - [data-component="article-next-prev"] .article-next-prev__link { - padding: 1rem; - min-height: 3.5rem; - } - - [data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], - [data-component="article-next-prev"] .article-next-prev__title { - font-size: 0.875rem !important; - } - - [data-component="article-next-prev"] .article-next-prev__link .text-xs { - font-size: 0.6875rem; - } - - [data-component="article-next-prev"] .article-next-prev__link svg { - width: 1rem; - height: 1rem; - } -} - -@media (max-width: 480px) { - [data-component="article-next-prev"] { - flex-direction: column; - gap: 0.75rem; - } - - [data-component="article-next-prev"] .article-next-prev__link { - padding: 0.875rem; - min-height: 3rem; - flex: none; - } - - [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { - border-left: none; - border-top: 3px solid transparent; - } - - [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { - border-right: none; - border-bottom: 3px solid transparent; - } - - [data-component="article-next-prev"] .nav-link[aria-label*="Previous"]:hover { - border-left-color: transparent; - border-top-color: var(--color-brand); - } - - [data-component="article-next-prev"] .nav-link[aria-label*="Next"]:hover { - border-right-color: transparent; - border-bottom-color: var(--color-brand); - } -} - -/* Dark Mode Enhancements */ -.dark [data-component="article-next-prev"] .article-next-prev__link { - background: linear-gradient( - 135deg, - rgba(var(--color-surface), 0.8) 0%, - rgba(var(--color-bg-secondary), 0.6) 100% - ); - border-color: var(--color-border-secondary); - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark [data-component="article-next-prev"] .article-next-prev__link:hover { - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.dark [data-component="article-next-prev"] .article-next-prev__link--disabled { - background: linear-gradient( - 135deg, - rgba(var(--color-bg-secondary), 0.4) 0%, - rgba(var(--color-surface), 0.2) 100% - ); - border-color: rgba(var(--color-border-secondary), 0.5); -} - -/* Animation Enhancements */ -[data-component="article-next-prev"] .article-next-prev__link { - animation: nav-link-enter 0.3s ease-out; - animation-fill-mode: both; -} - -@keyframes nav-link-enter { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Stagger animation for prev/next pair */ -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { animation-delay: 0s; } -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { animation-delay: 0.1s; } - -/* Loading state placeholders */ -[data-component="article-next-prev"] .article-next-prev__link--loading { - background: linear-gradient(90deg, - var(--color-surface) 25%, - var(--color-bg-secondary) 50%, - var(--color-surface) 75%); - background-size: 200% 100%; - animation: nav-link-loading 2s infinite; -} - -@keyframes nav-link-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -/* Print styles */ -@media print { - [data-component="article-next-prev"] .article-next-prev__link { - border: 1px solid #ccc; - box-shadow: none; - background: white; - } - - [data-component="article-next-prev"] .nav-link svg { - display: none; - } -} \ No newline at end of file diff --git a/assets/css/components/notebook.css b/assets/css/components/notebook.css deleted file mode 100644 index 2e684203..00000000 --- a/assets/css/components/notebook.css +++ /dev/null @@ -1,1241 +0,0 @@ -/** - * Notebook Component Styles - * Modern, accessible styling for Jupyter notebook rendering - * Aligned with site-wide design system for consistency - * - * Features: - * - Unified code block styling with article content - * - Consistent button components across the site - * - Aligned typography and spacing patterns - * - Semantic color system integration - * - Performance optimizations for theme switching - * - Simplified container structure (reduced nesting) - * - Container queries for true responsive behavior - * - CSS logical properties for internationalization - */ - -/* ======================================== - Container Query Context - ======================================== */ - -.notebook { - container-type: inline-size; - container-name: notebook; -} - -/* ======================================== - Core Notebook Container (consolidated into .notebook__cells) - ======================================== */ - -/* ======================================== - Progressive Cell Visibility - ======================================== */ - -/* Notebook cell wrapper functionality merged into .notebook-cell */ -.notebook-cell.notebook-cell-wrapper { - /* CSS containment for performance isolation */ - contain: layout style paint; - /* No transitions on wrapper to avoid layout issues */ -} - -.notebook-cell--hidden { - /* ✅ FIXED: Use animation tokens instead of display: none */ - max-height: 0; - opacity: 0; - overflow: hidden; - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - transform: translateY(20px); -} - -.notebook-cell--revealing { - /* ✅ FIXED: Use animation tokens for smooth transitions */ - max-height: var(--collapse-height-expanded, 2000px); - opacity: 1; - transform: translateY(0); - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); -} - -@keyframes revealCell { - to { - opacity: 1; - transform: translateY(0); - } -} - -/* ======================================== - Notebook Header - ======================================== */ - -.notebook__header { - padding: 1.5rem 2rem; - border-bottom: 1px solid var(--color-border-primary); - background: var(--color-surface); - margin-bottom: 1rem; -} - -/* Hide header if it's empty */ -.notebook__header:empty { - display: none; -} - -.notebook__title { - font-size: 1.875rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; - line-height: 1.2; -} - -.notebook__description { - color: var(--color-text-secondary); - font-size: 1.125rem; - margin: 0; - line-height: 1.5; -} - -.notebook__metadata { - display: flex; - gap: 1rem; - margin-top: 1rem; - flex-wrap: wrap; -} - -.notebook__metadata-item { - /* Align with site button/badge patterns */ - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.5rem; - background: var(--color-surface); - color: var(--color-text-secondary); - border-radius: 0.375rem; /* Match site border radius */ - border: 1px solid var(--color-border-primary); - font-size: 0.875rem; - font-weight: 500; -} - -/* ======================================== - Notebook Cells Container - ======================================== */ - -.notebook__cells { - /* Simplified container - no shadow since cells have their own */ - max-width: 100%; - margin: 0 auto; - padding: 0; - - /* Layout for cells */ - display: flex; - flex-direction: column; - gap: 0.75rem; - - /* Performance optimizations */ - contain: layout style; -} - -/* Density variants based on data-view attribute */ -[data-view="compact"] .notebook__cells { - gap: 0.25rem; /* Much tighter cell spacing */ - padding: 0.25rem; /* Minimal container padding */ -} - -[data-view="comfortable"] .notebook__cells { - gap: 2rem; /* More spacious cell spacing */ - padding: 2rem; /* Generous container padding */ -} - -/* Reduce space for first cell */ -.notebook__cells > .notebook-cell-wrapper:first-child .notebook-cell.collapse { - margin-top: 0; -} - -/* ======================================== - Individual Cell Styling (extends existing collapse) - ======================================== */ - -.notebook-cell.collapse { - /* Notebook-specific styling for cells */ - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - margin: 0 !important; - --collapse-padding-expanded: 0; -} - -/* ======================================== - Cell Headers (extends existing collapse headers) - ======================================== */ - -.notebook-cell__header.collapse__header { - /* Notebook-specific header styling: narrower, glassmorphism */ - padding: 0.5rem 0.75rem; - background: var(--glass-bg); - border-color: var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); -} - -/* Chevron/icon rotation synced to ARIA for notebook cells */ -.notebook-cell .collapse__header .collapse__icon { - transform: rotate(0deg); -} -.notebook-cell .collapse__header[aria-expanded="true"] .collapse__icon { - transform: rotate(90deg) !important; -} - -/* Compact cell headers */ -[data-view="compact"] .notebook-cell__header.collapse__header { - padding: 0.375rem 0.75rem; /* Much more compact header padding */ -} - -[data-view="comfortable"] .notebook-cell__header.collapse__header { - padding: 1.5rem 2.5rem; /* More generous header padding */ -} - -.notebook-cell__type { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.notebook-cell__type-icon { - width: 1.25rem; - height: 1.25rem; - opacity: 0.8; - color: var(--color-brand); -} - -.notebook-cell__type-text { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0; -} - -.notebook-cell__execution-indicator { - font-size: 0.875rem; - font-weight: 400; - color: var(--color-text-secondary); - font-family: theme('fontFamily.mono'); - margin-inline-start: 0.5rem; -} - -/* Cell numbering - Jupyter style */ -.notebook-cell__number { - font-size: 0.75rem; - font-weight: 500; - color: var(--color-text-tertiary); - font-family: theme('fontFamily.mono'); - background: var(--color-bg-secondary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - border: 1px solid var(--color-border-secondary); - min-width: 2rem; - text-align: center; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.notebook-cell--code .notebook-cell__number { - background: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.1); - color: var(--color-brand-3); - border-color: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.2); -} - -.notebook-cell--markdown .notebook-cell__number { - background: color-mix(in srgb, rgb(134, 239, 172) 10%, transparent); - color: theme('colors.green.600'); - border-color: color-mix(in srgb, rgb(134, 239, 172) 20%, transparent); -} - -/* Execution status indicators */ -.notebook-cell__status { - font-size: 0.75rem; - font-weight: 500; - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-family: theme('fontFamily.mono'); -} - -.notebook-cell__status--executed { - background: color-mix(in srgb, rgb(34, 197, 94) 10%, transparent); - color: theme('colors.green.600'); - border: 1px solid color-mix(in srgb, rgb(34, 197, 94) 20%, transparent); -} - -.notebook-cell__status--pending { - background: color-mix(in srgb, rgb(251, 191, 36) 10%, transparent); - color: theme('colors.amber.600'); - border: 1px solid color-mix(in srgb, rgb(251, 191, 36) 20%, transparent); -} - -.notebook-cell__status--error { - background: color-mix(in srgb, rgb(239, 68, 68) 10%, transparent); - color: theme('colors.red.600'); - border: 1px solid color-mix(in srgb, rgb(239, 68, 68) 20%, transparent); -} - -/* ======================================== - Cell Content (extends existing collapse body) - ======================================== */ - -.notebook-cell .collapse__body-content { - padding: 0; -} - -/* Notebook cell body: align borders/background with glass style and avoid brand/green accents */ -.notebook-cell .collapse__body { - background: var(--glass-bg); - border-color: var(--glass-border-color); - /* Ensure body animates using data attributes on itself or parent */ - --collapse-padding-expanded: 0.75rem; -} - -.notebook-cell.collapse[data-collapse-state="expanded"] .collapse__body, -.notebook-cell.collapse.expanded .collapse__body { - border-color: var(--glass-border-color); -} - -/* Render Markdown cells as normal article content (less chrome) */ -.notebook-cell--markdown.collapse { - background: transparent; - border: none; - box-shadow: none !important; - transform: none !important; -} -.notebook-cell--markdown.collapse:hover { - box-shadow: none !important; - transform: none !important; -} -.notebook-cell--markdown .notebook-cell__header { - display: none; -} -.notebook-cell--markdown .collapse__body { - background: transparent; - border: none; -} -.notebook-cell--markdown .collapse__body-content { - padding: 0; -} - -/* Compact cell content */ -[data-view="compact"] .notebook-cell .collapse__body-content { - padding: 0.5rem; /* Much more compact cell content */ -} - -[data-view="comfortable"] .notebook-cell .collapse__body-content { - padding: 2.5rem; /* More generous cell content padding */ -} - -/* ======================================== - Markdown Cells - ======================================== */ - -.notebook-cell--markdown .notebook-cell__type-icon { - color: theme('colors.green.600'); -} - -.notebook-cell__markdown-content { - line-height: 1.7; -} - -.notebook-cell__markdown-content h1, -.notebook-cell__markdown-content h2, -.notebook-cell__markdown-content h3, -.notebook-cell__markdown-content h4, -.notebook-cell__markdown-content h5, -.notebook-cell__markdown-content h6 { - /* Align with global heading styles from input.css */ - margin-top: 0; - margin-bottom: 1rem; - color: var(--color-text-primary); - font-weight: 700; - word-wrap: break-word; -} - -.notebook-cell__markdown-content h1 { font-size: 1.875rem; font-weight: 900; } -.notebook-cell__markdown-content h2 { font-size: 1.5rem; } -.notebook-cell__markdown-content h3 { font-size: 1.25rem; } -.notebook-cell__markdown-content h4 { font-size: 1.125rem; } -.notebook-cell__markdown-content h5 { font-size: 1rem; } -.notebook-cell__markdown-content h6 { font-size: 0.875rem; } - -.notebook-cell__markdown-content p { - /* Match #articleContent spacing pattern */ - margin: 0.75rem 0; - color: var(--color-text-primary); -} - -.notebook-cell__markdown-content p:last-child { - margin-bottom: 0; -} - -.notebook-cell__markdown-content ul, -.notebook-cell__markdown-content ol { - /* Match #articleContent list patterns */ - margin: 0.75rem 0; - padding-inline-start: 1.5rem; -} - -.notebook-cell__markdown-content ul { - list-style-type: disc; - margin-inline-start: 1.5rem; -} - -.notebook-cell__markdown-content strong { - /* Match #articleContent strong styling */ - font-family: var(--font-family-brand); - font-weight: 600; -} - -.notebook-cell__markdown-content code { - /* Align with #articleContent code:not(pre code) styling */ - padding: 0.25rem; - border-radius: 0.25rem; - font-size: 0.75rem; - font-weight: 300; - background-color: var(--color-bg-secondary); - color: var(--color-brand-1); - font-family: var(--font-family-mono, RobotoMono, monospace); -} - -/* Dark mode support for inline code */ -.dark .notebook-cell__markdown-content code { - color: var(--color-brand); -} - -/* ======================================== - Code Cells - ======================================== */ - -.notebook-cell--code .notebook-cell__type-icon { - color: var(--color-brand-3); /* Uses semantic color system */ -} - -/* Notebook code cells now use .code-block-enhanced with proper corner radius handling */ - -/* Fix border radius for code blocks with headers */ -.code-block-enhanced .code-header { - border-radius: 0.75rem 0.75rem 0 0; /* Only top corners rounded */ -} - -.code-block-enhanced .code-content { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ -} - -/* Target the actual highlighted code element that has the background */ -.code-block-enhanced .code-content .highlight { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ -} - -.code-block-enhanced .code-content .highlight pre { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ -} - -/* Copy button styling handled by .code-block-enhanced */ - -/* ======================================== - Cell Outputs - ======================================== */ - -.notebook-cell__outputs { - margin-top: 0.5rem; - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -/* Compact output spacing */ -[data-view="compact"] .notebook-cell__outputs { - margin-top: 0.5rem; - gap: 0.375rem; -} - -[data-view="comfortable"] .notebook-cell__outputs { - margin-top: 1.5rem; - gap: 1rem; -} - -.notebook-cell__output { - border-radius: theme('borderRadius.lg'); - overflow: hidden; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); -} - -/* Stream Output */ -.notebook-cell__output--stream { - background: var(--color-bg-secondary); - color: theme('colors.green.400'); - padding: 1rem; - font-family: theme('fontFamily.mono'); - font-size: 0.875rem; - line-height: 1.5; -} - -.notebook-cell__output--stream pre { - margin: 0; - padding: 0; - background: transparent; - color: inherit; - white-space: pre-wrap; - word-break: break-word; -} - -/* Execute Result Output */ -.notebook-cell__output--execute-result { - padding: 1rem; -} - -.notebook-cell__output--execute-result .html-output { - margin-bottom: 1rem; -} - -.notebook-cell__output--execute-result .html-output:last-child { - margin-bottom: 0; -} - -.notebook-cell__output--execute-result .text-output { - font-family: theme('fontFamily.mono'); - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-primary); - margin: 0; - padding: 0; - background: transparent; - white-space: pre-wrap; - word-break: break-word; -} - -/* Display Data Output */ -.notebook-cell__output--display-data { - padding: 1rem; -} - -.notebook-cell__output--display-data img { - max-width: 100%; - height: auto; - aspect-ratio: auto; /* Preserve natural ratio but allow override */ - object-fit: contain; - border-radius: theme('borderRadius.md'); - box-shadow: theme('boxShadow.sm'); -} - -/* For plots and charts, maintain square aspect ratio */ -.notebook-cell__output--display-data img[alt*="plot"], -.notebook-cell__output--display-data img[alt*="chart"], -.notebook-cell__output--display-data img[alt*="graph"] { - aspect-ratio: 4 / 3; -} - -/* Error Output */ -.notebook-cell__output--error { - background: theme('colors.red.900'); - color: theme('colors.red.100'); - border-color: theme('colors.red.700'); - padding: 1rem; -} - -.notebook-cell__error-name { - font-weight: 700; - font-size: 1rem; - margin-bottom: 0.5rem; - color: theme('colors.red.300'); -} - -.notebook-cell__error-value { - margin-bottom: 1rem; - font-weight: 500; - line-height: 1.5; -} - -.notebook-cell__error-traceback { - font-family: theme('fontFamily.mono'); - font-size: 0.875rem; - line-height: 1.4; - opacity: 0.9; -} - -.notebook-cell__traceback-line { - padding: 0.125rem 0; - border-inline-start: 2px solid theme('colors.red.500'); - padding-inline-start: 0.75rem; - margin: 0.25rem 0; -} - -/* Collapsible outputs for long content */ -.notebook-cell__output--collapsible { - position: relative; -} - -.notebook-cell__output-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - transition: all 0.2s ease; -} - -.notebook-cell__output-toggle:hover { - background: var(--color-bg-tertiary); - color: var(--color-text-primary); -} - -.notebook-cell__output-toggle-icon { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.notebook-cell__output--collapsed .notebook-cell__output-toggle-icon { - transform: rotate(-90deg); -} - -.notebook-cell__output-content { - transition: all 0.3s ease; -} - -.notebook-cell__output--collapsed .notebook-cell__output-content { - /* ✅ FIXED: Use height-based collapse for smooth animation */ - max-height: 0; - opacity: 0; - overflow: hidden; - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard); -} - -.notebook-cell__output-preview { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - color: var(--color-text-secondary); - font-size: 0.875rem; - font-family: theme('fontFamily.mono'); - border-bottom: 1px solid var(--color-border-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* Output size indicators */ -.notebook-cell__output-size { - font-size: 0.75rem; - color: var(--color-text-tertiary); - margin-inline-start: auto; -} - -/* ======================================== - Raw Cells - ======================================== */ - -.notebook-cell--raw .notebook-cell__type-icon { - color: theme('colors.purple.600'); -} - -.notebook-cell__raw-content { - background: var(--color-bg-secondary); - border-radius: theme('borderRadius.md'); - padding: 1rem; - border: 1px solid var(--color-border-primary); -} - -.notebook-cell__raw-content pre { - margin: 0; - font-family: theme('fontFamily.mono'); - font-size: 0.875rem; - line-height: 1.5; - white-space: pre-wrap; - word-break: break-word; -} - -.notebook-cell__raw-content code { - background: transparent; - padding: 0; - color: var(--color-text-primary); -} - -/* ======================================== - Density Toggle and Navigation - ======================================== */ - -.notebook__toolbar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem 1rem; - background: var(--color-surface); - border-bottom: 1px solid var(--color-border-primary); - gap: 1rem; - flex-wrap: wrap; -} - -.notebook__density-toggle { - display: flex; - align-items: center; - gap: 0.25rem; - background: var(--color-bg-secondary); - border-radius: 0.5rem; - padding: 0.25rem; - border: 1px solid var(--color-border-primary); -} - -.notebook__density-btn { - padding: 0.375rem 0.75rem; - font-size: 0.75rem; - font-weight: 500; - border: none; - background: transparent; - color: var(--color-text-secondary); - border-radius: 0.25rem; - cursor: pointer; - transition: all 0.2s ease; - min-width: 4rem; - text-align: center; -} - -.notebook__density-btn:hover { - background: var(--color-bg-tertiary); - color: var(--color-text-primary); -} - -.notebook__density-btn--active { - background: var(--color-brand); - color: white; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} - -.notebook__cell-counter { - font-size: 0.875rem; - color: var(--color-text-secondary); - font-family: theme('fontFamily.mono'); -} - -.notebook__actions { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.notebook__nav-btn { - padding: 0.5rem; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); - color: var(--color-text-secondary); - border-radius: 0.375rem; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -.notebook__nav-btn:hover { - background: var(--color-bg-secondary); - color: var(--color-text-primary); - border-color: var(--color-border-secondary); -} - -.notebook__nav-btn svg { - width: 1rem; - height: 1rem; -} - -/* Cell outline/navigation */ -.notebook__outline { - position: fixed; - top: 50%; - right: 1rem; - transform: translateY(-50%); - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 0.75rem; - box-shadow: var(--elevation-6); - max-height: 60vh; - overflow-y: auto; - width: 200px; - z-index: 50; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; -} - -.notebook__outline--visible { - opacity: 1; - visibility: visible; -} - -.notebook__outline-item { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.375rem 0.5rem; - font-size: 0.75rem; - color: var(--color-text-secondary); - cursor: pointer; - border-radius: 0.25rem; - transition: all 0.2s ease; - text-decoration: none; -} - -.notebook__outline-item:hover { - background: var(--color-bg-secondary); - color: var(--color-text-primary); -} - -.notebook__outline-item--active { - background: var(--color-brand); - color: white; -} - -.notebook__outline-icon { - width: 0.75rem; - height: 0.75rem; - flex-shrink: 0; -} - -/* ======================================== - Loading States and Performance Indicators - ======================================== */ - -.notebook__performance-notice { - margin-bottom: 1.5rem; -} - -.notebook-cell-wrapper { - /* Wrapper for lazy-loaded cells */ - margin-bottom: 0; -} - -.notebook-cell--lazy { - /* Hidden cells waiting to be loaded */ - display: none; -} - -.notebook-load-trigger { - display: flex; - align-items: center; - justify-content: center; - padding: 2rem; - color: var(--color-text-secondary); - font-size: 0.875rem; - border-top: 1px solid var(--color-border-primary); - margin-top: 2rem; -} - -.loading-indicator { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.notebook-completion-indicator { - display: flex; - align-items: center; - justify-content: center; - padding: 1.5rem; - color: var(--color-text-secondary); - font-size: 0.875rem; - border-top: 1px solid var(--color-border-primary); - margin-top: 2rem; - background: var(--color-surface); - border-radius: theme('borderRadius.lg'); -} - -/* ======================================== - Light Mode Enhancements - ======================================== */ - -/* Light mode styles handled in .notebook__cells */ - -.notebook-cell.collapse { - /* Light mode cell styling */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); - /* Add theme transition only to cells that need it */ - transition: var(--transition-elevation); -} - -.notebook-cell.collapse:hover { - /* Enhanced light mode hover */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); - transform: translateY(-1px); -} - -/* Light mode styling handled by .code-block-enhanced */ - -.notebook-cell__output--stream { - /* Stream output styling with consistent colors */ - background: var(--color-bg-inverse); - color: var(--color-brand-2); -} - -.notebook-cell__output--error { - /* Error output styling with semantic colors */ - background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.1); - color: var(--color-brand-7); - border-color: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.3); -} - -.notebook-cell__output--error .notebook-cell__error-name { - color: var(--color-brand-7); - font-weight: 600; -} - -.notebook-cell__traceback-line { - border-inline-start-color: var(--color-brand-7); -} - -/* ======================================== - Dark Theme Support - ======================================== */ - -/* Dark mode handled by individual cell shadows */ - -.dark .notebook-cell.collapse { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); -} - -.dark .notebook-cell.collapse:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); -} - -/* Dark mode styling handled by .code-block-enhanced */ - -.dark .notebook-cell__output--error { - background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.2); - color: var(--color-text-primary); - border-color: var(--color-brand-7); -} - -.dark .notebook-cell__output--error .notebook-cell__error-name { - color: var(--color-brand-7); -} - -.dark .notebook-cell__traceback-line { - border-inline-start-color: var(--color-brand-7); -} - -/* ======================================== - Container Query Responsive Design - ======================================== */ - -@container notebook (max-width: 768px) { - .notebook__cells { - margin: 0; - padding: 0; - } - - .notebook__header { - padding: 1rem 1.5rem; - } - - .notebook__title { - font-size: 1.5rem; - } - - .notebook__description { - font-size: 1rem; - } - - .notebook__cells { - gap: 0; - } - - .notebook-cell .collapse__body-content { - padding: 0; - } - - /* Compact mode on mobile should be even more compact */ - [data-view="compact"] .notebook__cells { - padding: 0; - gap: 0; - } - - [data-view="compact"] .notebook-cell .collapse__body-content { - padding: 0; - } - - /* Mobile code block styling handled by .code-block-enhanced */ - - .notebook__performance-notice { - margin: 0 1rem 1.5rem; - } - - /* Hide outline on mobile */ - .notebook__outline { - display: none; - } - - /* Stack toolbar on mobile */ - .notebook__toolbar { - flex-direction: column; - align-items: stretch; - gap: 0.75rem; - } - - .notebook__actions { - justify-content: center; - } -} - -@container notebook (max-width: 480px) { - .notebook__metadata { - flex-direction: column; - gap: 0.5rem; - } - - .notebook-cell__header.collapse__header { - padding: 0.75rem 1rem; - } - - .notebook-cell .collapse__body-content { - padding: 0.75rem; - } - - /* Print code block styling handled by .code-block-enhanced */ - - .notebook-cell__type-text { - font-size: 0.875rem; - } - - .notebook__performance-notice { - margin: 0 0.75rem 1rem; - } -} - -/* ======================================== - Print Styles - ======================================== */ - -@media print { - .notebook__cells { - border: 1px solid #ccc; - break-inside: avoid; - margin: 0; - } - - .notebook-cell .copy-code, - .collapse__icon-wrapper, - .notebook__performance-notice, - .notebook-load-trigger, - .notebook-completion-indicator { - display: none !important; - } - - /* ✅ FIXED: Use standard collapse behavior with animation tokens */ - .notebook-cell .collapse__body { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing); - } - - .notebook-cell .collapse__body.expanded { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - } - - .notebook-cell { - break-inside: avoid; - page-break-inside: avoid; - box-shadow: none; - border: 1px solid #ddd; - margin-bottom: 1rem; - } - - .notebook-cell__outputs { - break-inside: avoid; - } - - /* Print code styling handled by .code-block-enhanced */ - - .notebook-cell__output--stream { - background: #f0f0f0 !important; - color: #333 !important; - } -} - -/* ======================================== - Accessibility Enhancements - ======================================== */ - -@media (prefers-reduced-motion: reduce) { - .notebook-cell, - .notebook-cell__toggle, - .notebook-cell__copy-btn, - .notebook-cell__toggle-icon { - transition: none; - } -} - -@media (prefers-contrast: high) { - .notebook__cells { - --notebook-border: theme('colors.gray.900'); - --cell-border: theme('colors.gray.800'); - --cell-hover-border: theme('colors.blue.700'); - --cell-active-border: theme('colors.blue.600'); - } - - .dark .notebook__cells { - --notebook-border: theme('colors.gray.100'); - --cell-border: theme('colors.gray.300'); - --cell-hover-border: theme('colors.blue.300'); - --cell-active-border: theme('colors.blue.400'); - } -} - -/* ======================================== - Animation Keyframes - ======================================== */ - -@keyframes notebook-cell-enter { - from { - opacity: 0; - transform: translateY(1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes copy-success { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.1); } -} - -@keyframes copy-error { - 0%, 100% { transform: translateX(0); } - 25% { transform: translateX(-0.25rem); } - 75% { transform: translateX(0.25rem); } -} - -/* ======================================== - Entry Animations - ======================================== */ - -.notebook-cell { - animation: notebook-cell-enter 0.4s ease-out; - animation-delay: calc(var(--cell-index, 0) * 0.1s); - animation-fill-mode: both; -} - -.notebook-cell__copy-btn--success { - animation: copy-success 0.3s ease-out; -} - -.notebook-cell__copy-btn--error { - animation: copy-error 0.3s ease-out; -} - -/* ======================================== - :has() Notebook Component Enhancements - ======================================== */ - -/* Notebook cells with error states get enhanced styling */ -.notebook-cell:has(.notebook-cell__error-name) { - border-inline-start: 4px solid var(--color-danger); - background: linear-gradient( - 90deg, - color-mix(in srgb, rgb(239, 68, 68) 5%, transparent) 0%, - transparent 50% - ); - margin-inline-start: -1rem; - padding-inline-start: calc(1rem - 4px); -} - -.notebook-cell:has(.notebook-cell__error-name) .collapse__icon-wrapper { - background: var(--color-danger); - color: white; - border-radius: 50%; -} - -/* Cells with outputs get enhanced spacing */ -.notebook-cell:has(.notebook-cell__outputs) { - margin-bottom: 2rem; - border-bottom: 1px solid var(--color-border-secondary); - padding-bottom: 1.5rem; -} - -.notebook-cell:has(.notebook-cell__outputs) .notebook-cell__outputs { - background: var(--color-surface); - border-radius: 0.5rem; - padding: 1rem; - margin-top: 1rem; -} - -/* Interactive notebook cells on hover */ -.notebook-cell:has(.notebook-cell__copy-btn) { - transition: all 0.2s ease; -} - -.notebook-cell:has(.notebook-cell__copy-btn:hover) { - background: rgba(var(--color-brand-rgb), 0.02); - border-radius: 0.5rem; - margin: 0.5rem 0; - padding: 0.5rem; -} - -/* Notebook with metadata gets enhanced header */ -.notebook:has(.notebook__metadata) .notebook__header { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border-radius: 0.75rem 0.75rem 0 0; -} - -/* Enhanced notebook title when description is present */ -.notebook__header:has(.notebook__description) .notebook__title { - margin-bottom: 1rem; - font-size: 2.25rem; -} - -/* ======================================== - Modern CSS Features Summary - ======================================== */ - -/* - * This notebook component showcases modern CSS techniques: - * - * ✅ Container Queries: - * - Responsive behavior based on container size, not viewport - * - @container notebook (max-width: 768px) replaces @media queries - * - * ✅ CSS Logical Properties: - * - margin-inline-start/end for better internationalization - * - border-inline-start for RTL language support - * - padding-inline-start for semantic spacing - * - * ✅ Modern Color Functions: - * - color-mix() for alpha blending instead of rgba() - * - More semantic and maintainable color mixing - * - * ✅ Aspect Ratio: - * - aspect-ratio property for consistent image display - * - object-fit: contain for proper image scaling - * - * ✅ Advanced Pseudo-classes: - * - :has() for parent selector functionality - * - :focus-visible for keyboard navigation - * - :focus-within for container focus states - * - * Browser Support: Modern features with graceful fallbacks - * Performance: CSS containment for layout isolation - */ \ No newline at end of file diff --git a/assets/css/components/notice.css b/assets/css/components/notice.css deleted file mode 100644 index 2dbe4803..00000000 --- a/assets/css/components/notice.css +++ /dev/null @@ -1,257 +0,0 @@ -/* Enhanced Notice Component */ - -/* Base Enhanced Notice Styles */ -.notice { - position: relative; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - border-radius: var(--radius-lg); - overflow: hidden; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens */ - animation: notice-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; -} - -/* Removed legacy overrides that zeroed out spacing and styles */ - -/* Enhanced Notice Container */ -.notice__container { - display: flex; - align-items: flex-start; - padding: 0.875rem 1rem; - position: relative; -} - -/* Enhanced Notice Icon */ -.notice__icon-wrapper { - margin-right: 1rem; - flex-shrink: 0; - position: relative; - margin-top: 0.125rem; -} - -.notice__icon { - height: 1.25rem; - width: 1.25rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 0.2s; - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); -} - -/* Enhanced Notice Content */ -.notice__content { - min-width: 0; - flex: 1 1 0%; -} - -.notice__title { - margin-bottom: 0.25rem; - font-family: "NVIDIA", Arial, Helvetica, sans-serif; - font-size: 1rem; - line-height: 1.5rem; - font-weight: 600; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 0.2s; - line-height: 1.3; -} - -.notice__text { - font-size: 0.875rem; - line-height: 1.25rem; - line-height: 1.625; - color: var(--color-text-primary); - font-family: var(--font-brand); -} - -.notice__text p { - margin-bottom: 0.5rem; -} - -.notice__text p:last-child { - margin-bottom: 0; -} - -.notice__text strong { - font-weight: 600; -} - -.notice__text code { - border-radius: var(--radius-base); - padding: 0.125rem 0.375rem; - font-size: 0.75rem; - line-height: 1rem; - background-color: rgba(0, 0, 0, 0.1); - font-family: var(--font-family-mono, monospace); -} - -/* Notice Type Variations */ - -/* Info Notice */ -/* Old hex-based colors commented in favor of tokens */ -/* .notice--info { ... } */ -.notice--info { - background: linear-gradient( - 135deg, - rgba(var(--color-info-rgb), 0.1) 0%, - rgba(var(--color-info-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-info-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-info-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--info .notice__title { color: var(--color-info); } - -.notice--info .notice__icon { - filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.3)); -} - -/* Note Notice */ -.notice--note { - background: linear-gradient( - 135deg, - rgba(var(--color-note-rgb), 0.1) 0%, - rgba(var(--color-note-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-note-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-note-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--note .notice__title { color: var(--color-note); } - -.notice--note .notice__icon { - filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.3)); -} - -/* Tip Notice */ -.notice--tip { - background: linear-gradient( - 135deg, - rgba(var(--color-tip-rgb), 0.1) 0%, - rgba(var(--color-tip-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-tip-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-tip-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--tip .notice__title { color: var(--color-tip); } - -.notice--tip .notice__icon { - filter: drop-shadow(0 1px 2px rgba(34, 197, 94, 0.3)); -} - -/* Warning Notice */ -.notice--warning { - background: linear-gradient( - 135deg, - rgba(var(--color-warning-rgb), 0.1) 0%, - rgba(var(--color-warning-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-warning-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-warning-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--warning .notice__title { color: var(--color-warning); } - -.notice--warning .notice__icon { - filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3)); -} - -/* Danger Notice */ -.notice--danger { - background: linear-gradient( - 135deg, - rgba(var(--color-danger-rgb), 0.1) 0%, - rgba(var(--color-danger-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-danger-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-danger-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--danger .notice__title { color: var(--color-danger); } - -.notice--danger .notice__icon { - filter: drop-shadow(0 1px 2px rgba(239, 68, 68, 0.3)); -} - -/* Security Notice */ -.notice--security { - background: linear-gradient( - 135deg, - rgba(var(--color-security-rgb), 0.1) 0%, - rgba(var(--color-security-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-security-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-security-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--security .notice__title { color: var(--color-security); } - -.notice--security .notice__icon { - filter: drop-shadow(0 1px 2px rgba(168, 85, 247, 0.3)); -} - -/* Snack Notice */ -.notice--snack { - background: linear-gradient( - 135deg, - rgba(var(--color-snack-rgb), 0.1) 0%, - rgba(var(--color-snack-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-snack-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-snack-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--snack .notice__title { color: var(--color-snack); } - -.notice--snack .notice__icon { - filter: drop-shadow(0 1px 2px rgba(236, 72, 153, 0.3)); -} - -/* Hover Effects */ -/* Subtle hover only when interactive content is inside */ -.notice:has(a:hover) .notice__icon { transform: scale(1.03); } - -/* Entrance Animation */ -@keyframes notice-enter { - 0% { - opacity: 0; - transform: translateY(10px) scale(0.98); - } - 100% { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Dark mode code styling */ -@media (prefers-color-scheme: dark) { - .notice__text code { - background-color: rgba(255, 255, 255, 0.1); - } -} - -/* Remove heavy :has() spacing shifts; container layout handles alignment */ \ No newline at end of file diff --git a/assets/css/components/object-model.css b/assets/css/components/object-model.css deleted file mode 100644 index fb7b0c47..00000000 --- a/assets/css/components/object-model.css +++ /dev/null @@ -1,156 +0,0 @@ -@layer components { - /* Object Model Component */ - [data-component="object-model"] { - /* Align nested option text with summary text start: px-3 + chevron(1rem) + gap(0.5rem) */ - --om-pad-x: 0rem; /* no outer horizontal padding on rows */ - --om-chevron: 1rem; /* h-4 w-4 */ - --om-gap: 0.5rem; /* gap-2 */ - --om-indent: calc(var(--om-pad-x) + var(--om-chevron) + var(--om-gap)); - } - .object-model__title, - .object-model__heading { - scroll-margin-top: var(--header-offset); - } - - .object-model__heading, - .object-model__subheading { - color: var(--color-text-primary); - } - - /* Token-based badge for section headings (replaces hard-coded bg classes) */ - .object-model__heading-badge { - display: inline-block; - padding: 0.25rem 0.5rem; /* px-2 py-1 */ - border-radius: 0.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - } - - .object-model__intro-text, - .object-model__summary { - color: var(--color-text-primary); - } - - .object-model__list { - /* Borderless, airy list; separation via spacing and summary hover */ - background: transparent; - border: 0; - box-shadow: none; - overflow: visible; - color: var(--color-text-primary); - list-style: none; - padding-left: 0; - } - - /* Ensure inner text inherits proper token-based colors */ - .object-model__item, - .object-model__field, - .object-model__options { - color: inherit; - } - - .object-model__details { - /* Remove default marker for consistent chevron */ - } - .object-model__details > summary::-webkit-details-marker { - display: none; - } - .object-model__details > summary { - list-style: none; - } - - /* Fine tune nested lists */ - .object-model__options { - /* Use only the explicit padding from markup; remove UA list padding/indent */ - list-style: none; - padding-inline-start: 0; - margin-left: 0.5em; - padding-left: var(--om-indent); - padding-top: 0.25rem; /* tighter attach under summary */ - } - - /* Override global article nested list indent for this component only */ - .article-content[data-component="object-model"] .object-model__list li, - .article-content[data-component="object-model"] .object-model__list li li { - margin-left: 0; - padding-left: 0; - } - - /* Ensure summary row has clear focus ring */ - .object-model__summary-row { - @apply rounded-md outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-400; - } - - .object-model__summary-row:hover { - background-color: rgba(var(--color-brand-rgb), 0.03); - } - - /* Ensure names/descriptions use token text colors automatically */ - .object-model__name { - color: var(--color-text-primary); - } - .object-model__description { - color: var(--color-text-primary); - } - - .object-model__chevron { - color: var(--color-text-secondary); - } - .object-model__dash { - color: var(--color-border-primary); - } - - /* Option items typography */ - /* Keys and values color tokens */ - .object-model__option-key code { - color: var(--color-text-primary); - font-weight: 600; /* add visual weight to keys */ - } - .object-model__option-value, - .object-model__option-value p, - .object-model__option-value a { - color: var(--color-text-primary); - } - .object-model__option-value { display: inline; margin-left: 0.375rem; } - .object-model__option-value p { display: inline; margin: 0; } - .object-model__option-value a:hover { color: var(--color-brand); } - - /* Option item in normal inline flow (avoid flex to prevent text splitting into multiple flex items) */ - .object-model__option-item { - display: block; - padding: 0.125rem 0; - font-size: 0.875rem; /* text-sm */ - line-height: 1.45; - } - .object-model__option-key { - color: var(--color-text-secondary); - white-space: nowrap; - } - .object-model__option-value { - color: var(--color-text-primary); - } - - /* Strong label variant (for legacy markup without key/value wrappers) */ - .object-model__option-item > strong { - margin-right: 0.375rem; - font-weight: 600; - } - .object-model__option-item code { - white-space: nowrap; - } - - /* Compact spacing for rows in dense lists */ - .object-model__row, - .object-model__summary-row { - @apply py-1.5 md:py-2; - } - - .object-model__details:not([open]) .object-model__summary-row { box-shadow: none; } - .object-model__details[open] .object-model__summary-row { box-shadow: none; } - - /* Soft separation between items without borders */ - .object-model__item + .object-model__item { margin-top: 0.25rem; } -} - - diff --git a/assets/css/components/openapi/base.css b/assets/css/components/openapi/base.css deleted file mode 100644 index c8bb45fe..00000000 --- a/assets/css/components/openapi/base.css +++ /dev/null @@ -1,47 +0,0 @@ -/* OpenAPI Base Container & Section Headers */ - -/* ========================================================================== - OpenAPI Base Container - ========================================================================== */ - -.openapi-spec { - max-width: none; - margin: 0; - padding: 0; -} - -.openapi-content { - display: flex; - flex-direction: column; - gap: 3rem; -} - -/* ========================================================================== - Section Headers - ========================================================================== */ - -.section-header { - margin-bottom: 2rem; - text-align: center; -} - -.section-title { - font-family: var(--font-family-brand); - font-size: 2.5rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; - background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.section-description { - font-size: 1.125rem; - color: var(--color-text-secondary); - margin: 0; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} \ No newline at end of file diff --git a/assets/css/components/openapi/code-examples.css b/assets/css/components/openapi/code-examples.css deleted file mode 100644 index 2d16e000..00000000 --- a/assets/css/components/openapi/code-examples.css +++ /dev/null @@ -1,115 +0,0 @@ -/* OpenAPI Code Examples */ - -/* ========================================================================== - Code Examples - ========================================================================== */ - -.code-examples { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - overflow: hidden; -} - -.code-tabs-nav { - display: flex; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); -} - -.code-tab { - background: transparent; - border: none; - padding: 0.75rem 1rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-secondary); - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; - border-bottom: 3px solid transparent; -} - -.code-tab:hover, -.code-tab--active { - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.05); - border-bottom-color: var(--color-brand); -} - -.code-tabs-content { - position: relative; -} - -.code-tab-panel { - display: none; -} - -.code-tab-panel--active { - display: block; -} - -.code-example { - position: relative; -} - -.code-example-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.625rem 1rem; - background: var(--color-bg-tertiary); - border-bottom: 1px solid var(--color-border-primary); -} - -.code-example-title { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.copy-button { - display: flex; - align-items: center; - justify-content: center; - width: 1.75rem; - height: 1.75rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - color: var(--color-text-secondary); - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} - -.copy-button:hover { - background: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} - -.copy-button svg { - width: 0.95rem; - height: 0.95rem; -} - -.code-example pre { - margin: 0; - padding: 0.875rem 1rem; - background: var(--color-bg-code); - overflow-x: auto; -} - -.code-example code { - font-family: var(--font-family-mono); - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-code); -} diff --git a/assets/css/components/openapi/components.css b/assets/css/components/openapi/components.css deleted file mode 100644 index d13b7197..00000000 --- a/assets/css/components/openapi/components.css +++ /dev/null @@ -1,316 +0,0 @@ -/* OpenAPI Components */ - -/* ========================================================================== - Components Section - ========================================================================== */ - -.openapi-components { - padding: 2rem 0; -} - -.components-section { - margin-bottom: 3rem; -} - -.components-section:last-child { - margin-bottom: 0; -} - -.components-section-title { - font-size: 1.5rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 2px solid var(--color-border-primary); -} - -.components-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.component-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} - -.component-item:hover { - border-color: var(--color-brand); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); -} - -.component-header { - padding: 1rem 1.5rem; - display: flex; - align-items: center; - gap: 1rem; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.component-header:hover { - background: var(--color-bg-secondary); -} - -.component-icon { - width: 1.5rem; - height: 1.5rem; - color: var(--color-brand); - flex-shrink: 0; -} - -.component-name { - flex: 1; - min-width: 0; -} - -.component-name h4 { - margin: 0 0 0.25rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.component-type { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.component-toggle { - width: 1.5rem; - height: 1.5rem; - color: var(--color-text-secondary); - flex-shrink: 0; -} - -.component-toggle .chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.component-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -.component-details { - border-top: 1px solid var(--color-border-primary); - - /* Height-based collapse (consistent with all components) */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - - /* Configure collapse behavior */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; /* Large for complex schemas */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1.5rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Remove old class-based approach - component-states.css handles this */ - -/* Legacy styles removed - component-states.css now handles all collapse behavior */ - -@keyframes schema-expand { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* ========================================================================== - :has() Content-Aware Components Enhancements - ========================================================================== */ - -/* Components section adapts based on content type and count */ -.openapi-components:has(.components-section[data-section-type="schemas"]) { - --primary-section: schemas; -} - -.openapi-components:has(.components-section[data-section-type="parameters"]) { - --secondary-section: parameters; -} - -/* Enhanced styling for sections with many items */ -.components-section:has([data-item-count^="1"]) .components-section-title::after, -.components-section:has([data-item-count^="2"]) .components-section-title::after, -.components-section:has([data-item-count^="3"]) .components-section-title::after { - content: " (" attr(data-item-count) ")"; - color: var(--color-text-secondary); - font-size: 0.875rem; - font-weight: 400; -} - -/* ========================================================================== - Enhanced Schema Expansion States with :has() - ========================================================================== */ - -/* Component items with expanded content */ -.component-item:has(.component-details.expanded) { - border-color: var(--color-brand); - box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); -} - -.component-item:has(.component-details.expanded) .component-header { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.1); -} - -/* Enhanced chevron rotation for expanded state */ -.component-item:has(.component-details.expanded) .chevron { - transform: rotate(90deg); - color: var(--color-brand); -} - -/* Schema-specific expanded state styling */ -.component-item[data-component="component-schema"]:has(.component-details.expanded) { - border-left: 4px solid var(--color-brand); -} - -.component-item[data-component="component-schema"]:has(.component-details.expanded) .component-name h4 { - color: var(--color-brand); - font-weight: 700; -} - -/* Complex schemas (with many properties) get enhanced styling when expanded */ -.component-item[data-property-count^="1"]:has(.component-details.expanded), -.component-item[data-property-count^="2"]:has(.component-details.expanded), -.component-item[data-property-count^="3"]:has(.component-details.expanded) { - border-left: 4px solid var(--color-accent); -} - -.component-item[data-property-count^="1"]:has(.component-details.expanded) .component-name h4, -.component-item[data-property-count^="2"]:has(.component-details.expanded) .component-name h4, -.component-item[data-property-count^="3"]:has(.component-details.expanded) .component-name h4 { - color: var(--color-accent); -} - -/* Required schemas get special highlighting when expanded */ -.component-item[data-has-required="true"]:has(.component-details.expanded) .component-header { - background: linear-gradient( - 135deg, - rgba(var(--color-warning-rgb), 0.08) 0%, - rgba(var(--color-warning-rgb), 0.03) 100% - ); -} - -/* Different schema types get unique expanded styling */ -.component-item[data-schema-type="array"]:has(.component-details.expanded) { - border-left-color: var(--color-success); -} - -.component-item[data-schema-type="object"]:has(.component-details.expanded) { - border-left-color: var(--color-brand); -} - -.component-item[data-schema-type="string"]:has(.component-details.expanded) { - border-left-color: var(--color-info); -} - -/* Schema-specific enhancements */ -.component-item[data-component="component-schema"]:has([data-has-properties="true"]) { - border-left: 3px solid var(--color-brand); -} - -.component-item[data-component="component-schema"]:has([data-has-required="true"]) .component-header { - background: rgba(var(--color-accent-rgb), 0.05); -} - -.component-item[data-schema-type="object"]:has([data-property-count]) .component-name::after { - content: " (" attr(data-property-count) " properties)"; - color: var(--color-text-secondary); - font-size: 0.75rem; - font-weight: 400; -} - -.component-item[data-schema-type="array"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); -} - -.component-item[data-schema-type="string"] .component-icon { - color: var(--color-accent); -} - -/* Parameter-specific enhancements */ -.component-item[data-component="component-parameter"][data-param-required="true"] { - border-left: 3px solid var(--color-accent); -} - -.component-item[data-component="component-parameter"][data-param-required="true"] .component-header { - background: rgba(var(--color-accent-rgb), 0.08); -} - -.component-item[data-param-in="path"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.05), rgba(var(--color-danger-rgb), 0.05)); -} - -.component-item[data-param-in="query"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-info-rgb), 0.05)); -} - -.component-item[data-param-in="header"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); -} - -/* Enhanced hover effects based on content */ -.component-item:has([data-has-description="true"]):hover { - transform: translateY(-2px); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.15), - 0 2px 4px rgba(0, 0, 0, 0.08); -} - -/* Responsive adaptations */ -.components-section:has(.component-item:nth-child(n+10)) { - --large-section: true; -} - -.components-section:has(.component-item:nth-child(n+10)) .components-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1rem; -} - -/* Section with only one item gets special treatment */ -.components-section:has(.component-item:only-child) .component-item { - max-width: 600px; - margin: 0 auto; -} - -/* Enhanced focus states for accessibility */ -.component-item:has(.component-header:focus-visible) { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} diff --git a/assets/css/components/openapi/endpoints.css b/assets/css/components/openapi/endpoints.css deleted file mode 100644 index 808bf0f6..00000000 --- a/assets/css/components/openapi/endpoints.css +++ /dev/null @@ -1,425 +0,0 @@ -/* OpenAPI Endpoints */ - -/* ========================================================================== - Endpoints Section - ========================================================================== */ - -.openapi-endpoints { - padding: 2rem 0; -} - -/* Endpoint Groups */ -.endpoint-group { - margin-bottom: 2rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; -} - -.endpoint-group-header { - padding: 1rem 1.5rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; -} - -.endpoint-group-header:hover { - background: var(--color-bg-tertiary); -} - -.endpoint-group-title { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.endpoint-group-title h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.endpoint-count { - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.25rem 0.75rem; - border-radius: 1rem; - font-size: 0.8rem; - font-weight: 500; -} - -.endpoint-group-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; -} - -.endpoint-group-toggle .chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.endpoint-group-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -.endpoint-group-content { - /* Use height-based collapse (consistent with response-details) */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - - /* Configure collapse behavior */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; /* Larger for endpoint lists */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 0; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Remove old class-based approach - component-states.css handles this */ - -/* Endpoint Items within Groups */ -.endpoint-item { - background: var(--color-surface); - border: none; - border-bottom: 1px solid var(--color-border-primary); - border-radius: 0; - margin-bottom: 0; - overflow: hidden; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.endpoint-item:last-child { - border-bottom: none; -} - -.endpoint-item:hover { - background: var(--color-bg-secondary); -} - -/* Endpoint Header */ -.endpoint-header { - padding: 0.75rem 1rem; - display: flex; - align-items: center; - gap: 0.75rem; - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -/* Keyboard focus visibility */ -.endpoint-group-header:focus-visible, -.endpoint-header:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} - -.endpoint-header:hover { - background: var(--color-bg-secondary); -} - -.endpoint-header__method { - flex-shrink: 0; -} - -.endpoint-header__path { - flex: 1; - min-width: 0; -} - -.endpoint-header__summary { - flex: 2; - min-width: 0; -} - -.endpoint-header__meta { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.endpoint-header__toggle { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; -} - -.endpoint-path { - font-family: var(--font-family-mono); - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.endpoint-summary { - font-size: 0.875rem; - color: var(--color-text-primary); - font-weight: 500; -} - -.endpoint-operation-id { - font-size: 0.75rem; - color: var(--color-text-secondary); -} - -.operation-id-label { - font-weight: 500; -} - -.endpoint-tags { - display: flex; - gap: 0.375rem; -} - -.endpoint-tag { - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} - -/* HTTP Method Badges */ -.http-method { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.375rem 0.75rem; - border-radius: 0.375rem; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - min-width: 4rem; -} - -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .http-method--get { background: #22c55e; color: white; } -.http-method--post { background: #3b82f6; color: white; } -.http-method--put { background: #f59e0b; color: white; } -.http-method--patch { background: #8b5cf6; color: white; } -.http-method--delete { background: #ef4444; color: white; } -.http-method--head { background: #6b7280; color: white; } -.http-method--options { background: #9333ea; color: white; } */ - -.http-method--get { background: var(--http-get-bg); color: var(--http-get-text); } -.http-method--post { background: var(--http-post-bg); color: var(--http-post-text); } -.http-method--put { background: var(--http-put-bg); color: var(--http-put-text); } -.http-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -.http-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } -.http-method--head { background: var(--http-head-bg); color: var(--http-head-text); } -.http-method--options { background: var(--http-options-bg); color: var(--http-options-text); } - -/* Endpoint Details */ -.endpoint-details { - display: none; - padding: 1.5rem; - background: var(--color-surface); - border-top: 1px solid var(--color-border-primary); -} - -.endpoint-details.expanded { - display: block; -} - -.endpoint-section { - margin-bottom: 2rem; -} - -.endpoint-section:last-child { - margin-bottom: 0; -} - -.endpoint-section h4 { - margin: 0 0 1rem 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - display: flex; - align-items: center; - gap: 0.5rem; -} - -.endpoint-description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1.5rem; -} - -/* Chevron Icon */ -.chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.endpoint-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -/* ========================================================================== - :has() Content-Aware Endpoints Enhancements - ========================================================================== */ - -/* API endpoint viewer adapts based on content type */ -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-parameters="true"]) { - --has-params: true; -} - -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-request-body="true"]) { - --has-body: true; -} - -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-responses="true"]) { - --has-responses: true; -} - -/* Method-specific styling enhancements */ -.openapi-spec[data-method="GET"]:has([data-has-parameters="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-info-rgb), 0.5); -} - -.openapi-spec[data-method="POST"]:has([data-has-request-body="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-success-rgb), 0.5); -} - -.openapi-spec[data-method="PUT"]:has([data-has-request-body="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-warning-rgb), 0.5); -} - -.openapi-spec[data-method="DELETE"]:has([data-has-responses="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-danger-rgb), 0.5); -} - -/* Enhanced endpoint header based on content */ -.api-endpoint-header:has([data-has-summary="true"]):has([data-has-description="true"]) { - padding: 2rem 1.5rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); -} - -/* Endpoint item adapts based on available sections */ -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - --sections: comprehensive; - border: 2px solid var(--color-border-primary); - border-radius: 1rem; - background: var(--color-surface); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.endpoint-item:has([data-has-security="true"]) { - border-left: 3px solid var(--color-accent); -} - -.endpoint-item:has([data-has-examples="true"]) .endpoint-details { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); -} - -/* Parameter count indicators */ -.endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before { - content: attr(data-parameter-count) " params"; - position: absolute; - top: 0.5rem; - right: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 1rem; - font-weight: 500; -} - -/* Response count indicators */ -.endpoint-item[data-response-count]:not([data-response-count="0"])::after { - content: attr(data-response-count) " responses"; - position: absolute; - top: 2.5rem; - right: 0.5rem; - background: rgba(var(--color-accent-rgb), 0.1); - color: var(--color-accent); - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 1rem; - font-weight: 500; -} - -/* Endpoint group with many endpoints gets grid layout */ -.endpoint-group:has(.endpoint-item:nth-child(n+6)) .endpoint-group-content { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 1rem; -} - -/* Enhanced hover effects for content-rich endpoints */ -.endpoint-item:has([data-has-examples="true"]):hover { - transform: translateY(-2px); - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); -} - -/* Responsive adaptations for endpoints */ -@media (max-width: 768px) { - .endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - border-radius: 0.5rem; - margin: 0.5rem 0; - } - - .endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before, - .endpoint-item[data-response-count]:not([data-response-count="0"])::after { - position: static; - display: inline-block; - margin: 0.25rem; - } -} - -/* Reduced motion: remove transitions for interactive rows/headers */ -@media (prefers-reduced-motion: reduce) { - .endpoint-group-header, - .endpoint-item, - .endpoint-header { - transition: none !important; - } -} diff --git a/assets/css/components/openapi/header.css b/assets/css/components/openapi/header.css deleted file mode 100644 index ceda1be7..00000000 --- a/assets/css/components/openapi/header.css +++ /dev/null @@ -1,307 +0,0 @@ -/* OpenAPI Header */ - -/* ========================================================================== - OpenAPI Header - ========================================================================== */ - -.openapi-header { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 2px solid var(--color-border-primary); - border-radius: 1.5rem; - padding: 2rem; - margin-bottom: 2rem; - position: relative; - overflow: hidden; -} - -.openapi-header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-accent-rgb), 0.05) 100% - ); - pointer-events: none; -} - -.openapi-header__meta { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; - position: relative; -} - -.openapi-header__badge { - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.1); - border: 1px solid rgba(var(--color-brand-rgb, 59, 130, 246), 0.2); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand, #3b82f6); - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} - -.openapi-header__badge:hover { - background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.15); - border-color: rgba(var(--color-brand-rgb, 59, 130, 246), 0.3); - transform: translateY(-1px); -} - -/* Version Badge */ -.openapi-header__badge--version { - background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.1); - border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.2); - color: var(--color-accent, #8b5cf6); -} - -.openapi-header__badge--version:hover { - background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.15); - border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.3); -} - -/* API Type Badge */ -.openapi-header__badge--type[data-api-type="REST"] { - background: rgba(var(--color-info-rgb), 0.1); - border-color: rgba(var(--color-info-rgb), 0.2); - color: var(--color-info); -} - -.openapi-header__badge--type[data-api-type="GraphQL"] { - background: rgba(var(--color-danger-rgb), 0.1); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: var(--color-danger); -} - -/* Maturity Badge */ -.openapi-header__badge--maturity[data-maturity="stable"] { - background: rgba(var(--color-success-rgb), 0.1); - border-color: rgba(var(--color-success-rgb), 0.2); - color: var(--color-success); -} - -.openapi-header__badge--maturity[data-maturity="beta"] { - background: rgba(var(--color-warning-rgb), 0.1); - border-color: rgba(var(--color-warning-rgb), 0.2); - color: var(--color-warning); -} - -.openapi-header__badge--maturity[data-maturity="alpha"] { - background: rgba(var(--color-danger-rgb), 0.1); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: var(--color-danger); -} - -/* Stability Badge */ -.openapi-header__badge--stability { - background: rgba(var(--color-security-rgb), 0.1); - border-color: rgba(var(--color-security-rgb), 0.2); - color: var(--color-security); -} - -.openapi-version { - font-family: var(--font-family-mono); -} - -.openapi-header__version { - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - background: rgba(var(--color-accent-rgb), 0.1); - border: 1px solid rgba(var(--color-accent-rgb), 0.2); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-accent); -} - -.api-version { - font-family: var(--font-family-mono); -} - -.openapi-header__version-stat { - min-width: auto; - flex: none; - min-height: auto; - padding: 0.5rem 1rem; -} - -.openapi-header__version-stat .overview-stat__value { - font-family: var(--font-family-mono); - font-size: 0.875rem; -} - -.openapi-header__title { - font-family: var(--font-family-brand); - font-size: 3rem; - font-weight: 800; - margin: 0 0 1rem 0; - color: var(--color-text-primary); - position: relative; -} - -.openapi-header__summary { - font-size: 1.25rem; - color: var(--color-text-secondary); - margin-bottom: 1rem; - position: relative; -} - -.openapi-header__description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1.5rem; - position: relative; -} - -.openapi-header__info { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; - position: relative; -} - -.openapi-contact, -.openapi-license, -.openapi-terms { - background: rgba(255, 255, 255, 0.5); - padding: 1.5rem; - border-radius: 1rem; - border: 1px solid var(--color-border-primary); -} - -.openapi-contact h3, -.openapi-license h3, -.openapi-terms h3 { - margin: 0 0 1rem 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.contact-name, -.contact-email, -.contact-url, -.license-name, -.terms-link { - margin-bottom: 0.5rem; -} - -.contact-email a, -.contact-url a, -.license-name a, -.terms-link a { - color: var(--color-brand); - text-decoration: none; - transition: color 0.2s ease; -} - -.contact-email a:hover, -.contact-url a:hover, -.license-name a:hover, -.terms-link a:hover { - color: var(--color-accent); - text-decoration: underline; -} - -/* ========================================================================== - :has() Content-Aware Header Enhancements - ========================================================================== */ - -/* Header with description gets enhanced layout */ -.openapi-header:has(.openapi-header__description) { - padding-bottom: 2.5rem; -} - -.openapi-header:has(.openapi-header__description) .openapi-header__title { - margin-bottom: 1.25rem; -} - -/* Header without info section is more compact */ -.openapi-header:not(:has(.openapi-header__info *)) .openapi-header__description { - margin-bottom: 0; -} - -/* Meta section adapts based on version presence */ -.openapi-header__meta:has(.openapi-header__version-stat) { - gap: 1.5rem; - align-items: stretch; -} - -/* Info section adapts to number of sections */ -.openapi-header__info:has(.openapi-contact:only-child) { - grid-template-columns: 1fr; - max-width: 400px; -} - -.openapi-header__info:has(.openapi-contact + .openapi-license:not(+ *)) { - grid-template-columns: repeat(2, 1fr); -} - -.openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); -} - -/* Enhanced contact styling based on available info */ -.openapi-contact:has(.contact-email):has(.contact-url) { - background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); - border-color: rgba(var(--color-brand-rgb), 0.15); -} - -.openapi-contact:has(.contact-name) h3 { - color: var(--color-brand); -} - -/* License with URL gets enhanced styling */ -.openapi-license:has(a) .license-name a { - color: var(--color-brand); - font-weight: 600; - text-decoration: none; - transition: all 0.2s ease; -} - -.openapi-license:has(a) .license-name a:hover { - color: var(--color-accent); - text-decoration: underline; -} - -/* Header with full info gets enhanced spacing */ -.openapi-header:has(.openapi-contact):has(.openapi-license):has(.openapi-terms) { - padding: 2.5rem; -} - -/* Responsive adaptations using :has() */ -@media (max-width: 768px) { - .openapi-header:has(.openapi-header__info) { - padding: 1.5rem; - } - - .openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { - grid-template-columns: 1fr; - gap: 1rem; - } - - .openapi-header__meta:has(.openapi-header__version-stat) { - flex-direction: column; - gap: 0.75rem; - align-items: flex-start; - } -} \ No newline at end of file diff --git a/assets/css/components/openapi/index.css b/assets/css/components/openapi/index.css deleted file mode 100644 index 5c416e10..00000000 --- a/assets/css/components/openapi/index.css +++ /dev/null @@ -1,18 +0,0 @@ -/* OpenAPI Component - Modular imports */ - -@import "./base.css"; -@import "./header.css"; -@import "./overview.css"; -@import "./servers.css"; -@import "./navigation.css"; -@import "./sidebar.css"; -@import "./pages.css"; -@import "./single.css"; -@import "./endpoints.css"; -@import "./parameters.css"; -@import "./responses.css"; -@import "./schemas.css"; -@import "./code-examples.css"; -@import "./components.css"; -@import "./security.css"; -@import "./responsive.css"; \ No newline at end of file diff --git a/assets/css/components/openapi/navigation.css b/assets/css/components/openapi/navigation.css deleted file mode 100644 index 133d87be..00000000 --- a/assets/css/components/openapi/navigation.css +++ /dev/null @@ -1,124 +0,0 @@ -/* OpenAPI Navigation */ - -/* ========================================================================== - Endpoints Navigation - ========================================================================== */ - -.endpoints-nav { - margin-bottom: 2rem; - padding: 1.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; -} - -.endpoints-nav__section { - margin-bottom: 1.5rem; -} - -.endpoints-nav__section:last-child { - margin-bottom: 0; -} - -.endpoints-nav__header { - font-weight: 600; - color: var(--color-text-primary); - margin-bottom: 1rem; -} - -.endpoints-nav__tags, -.endpoints-nav__methods { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.endpoints-nav__search { - position: relative; -} - -.endpoint-search { - width: 100%; - padding: 0.75rem 2rem 0.75rem 0.75rem; - font-size: 0.875rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); - color: var(--color-text-primary); - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - box-shadow 0.2s ease; -} - -.endpoint-search:focus { - outline: none; - border-color: var(--color-brand); - box-shadow: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); -} - -.search-icon { - position: absolute; - right: 0.5rem; - top: 50%; - transform: translateY(-50%); - width: 1rem; - height: 1rem; - color: var(--color-text-secondary); -} - -.tag-filter, -.method-filter { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 2rem; - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} - -.tag-filter:hover, -.tag-filter--active { - background: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} - -.method-filter:hover, -.method-filter--active { - border-color: var(--color-brand); - color: var(--color-brand); -} - -/* Method-specific colors */ -/* Old hex-based method filter colors commented out in favor of tokens per themes/milodocs/init */ -/* .method-filter--get { border-color: #22c55e; color: #22c55e; } -.method-filter--post { border-color: #3b82f6; color: #3b82f6; } -.method-filter--put { border-color: #f59e0b; color: #f59e0b; } -.method-filter--patch { border-color: #8b5cf6; color: #8b5cf6; } -.method-filter--delete { border-color: #ef4444; color: #ef4444; } */ - -.method-filter--get { border-color: var(--http-get-bg); color: var(--http-get-bg); } -.method-filter--post { border-color: var(--http-post-bg); color: var(--http-post-bg); } -.method-filter--put { border-color: var(--http-put-bg); color: var(--http-put-bg); } -.method-filter--patch { border-color: var(--http-patch-bg); color: var(--http-patch-bg); } -.method-filter--delete { border-color: var(--http-delete-bg); color: var(--http-delete-bg); } - -/* .method-filter--get.method-filter--active { background: #22c55e; border-color: #22c55e; color: white; } */ -.method-filter--get.method-filter--active { background: var(--http-get-bg); border-color: var(--http-get-bg); color: var(--http-get-text); } -/* .method-filter--post.method-filter--active { background: #3b82f6; border-color: #3b82f6; color: white; } */ -.method-filter--post.method-filter--active { background: var(--http-post-bg); border-color: var(--http-post-bg); color: var(--http-post-text); } -/* .method-filter--put.method-filter--active { background: #f59e0b; border-color: #f59e0b; color: white; } */ -.method-filter--put.method-filter--active { background: var(--http-put-bg); border-color: var(--http-put-bg); color: var(--http-put-text); } -/* .method-filter--patch.method-filter--active { background: #8b5cf6; border-color: #8b5cf6; color: white; } */ -.method-filter--patch.method-filter--active { background: var(--http-patch-bg); border-color: var(--http-patch-bg); color: var(--http-patch-text); } -/* .method-filter--delete.method-filter--active { background: #ef4444; border-color: #ef4444; color: white; } */ -.method-filter--delete.method-filter--active { background: var(--http-delete-bg); border-color: var(--http-delete-bg); color: var(--http-delete-text); } \ No newline at end of file diff --git a/assets/css/components/openapi/overview.css b/assets/css/components/openapi/overview.css deleted file mode 100644 index 2b099b8d..00000000 --- a/assets/css/components/openapi/overview.css +++ /dev/null @@ -1,439 +0,0 @@ -/* OpenAPI Overview - Modern Info-Dense Layout */ - -/* ========================================================================== - Overview Section - ========================================================================== */ - -.openapi-overview { - padding: 1.5rem 0; - margin-bottom: 1rem; -} - -/* Header */ -.overview-header { - margin-bottom: 1.5rem; - text-align: left; -} - -.overview-title { - font-family: var(--font-family-brand); - font-size: 1.75rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; -} - -/* Enhanced gradient text with fallback */ -@supports (background-clip: text) or (-webkit-background-clip: text) { - .overview-title { - background: linear-gradient(135deg, var(--color-brand, #3b82f6), var(--color-accent, #8b5cf6)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; - } -} - -.overview-subtitle { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; - opacity: 0.8; -} - -/* Content Container */ -.overview-content { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -/* ========================================================================== - Stats Bar - Horizontal info-dense layout - ========================================================================== */ - -.overview-stats { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - align-items: stretch; -} - -.overview-stat { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - transition: - background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); - min-height: 60px; - position: relative; - overflow: hidden; - flex: 1; - min-width: 140px; -} - -.overview-stat::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.03); - opacity: 0; - transition: opacity 0.2s ease; -} - -.overview-stat:hover { - transform: translateY(-2px); - border-color: var(--color-brand); - box-shadow: var(--elevation-hover-2); -} - -.overview-stat:hover::before { - opacity: 1; -} - -/* Stat Icon - Container-based sizing following theme patterns */ -.overview-stat__icon { - width: 1.25rem; - height: 1.25rem; - color: var(--color-text-secondary); - flex-shrink: 0; - transition: color 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -/* SVG naturally fills container */ -.overview-stat__icon svg { - width: 100%; - height: 100%; - display: block; -} - -.overview-stat:hover .overview-stat__icon { - color: var(--color-brand); -} - -/* Stat Content */ -.overview-stat__content { - display: flex; - flex-direction: column; - gap: 0.125rem; - min-width: 0; - flex: 1; -} - -.overview-stat__label { - font-size: 0.75rem; - font-weight: 500; - color: var(--color-text-tertiary); - text-transform: uppercase; - letter-spacing: 0.025em; - line-height: 1; -} - -.overview-stat__value { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - line-height: 1.2; - word-break: break-word; -} - -/* Stat Variants */ -.overview-stat--primary { - background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); - color: var(--color-text-inverse); - border-color: transparent; -} - -.overview-stat--primary .overview-stat__icon, -.overview-stat--primary .overview-stat__label, -.overview-stat--primary .overview-stat__value { - color: currentColor; -} - -.overview-stat--primary .overview-stat__label { - opacity: 0.8; -} - -.overview-stat--primary:hover { - transform: translateY(-3px); - box-shadow: - 0 8px 20px rgba(var(--color-brand-rgb), 0.25), - 0 4px 8px rgba(0, 0, 0, 0.1); -} - -/* ========================================================================== - Description Section - ========================================================================== */ - -.overview-description { - padding: 1rem 1.25rem; - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - border-left: 3px solid var(--color-brand); -} - -.overview-description p { - margin: 0; - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.875rem; -} - -/* ========================================================================== - Documentation Links - ========================================================================== */ - -.overview-documentation { - margin-top: 0.5rem; -} - -.overview-documentation__title { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 1rem 0; -} - -.overview-documentation__grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 0.75rem; - margin-top: 1.5rem; -} - -.overview-doc-link { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.875rem 1rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - text-decoration: none; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; - position: relative; - overflow: hidden; -} - -.overview-doc-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.03); - opacity: 0; - transition: opacity 0.2s ease; -} - -.overview-doc-link:hover { - transform: translateY(-2px); - border-color: var(--color-brand); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); -} - -.overview-doc-link:hover::before { - opacity: 1; -} - -.overview-doc-link__icon { - width: 1.125rem; - height: 1.125rem; - color: var(--color-text-secondary); - flex-shrink: 0; - transition: color 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -/* SVG naturally fills container */ -.overview-doc-link__icon svg { - width: 100%; - height: 100%; - display: block; -} - -.overview-doc-link:hover .overview-doc-link__icon { - color: var(--color-brand); -} - -.overview-doc-link__content { - display: flex; - flex-direction: column; - gap: 0.125rem; - flex: 1; - min-width: 0; -} - -.overview-doc-link__title { - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-primary); - line-height: 1.3; - transition: color 0.2s ease; -} - -.overview-doc-link:hover .overview-doc-link__title { - color: var(--color-brand); -} - -.overview-doc-link__description { - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.4; -} - -.overview-doc-link__arrow { - width: 1rem; - height: 1rem; - color: var(--color-text-tertiary); - flex-shrink: 0; - transition: - color 0.2s ease, - transform 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -/* SVG naturally fills container */ -.overview-doc-link__arrow svg { - width: 100%; - height: 100%; - display: block; -} - -.overview-doc-link:hover .overview-doc-link__arrow { - color: var(--color-brand); - transform: translateX(2px) translateY(-2px); -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .overview-stats { flex-direction: column; gap: 0.5rem; } - - .overview-stat { min-width: unset; } - - .overview-documentation__grid { grid-template-columns: 1fr; } - - .overview-title { font-size: 1.5rem; } -} - -@media (max-width: 480px) { - .overview-stat { - gap: 0.5rem; - padding: 0.625rem 0.75rem; - min-height: 50px; - } - - .overview-stat__icon { - width: 1rem; - height: 1rem; - } - - .overview-doc-link { - gap: 0.5rem; - padding: 0.75rem; - } -} - -/* ========================================================================== - :has() Content-Aware Overview Enhancements - ========================================================================== */ - -/* Overview with documentation gets enhanced layout */ -.openapi-overview:has(.overview-documentation) { - padding-bottom: 2rem; -} - -.openapi-overview:has(.overview-documentation) .overview-stats { - margin-bottom: 2rem; -} - -/* Stats container adapts based on number of stats */ -.overview-stats:has(.overview-stat:nth-child(4)) { - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); -} - -.overview-stats:has(.overview-stat:nth-child(3)) { - grid-template-columns: repeat(3, 1fr); -} - -.overview-stats:has(.overview-stat:nth-child(2)) { - grid-template-columns: repeat(2, 1fr); -} - -/* Enhanced hover effects for overview with documentation */ -.openapi-overview:has(.overview-documentation) .overview-stat:hover { - transform: translateY(-3px); - box-shadow: var(--elevation-hover-4); -} - -/* Documentation section gets enhanced styling when stats are present */ -.openapi-overview:has(.overview-stats) .overview-documentation { - border-top: 1px solid var(--color-border-primary); - padding-top: 1.5rem; - margin-top: 1.5rem; -} - -/* Single stat gets special treatment */ -.overview-stats:has(.overview-stat:only-child) .overview-stat { - max-width: 300px; - margin: 0 auto; -} - -/* API type specific enhancements */ -[data-api-type="REST"] .overview-stat--secondary { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.1), rgba(var(--color-security-rgb), 0.1)); - border-color: rgba(var(--color-info-rgb), 0.2); -} - -[data-api-type="GraphQL"] .overview-stat--secondary { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); - border-color: rgba(var(--color-danger-rgb), 0.2); -} - -/* Maturity-based styling */ -[data-maturity="stable"] .overview-stat--accent { - background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.1), rgba(var(--color-success-rgb), 0.1)); - border-color: rgba(var(--color-success-rgb), 0.2); -} - -[data-maturity="beta"] .overview-stat--accent { - background: linear-gradient(135deg, rgba(var(--color-warning-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); - border-color: rgba(var(--color-warning-rgb), 0.2); -} - -[data-maturity="alpha"] .overview-stat--warning { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-danger-rgb), 0.1)); - border-color: rgba(var(--color-danger-rgb), 0.2); -} diff --git a/assets/css/components/openapi/pages.css b/assets/css/components/openapi/pages.css deleted file mode 100644 index 1528d28c..00000000 --- a/assets/css/components/openapi/pages.css +++ /dev/null @@ -1,313 +0,0 @@ -/* OpenAPI Generated Pages Styles */ -/* Styling for API overview, tag, and endpoint pages generated by content adapter */ - -/* ========================================================================== - API Overview Page - ========================================================================== */ - -.api-overview .api-endpoint-groups { - margin: 2rem 0; -} - -.endpoint-groups-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 1.5rem; - margin-top: 1.5rem; -} - -.card--endpoint-group { - padding: 1.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} - -.card--endpoint-group:hover { - border-color: var(--color-brand-primary); - box-shadow: var(--elevation-hover-2); -} - -.card--endpoint-group h3 { - margin: 0 0 0.5rem 0; - font-size: 1.125rem; - font-weight: 600; -} - -.card--endpoint-group h3 a { - color: var(--color-text-primary); - text-decoration: none; -} - -.card--endpoint-group h3 a:hover { - color: var(--color-brand-primary); -} - -.card--endpoint-group p { - margin: 0 0 1rem 0; - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.5; -} - -.endpoint-count { - font-size: 0.75rem; - color: var(--color-text-tertiary); - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* ========================================================================== - API Tag Page - ========================================================================== */ - -.api-tag-header { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} - -.api-tag-breadcrumb { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} - -.api-tag-breadcrumb a { - color: var(--color-brand-primary); - text-decoration: none; -} - -.api-tag-breadcrumb a:hover { - text-decoration: underline; -} - -.api-tag-header h1 { - margin: 0 0 0.5rem 0; - font-size: 2rem; - font-weight: 700; - color: var(--color-text-primary); -} - -.api-tag-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 1rem; - line-height: 1.6; -} - -.card--endpoint-summary { - padding: 1.25rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - margin-bottom: 1rem; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} - -.card--endpoint-summary:hover { - border-color: var(--color-brand-border); - box-shadow: var(--elevation-hover-1); -} - -.endpoint-summary-header { - display: flex; - align-items: flex-start; - gap: 1rem; -} - -.endpoint-summary-info { - flex: 1; -} - -.endpoint-summary-info h3 { - margin: 0 0 0.5rem 0; - font-size: 1rem; - font-weight: 600; -} - -.endpoint-summary-info h3 a { - color: var(--color-text-primary); - text-decoration: none; - font-family: var(--font-mono, monospace); -} - -.endpoint-summary-info h3 a:hover { - color: var(--color-brand-primary); -} - -.endpoint-summary-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.5; -} - -/* ========================================================================== - API Endpoint Page - ========================================================================== */ - -.api-endpoint-header { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} - -.api-endpoint-breadcrumb { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} - -.api-endpoint-breadcrumb a { - color: var(--color-brand-primary); - text-decoration: none; -} - -.api-endpoint-breadcrumb a:hover { - text-decoration: underline; -} - -.endpoint-title-section { - margin-top: 1rem; -} - -.endpoint-method-path { - display: flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.endpoint-path { - font-family: var(--font-mono, monospace); - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - background: var(--color-surface-alt); - padding: 0.375rem 0.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); -} - -.api-endpoint-header h1 { - margin: 0 0 0.75rem 0; - font-size: 1.875rem; - font-weight: 700; - color: var(--color-text-primary); - line-height: 1.3; -} - -.endpoint-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 1rem; - line-height: 1.6; -} - -/* ========================================================================== - Method Badges (Enhanced) - ========================================================================== */ - -.method-badge { - display: inline-block; - padding: 0.25rem 0.75rem; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - border-radius: 0.375rem; - letter-spacing: 0.025em; - flex-shrink: 0; - min-width: 4rem; - text-align: center; -} - -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .method-badge--get { background: #10b981; color: white; } */ -.method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } - -/* .method-badge--post { background: #3b82f6; color: white; } */ -.method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } - -/* .method-badge--put { background: #f59e0b; color: white; } */ -.method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } - -/* .method-badge--patch { background: #8b5cf6; color: white; } */ -.method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } - -/* .method-badge--delete { background: #ef4444; color: white; } */ -.method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } - -/* .method-badge--head, .method-badge--options { background: #6b7280; color: white; } */ -.method-badge--head, -.method-badge--options { - background: var(--http-head-bg); - color: var(--http-head-text); -} - -/* ========================================================================== - Page Content Integration - ========================================================================== */ - -.page-content { - margin-top: 2rem; - padding-top: 2rem; - border-top: 1px solid var(--color-border-light); -} - -.page-content h2:first-child { - margin-top: 0; -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .endpoint-groups-grid { - grid-template-columns: 1fr; - gap: 1rem; - } - - .endpoint-group-card { - padding: 1rem; - } - - .endpoint-summary-header { - flex-direction: column; - gap: 0.75rem; - } - - .endpoint-method-path { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .endpoint-path { - font-size: 1rem; - word-break: break-all; - } - - .api-endpoint-header h1 { - font-size: 1.5rem; - } -} - -/* ========================================================================== - Dark Mode Adjustments - ========================================================================== */ - -/* Dark mode handled via CSS variables in :root/.dark */ \ No newline at end of file diff --git a/assets/css/components/openapi/parameters.css b/assets/css/components/openapi/parameters.css deleted file mode 100644 index 932dceeb..00000000 --- a/assets/css/components/openapi/parameters.css +++ /dev/null @@ -1,200 +0,0 @@ -/* OpenAPI Parameters */ - -/* ========================================================================== - Parameters - ========================================================================== */ - -.parameters-container { - display: flex; - flex-direction: column; - gap: 2rem; -} - -.parameters-section { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; -} - -.parameters-section-header { - padding: 1rem 1.5rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); -} - -.parameters-section-title { - margin: 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); -} - -/* Parameter Group Headers */ -.parameter-group-header { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; -} - -.parameter-group-header:hover { - background: var(--color-bg-tertiary); -} - -.parameter-group-title { - margin: 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - display: flex; - align-items: center; - gap: 0.5rem; -} - -.parameter-count { - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} - -.parameter-group-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; -} - -.parameter-group-toggle .chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.parameter-group-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -.parameter-list { - /* Height-based collapse (consistent with all components) */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - - /* Configure collapse behavior */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 1500px; /* Good for parameter lists */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Remove old class-based approach - component-states.css handles this */ - -.parameters-list { - padding: 0; -} - -.parameter-item { - padding: 1rem 1.5rem; - border-bottom: 1px solid var(--color-border-primary); - transition: background-color 0.2s ease; -} - -.parameter-item:last-child { - border-bottom: none; -} - -.parameter-item:hover { - background: var(--color-bg-secondary); -} - -.parameter-item--required { - border-left: 4px solid var(--color-brand); -} - -.parameter-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-bottom: 0.75rem; -} - -.parameter-name { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.parameter-name code { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.875rem; -} - -.parameter-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; -} - -.parameter-type { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.parameter-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 0.75rem; -} - -.parameter-constraints { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.constraint-item { - background: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.75rem; - color: var(--color-text-secondary); -} - -.constraint-label { - font-weight: 600; -} - -.constraint-value { - font-family: var(--font-family-mono); - color: var(--color-brand); -} diff --git a/assets/css/components/openapi/responses.css b/assets/css/components/openapi/responses.css deleted file mode 100644 index a21bd90a..00000000 --- a/assets/css/components/openapi/responses.css +++ /dev/null @@ -1,213 +0,0 @@ -/* OpenAPI Responses */ - -/* ========================================================================== - Response Sections - ========================================================================== */ - -.responses-container { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.response-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - overflow: hidden; -} - -.response-header { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; -} - -.response-header:hover { - background: var(--color-bg-tertiary); -} - -.response-status { - display: flex; - align-items: center; - gap: 0.75rem; - flex: 1; -} - -.response-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; -} - -.response-toggle .chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.response-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -.response-details { - border-top: 1px solid var(--color-border-primary); - - /* Use height-based collapse (not display-based) for smooth animations */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); - - /* Start collapsed */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; -} - - - -.response-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; -} - -/* Status Code Badges */ -.status-code { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.25rem 0.75rem; - border-radius: 0.375rem; - font-size: 0.8rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - min-width: 3rem; -} - -/* Old hex-based status colors commented out in favor of tokens per themes/milodocs/init */ -/* .status-code--2xx { background: #22c55e; color: white; } -.status-code--3xx { background: #3b82f6; color: white; } -.status-code--4xx { background: #f59e0b; color: white; } -.status-code--5xx { background: #ef4444; color: white; } -.status-code--dxx { background: #6b7280; color: white; } */ - -.status-code--2xx { background: var(--status-2xx-bg); color: var(--status-2xx-text); } -.status-code--3xx { background: var(--status-3xx-bg); color: var(--status-3xx-text); } -.status-code--4xx { background: var(--status-4xx-bg); color: var(--status-4xx-text); } -.status-code--5xx { background: var(--status-5xx-bg); color: var(--status-5xx-text); } -.status-code--dxx { background: var(--status-dxx-bg); color: var(--status-dxx-text); } - -/* Response Content */ -.response-content { - margin-top: 1rem; -} - -.response-content h6 { - margin: 0 0 0.75rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.response-media-type { - margin-bottom: 1rem; - padding: 0.75rem; - background: var(--color-bg-tertiary); - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); -} - -.media-type-label { - font-family: var(--font-family-mono); - font-size: 0.8rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; -} - -.response-schema { - margin-top: 0.75rem; -} - -/* Response Headers */ -.response-headers { - margin-bottom: 1rem; -} - -.response-headers h6 { - margin: 0 0 0.75rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.headers-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.header-item { - padding: 0.5rem 0.75rem; - background: var(--color-bg-tertiary); - border-radius: 0.25rem; - border: 1px solid var(--color-border-primary); -} - -.header-name { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.25rem; -} - -.header-name code { - font-family: var(--font-family-mono); - font-size: 0.8rem; - font-weight: 600; - color: var(--color-brand); -} - -.header-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-size: 0.7rem; - font-weight: 600; - text-transform: uppercase; -} - -.header-description { - font-size: 0.8rem; - color: var(--color-text-secondary); - margin-bottom: 0.25rem; -} - -.header-type { - display: flex; - align-items: center; - gap: 0.25rem; -} \ No newline at end of file diff --git a/assets/css/components/openapi/responsive.css b/assets/css/components/openapi/responsive.css deleted file mode 100644 index eddc2c6c..00000000 --- a/assets/css/components/openapi/responsive.css +++ /dev/null @@ -1,151 +0,0 @@ -/* OpenAPI Responsive Styles */ - -/* ========================================================================== - Responsive & Mobile - ========================================================================== */ - -@media (max-width: 768px) { - .openapi-header { - padding: 2rem 1.5rem; - } - - .openapi-header__title { - font-size: 2rem; - } - - .openapi-header__info { - grid-template-columns: 1fr; - gap: 1rem; - } - - .section-title { - font-size: 2rem; - } - - .overview-grid { - grid-template-columns: 1fr; - gap: 1rem; - } - - .endpoints-nav { - padding: 1rem; - } - - .endpoints-nav__tags, - .endpoints-nav__methods { - gap: 0.375rem; - } - - .tag-filter, - .method-filter { - padding: 0.375rem 0.75rem; - font-size: 0.8rem; - } - - .endpoint-header { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - padding: 1rem; - } - - .endpoint-header__method { - align-self: flex-start; - } - - .endpoint-header__toggle { - position: absolute; - top: 1rem; - right: 1rem; - } - - .endpoint-details { - padding: 1rem; - } - - .property-item { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - .code-tabs-nav { - flex-wrap: wrap; - } - - .code-tab { - padding: 0.75rem 1rem; - font-size: 0.8rem; - } - - .code-example-header { - padding: 0.75rem 1rem; - } - - .parameters-section-header, - .parameter-item { - padding: 0.75rem 1rem; - } -} - -@media (max-width: 480px) { - .openapi-header { - padding: 1.5rem 1rem; - } - - .openapi-header__title { - font-size: 1.75rem; - } - - .section-title { - font-size: 1.75rem; - } - - .overview-stat { - gap: 0.5rem; - padding: 0.625rem 0.75rem; - min-height: 50px; - } - - .overview-stat__icon { - width: 1rem; - height: 1rem; - } - - .overview-doc-link { - gap: 0.5rem; - padding: 0.75rem; - } - - .endpoint-header { - padding: 0.75rem; - } - - .endpoint-details { - padding: 0.75rem; - } -} - -/* ========================================================================== - Print Styles - ========================================================================== */ - -@media print { - .openapi-spec { - background: white !important; - color: black !important; - } - - .endpoint-details { - display: block !important; - } - - .code-tab-panel { - display: block !important; - } - - .endpoints-nav, - .copy-button, - .endpoint-header__toggle { - display: none !important; - } -} diff --git a/assets/css/components/openapi/schemas.css b/assets/css/components/openapi/schemas.css deleted file mode 100644 index 825d2c08..00000000 --- a/assets/css/components/openapi/schemas.css +++ /dev/null @@ -1,552 +0,0 @@ -/* OpenAPI Schemas */ - -/* ========================================================================== - Schemas - ========================================================================== */ - -.schema-container { - background: transparent; - border: none; - border-left: 2px solid var(--color-border-primary); - border-radius: 0; - padding: 0.5rem 0 0.5rem 0.75rem; - margin: 0.5rem 0; -} - -.schema-container[data-level="0"] { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - padding: 0.75rem; - border-left: none; -} - -.schema-container[data-level="1"] { - margin-left: 1rem; - border-left: 3px solid var(--color-brand); -} - -.schema-container[data-level="2"] { - margin-left: 2rem; - border-left: 3px solid var(--color-accent); -} - -.schema-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.5rem; -} - -.schema-title { - margin: 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.schema-type-info { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.type-nullable, -.type-readonly, -.type-writeonly { - background: rgba(var(--color-text-secondary-rgb, 107, 114, 128), 0.1); - color: var(--color-text-secondary); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} - -.schema-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} - -.schema-constraints { - display: flex; - flex-wrap: wrap; - gap: 1rem; - margin-bottom: 1.5rem; - padding: 1rem; - background: var(--color-bg-tertiary); - border-radius: 0.5rem; - border: 1px solid var(--color-border-secondary); -} - -.schema-properties { - margin-bottom: 1.5rem; -} - -.schema-properties h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); -} - -.properties-list { - display: flex; - flex-direction: column; - gap: 0; - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - overflow: hidden; -} - -.property-item { - background: var(--color-surface); - border: none; - border-bottom: 1px solid var(--color-border-primary); - border-radius: 0; - padding: 1rem 0.75rem; - display: flex; - flex-direction: column; - gap: 0.5rem; - position: relative; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} - -.property-item:last-child { - border-bottom: none; -} - -.property-item:hover { - background: var(--color-bg-secondary); - transform: translateX(2px); -} - -.property-item--required { - border-left: 3px solid var(--color-brand); -} - -.property-header { - margin-bottom: 0; - display: flex; - align-items: center; - gap: 0.375rem; -} - -.property-name { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.property-name code { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.875rem; -} - -.property-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; -} - -.property-schema { - margin-left: 0; -} - -/* Enhanced property information layout */ -.property-meta { - display: flex; - align-items: center; - gap: 0.75rem; - margin-top: 0.25rem; -} - -.property-type { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.property-type .type-badge { - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.025em; -} - -.property-format { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-secondary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} - -.property-description { - margin-top: 0.5rem; - font-size: 0.875rem; - color: var(--color-text-secondary); - line-height: 1.4; -} - -.property-constraints { - margin-top: 0.5rem; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.property-constraint { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-secondary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - border: 1px solid var(--color-border-secondary); -} - -/* Enhanced constraint styling */ -.constraint-modifier { - font-size: 0.7rem; - color: var(--color-warning); - font-style: italic; - margin-left: 0.25rem; -} - -/* Array schema styling */ -.schema-array-info { - margin-bottom: 1.5rem; -} - -.schema-array-info h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); -} - -.array-constraints { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 1rem; -} - -.array-constraints .constraint { - display: flex; - align-items: center; - gap: 0.25rem; - font-size: 0.875rem; - background: var(--color-bg-secondary); - padding: 0.5rem 0.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-secondary); -} - -.array-item-schema { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 1rem; - margin-top: 0.5rem; -} - -/* Enhanced schema composition styling */ -.schema-composition { - margin-bottom: 1.5rem; -} - -.schema-composition h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); -} - -.composition-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.composition-item { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 1rem; - position: relative; -} - -.composition-index { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; - text-transform: uppercase; - letter-spacing: 0.025em; -} - -/* ========================================================================== - :has() Content-Aware Schema Enhancements - ========================================================================== */ - -/* Schema containers adapt based on content type and complexity */ -.schema-container:has(.schema-properties) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-brand-rgb), 0.3); -} - -.schema-container:has(.schema-array-info) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-success-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-success-rgb), 0.3); -} - -.schema-container:has(.schema-composition) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-accent-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-accent-rgb), 0.3); -} - -/* Schema properties section enhances based on property count */ -.schema-properties:has(.properties-list .property-item:nth-child(n+5)) { - border: 2px solid rgba(var(--color-brand-rgb), 0.1); - border-radius: 0.5rem; - padding: 1rem; - background: rgba(var(--color-brand-rgb), 0.02); -} - -.schema-properties:has(.properties-list .property-item:nth-child(n+10)) { - border-color: rgba(var(--color-accent-rgb), 0.2); - background: rgba(var(--color-accent-rgb), 0.03); -} - -/* Properties adapt to required field density */ -.properties-list:has(.property-item--required:nth-child(n+3)) { - border-left: 4px solid var(--color-warning); - padding-left: 0.5rem; -} - -/* Individual property items enhance based on content */ -.property-item:has(.property-constraints) { - border-left: 2px solid rgba(var(--color-info-rgb), 0.4); - background: rgba(var(--color-info-rgb), 0.02); -} - -.property-item:has(.property-meta .property-format) { - border-left-color: rgba(var(--color-accent-rgb), 0.4); - background: rgba(var(--color-accent-rgb), 0.02); -} - -/* Schema constraints section adapts to constraint complexity */ -.schema-constraints:has(.constraint:nth-child(n+3)) { - background: rgba(var(--color-bg-secondary-rgb), 0.5); - border: 1px solid var(--color-border-secondary); - border-radius: 0.5rem; - padding: 1rem; -} - -.schema-constraints:has(.constraint-modifier) { - border-left: 3px solid var(--color-warning); -} - -/* Array info enhances based on constraints */ -.schema-array-info:has(.array-constraints .constraint:nth-child(n+2)) { - border: 1px solid rgba(var(--color-success-rgb), 0.2); - border-radius: 0.5rem; - padding: 1rem; - background: rgba(var(--color-success-rgb), 0.02); -} - -/* Schema composition gets enhanced styling */ -.schema-composition:has(.composition-item:nth-child(n+3)) { - border: 2px solid rgba(var(--color-accent-rgb), 0.2); - border-radius: 0.75rem; - padding: 1.5rem; - background: rgba(var(--color-accent-rgb), 0.02); -} - -/* Nested schema containers get reduced visual weight */ -.schema-container[data-level="1"]:has(.schema-properties) { - background: rgba(var(--color-bg-secondary-rgb), 0.3); - border-left-width: 2px; -} - -.schema-container[data-level="2"]:has(.schema-properties) { - background: rgba(var(--color-bg-secondary-rgb), 0.2); - border-left-width: 1px; -} - -/* Type-specific enhancements */ -.schema-header:has(.type-badge--object) + .schema-constraints, -.schema-header:has(.type-badge--object) + * .schema-constraints { - border-top: 2px solid rgba(var(--color-brand-rgb), 0.1); -} - -.schema-header:has(.type-badge--array) + .schema-array-info { - border-top: 2px solid rgba(var(--color-success-rgb), 0.1); -} - -.schema-header:has(.type-badge--string) + .schema-constraints { - border-top: 2px solid rgba(var(--color-info-rgb), 0.1); -} - -/* Reference schemas get special styling */ -.schema-container:has(.schema-ref) { - background: linear-gradient( - 135deg, - rgba(var(--color-accent-rgb), 0.05) 0%, - var(--color-surface) 100% - ); - border: 1px dashed rgba(var(--color-accent-rgb), 0.3); -} - -/* Error and debug styling adaptations */ -.schema-container:has(.schema-ref-error) { - background: rgba(var(--color-danger-rgb), 0.05); - border: 1px solid rgba(var(--color-danger-rgb), 0.2); -} - -/* Schema References */ -.schema-ref { - margin: 0.5rem 0; - padding: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.05); - border-left: 3px solid var(--color-brand); - border-radius: 0 0.25rem 0.25rem 0; -} - -.ref-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.ref-label { - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.ref-name { - font-family: var(--font-family-mono); - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand); -} - -.schema-ref-error { - padding: 0.75rem; - background: rgba(239, 68, 68, 0.05); - border: 1px solid rgba(239, 68, 68, 0.2); - border-radius: 0.375rem; - margin: 0.5rem 0; -} - -.schema-ref-error .error-message { - color: var(--color-danger); - font-weight: 500; - margin-bottom: 0.5rem; -} - -.debug-info { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-tertiary); - padding: 0.5rem; - border-radius: 0.25rem; - margin-top: 0.5rem; -} - -.debug-info p { - margin: 0.25rem 0; -} - -.debug-info code { - font-family: var(--font-family-mono); - background: rgba(0, 0, 0, 0.1); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; -} - -/* Array and Object Indicators */ -.schema-array-items, -.schema-object-properties { - margin-top: 0.75rem; -} - -.schema-array-items h6, -.schema-object-properties h6 { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} - -/* Type Badges */ -.type-badge { - display: inline-block; - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: lowercase; -} - -/* Old hex-based type colors commented out in favor of tokens per themes/milodocs/init */ -/* .type-badge--string { background: rgba(34, 197, 94, 0.1); color: #059669; } -.type-badge--number, -.type-badge--integer { background: rgba(59, 130, 246, 0.1); color: #2563eb; } -.type-badge--boolean { background: rgba(168, 85, 247, 0.1); color: #7c3aed; } -.type-badge--array { background: rgba(245, 158, 11, 0.1); color: #d97706; } -.type-badge--object { background: rgba(239, 68, 68, 0.1); color: #dc2626; } -.type-badge--null { background: rgba(107, 114, 128, 0.1); color: #4b5563; } */ - -.type-badge--string { background: var(--type-string-bg); color: var(--type-string-text); } -.type-badge--number { background: var(--type-number-bg); color: var(--type-number-text); } -.type-badge--integer { background: var(--type-integer-bg); color: var(--type-integer-text); } -.type-badge--boolean { background: var(--type-boolean-bg); color: var(--type-boolean-text); } -.type-badge--array { background: var(--type-array-bg); color: var(--type-array-text); } -.type-badge--object { background: var(--type-object-bg); color: var(--type-object-text); } -.type-badge--null { background: var(--type-null-bg); color: var(--type-null-text); } - -.type-format { - font-size: 0.75rem; - color: var(--color-text-secondary); - font-style: italic; - margin-left: 0.25rem; -} \ No newline at end of file diff --git a/assets/css/components/openapi/security.css b/assets/css/components/openapi/security.css deleted file mode 100644 index ded7b985..00000000 --- a/assets/css/components/openapi/security.css +++ /dev/null @@ -1,132 +0,0 @@ -/* OpenAPI Security */ - -/* ========================================================================== - Security Section - ========================================================================== */ - -.openapi-security { - padding: 2rem 0; -} - -.security-requirements { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.security-requirement { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - padding: 1.5rem; -} - -.security-scheme { - display: flex; - align-items: flex-start; - gap: 1rem; - margin-bottom: 1rem; -} - -.security-scheme:last-child { - margin-bottom: 0; -} - -.security-icon { - width: 2rem; - height: 2rem; - background: rgba(var(--color-brand-rgb), 0.1); - border-radius: 0.5rem; - display: flex; - align-items: center; - justify-content: center; - color: var(--color-brand); - flex-shrink: 0; -} - -.security-info { - flex: 1; - min-width: 0; -} - -.security-name { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; -} - -.security-type { - display: inline-block; - background: rgba(var(--color-accent-rgb), 0.1); - color: var(--color-accent); - padding: 0.25rem 0.75rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 0.75rem; -} - -.security-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} - -.security-scopes { - margin-top: 1rem; -} - -.security-scopes h5 { - margin: 0 0 0.5rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.scopes-list { - display: flex; - flex-wrap: wrap; - gap: 0.375rem; -} - -.scope-item { - background: var(--color-bg-secondary); - color: var(--color-text-primary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.75rem; - font-weight: 500; - border: 1px solid var(--color-border-primary); -} - -.security-details { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 1rem; - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid var(--color-border-primary); -} - -.security-detail { - font-size: 0.875rem; -} - -.security-detail strong { - color: var(--color-text-primary); - display: block; - margin-bottom: 0.25rem; -} - -.security-detail code { - font-family: var(--font-family-mono); - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; - font-size: 0.8rem; -} diff --git a/assets/css/components/openapi/servers.css b/assets/css/components/openapi/servers.css deleted file mode 100644 index 1e0d8089..00000000 --- a/assets/css/components/openapi/servers.css +++ /dev/null @@ -1,103 +0,0 @@ -/* OpenAPI Servers */ - -/* ========================================================================== - Servers Section - ========================================================================== */ - -.openapi-servers { - padding: 2rem 0; -} - -.servers-list { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.server-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - padding: 2rem; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} - -.server-item:hover { - border-color: var(--color-brand); - box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.1); -} - -.server-url { - font-family: var(--font-family-mono); - font-size: 1.125rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 1rem; - word-break: break-all; -} - -.server-description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-secondary); - margin-bottom: 1.5rem; -} - -.server-variables { - margin-top: 1.5rem; -} - -.server-variables h4 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.variables-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.variable-item { - background: var(--color-bg-secondary); - padding: 1rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); -} - -.variable-name { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; -} - -.variable-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} - -.variable-default { - font-size: 0.875rem; - color: var(--color-text-primary); -} - -.variable-default strong { - color: var(--color-text-primary); -} - -.variable-default code { - font-family: var(--font-family-mono); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; - color: var(--color-brand); -} diff --git a/assets/css/components/openapi/sidebar.css b/assets/css/components/openapi/sidebar.css deleted file mode 100644 index b1a09b67..00000000 --- a/assets/css/components/openapi/sidebar.css +++ /dev/null @@ -1,336 +0,0 @@ -/* OpenAPI Sidebar Styles */ -/* Inspired by Mintlify's clean, hierarchical design */ - -/* ========================================================================== - OpenAPI Sidebar Base - ========================================================================== */ - -.openapi-sidebar-section { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} - -.openapi-sidebar-section:last-child { - border-bottom: none; -} - -.openapi-sidebar-header { - margin-bottom: 1rem; -} - -.openapi-sidebar-title { - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; - line-height: 1.4; -} - -.openapi-sidebar-version { - display: inline-block; - padding: 0.125rem 0.5rem; - background: var(--color-brand-primary); - color: white; - font-size: 0.75rem; - font-weight: 500; - border-radius: 0.375rem; - margin-left: 0.5rem; -} - -.openapi-sidebar-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - line-height: 1.5; - margin: 0.5rem 0 0 0; -} - -/* ========================================================================== - Navigation Links - ========================================================================== */ - -.openapi-sidebar-nav { - list-style: none; - margin: 0; - padding: 0; -} - -.openapi-sidebar-nav-item { - margin-bottom: 0.25rem; -} - -.openapi-sidebar-link { - display: flex; - align-items: center; - padding: 0.5rem 0.75rem; - color: var(--color-text-secondary); - text-decoration: none; - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - transition: - background-color 0.15s ease, - border-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease, - box-shadow 0.15s ease; - border: 1px solid transparent; -} - -.openapi-sidebar-link:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); -} - -.openapi-sidebar-link--active { - color: var(--color-brand-primary); - background: var(--color-brand-background); - border-color: var(--color-brand-border); - font-weight: 600; -} - -.openapi-sidebar-link-text { - flex: 1; -} - -/* ========================================================================== - Section Headers - ========================================================================== */ - -.openapi-sidebar-section-header { - margin-bottom: 1rem; -} - -.openapi-sidebar-section-header h4 { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* ========================================================================== - Tag Groups - ========================================================================== */ - -.openapi-sidebar-endpoints { - list-style: none; - margin: 0; - padding: 0; -} - -.openapi-sidebar-tag-group { - margin-bottom: 1rem; -} - -.openapi-sidebar-tag-header { - display: flex; - align-items: center; - margin-bottom: 0.5rem; -} - -.openapi-sidebar-tag-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; - padding: 0; - margin-right: 0.5rem; - background: none; - border: none; - color: var(--color-text-secondary); - cursor: pointer; - border-radius: 0.25rem; - transition: - background-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease; -} - -.openapi-sidebar-tag-toggle:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); -} - -.openapi-sidebar-chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform 0.15s ease; -} - -.openapi-sidebar-tag-toggle--expanded .openapi-sidebar-chevron { - transform: rotate(90deg); -} - -.openapi-sidebar-tag-name { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - text-transform: capitalize; -} - -/* ========================================================================== - Endpoints List - ========================================================================== */ - -.openapi-sidebar-endpoints-list { - list-style: none; - margin: 0; - padding: 0; - overflow: hidden; - transition: max-height 0.15s ease, opacity 0.15s ease; -} - -.openapi-sidebar-endpoints-list--expanded { - /* Animation handled by display property changes in JS */ -} - -.openapi-sidebar-endpoint { - margin-bottom: 0.125rem; -} - -.openapi-sidebar-endpoint-link { - display: flex; - align-items: flex-start; - padding: 0.5rem 0.75rem; - color: var(--color-text-secondary); - text-decoration: none; - border-radius: 0.375rem; - font-size: 0.8125rem; - transition: - background-color 0.15s ease, - border-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease; - border: 1px solid transparent; - margin-left: 1.75rem; /* Indent under tag */ - gap: 0.5rem; -} - -.openapi-sidebar-endpoint-link:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); -} - -.openapi-sidebar-endpoint-link--active { - color: var(--color-brand-primary); - background: var(--color-brand-background); - border-color: var(--color-brand-border); - font-weight: 500; -} - -/* ========================================================================== - HTTP Method Badges - ========================================================================== */ - -.openapi-sidebar-method { - display: inline-block; - padding: 0.125rem 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - border-radius: 0.25rem; - min-width: 3rem; - text-align: center; - flex-shrink: 0; - letter-spacing: 0.025em; -} - -.openapi-sidebar-method--get { background: var(--http-get-bg); color: var(--http-get-text); } - -.openapi-sidebar-method--post { background: var(--http-post-bg); color: var(--http-post-text); } - -.openapi-sidebar-method--put { background: var(--http-put-bg); color: var(--http-put-text); } - -.openapi-sidebar-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } - -.openapi-sidebar-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } - -.openapi-sidebar-method--head, -.openapi-sidebar-method--options { background: var(--http-head-bg); color: var(--http-head-text); } - -/* ========================================================================== - Endpoint Details - ========================================================================== */ - -.openapi-sidebar-endpoint-path { - flex: 1; - font-weight: 500; - color: var(--color-text-primary); - line-height: 1.3; - word-break: break-all; -} - -.openapi-sidebar-endpoint-summary { - display: block; - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.3; - margin-top: 0.125rem; - font-weight: 400; -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .openapi-sidebar-section { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - } - - .openapi-sidebar-title { - font-size: 1rem; - } - - .openapi-sidebar-endpoint-link { - margin-left: 1.5rem; - padding: 0.375rem 0.5rem; - } - - .openapi-sidebar-method { - min-width: 2.5rem; - font-size: 0.625rem; - } -} - -/* ========================================================================== - Dark Mode Support - ========================================================================== */ - -@media (prefers-color-scheme: dark) { - .openapi-sidebar-version { background: var(--color-brand-primary-dark, var(--color-brand-primary)); } -} - -/* ========================================================================== - Focus States - ========================================================================== */ - -.openapi-sidebar-link:focus-visible, -.openapi-sidebar-endpoint-link:focus-visible, -.openapi-sidebar-tag-toggle:focus-visible { - outline: 2px solid var(--color-brand-primary); - outline-offset: 2px; -} - -/* ========================================================================== - Smooth Scrolling Enhancement - ========================================================================== */ - -html { - scroll-behavior: smooth; -} - -@media (prefers-reduced-motion: reduce) { - html { - scroll-behavior: auto; - } - - .openapi-sidebar-chevron, - .openapi-sidebar-endpoints-list { - transition: none; - } -} \ No newline at end of file diff --git a/assets/css/components/openapi/single.css b/assets/css/components/openapi/single.css deleted file mode 100644 index 20c5cf51..00000000 --- a/assets/css/components/openapi/single.css +++ /dev/null @@ -1,288 +0,0 @@ -/* - * OpenAPI Single Endpoint Page Styles - * Content-aware styling using :has() selectors - */ - -/* ============================================================================= - Base Single Page Layout - ============================================================================= */ - -.api-endpoint { - /* Content-aware layout adjustments */ - container-type: inline-size; - container-name: endpoint-page; -} - -/* Override the hidden default - single pages should show endpoint details */ -.api-endpoint .endpoint-details { - display: block; -} - -/* ============================================================================= - Header Enhancements with :has() - ============================================================================= */ - -/* Enhanced header when endpoint has both summary and description */ -.api-endpoint-header:has(.endpoint-description) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-brand-rgb), 0.02) 100%); - border-left: 4px solid rgba(var(--color-brand-rgb), 0.3); - padding: 2rem; - border-radius: 0.75rem; - margin-bottom: 2rem; -} - -/* Method-specific header styling */ -.api-endpoint-header:has(.method-badge--get) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(34, 197, 94, 0.02) 100%); - border-left-color: rgba(34, 197, 94, 0.3); -} - -.api-endpoint-header:has(.method-badge--post) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(59, 130, 246, 0.02) 100%); - border-left-color: rgba(59, 130, 246, 0.3); -} - -.api-endpoint-header:has(.method-badge--put) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(245, 158, 11, 0.02) 100%); - border-left-color: rgba(245, 158, 11, 0.3); -} - -.api-endpoint-header:has(.method-badge--delete) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(239, 68, 68, 0.02) 100%); - border-left-color: rgba(239, 68, 68, 0.3); -} - -.api-endpoint-header:has(.method-badge--patch) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(168, 85, 247, 0.02) 100%); - border-left-color: rgba(168, 85, 247, 0.3); -} - -/* ============================================================================= - Breadcrumb Enhancements - ============================================================================= */ - -.api-endpoint-breadcrumb { - margin-bottom: 1.5rem; - font-size: 0.875rem; - color: var(--color-text-muted); -} - -.api-endpoint-breadcrumb a { - color: var(--color-brand); - text-decoration: none; - transition: color 0.2s ease; -} - -.api-endpoint-breadcrumb a:hover { - color: var(--color-brand-dark); - text-decoration: underline; -} - -/* ============================================================================= - Content Area Enhancements with :has() - ============================================================================= */ - -/* Enhanced spacing for endpoints with multiple sections */ -.api-endpoint-content:has(.endpoint-section:nth-child(n+3)) { - display: grid; - gap: 2rem; -} - -/* Special layout for complex endpoints */ -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - container-type: inline-size; -} - -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) .endpoint-details { - display: grid; - gap: 2.5rem; -} - -/* Enhanced visual hierarchy for parameter-heavy endpoints */ -.endpoint-item:has([data-parameter-count]) { - /* Parameters count specific styling */ -} - -.endpoint-item:has([data-parameter-count="0"]) .endpoint-details { - /* Simplified layout for parameter-less endpoints */ - gap: 1.5rem; -} - -.endpoint-item:has([data-parameter-count^="1"]) .endpoint-section, -.endpoint-item:has([data-parameter-count^="2"]) .endpoint-section, -.endpoint-item:has([data-parameter-count^="3"]) .endpoint-section { - /* Enhanced styling for endpoints with 10+ parameters */ - border: 1px solid rgba(var(--color-border-rgb), 0.5); - border-radius: 0.5rem; - padding: 1.5rem; - background: rgba(var(--color-surface-rgb), 0.5); -} - -/* ============================================================================= - Section-Specific :has() Patterns - ============================================================================= */ - -/* Parameters Section */ -.endpoint-details:has(.endpoint-parameters) { - /* Enhanced layout when parameters are present */ -} - -.endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { - /* Special handling for parameter-heavy endpoints */ - grid-template-columns: 1fr 1fr; - gap: 2rem; -} - -@container endpoint-page (max-width: 768px) { - .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { - grid-template-columns: 1fr; - } -} - -/* Request Body Section */ -.endpoint-details:has(.endpoint-request-body) .endpoint-section { - border-left: 3px solid rgba(var(--color-brand-rgb), 0.2); - padding-left: 1rem; -} - -/* Responses Section */ -.endpoint-details:has(.endpoint-responses) { - /* Enhanced styling when responses are present */ -} - -.endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { - /* Special handling for endpoints with many response types */ - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-success-rgb), 0.01) 100%); - border-radius: 0.75rem; - padding: 1.5rem; -} - -/* Security Section */ -.endpoint-details:has(.endpoint-security) { - /* Enhanced styling when security requirements are present */ - border-top: 1px solid rgba(var(--color-border-rgb), 0.3); - padding-top: 2rem; -} - -/* Code Examples Section */ -.endpoint-details:has(.endpoint-examples) { - /* Enhanced styling when code examples are present */ -} - -.endpoint-details:has(.endpoint-examples .example-tabs .tab-button:nth-child(n+4)) { - /* Special styling for endpoints with many code examples */ - background: rgba(var(--color-accent-rgb), 0.02); - border-radius: 0.5rem; - padding: 1rem; -} - -/* ============================================================================= - Method-Specific Page Styling - ============================================================================= */ - -/* GET endpoints - Success/data focused */ -.api-endpoint[data-method="GET"] { - --endpoint-accent: rgba(34, 197, 94, 0.1); -} - -.api-endpoint[data-method="GET"]:has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} - -/* POST endpoints - Creation focused */ -.api-endpoint[data-method="POST"] { - --endpoint-accent: rgba(59, 130, 246, 0.1); -} - -.api-endpoint[data-method="POST"]:has([data-has-request-body="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} - -/* PUT/PATCH endpoints - Update focused */ -.api-endpoint[data-method="PUT"], -.api-endpoint[data-method="PATCH"] { - --endpoint-accent: rgba(245, 158, 11, 0.1); -} - -.api-endpoint[data-method="PUT"]:has([data-has-request-body="true"]):has([data-has-responses="true"]), -.api-endpoint[data-method="PATCH"]:has([data-has-request-body="true"]):has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} - -/* DELETE endpoints - Deletion focused */ -.api-endpoint[data-method="DELETE"] { - --endpoint-accent: rgba(239, 68, 68, 0.1); -} - -.api-endpoint[data-method="DELETE"]:has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} - -/* ============================================================================= - Complexity-Based Styling - ============================================================================= */ - -/* Simple endpoints (no parameters, no request body) */ -.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] { - /* Simplified, clean layout */ -} - -.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] .endpoint-details { - gap: 1rem; -} - -/* Complex endpoints (has parameters, request body, and multiple responses) */ -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]), -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]), -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) { - /* Enhanced organization for complex endpoints */ -} - -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { - border: 1px solid rgba(var(--color-border-rgb), 0.2); - border-radius: 1rem; - padding: 2rem; - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-accent-rgb), 0.01) 100%); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); -} - -/* ============================================================================= - Responsive Enhancements - ============================================================================= */ - -@container endpoint-page (max-width: 768px) { - .api-endpoint-header:has(.endpoint-description) { - padding: 1.5rem; - margin-bottom: 1.5rem; - } - - .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+3)) { - grid-template-columns: 1fr; - } - - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { - padding: 1rem; - } -} - -/* ============================================================================= - Accessibility Enhancements - ============================================================================= */ - -/* Enhanced focus styles for interactive elements */ -.api-endpoint:has(:focus-visible) { - /* Container styling when child elements have focus */ -} - -/* Reduced motion preferences */ -@media (prefers-reduced-motion: reduce) { - .api-endpoint-header:has(.endpoint-description), - .endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { - background: var(--color-surface); - transition: none; - } -} \ No newline at end of file diff --git a/assets/css/components/quicklinks.css b/assets/css/components/quicklinks.css deleted file mode 100644 index dbd3a1b0..00000000 --- a/assets/css/components/quicklinks.css +++ /dev/null @@ -1,472 +0,0 @@ -/* Quicklinks Component - Enhanced UX for quickstart/feature tiles */ - -/* Base Quicklinks Container */ -.quicklinks { - margin-bottom: 1.5rem; - position: relative; -} - -.quicklinks--home { - padding-bottom: 1rem; -} - -/* Quicklinks Grid */ -.quicklinks__grid { - display: grid; - grid-template-columns: 1fr; - gap: 1.5rem; - - /* Responsive grid */ - @media (min-width: 768px) { - grid-template-columns: repeat(2, 1fr); - gap: 1.75rem; - } - - @media (min-width: 1280px) { - grid-template-columns: repeat(2, 1fr); - gap: 2rem; - } -} - -/* Quicklinks Item - Compact distinctive call-to-action card design */ -.quicklinks__item { - position: relative; - padding: 1.25rem; - display: flex; - flex-direction: column; - gap: 0.75rem; - min-height: 160px; - - /* Distinctive card styling - not like regular tiles */ - background: linear-gradient( - 145deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.03) 50%, - var(--color-bg-secondary) 100% - ); - border: 2px solid var(--color-border-primary); - border-radius: var(--radius-card); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.06), - 0 1px 4px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: - var(--elevation-2), - var(--elevation-outline), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - - /* Accent border - distinctive feature */ - border-left: 3px solid var(--color-brand); - - /* Optimized transition for performance */ - transition: var(--transition-interactive); - overflow: hidden; /* Essential for ripple effects */ - cursor: pointer; -} - -.quicklinks__item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.06); - opacity: 0; - /* transition: opacity 0.2s ease; */ - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.quicklinks__item:hover { - transform: translateY(-3px); - border-color: var(--color-brand); - border-left-color: var(--color-brand-2); - /* box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.12), - 0 4px 8px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -.quicklinks__item:hover::before { - opacity: 1; -} - -/* Quicklinks Header */ -.quicklinks__header { - display: flex; - align-items: flex-start; - gap: 0.5rem; - margin-bottom: 0.25rem; -} - -/* Quicklinks Icon - Compact design */ -.quicklinks__icon { - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - padding: 0.25rem; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.05) 100% - ); - border-radius: var(--radius-lg); - border: 1px solid rgba(var(--color-brand-rgb), 0.2); - filter: brightness(0.9); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - margin-top: 0; -} - -.quicklinks__item:hover .quicklinks__icon { - background: linear-gradient( - 135deg, - var(--color-brand) 0%, - var(--color-brand-2) 100% - ); - border-color: var(--color-brand); - filter: brightness(1) saturate(1.2); - transform: scale(1.05); -} - -/* Target the actual SVG/image inside the icon container */ -.quicklinks__item:hover .quicklinks__icon img, -.quicklinks__item:hover .quicklinks__icon svg { - filter: brightness(0) invert(1); -} - -/* Quicklinks Title - Compact but prominent */ -.quicklinks__title { - color: var(--color-text-primary); - font-size: 1.125rem; - font-weight: 700; - font-family: var(--font-brand); - line-height: 1.3; - margin: 0; - /* transition: color 0.2s ease; */ - transition: color var(--timing-fast) var(--easing-standard); - position: relative; - letter-spacing: -0.025em; -} - -.quicklinks__item:hover .quicklinks__title { - color: var(--color-brand); -} - -.quicklinks__title::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: var(--color-brand); - border-radius: 1px; - /* transition: width 0.2s ease; */ - transition: width var(--timing-fast) var(--easing-standard); -} - -.quicklinks__item:hover .quicklinks__title::after { - width: 100%; -} - -/* Quicklinks Description */ -.quicklinks__description { - color: var(--color-text-secondary); - font-size: 0.8125rem; - line-height: 1.5; - margin: 0; - flex: 1; - /* transition: color 0.2s ease; */ - transition: color var(--timing-fast) var(--easing-standard); - font-family: var(--font-body); -} - -.quicklinks__item:hover .quicklinks__description { - color: var(--color-text-primary); -} - -/* Quicklinks Actions Container */ -.quicklinks__actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-top: auto; - padding-top: 0.5rem; - border-top: 1px solid var(--color-border-primary); - /* transition: border-color 0.2s ease; */ - transition: border-color var(--timing-fast) var(--easing-standard); -} - -.quicklinks__item:hover .quicklinks__actions { - border-color: var(--color-brand); -} - -/* Quicklinks Action Links - Compact CTA buttons */ -.quicklinks__link { - position: relative; - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.5rem 0.875rem; - background: var(--color-brand); - border: 1px solid var(--color-brand); - border-radius: var(--radius-lg); - color: var(--color-text-inverse); - text-decoration: none; - font-size: 0.75rem; - font-weight: 600; - font-family: var(--font-brand); - text-transform: uppercase; - letter-spacing: 0.25px; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - overflow: hidden; /* Enable ripple effects */ - cursor: pointer; - /* box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.25); */ - box-shadow: var(--elevation-brand-subtle); -} - -.quicklinks__link:hover { - background: var(--color-brand-2); - border-color: var(--color-brand-2); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.35); */ - box-shadow: var(--elevation-brand-medium); -} - -.quicklinks__link:active { - transform: translateY(0); -} - -/* Enhanced focus states for accessibility */ -.quicklinks__link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - /* box-shadow: - 0 2px 6px rgba(var(--color-brand-rgb), 0.25), - 0 0 0 2px var(--color-surface), - 0 0 0 4px var(--color-brand); */ /* Inverted double focus ring */ - box-shadow: - var(--elevation-brand-subtle), - 0 0 0 2px var(--color-surface), - 0 0 0 4px var(--color-brand); -} - -/* Enhanced focus for quicklinks items */ -.quicklinks__item:focus { - outline: 2px solid transparent; - outline-offset: 2px; - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.06), - 0 1px 4px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); */ /* Double focus ring */ - box-shadow: - var(--elevation-2), - var(--elevation-outline), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); -} - -/* External link indicator */ -.quicklinks__link[href^="http"]::after { - content: '↗'; - margin-left: 0.25rem; - font-size: 0.75em; - opacity: 0.7; - transition: opacity 0.2s ease; -} - -.quicklinks__link[href^="http"]:hover::after { - opacity: 1; -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .quicklinks__grid { - gap: 1.25rem; - } - - .quicklinks__item { - padding: 1rem; - min-height: 140px; - } - - .quicklinks__item:hover { - transform: var(--transform-lift-medium); - } - - .quicklinks__icon { - width: 1.375rem; - height: 1.375rem; - padding: 0.25rem; - } - - .quicklinks__title { - font-size: 1rem; - font-weight: 700; - } - - .quicklinks__description { - font-size: 0.75rem; - } - - .quicklinks__actions { - flex-direction: column; - gap: 0.375rem; - padding-top: 0.375rem; - } - - .quicklinks__link { - justify-content: center; - text-align: center; - padding: 0.5rem 0.75rem; - font-size: 0.6875rem; - } -} - -@media (max-width: 480px) { - .quicklinks__item { - padding: 0.875rem; - min-height: 120px; - gap: 0.5rem; - } - - .quicklinks__header { - gap: 0.375rem; - margin-bottom: 0.125rem; - } - - .quicklinks__icon { - width: 1.25rem; - height: 1.25rem; - padding: 0.1875rem; - } - - .quicklinks__title { - font-size: 0.9375rem; - } -} - -/* Dark mode enhancements */ -.dark .quicklinks__item { - background: linear-gradient( - 145deg, - rgba(var(--color-surface), 0.9) 0%, - rgba(var(--color-brand-rgb), 0.05) 50%, - rgba(var(--color-bg-secondary), 0.7) 100% - ); - border-color: var(--color-border-secondary); - /* box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); */ - box-shadow: - var(--elevation-8), - var(--elevation-2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .quicklinks__item:hover { - border-color: var(--color-brand); - /* box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.4), - 0 8px 32px rgba(var(--color-brand-rgb), 0.3), - 0 0 40px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: - var(--elevation-hover-4), - var(--elevation-brand-medium), - var(--elevation-brand-glow), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.dark .quicklinks__icon { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.15) 0%, - rgba(var(--color-brand-rgb), 0.08) 100% - ); - border-color: rgba(var(--color-brand-rgb), 0.3); -} - -.dark .quicklinks__item:hover .quicklinks__icon { - background: linear-gradient( - 135deg, - var(--color-brand) 0%, - var(--color-brand-2) 100% - ); - border-color: var(--color-brand); -} - -/* Target the actual SVG/image inside the icon container for dark mode */ -.dark .quicklinks__item:hover .quicklinks__icon img, -.dark .quicklinks__item:hover .quicklinks__icon svg { - filter: brightness(0) invert(1); -} - -/* Animation improvements - simplified for performance */ -.quicklinks__item { - animation: quicklinks-enter 0.3s ease-out; - animation-fill-mode: both; -} - -@keyframes quicklinks-enter { - from { - opacity: 0; - transform: translateY(15px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Stagger animation for multiple items */ -.quicklinks__item:nth-child(1) { animation-delay: 0s; } -.quicklinks__item:nth-child(2) { animation-delay: 0.1s; } -.quicklinks__item:nth-child(3) { animation-delay: 0.2s; } -.quicklinks__item:nth-child(4) { animation-delay: 0.3s; } - -/* Loading state placeholders */ -.quicklinks--loading .quicklinks__item { - background: linear-gradient(90deg, - var(--color-surface) 25%, - var(--color-bg-secondary) 50%, - var(--color-surface) 75%); - background-size: 200% 100%; - animation: quicklinks-loading 2s infinite; -} - -@keyframes quicklinks-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -/* Print styles */ -@media print { - .quicklinks__item { - break-inside: avoid; - border: 1px solid #ccc; - margin-bottom: 1rem; - } - - .quicklinks__link { - color: #000 !important; - text-decoration: underline; - } -} \ No newline at end of file diff --git a/assets/css/components/search.css b/assets/css/components/search.css deleted file mode 100644 index 6a63ef04..00000000 --- a/assets/css/components/search.css +++ /dev/null @@ -1,941 +0,0 @@ -/* Search Component - Sophisticated search interface with NVIDIA styling and complex grouping */ - -/* SOPHISTICATED SEARCH INPUT - Matching design system */ -.search-input { - position: relative; - z-index: 10; - width: 100%; - max-width: 24rem; - padding: 0.625rem 0.75rem 0.625rem 2.25rem; - border-radius: var(--radius-lg); - border: 1px solid var(--color-border-primary); - font-size: 0.875rem; - font-weight: 500; - /* background: var(--color-surface); */ - background: var(--glass-bg); - color: var(--color-text-primary); - font-family: var(--font-family-brand, inherit); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); - /* box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - - /* Search icon using brand color */ - /* Use currentColor for icon stroke; color is set via CSS variable for themeability */ - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z'/%3e%3c/svg%3e"); - background-position: left 0.75rem center; - background-repeat: no-repeat; - background-size: 1.125rem 1.125rem; - color: var(--color-text-primary); -} - -.search-input:hover { - border-color: var(--color-brand); - background-color: var(--color-surface-hover); - transform: var(--transform-lift-subtle); - /* box-shadow: - 0 4px 8px rgba(0, 0, 0, 0.1), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - /* box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: var(--glass-shadow); -} - -.search-input:focus { - outline: 2px solid transparent; - outline-offset: 2px; - border-color: var(--color-brand); - background-color: var(--glass-bg); - transform: var(--transform-lift-subtle); - /* box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), - 0 4px 12px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); */ - /* box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--elevation-hover-2), inset 0 1px 0 rgba(255, 255, 255, 0.2); */ - box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--glass-shadow); -} - -.search-input::placeholder { - color: var(--color-text-tertiary); - font-style: italic; -} - -/* SOPHISTICATED SEARCH CONTAINER - Matching design system */ -.search-container { - position: relative; - border-radius: 0.875rem; - padding: 0.75rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); -} - -.search-container::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - /* transition: opacity 0.3s ease; */ - transition: opacity var(--timing-medium) var(--easing-standard); - pointer-events: none; - border-radius: 0.875rem; -} - -.search-container:hover, -.search-container:focus-within { - border-color: var(--color-brand); - box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.1), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -.search-container:hover::before, -.search-container:focus-within::before { - opacity: 1; -} - -/* SOPHISTICATED SEARCH RESULTS CONTAINER */ -#searchResultsContainer { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - /* animation: search-container-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ - animation: search-container-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; - overflow: hidden; -} - -#searchResultsContainer::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -#searchResultsContainer:hover::before { - opacity: 1; -} - -@keyframes search-container-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* SOPHISTICATED SEARCH HIT STYLING - Matching tiles and navigation patterns */ -.search-hit { - position: relative; - display: block; - text-decoration: none; - color: inherit; - margin-bottom: 0.75rem; - overflow: hidden; -} - -.search-hit-content { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - padding: 1.25rem; - /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - overflow: hidden; -} - -.search-hit-content::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - /* transition: opacity 0.3s ease; */ - transition: opacity var(--timing-medium) var(--easing-standard); - pointer-events: none; -} - -.search-hit-content::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2)); - transform: scaleX(0); - /* transition: transform 0.3s ease; */ - transition: transform var(--timing-medium) var(--easing-standard); - transform-origin: left; -} - -.search-hit:hover .search-hit-content { - transform: var(--transform-lift-dramatic); - border-color: var(--color-brand); - /* box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.12), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -.search-hit:hover .search-hit-content::before { - opacity: 1; -} - -.search-hit:hover .search-hit-content::after { - transform: scaleX(1); -} - -/* Focus states for accessibility */ -.search-hit:focus-within .search-hit-content { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} - -/* Search Hit Typography - Matching design system */ -.search-hit-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-bottom: 0.75rem; -} - -.search-hit-section { - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--color-brand); - margin-bottom: 0.25rem; - transition: all 0.2s ease; -} - -.search-hit:hover .search-hit-section { - transform: translateX(2px); - color: var(--color-brand-1); -} - -.search-hit-title { - font-size: 1.125rem; - font-weight: 600; - line-height: 1.375; - color: var(--color-text-primary); - font-family: var(--font-family-brand, inherit); - margin: 0; - /* transition: color 0.2s ease; */ - transition: color var(--timing-fast) var(--easing-standard); -} - -.search-hit:hover .search-hit-title { - color: var(--color-brand); -} - -.search-hit-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin: 0.75rem 0; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.search-hit-metadata { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 0.75rem; - color: var(--color-text-tertiary); - margin-top: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid var(--color-border-secondary); -} - -.search-hit-score { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.25rem 0.5rem; - background: var(--color-brand); - color: var(--color-text-inverse); - border-radius: 0.375rem; - font-size: 0.75rem; - font-weight: 600; - min-width: 3rem; - text-align: center; - transition: all 0.2s ease; - opacity: 0.8; -} - -.search-hit:hover .search-hit-score { - transform: scale(1.05); - opacity: 1; - background: var(--color-brand-1); -} - -/* SOPHISTICATED SEARCH SECTIONS */ -.search-section { - margin-bottom: 2rem; - border-radius: 0.875rem; - /* transition: all 0.3s ease; */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); -} - -.search-section:hover { - transform: var(--transform-lift-medium); -} - -.search-section-header { - display: flex; - align-items: center; - margin-bottom: 1.5rem; - padding: 1rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.75rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -} - -.search-section-badge { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - border-radius: 50%; - background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2)); - color: var(--color-text-inverse); - font-size: 0.875rem; - font-weight: 600; - margin-right: 0.75rem; - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ - box-shadow: var(--elevation-brand-subtle); - transition: all 0.2s ease; -} - -.search-section:hover .search-section-badge { - transform: scale(1.1); - /* box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.3); */ - box-shadow: var(--elevation-brand-medium); -} - -.search-section-title { - font-size: 1.5rem; - font-weight: 700; - color: var(--color-text-primary); - font-family: var(--font-family-brand, inherit); - margin: 0; -} - -/* SOPHISTICATED PARENT GROUPS */ -.search-parent-group { - position: relative; - margin-bottom: 1.5rem; -} - -.search-parent-group h3 { - position: sticky; - top: 0; - z-index: 10; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-secondary); - font-family: var(--font-family-brand, inherit); - margin: 0 -1rem 1rem -1rem; - padding: 0.75rem 1rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-bottom: 1px solid var(--color-border-secondary); - border-radius: 0.5rem 0.5rem 0 0; -} - -/* SEARCH RESULTS HEADER */ -.search-results-header { - padding: 1.5rem; - margin-bottom: 1.5rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-left: 4px solid var(--color-brand); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* animation: slideInUp 0.6s ease-out; */ - animation: slideInUp var(--timing-slow) var(--easing-standard); -} - -.search-results-header h1 { - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; -} - -.search-results-header p { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; -} - -.search-stats { - text-align: right; -} - -.search-stats div { - font-size: 0.75rem; - color: var(--color-text-tertiary); -} - -/* SOPHISTICATED ANIMATIONS - Matching design system */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes slideInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.7; - } -} - -/* Animation Classes */ -.animate-fadeIn { - /* animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ - animation: fadeIn var(--timing-fast) var(--easing-standard); -} - -.animate-slideInUp { - /* animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); */ - animation: slideInUp var(--timing-fast) var(--easing-standard); -} - -.animate-pulse { - /* animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; */ - animation: pulse var(--timing-slow) var(--easing-emphasized) infinite; -} - -/* Search Container Enhancements */ -.search-results-container { - transition: all 0.3s ease; -} - -.search-results-header { - animation: slideInUp 0.6s ease-out; -} - -/* Search Section Styling */ -.search-section { - border-radius: 12px; - transition: all 0.3s ease; -} - -.search-section:hover { - transform: var(--transform-lift-medium); -} - -/* Enhanced Search Hit Styling */ -.search-hit { - position: relative; - overflow: hidden; -} - -.search-hit-content { - position: relative; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - border: 1px solid var(--color-border, #e0e0e0); -} - -.search-hit:hover .search-hit-content { - border-color: var(--color-brand); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.1), - 0 0 0 1px var(--color-brand-alpha, rgba(74, 144, 226, 0.1)); -} - -.search-hit-content::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-brand), var(--color-brand-secondary, var(--color-brand))); - transform: scaleX(0); - transition: transform 0.3s ease; - transform-origin: left; -} - -.search-hit:hover .search-hit-content::before { - transform: scaleX(1); -} - -/* Search Hit Typography */ -.search-hit-title { - transition: color 0.2s ease; -} - -.search-hit:hover .search-hit-title { - color: var(--color-brand) !important; -} - -.search-hit-section { - transition: all 0.2s ease; -} - -.search-hit:hover .search-hit-section { - transform: translateX(2px); -} - -/* Search Score Badge */ -.search-hit-score { - transition: all 0.2s ease; - min-width: 45px; - text-align: center; -} - -.search-hit:hover .search-hit-score { - transform: scale(1.05); - opacity: 1 !important; -} - -/* SOPHISTICATED FILTER STYLING - Matching navigation patterns */ -#filterSelect { - position: relative; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-radius: var(--radius-lg); - padding: 0.5rem 0.75rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-primary); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--glass-shadow); - cursor: pointer; -} - -#filterSelect:hover { - background: var(--color-surface-hover); - border-color: var(--color-brand); - transform: var(--transform-lift-subtle); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} - -#filterSelect:focus { - outline: 2px solid transparent; - outline-offset: 2px; - border-color: var(--color-brand); - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); -} - -.filter-active { - background: var(--color-brand) !important; - color: var(--color-text-inverse) !important; - border-color: var(--color-brand) !important; - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.25) !important; -} - -.filter-active:hover { - background: var(--color-brand-1) !important; - transform: var(--transform-lift-subtle); -} - -/* Filter container styling */ -#filterContainer { - position: relative; -} - -#filterContainer label { - display: block; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} - -/* UTILITY CLASSES */ -.line-clamp-2 { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.line-clamp-3 { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.space-y-3 > * + * { - margin-top: 0.75rem; -} - -.space-x-4 > * + * { - margin-left: 1rem; -} - -.flex { - display: flex; -} - -.items-center { - align-items: center; -} - -.justify-between { - justify-content: space-between; -} - -.flex-1 { - flex: 1 1 0%; -} - -.font-medium { - font-weight: 500; -} - -/* SOPHISTICATED LOADING STATES */ -.search-loading { - position: relative; - padding: 2rem; - text-align: center; -} - -.search-loading::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 20px; - height: 20px; - margin: -10px 0 0 -10px; - border: 2px solid var(--color-border-primary); - border-top-color: var(--color-brand); - border-radius: 50%; - animation: spin 1s linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.search-loading-text { - color: var(--color-text-secondary); - font-size: 0.875rem; - margin-top: 1rem; -} - - - -/* Focus Management */ -.search-hit:focus-within .search-hit-content { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -/* RESPONSIVE DESIGN */ -@media (max-width: 768px) { - .search-hit-content { - padding: 1rem; - } - - .search-hit-metadata { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .search-results-header { - padding: 1rem; - } - - .search-results-header .flex { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .search-section-header { - padding: 0.75rem; - } - - .search-section-badge { - width: 1.75rem; - height: 1.75rem; - font-size: 0.75rem; - } - - .search-section-title { - font-size: 1.25rem; - } - - .search-parent-group h3 { - font-size: 1rem; - padding: 0.5rem 0.75rem; - } -} - -/* PRINT STYLES */ -@media print { - .search-hit-content { - break-inside: avoid; - box-shadow: none; - border: 1px solid #000; - background: white; - } - - .search-hit-score, - .animate-fadeIn, - .animate-slideInUp { - display: none; - } - - .search-section-badge { - background: #000; - color: white; - } -} - -/* NO RESULTS AND ERROR STATES - Matching design system */ -.search-no-results, -.search-error { - text-align: center; - padding: 3rem 1.5rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border-radius: 0.875rem; - border: 1px solid var(--color-border-primary); - animation: fadeIn 0.5s ease-out; -} - -.search-no-results .emoji, -.search-error .emoji { - font-size: 3rem; - margin-bottom: 1rem; - opacity: 0.6; - display: block; -} - -.search-no-results h2, -.search-error h2 { - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-secondary); - margin: 0 0 0.5rem 0; -} - -.search-no-results p, -.search-error p { - font-size: 0.875rem; - color: var(--color-text-tertiary); - margin: 0 0 1rem 0; -} - -.search-error button { - background: var(--color-brand); - color: var(--color-text-inverse); - border: none; - border-radius: var(--radius-lg); - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.search-error button:hover { - background: var(--color-brand-1); - transform: var(--transform-lift-subtle); - box-shadow: 0 4px 8px rgba(var(--color-brand-rgb), 0.25); -} - -/* High Contrast Mode Support */ -@media (prefers-contrast: high) { - .search-hit-content { - border-width: 2px; - } - - .search-hit:hover .search-hit-content { - border-width: 3px; - } -} - -/* ACCESSIBILITY AND REDUCED MOTION SUPPORT */ -@media (prefers-reduced-motion: reduce) { - .search-hit-content, - .search-section, - .search-section-badge, - .animate-fadeIn, - .animate-slideInUp, - #searchResultsContainer { - animation: none; - transition: none; - } - - .search-hit:hover .search-hit-content, - .search-section:hover, - .search-section:hover .search-section-badge { - transform: none; - } -} - -/* HIGH CONTRAST MODE SUPPORT */ -@media (prefers-contrast: high) { - .search-hit-content, - .search-section-header, - .search-results-header { - border-width: 2px; - } - - .search-hit:hover .search-hit-content { - border-width: 3px; - } - - .search-section-badge { - border: 2px solid var(--color-text-primary); - } -} - -/* DARK MODE SUPPORT - All styles automatically work via CSS custom properties */ -/* The color system in colors.css handles dark mode via .dark class */ -/* No additional dark mode styles needed as we use semantic color variables */ - diff --git a/assets/css/components/tables.css b/assets/css/components/tables.css deleted file mode 100644 index a3fb2095..00000000 --- a/assets/css/components/tables.css +++ /dev/null @@ -1,105 +0,0 @@ -/* Tables Component - BEM, dense, and glass variants aligned to design tokens */ - -@layer components { - /* - * Replacement policy: retire global element styles in favor of a semantic component API. - * Old global table selectors are intentionally removed to avoid leakage across the site. - */ - - /* Bridge default Markdown tables to component rules until all markup adopts .table */ - :where(.table, .article-content table) { - @apply w-full text-sm; - border-collapse: separate; - border-spacing: 0; - color: var(--color-text-primary); - } - - /* Container (enables horizontal scroll when needed) */ - .table__container { - @apply overflow-x-auto; - -webkit-overflow-scrolling: touch; - overflow-y: hidden; /* avoid clipping rounded headers within container */ - } - /* Ensure rounded headers aren't visually clipped when inside a scroll container */ - .table__container--rounded { border-radius: 0.75rem; } - /* Progressive enhancement: auto-round container if it has a rounded/glass table */ - .table__container:has(> .table.table--rounded), - .table__container:has(> .table.table--glass) { border-radius: 0.75rem; } - - /* Head */ - :where(.table__head, .article-content table thead) th { - @apply text-left font-semibold uppercase tracking-wide text-xs; - background-color: var(--color-surface-active); - color: var(--color-text-primary); - } - - /* Rows */ - :where(.table__row, .article-content table tbody tr) { - @apply align-top; - } - - /* Cells */ - :where(.table__cell, .article-content table th, .article-content table td) { - @apply px-3 py-1.5; - border-top: 1px solid var(--color-border-primary); - } - .table__cell--numeric { @apply text-right; } - .table__cell--wrap { @apply whitespace-normal; } - .table__cell--nowrap { @apply whitespace-nowrap; } - - /* Density variants */ - .table--dense .table__cell { @apply py-1; } - .table--compact .table__cell { @apply py-0.5; } - - /* Row states */ - .table :where(.table__row:hover) { background-color: var(--color-surface-hover); } - :where(.article-content table tbody tr:hover) { background-color: var(--color-surface-hover); } - .table--zebra .table__body > .table__row:nth-child(even) { background-color: var(--color-surface); } - /* Ensure hover wins over zebra striping */ - .table--zebra .table__body > .table__row:nth-child(even):hover { background-color: var(--color-surface-hover); } - - /* Pinned header (opt-in) */ - .table--sticky thead th { position: sticky; top: 0; z-index: 1; } - - /* Glass morphism (opt-in) */ - .table--glass { - @apply rounded-lg shadow-sm; - backdrop-filter: saturate(150%) blur(8px); - -webkit-backdrop-filter: saturate(150%) blur(8px); - /* Light: subtle translucent surface; Dark: stronger translucency */ - @apply bg-white/60 dark:bg-zinc-900/40; - border: 1px solid var(--color-border-primary); - } - - /* Inspired header: match code/tabs glass header visuals */ - .table--header-glass .table__head, - .table--glass .table__head { - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - overflow: hidden; /* ensure rounded corners show */ - } - .table--header-glass .table__head th, - .table--glass .table__head th { - @apply px-3 py-2 text-xs font-semibold uppercase tracking-wide; - background: var(--glass-bg); - border-top: none; /* avoid double border at the top */ - } - /* Subtle separators between header cells (like tabs nav) */ - .table--header-glass .table__head th + th, - .table--glass .table__head th + th { - border-left: 1px solid var(--glass-border-color); - } - /* Light mode: strengthen dividers for visibility */ - @media (prefers-color-scheme: light) { - .table--header-glass .table__head, - .table--glass .table__head { border-bottom-color: var(--color-border-primary); } - .table--header-glass .table__head th + th, - .table--glass .table__head th + th { border-left-color: var(--color-border-primary); } - } - /* Rounded top corners when using glass/rounded variant */ - .table--rounded .table__head th:first-child, - .table--glass .table__head th:first-child { border-top-left-radius: 0.75rem; } - .table--rounded .table__head th:last-child, - .table--glass .table__head th:last-child { border-top-right-radius: 0.75rem; } - .table--rounded .table__head { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden; } -} \ No newline at end of file diff --git a/assets/css/components/tabs.css b/assets/css/components/tabs.css deleted file mode 100644 index 18bb6294..00000000 --- a/assets/css/components/tabs.css +++ /dev/null @@ -1,261 +0,0 @@ -/* Unified Tabs Component CSS - * - Enhanced tabs ([data-component="tabs"], .tabs__*) - */ - -/* ========================== - Enhanced Tabs (BEM + data) - ========================== */ -[data-component="tabs"], -.tabs { - margin: 1.5rem 0; - border-radius: 1rem; - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - box-shadow: var(--glass-shadow); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; - position: relative; -} - -/* Light mode: strengthen overall container border for visibility */ -@media (prefers-color-scheme: light) { - [data-component="tabs"], - .tabs { - border-color: var(--color-border-primary); - } -} - -/* Header-aligned visuals are now the default */ - -/* Tab buttons container */ -[data-component="tabs"] [data-tab-id], -.tabs__nav { - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - padding: 0.5rem 0.5rem; - display: flex; - flex-wrap: wrap; - gap: 0.25rem; -} - -/* Light mode: strengthen nav divider for visibility */ -@media (prefers-color-scheme: light) { - [data-component="tabs"] [data-tab-id], - .tabs__nav { - border-bottom-color: var(--color-border-primary); - } -} - -/* Individual tab buttons */ -[data-component="tabs"] button[data-tab-option], -.tabs__button { - position: relative; - border-radius: 0.625rem; - font-weight: 600; - transition: - background-color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - border: 1px solid var(--glass-border-color); - cursor: pointer; - white-space: nowrap; - background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - padding: 0.25rem 0.5rem; /* match breadcrumb */ -} - -/* Default (inactive) */ -[data-component="tabs"] button[data-tab-option]:not(.bg-brand), -.tabs__button:not(.bg-brand) { - background: var(--glass-bg) !important; - color: var(--color-text-primary) !important; - border-color: var(--glass-border-color); -} - -/* Light mode: increase inactive button border contrast */ -@media (prefers-color-scheme: light) { - [data-component="tabs"] button[data-tab-option]:not(.bg-brand), - .tabs__button:not(.bg-brand) { - border-color: var(--color-border-primary); - } -} - -/* Hover */ -[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover, -.tabs__button:not(.bg-brand):hover { - background: var(--color-surface-hover) !important; - color: var(--color-brand) !important; - border-color: rgba(var(--color-brand-rgb), 0.35); - transform: translateY(-1px); - box-shadow: var(--elevation-2); -} - -/* Active */ -[data-component="tabs"] button.bg-brand, -.tabs__button.bg-brand { - background: var(--color-brand) !important; - color: var(--color-text-inverse, #fff) !important; - border-color: var(--color-brand); - box-shadow: var(--elevation-brand-subtle); - transform: translateY(-1px); -} - -/* Subtle variant: revert to tinted-active style */ -[data-component="tabs"].tabs--subtle button.bg-brand, -.tabs.tabs--subtle .tabs__button.bg-brand { - background: - linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.06) 100% - ), - var(--glass-bg) !important; - color: var(--color-text-primary) !important; - border-color: rgba(var(--color-brand-rgb), 0.45); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.18), var(--elevation-2); -} - -/* Dark mode: increase active contrast by default */ -@media (prefers-color-scheme: dark) { - [data-component="tabs"] button.bg-brand, - .tabs__button.bg-brand { - background: var(--color-brand) !important; - color: var(--color-text-inverse, #fff) !important; - border-color: var(--color-brand); - box-shadow: var(--elevation-brand-medium); - } -} - -/* Focus */ -[data-component="tabs"] button[data-tab-option]:focus-visible, -.tabs__button:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); -} - -/* Content container */ -[data-component="tabs"] .w-full, -.tabs__content { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ -} - -/* Panels */ -[data-component="tabs"] [data-tabcontent], -.tabs__panel { - padding: 1.25rem 1.5rem; - background: transparent; - position: absolute; - top: 0; - left: 0; - right: 0; - will-change: opacity, transform; - backface-visibility: hidden; - transform: var(--transform-slide-in-up); - opacity: 0; - visibility: hidden; - pointer-events: none; - transition: - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - visibility 0s linear var(--timing-medium); -} - -/* Visible panel */ -[data-component="tabs"] [data-tabcontent].is-active, -.tabs__panel.is-active { - opacity: 1; - transform: var(--transform-translate-none); - visibility: visible; - pointer-events: auto; - transition-delay: 0s, 0s, 0s; - animation: slideInUp var(--timing-medium) var(--easing-standard); -} - -/* Panel content spacing */ -[data-component="tabs"] [data-tabcontent] > *:first-child, -.tabs__panel > *:first-child { margin-top: 0; } -[data-component="tabs"] [data-tabcontent] > *:last-child, -.tabs__panel > *:last-child { margin-bottom: 0; } - -/* Smooth entrance */ -[data-component="tabs"] [data-tabcontent] *, -.tabs__panel * { transition: none; } - -/* Compact density variant */ -[data-component="tabs"].tabs--compact .tabs__nav, -.tabs.tabs--compact .tabs__nav { - padding: 0.25rem 0.25rem; - gap: 0.125rem; -} - -[data-component="tabs"].tabs--compact button[data-tab-option], -.tabs.tabs--compact .tabs__button { - padding: 0.375rem 0.5rem; - font-size: 0.875rem; -} - -/* Underline hover animation for inactive buttons */ -[data-component="tabs"] button[data-tab-option]:not(.bg-brand)::after, -.tabs__button:not(.bg-brand)::after { - content: ""; - position: absolute; - left: 0.5rem; right: 0.5rem; bottom: 0.25rem; - height: 2px; - background: rgba(var(--color-brand-rgb), 0.35); - transform: scaleX(0); - transform-origin: left center; - transition: transform var(--timing-medium) var(--easing-standard); -} - -[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover::after, -.tabs__button:not(.bg-brand):hover::after { transform: scaleX(1); } - -/* Responsive */ -@media (max-width: 640px) { - [data-component="tabs"] [data-tab-id], - .tabs__nav { flex-direction: column; align-items: stretch; } - [data-component="tabs"] button[data-tab-option], - .tabs__button { text-align: left; justify-content: flex-start; } - [data-component="tabs"] [data-tabcontent], - .tabs__panel { padding: 1.5rem; } -} - -/* Print */ -@media print { - [data-component="tabs"] [data-tab-id], - .tabs__nav { display: none; } - [data-component="tabs"] [data-tabcontent], - .tabs__panel { position: static !important; display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; page-break-inside: avoid; } - [data-component="tabs"] [data-tabcontent]:not(:first-of-type), - .tabs__panel:not(:first-of-type) { margin-top: 2rem; border-top: 1px solid var(--color-border-primary); padding-top: 2rem; } - [data-component="tabs"] [data-tabcontent]::before, - .tabs__panel::before { content: "Tab: " attr(data-tabcontent); display: block; font-weight: bold; margin-bottom: 1rem; color: var(--color-text-secondary); font-size: 0.875rem; text-transform: capitalize; } -} - -@media (prefers-color-scheme: dark) { - [data-component="tabs"], .tabs { box-shadow: var(--elevation-4); } - [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { box-shadow: var(--elevation-brand-medium); } -} - -@media (prefers-color-scheme: dark) { - [data-component="tabs"]::after, - .tabs::after { - background: linear-gradient( - to bottom, - rgba(0,0,0,0) 0%, - rgba(0,0,0,0.18) 55%, - rgba(0,0,0,0.28) 100% - ); - } -} - diff --git a/assets/css/components/tiles.css b/assets/css/components/tiles.css deleted file mode 100644 index df8d9e97..00000000 --- a/assets/css/components/tiles.css +++ /dev/null @@ -1,197 +0,0 @@ -/* Tiles Component - Interactive content cards with enhanced UX */ - -/* Base Tile Styles */ -.card--tile { - position: relative; - /* Use a CSS var for the base background so JS can layer gradients on hover */ - --tile-base-bg: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - background: var(--tile-base-bg); - border-radius: var(--radius-card); - border: 1px solid var(--color-border-primary); - /* backdrop-filter: blur(var(--tile-glass-blur)) saturate(var(--tile-glass-saturate)); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard), - background var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - will-change: transform, filter; - isolation: isolate; -} - -.card--tile::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -/* Subtle inner highlight for glass edge */ -.card--tile::after { - content: ''; - position: absolute; - inset: 0; - pointer-events: none; - border-radius: inherit; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); -} - -.card--tile:hover::before { - opacity: 1; -} - -/* Focus states for accessibility */ -.card--tile:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} - -/* Tile content spacing */ -.card--tile .space-y-3 > * + * { - margin-top: 0.75rem; -} - -.card--tile .space-y-2 > * + * { - margin-top: 0.5rem; -} - -/* Tile links - ensure they take full space */ -.card--tile a { - display: block; - color: inherit; - text-decoration: none; - position: relative; - z-index: 2; -} - -.card--tile a:hover { - color: inherit; -} - -/* Tile headers */ -.card--tile h3 { - color: var(--color-text-primary); - font-weight: 600; - line-height: 1.3; - margin-bottom: 0.5rem; - transition: color 0.2s ease; -} - -.card--tile:hover h3 { - color: var(--color-brand); -} - -/* Tile descriptions */ -.card--tile p { - color: var(--color-text-secondary); - line-height: 1.5; - font-size: 0.875rem; -} - -/* Tile icons */ -.card--tile .icon { - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - transition: - filter var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); -} - -.card--tile:hover .icon { - filter: brightness(1); - transform: scale(1.05); -} - -/* Tile tag/badge styles */ -.card--tile .inline-block { - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - font-size: 0.75rem; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - transition: - filter var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: inline-block; - text-decoration: none; -} - -.card--tile .inline-block:hover { - background-color: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); - transform: var(--transform-lift-subtle); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .card--tile { - margin-bottom: 1rem; - } - - .card--tile:hover { - transform: var(--transform-lift-medium); - } -} - -/* Grid layout enhancements - simplified for child links component */ -.grid .card--tile { - height: 100%; -} - -/* Dark mode enhancements */ -.dark .card--tile { - border-color: var(--color-border-secondary); - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); */ - box-shadow: var(--glass-shadow); -} - -.dark .card--tile:hover { box-shadow: var(--glass-shadow); } - -/* Animation improvements */ -.card--tile { - animation: card-tile-enter 0.4s ease-out; - animation-fill-mode: both; -} - -@keyframes card-tile-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Stagger animation for grids */ -.grid .card--tile:nth-child(1) { animation-delay: 0s; } -.grid .card--tile:nth-child(2) { animation-delay: 0.1s; } -.grid .card--tile:nth-child(3) { animation-delay: 0.2s; } -.grid .card--tile:nth-child(4) { animation-delay: 0.3s; } -.grid .card--tile:nth-child(5) { animation-delay: 0.4s; } -.grid .card--tile:nth-child(6) { animation-delay: 0.5s; } \ No newline at end of file diff --git a/assets/css/components/toast.css b/assets/css/components/toast.css deleted file mode 100644 index b7638b95..00000000 --- a/assets/css/components/toast.css +++ /dev/null @@ -1,216 +0,0 @@ -/* Toast Notification Component - Dedicated CSS */ - -/* Enhanced Toast Styles */ -.toast-notification { - /* Enhanced backdrop blur for modern glass effect */ - /* backdrop-filter: blur(20px) saturate(180%); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - - /* Smooth shadow that matches notice components */ - /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - - /* Ensure proper font rendering */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - /* Base positioning and sizing */ - position: fixed; - top: 1.5rem; - right: 1.5rem; - z-index: var(--z-toast, 9999); - max-width: 20rem; - width: 100%; - transform: translateX(100%); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-slow) var(--easing-emphasized), - opacity var(--timing-slow) var(--easing-emphasized); - border-radius: 0.75rem; - overflow: hidden; - border: 1px solid; -} - -/* Toast content */ -.toast-notification__content { - display: flex; - align-items: flex-start; - padding: 1rem; - gap: 0.75rem; -} - -.toast-notification__icon { - flex-shrink: 0; - margin-top: 0.125rem; - width: 1.25rem; - height: 1.25rem; -} - -.toast-notification__message { - flex: 1; - min-width: 0; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - font-family: "NVIDIA", Arial, Helvetica, sans-serif; -} - -.toast-notification__close { - flex-shrink: 0; - margin-left: 1rem; - color: rgba(156, 163, 175, 1); - transition: color 0.2s ease; - background: none; - border: none; - cursor: pointer; - padding: 0; - width: 1rem; - height: 1rem; -} - -.toast-notification__close:hover { - color: rgba(107, 114, 128, 1); -} - -/* Dark mode close button */ -.dark .toast-notification__close:hover { - color: rgba(209, 213, 219, 1); -} - -/* Type-specific styling */ -/* Old hex-based colors commented in favor of tokens */ -/* .toast-notification--success { ... } */ -.toast-notification--success { - background: linear-gradient( - 135deg, - rgba(var(--color-success-rgb), 0.1) 0%, - rgba(var(--color-success-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-success-rgb), 0.2); - color: rgb(20, 83, 45); -} - -.toast-notification--success .toast-notification__icon { color: var(--color-success); } - -.dark .toast-notification--success { - color: rgb(187, 247, 208); -} - -.toast-notification--error { - background: linear-gradient( - 135deg, - rgba(var(--color-danger-rgb), 0.1) 0%, - rgba(var(--color-danger-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: rgb(127, 29, 29); -} - -.toast-notification--error .toast-notification__icon { color: var(--color-danger); } - -.dark .toast-notification--error { - color: rgb(254, 202, 202); -} - -.toast-notification--warning { - background: linear-gradient( - 135deg, - rgba(var(--color-warning-rgb), 0.1) 0%, - rgba(var(--color-warning-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-warning-rgb), 0.2); - color: rgb(120, 53, 15); -} - -.toast-notification--warning .toast-notification__icon { color: var(--color-warning); } - -.dark .toast-notification--warning { - color: rgb(254, 215, 170); -} - -.toast-notification--info { - background: linear-gradient( - 135deg, - rgba(var(--color-info-rgb), 0.1) 0%, - rgba(var(--color-info-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-info-rgb), 0.2); - color: rgb(30, 58, 138); -} - -.toast-notification--info .toast-notification__icon { color: var(--color-info); } - -.dark .toast-notification--info { - color: rgb(191, 219, 254); -} - -/* Animation states */ -.toast-notification--visible { - transform: translateX(0); -} - -.toast-notification--hiding { - transform: translateX(100%); - opacity: 0; - scale: 0.95; -} - -/* Enhanced animations */ -@keyframes toast-slide-in { - 0% { - transform: translateX(100%) scale(0.95); - opacity: 0; - } - 100% { - transform: translateX(0) scale(1); - opacity: 1; - } -} - -.toast-notification--entering { - animation: toast-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); -} - -/* Dark mode enhancements */ -.dark .toast-notification { - box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, 0.4), - 0 10px 10px -5px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -/* Mobile responsiveness */ -@media (max-width: 640px) { - .toast-notification { - left: 1rem; - right: 1rem; - max-width: none; - transform: translateY(-100%); - } - - .toast-notification--visible { - transform: translateY(0); - } - - .toast-notification--hiding { - transform: translateY(-100%); - } - - @keyframes toast-slide-in { - 0% { - transform: translateY(-100%) scale(0.95); - opacity: 0; - } - 100% { - transform: translateY(0) scale(1); - opacity: 1; - } - } -} - -/* Stacking for multiple toasts */ -.toast-notification:nth-child(1) { z-index: 9999; } -.toast-notification:nth-child(2) { z-index: 9998; top: 5.5rem; } -.toast-notification:nth-child(3) { z-index: 9997; top: 9.5rem; } -.toast-notification:nth-child(4) { z-index: 9996; top: 13.5rem; } \ No newline at end of file diff --git a/assets/css/components/tutorial.css b/assets/css/components/tutorial.css deleted file mode 100644 index 87f08e1d..00000000 --- a/assets/css/components/tutorial.css +++ /dev/null @@ -1,1290 +0,0 @@ -/* Tutorial Component - Enhanced tutorial system with modern UX patterns */ - -/* ========================================================================== - Tutorial Overview Components - ========================================================================== */ - -.tutorial-overview { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 2rem; - margin: 2rem 0; - padding: 0 1rem; -} - -.tutorial-card { - position: relative; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border-radius: 1rem; - border: 1px solid var(--color-border-primary); - padding: 2rem; - /* ✅ FIXED: Specific properties instead of transition: all */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.tutorial-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.tutorial-card:hover { - transform: translateY(-8px); - border-color: var(--color-brand); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.15), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -.tutorial-card:hover::before { - opacity: 1; -} - -.tutorial-card__header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1rem; - flex-wrap: wrap; - gap: 0.5rem; -} - -.tutorial-card__badges { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} - -.tutorial-card__title { - color: var(--color-text-primary); - font-size: 1.5rem; - font-weight: 700; - line-height: 1.3; - margin: 1rem 0 0.75rem 0; - transition: color 0.2s ease; -} - -.tutorial-card:hover .tutorial-card__title { - color: var(--color-brand); -} - -.tutorial-card__description { - color: var(--color-text-secondary); - line-height: 1.6; - margin-bottom: 1.5rem; - font-size: 0.95rem; -} - -.tutorial-card__metadata { - margin-top: auto; - padding-top: 1rem; - border-top: 1px solid var(--color-border-primary); -} - -/* Tutorial Badges */ -.tutorial-badge { - display: inline-flex; - align-items: center; - padding: 0.375rem 0.875rem; - border-radius: 9999px; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.tutorial-badge--difficulty { - background: linear-gradient(135deg, var(--color-brand-3) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.tutorial-badge--time { - background-color: var(--color-bg-tertiary); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-secondary); -} - -.tutorial-badge--prerequisites { - background: linear-gradient(135deg, var(--color-brand-5) 0%, var(--color-brand-6) 100%); - color: var(--color-text-primary); -} - -/* Tutorial Progress Mini Display */ -.tutorial-progress-mini { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; -} - -.progress-bar-mini { - flex: 1; - height: 6px; - background-color: var(--color-border-secondary); - border-radius: 3px; - overflow: hidden; - position: relative; -} - -.progress-bar-mini__fill { - height: 100%; - background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - border-radius: 3px; - transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; -} - -.progress-bar-mini__fill::after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 20px; - background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); - animation: progress-shine 2s infinite; -} - -@keyframes progress-shine { - 0% { transform: translateX(-20px); opacity: 0; } - 50% { opacity: 1; } - 100% { transform: translateX(20px); opacity: 0; } -} - -.progress-text { - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - white-space: nowrap; -} - -/* Tutorial Actions */ -.tutorial-actions { - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} - -.tutorial-actions__primary { - display: flex; - gap: 0.75rem; -} - -.tutorial-actions__secondary { - display: flex; - gap: 0.5rem; -} - -.bookmark-tutorial { - position: relative; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.bookmark-tutorial:hover { - transform: scale(1.1); -} - -.bookmark-tutorial.bookmarked .bookmark-icon { - fill: var(--color-brand); - transform: scale(1.1); -} - -/* ========================================================================== - Compact Progress Components (Primary) - ========================================================================== */ - -.tutorial-progress-compact { - background: var(--color-surface); - border-radius: 0.75rem; - border: 1px solid var(--color-border-primary); - padding: 1rem; - margin: 1rem 0; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); -} - -.tutorial-compact-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 0.75rem; - gap: 1rem; -} - -.tutorial-compact-info { - flex: 1; - min-width: 0; -} - -.tutorial-compact-breadcrumb { - display: flex; - align-items: center; - gap: 0.375rem; - margin-bottom: 0.375rem; - font-size: 0.875rem; -} - -.tutorial-parent-link { - color: var(--color-text-secondary); - text-decoration: none; - font-weight: 500; - transition: color 0.2s ease; - white-space: nowrap; -} - -.tutorial-parent-link:hover { - color: var(--color-brand); -} - -.breadcrumb-separator { - color: var(--color-text-tertiary); - flex-shrink: 0; - width: 1rem; - height: 1rem; -} - -.current-step-title { - color: var(--color-text-primary); - font-weight: 600; - font-size: 1rem; - line-height: 1.3; - margin: 0; -} - -.tutorial-compact-meta { - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; - font-size: 0.875rem; -} - -.step-counter { - color: var(--color-text-secondary); - font-weight: 500; - white-space: nowrap; -} - -.progress-percentage { - color: var(--color-brand); - font-weight: 700; - white-space: nowrap; -} - -.time-estimate { - color: var(--color-text-secondary); - background: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.375rem; - white-space: nowrap; - font-size: 0.8125rem; -} - -.tutorial-compact-actions { - display: flex; - gap: 0.375rem; - flex-shrink: 0; -} - -.btn-compact { - display: flex; - align-items: center; - justify-content: center; - width: 1.75rem; - height: 1.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - cursor: pointer; - flex-shrink: 0; -} - -.btn-compact:hover { - background: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); -} - -.btn-compact svg { - width: 0.875rem; - height: 0.875rem; -} - -/* Compact Progress Bar */ -.tutorial-progress-bar { - position: relative; - margin-bottom: 0.75rem; -} - -.progress-track { - height: 3px; - background: var(--color-border-secondary); - border-radius: 2px; - overflow: hidden; - margin-bottom: 0.625rem; - position: relative; -} - -.progress-fill { - height: 100%; - background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - border-radius: 2px; - transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; -} - -.progress-fill::after { - content: ''; - position: absolute; - top: 0; - right: -8px; - bottom: 0; - width: 8px; - background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); - animation: progress-shine 2s infinite; -} - -.step-dots { - display: flex; - justify-content: space-between; - align-items: center; - position: relative; -} - -.step-dot { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - font-size: 0.6875rem; - font-weight: 600; - text-decoration: none; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - position: relative; - z-index: 2; -} - -.step-dot.completed { - background: var(--color-brand); - color: var(--color-text-inverse); - box-shadow: 0 2px 4px rgba(var(--color-brand-rgb), 0.2); -} - -.step-dot.current { - background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.3); - animation: pulse-gentle 2s infinite; -} - -.step-dot.pending { - background: var(--color-bg-tertiary); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-secondary); -} - -.step-dot.pending:hover:not(.disabled) { - background: var(--color-surface-hover); - border-color: var(--color-brand); - transform: scale(1.1); -} - -.step-dot.disabled { - opacity: 0.5; - cursor: not-allowed; - pointer-events: none; -} - -.step-number { - font-size: 0.6875rem; - font-weight: 700; - line-height: 1; -} - -.step-dot svg { - width: 0.75rem; - height: 0.75rem; -} - -/* Expandable Progress Section */ -.tutorial-progress-expanded { - border-top: 1px solid var(--color-border-primary); - padding-top: 1rem; - margin-top: 1rem; -} - -.tutorial-steps-list { - display: grid; - gap: 0.75rem; -} - -.tutorial-step-item { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.5rem; - border-radius: 0.5rem; - transition: background-color 0.2s ease; -} - -.tutorial-step-item:hover { - background: var(--color-surface-hover); -} - -.tutorial-step-item.current { - background: var(--color-hover); -} - -.step-indicator-small { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - flex-shrink: 0; -} - -.step-indicator-small .current-indicator, -.step-indicator-small .pending-indicator { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.625rem; - font-weight: 700; - border-radius: 50%; -} - -.step-indicator-small .current-indicator { - background: var(--color-brand); - color: var(--color-text-inverse); -} - -.step-indicator-small .pending-indicator { - background: var(--color-bg-tertiary); - color: var(--color-text-secondary); -} - -.step-info-small { - flex: 1; - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; -} - -.step-link { - color: var(--color-text-primary); - text-decoration: none; - font-size: 0.875rem; - font-weight: 500; - transition: color 0.2s ease; -} - -.step-link:hover { - color: var(--color-brand); -} - -.step-title-disabled { - color: var(--color-text-tertiary); - font-size: 0.875rem; - font-weight: 500; -} - -.step-time-small { - color: var(--color-text-tertiary); - font-size: 0.75rem; - background: var(--color-bg-tertiary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} - -/* Compact Navigation */ -.tutorial-compact-nav { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.75rem; - border-top: 1px solid var(--color-border-primary); - padding-top: 0.75rem; - margin-top: 0.75rem; -} - -/* ========================================================================== - Enhanced Progress Navigation (Legacy) - ========================================================================== */ - -/* Legacy Progress Components (for backward compatibility) */ -.tutorial-progress { - background: var(--color-surface); - border-radius: 1rem; - border: 1px solid var(--color-border-primary); - padding: 2rem; - margin: 2rem 0; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.tutorial-progress__header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 2rem; - flex-wrap: wrap; - gap: 1rem; -} - -.tutorial-title { - color: var(--color-text-primary); - font-size: 1.75rem; - font-weight: 700; - margin: 0; - line-height: 1.2; -} - -.tutorial-meta { - display: flex; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} - -.time-remaining { - font-size: 0.875rem; - color: var(--color-text-secondary); - background-color: var(--color-bg-tertiary); - padding: 0.5rem 1rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); -} - -/* Progress Track */ -.tutorial-progress__track { - position: relative; - margin: 3rem 0; -} - -.progress-line { - position: absolute; - top: 3rem; - left: 3rem; - right: 3rem; - height: 3px; - background-color: var(--color-border-secondary); - border-radius: 2px; - z-index: 1; -} - -.progress-line::after { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 100%; - background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - border-radius: 2px; - width: var(--progress-width, 0%); - transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 0 10px rgba(var(--color-brand-rgb), 0.3); -} - -.tutorial-steps { - display: flex; - justify-content: space-between; - align-items: flex-start; - position: relative; - z-index: 2; - gap: 1rem; -} - -.tutorial-step { - display: flex; - flex-direction: column; - align-items: center; - max-width: 200px; - text-align: center; - flex: 1; - cursor: pointer; - transition: all 0.3s ease; -} - -.tutorial-step:hover { - transform: translateY(-2px); -} - -.tutorial-step.disabled { - cursor: not-allowed; - opacity: 0.6; -} - -.tutorial-step.disabled:hover { - transform: none; -} - -/* Step Indicators */ -.step-indicator { - width: 4rem; - height: 4rem; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 1rem; - position: relative; - transition: all 0.3s ease; - font-weight: 700; - font-size: 1.1rem; - border: 3px solid transparent; -} - -.step-icon--complete { - background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - box-shadow: 0 4px 15px rgba(var(--color-brand-rgb), 0.3); -} - -/* Checkmark handled by SVG, no need for ::before content */ - -.step-icon--current { - background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - animation: pulse-gentle 2s infinite; - box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4); - border-color: var(--color-brand); -} - -.step-icon--pending { - background-color: var(--color-bg-tertiary); - color: var(--color-text-secondary); - border-color: var(--color-border-secondary); -} - -.step-icon--pending:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); -} - -@keyframes pulse-gentle { - 0%, 100% { - transform: scale(1); - box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4), 0 0 0 0 rgba(var(--color-brand-rgb), 0.4); - } - 50% { - transform: scale(1.05); - box-shadow: 0 6px 25px rgba(var(--color-brand-rgb), 0.6), 0 0 0 15px rgba(var(--color-brand-rgb), 0); - } -} - -/* Step Content */ -.step-content { - min-height: 80px; - display: flex; - flex-direction: column; - justify-content: flex-start; -} - -.step-title { - color: var(--color-text-primary); - font-size: 1rem; - font-weight: 600; - margin: 0 0 0.5rem 0; - line-height: 1.3; -} - -.step-description { - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.4; - margin: 0 0 0.5rem 0; -} - -.step-time { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - background-color: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.375rem; - display: inline-block; -} - -/* Progress Actions */ -.tutorial-progress__actions { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 2rem; - padding-top: 1.5rem; - border-top: 1px solid var(--color-border-primary); - gap: 1rem; -} - -/* ========================================================================== - Interactive Content Components - ========================================================================== */ - -/* Enhanced Code Blocks - Now used by render-codeblock.html */ -.code-block-enhanced { - background: var(--color-bg-tertiary); - border-radius: 0.75rem; - border: 1px solid var(--color-border-primary); - overflow: hidden; - margin: 1rem 0; - box-shadow: var(--glass-shadow); -} - -.code-content { - background: var(--color-bg-tertiary); -} - -.code-content pre { - margin: 0; - background: transparent; -} - -.code-content code { - background: transparent; - padding: 0.75rem; - display: block; - overflow-x: auto; -} - -/* Reduce default code font size; allow override via --code-font-size */ -.code-content pre, -.code-content code { - font-size: var(--code-font-size, 0.875rem); - line-height: 1.55; -} - -.code-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0.75rem; - background: var(--color-surface); - border-bottom: 1px solid var(--color-border-primary); -} - -.code-language { - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; - background-color: var(--color-bg-tertiary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} - -.code-actions { - display: flex; - gap: 0.375rem; -} - -.copy-code { - position: relative; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.copy-code.copied { - background-color: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} - - -/* Collapsible Sections */ -.tutorial-section { - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - margin: 1.5rem 0; - overflow: hidden; - background: var(--color-surface); -} - -.section-header { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.25rem 1.5rem; - background: none; - border: none; - cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard); - text-align: left; -} - -.section-header:hover { - background-color: var(--color-surface-hover); -} - -.section-header[aria-expanded="true"] { - border-bottom: 1px solid var(--color-border-primary); -} - -.section-title { - color: var(--color-text-primary); - font-size: 1.125rem; - font-weight: 600; - margin: 0; - line-height: 1.3; -} - -.section-chevron { - width: 1.25rem; - height: 1.25rem; - color: var(--color-text-secondary); - transition: transform 0.3s ease; -} - -.section-header[aria-expanded="true"] .section-chevron { - transform: rotate(180deg); -} - -.section-content { - padding: 0 1.5rem; - max-height: 0; - opacity: 0; - overflow: hidden; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - padding var(--timing-medium) var(--easing-standard); - /* Tutorial-specific customization */ - --collapse-height-expanded: 2500px; - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-emphasized); -} - -.section-content.expanded { - max-height: var(--collapse-height-expanded, 2500px); - opacity: 1; - padding: 1.5rem; -} - -/* Step Validation */ -.step-validation { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - padding: 1.5rem; - margin: 2rem 0; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); -} - -.validation-checklist h4 { - color: var(--color-text-primary); - font-size: 1.125rem; - font-weight: 600; - margin: 0 0 1rem 0; -} - -.validation-item { - display: flex; - align-items: center; - padding: 0.75rem 0; - cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - padding var(--timing-fast) var(--easing-standard); - border-radius: 0.5rem; - margin-bottom: 0.5rem; -} - -.validation-item:hover { - background-color: var(--color-surface-hover); - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.validation-checkbox { - margin-right: 1rem; - width: 1.25rem; - height: 1.25rem; - accent-color: var(--color-brand); -} - -.validation-text { - color: var(--color-text-primary); - font-weight: 500; - line-height: 1.5; -} - -.validate-step { - margin-top: 1.5rem; - width: 100%; - transition: all 0.3s ease; -} - -.validate-step:disabled { - opacity: 0.5; - cursor: not-allowed; - transform: none; -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 1024px) { - .tutorial-overview { - grid-template-columns: 1fr; - gap: 1.5rem; - padding: 0 0.5rem; - } - - .tutorial-card { - padding: 1.5rem; - } - - .tutorial-progress { - padding: 1.5rem; - } - - .tutorial-steps { - gap: 0.75rem; - } - - .tutorial-step { - max-width: 150px; - } - - .step-indicator { - width: 3rem; - height: 3rem; - font-size: 1rem; - } -} - -@media (max-width: 768px) { - .tutorial-overview { - padding: 0; - } - - .tutorial-card { - border-radius: 0.75rem; - margin: 0 0.5rem; - } - - .tutorial-card__header { - flex-direction: column; - align-items: flex-start; - gap: 0.75rem; - } - - /* Compact Progress Mobile */ - .tutorial-progress-compact { - margin: 0.75rem 0.5rem; - padding: 0.75rem; - border-radius: 0.5rem; - } - - .tutorial-compact-header { - flex-direction: column; - align-items: stretch; - gap: 0.75rem; - } - - .tutorial-compact-meta { - justify-content: space-between; - } - - .tutorial-compact-actions { - align-self: flex-end; - } - - .tutorial-compact-nav { - flex-direction: column; - gap: 0.75rem; - } - - .tutorial-compact-nav .btn { - width: 100%; - justify-content: center; - } - - .step-dots { - gap: 0.5rem; - overflow-x: auto; - padding: 0.25rem 0; - } - - .step-dot { - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - } - - /* Legacy tutorial progress mobile */ - .tutorial-progress { - margin: 1rem 0.5rem; - padding: 1rem; - border-radius: 0.75rem; - } - - .tutorial-progress__header { - flex-direction: column; - align-items: flex-start; - gap: 1rem; - } - - .tutorial-title { - font-size: 1.5rem; - } - - .tutorial-meta { - width: 100%; - justify-content: space-between; - } - - /* Mobile Step Layout */ - .tutorial-steps { - flex-direction: column; - gap: 1.5rem; - align-items: stretch; - } - - .tutorial-step { - flex-direction: row; - max-width: none; - text-align: left; - align-items: center; - padding: 1rem; - background-color: var(--color-surface); - border-radius: 0.75rem; - border: 1px solid var(--color-border-primary); - } - - .step-indicator { - margin-bottom: 0; - margin-right: 1rem; - flex-shrink: 0; - width: 3rem; - height: 3rem; - } - - .step-content { - min-height: auto; - flex: 1; - } - - .progress-line { - display: none; /* Hide connecting line on mobile */ - } - - .tutorial-progress__actions { - flex-direction: column; - gap: 1rem; - } - - .tutorial-progress__actions .btn { - width: 100%; - justify-content: center; - } - - /* Mobile Code Blocks */ - .code-header { - padding: 0.75rem 1rem; - flex-direction: column; - align-items: flex-start; - gap: 0.75rem; - } - - .code-actions { - width: 100%; - justify-content: flex-end; - } - - /* Mobile Sections */ - .section-header { - padding: 1rem 1.25rem; - } - - .section-content.expanded { - padding: 1rem 1.25rem 1.5rem; - } - - /* Mobile Validation */ - .step-validation { - margin: 1.5rem 0.5rem; - padding: 1.25rem; - } -} - -@media (max-width: 480px) { - .tutorial-card { - margin: 0 0.25rem; - padding: 1.25rem; - } - - .tutorial-progress { - margin: 1rem 0.25rem; - padding: 0.75rem; - } - - .tutorial-title { - font-size: 1.25rem; - } - - .tutorial-step { - padding: 0.75rem; - } - - .step-indicator { - width: 2.5rem; - height: 2.5rem; - font-size: 0.9rem; - } - - .step-title { - font-size: 0.9rem; - } - - .step-description { - font-size: 0.8rem; - } -} - -/* ========================================================================== - Dark Mode Adjustments - ========================================================================== */ - -.dark .tutorial-card { - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .tutorial-card:hover { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.dark .tutorial-progress { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} - -.dark .code-block-enhanced { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} - -.dark .tutorial-section { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); -} - -.dark .step-validation { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} - -/* ========================================================================== - Accessibility Enhancements - ========================================================================== */ - -.tutorial-step:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} - -.section-header:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -.validation-item:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} - -/* Reduced motion preferences */ -@media (prefers-reduced-motion: reduce) { - .tutorial-card, - .tutorial-step, - .step-indicator, - .progress-bar-mini__fill, - .progress-line::after { - transition: none; - } - - .step-icon--current { - animation: none; - } - - .progress-bar-mini__fill::after { - animation: none; - } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .tutorial-card { - border-width: 2px; - } - - .tutorial-badge { - border: 1px solid currentColor; - } - - .step-indicator { - border-width: 2px; - } -} \ No newline at end of file diff --git a/assets/css/fonts-nvidia.css b/assets/css/fonts-nvidia.css deleted file mode 100644 index bde35333..00000000 --- a/assets/css/fonts-nvidia.css +++ /dev/null @@ -1,131 +0,0 @@ -/* NVIDIA Sans - for old browsers */ -@supports not (font-variation-settings: normal) { - @font-face { - font-family: "NVIDIA"; - src: local("NVIDIA Sans Light"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Lt.woff2") format("woff2"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Lt.woff") format("woff"); - font-weight: 300; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "NVIDIA"; - src: local("NVIDIA Sans Regular"), - local("NVIDIA Sans"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Rg.woff2") format("woff2"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Rg.woff") format("woff"); - font-weight: 400; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "NVIDIA"; - src: local("NVIDIA Sans Medium"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Md.woff2") format("woff2"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Md.woff") format("woff"); - font-weight: 500; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "NVIDIA"; - src: local("NVIDIA Sans Bold"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Bd.woff2") format("woff2"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Bd.woff") format("woff"); - font-weight: 700; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "RobotoMono"; - src: local("Roboto Mono Light"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/static/RobotoMono-Light.ttf") format("truetype"); - font-weight: 300; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "RobotoMono"; - src: local("Roboto Mono Regular"), - local("Roboto Mono"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/static/RobotoMono-Regular.ttf") format("truetype"); - font-weight: 400; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "RobotoMono"; - src: local("Roboto Mono Medium"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/static/RobotoMono-Medium.ttf") format("truetype"); - font-weight: 500; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "RobotoMono"; - src: local("Roboto Mono Bold"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/static/RobotoMono-Bold.ttf") format("truetype"); - font-weight: 700; - font-style: normal; - font-display: swap; - } -} - -/* NVIDIA Sans - for modern browsers (variable fonts) */ -@supports (font-variation-settings: normal) { - @font-face { - font-family: 'NVIDIA'; - src: local('NVIDIA Sans Variable'), - local('NVIDIA Sans'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/var/NVIDIASansVF_W_Wght.woff2') format('woff2') tech('variations'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/var/NVIDIASansVF_W_Wght.woff2') format('woff2-variations'); - font-weight: 100 1000; - font-stretch: 25% 151%; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: 'NVIDIA'; - src: local('NVIDIA Sans Variable Italic'), - local('NVIDIA Sans Italic'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/var/NVIDIASansVF_Wght_W_Italic.woff2') format('woff2') tech('variations'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/var/NVIDIASansVF_Wght_W_Italic.woff2') format('woff2-variations'); - font-weight: 100 1000; - font-stretch: 25% 151%; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: 'RobotoMono'; - src: local('Roboto Mono Variable'), - local('Roboto Mono'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf') format('truetype') tech('variations'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf') format('truetype-variations'); - font-weight: 100 1000; - font-stretch: 25% 151%; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: 'RobotoMono'; - src: local('Roboto Mono Variable Italic'), - local('Roboto Mono Italic'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype') tech('variations'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype-variations'); - font-weight: 100 1000; - font-stretch: 25% 151%; - font-style: italic; - font-display: swap; - } -} \ No newline at end of file diff --git a/assets/css/fonts-offline.css b/assets/css/fonts-offline.css deleted file mode 100644 index 77115c69..00000000 --- a/assets/css/fonts-offline.css +++ /dev/null @@ -1,15 +0,0 @@ -/* Offline-safe font stack: avoid external font files */ -:root { - --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -html, body, input, button, textarea, select { - font-family: var(--font-sans); -} - -code, pre, kbd, samp { - font-family: var(--font-mono); -} - - diff --git a/assets/css/fonts.css b/assets/css/fonts.css deleted file mode 100644 index d32e0b5a..00000000 --- a/assets/css/fonts.css +++ /dev/null @@ -1,16 +0,0 @@ -/* Rubik Variable Font */ -@font-face { - font-family: 'Rubik'; - src: url('../fonts/Rubik-VariableFont_wght.ttf') format('truetype'); - font-weight: 300 900; /* Range of weights available in the variable font */ - font-display: swap; -} - -/* Rubik Italic Variable Font */ -@font-face { - font-family: 'Rubik'; - src: url('../fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype'); - font-style: italic; - font-weight: 300 900; /* Range of weights available in the variable font */ - font-display: swap; -} diff --git a/assets/css/main.css b/assets/css/main.css index 654296fe..746ba98b 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,17335 +1,123 @@ -/* This file is used to compile the main.css file. */ -/* Import component CSS files - MUST be first! */ -/* 🎯 Architecture System - Complete Import - * ========================================= - * - * This file imports all architectural foundation files in the correct order - * to ensure proper CSS cascade and prevent conflicts. - * - * Import this single file to get the complete architectural system. - */ -/* ✅ STEP 1: ANIMATION FOUNDATION - * ================================ - * Must be first - provides timing tokens, easing curves, and base animation patterns - * that other systems depend on. - */ -/* 🎯 Universal Animation System - Single Source of Truth - * ===================================================== - * - * This file establishes consistent timing, easing, and animation patterns - * across the entire theme to eliminate timing chaos and performance issues. - */ -:root { - /* ✨ TIMING TOKENS - Only these 4 speeds allowed site-wide */ - --timing-instant: 0.1s; /* Micro-interactions (hover, focus) */ - --timing-fast: 0.2s; /* Standard interactions (buttons, links) */ - --timing-medium: 0.3s; /* Complex interactions (collapse, expand) */ - --timing-slow: 0.5s; /* Dramatic reveals (page transitions) */ - - /* ✨ EASING TOKENS - Only these 3 curves allowed site-wide */ - --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Default - smooth start/end */ - --easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* Dramatic - bouncy feel */ - --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Gentle - soft motion */ - - /* 🎯 COLLAPSE TOKENS - Universal collapse/expand behavior */ - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); - --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; /* Never use 'none' or 'auto' - breaks animation */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - - /* 🎨 TRANSFORM TOKENS - 3D acceleration friendly */ - --transform-scale-down: scale(0.95); - --transform-scale-up: scale(1.05); - --transform-scale-normal: scale(1); - --transform-translate-up: translateY(-4px); - --transform-translate-down: translateY(4px); - --transform-translate-none: translateY(0); - - /* 🌟 OPACITY TOKENS - Visibility states */ - --opacity-hidden: 0; - --opacity-faded: 0.6; - --opacity-visible: 1; - - /* 🎨 COMPONENT-SPECIFIC TOKENS - From design-tokens.css merge */ - - /* Card & Tile Tokens */ - --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.1); - --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.15); - --card-shadow-active: 0 8px 25px rgba(0,0,0,0.15); - --card-transform-hover: translateY(-2px); - --card-transform-active: translateY(-1px) scale(0.98); - --card-border-radius: 0.5rem; - - /* ✨ ADDITIONAL TRANSFORM PATTERNS - From component analysis */ - --transform-lift-subtle: translateY(-1px); /* Buttons, small elements */ - --transform-lift-medium: translateY(-2px); /* Cards, medium elements */ - --transform-lift-dramatic: translateY(-4px); /* Hero elements */ - --transform-slide-in-up: translateY(20px); /* Entry animations */ - --transform-slide-in-down: translateY(-20px); /* Dropdown animations */ - --transform-scale-hover: scale(1.02); /* Hover scale up */ - --transform-scale-active: scale(0.98); /* Active scale down */ - --transform-scale-entrance: scale(0.95); /* Entry scale */ - - /* ✨ COMBINED TRANSFORMS - Common combinations */ - --transform-lift-and-scale: translateY(-2px) scale(1.02); - --transform-press-down: translateY(1px) scale(0.98); - --transform-bounce-in: translateY(10px) scale(0.95); - --transform-slide-up-fade: translateY(15px); - - /* Interaction Tokens */ - --hover-scale: 1.02; - --active-scale: 0.98; - --focus-ring-width: 2px; - --focus-ring-offset: 2px; - --focus-ring-color: rgba(var(--color-brand-rgb), 0.2); - - /* Loading State Tokens */ - --loading-opacity: 0.6; - --loading-blur: blur(1px); - --loading-skeleton-bg: linear-gradient(90deg, - rgba(var(--color-brand-rgb), 0.1) 25%, - rgba(var(--color-brand-rgb), 0.2) 50%, - rgba(var(--color-brand-rgb), 0.1) 75%); - --loading-skeleton-size: 200% 100%; - - /* Feedback Tokens */ - --feedback-success: #10b981; - --feedback-warning: #f59e0b; - --feedback-error: #ef4444; - --feedback-info: #3b82f6; - --feedback-slide-in: translateY(-10px); - --feedback-slide-out: translateY(-20px); - - /* Progressive Reveal Tokens */ - --reveal-stagger-delay: 0.05s; - --reveal-batch-delay: 0.15s; - --reveal-slide-distance: 20px; -} -/* 🌙 DARK MODE ENHANCEMENTS */ -.dark { - --focus-ring-color: rgba(var(--color-brand-rgb), 0.3); - - /* Enhanced loading states for dark mode */ - --loading-skeleton-bg: linear-gradient(90deg, - rgba(255, 255, 255, 0.05) 25%, - rgba(255, 255, 255, 0.1) 50%, - rgba(255, 255, 255, 0.05) 75%); - - /* Enhanced shadows for dark mode */ - --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.3); - --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4); - --card-shadow-active: 0 8px 25px rgba(0,0,0,0.5); -} -/* 🚨 ACCESSIBILITY - Respect user preferences */ -@media (prefers-reduced-motion: reduce) { - :root { - --timing-instant: 0.01s; - --timing-fast: 0.01s; - --timing-medium: 0.01s; - --timing-slow: 0.01s; - } - - * { - animation-duration: 0.01s !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01s !important; - } -} -/* ✅ UNIVERSAL COLLAPSE COMPONENT - * ================================ - * Use these classes on any collapsible content for consistent behavior - */ -/* Base collapsible container */ -.collapse-container { - position: relative; - overflow: hidden; -} -/* Collapsible content body */ -.collapse-body { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing); -} -/* Expanded state */ -.collapse-body.expanded { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); -} -/* Duplicated component/data state rules moved to architecture/component-states.css */ -/* Keeping this section intentionally empty to avoid divergence. */ -/* ✅ PERFORMANCE-OPTIMIZED HOVER STATES - * ====================================== - * Use specific property transitions instead of "transition: all" - */ -.interactive-element { - transition: - transform var(--timing-fast) var(--easing-standard), - opacity var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} -.interactive-element:hover { - transform: var(--transform-translate-up); - opacity: var(--opacity-visible); -} -.interactive-element:active { - transform: var(--transform-scale-down); - transition-duration: var(--timing-instant); /* Instant feedback */ -} -/* ✅ COMPONENT-SPECIFIC CUSTOMIZATION - * ==================================== - * Override tokens for specific component needs - */ -/* OpenAPI components need larger heights for complex content */ -.openapi-response { - --collapse-height-expanded: 3000px; - --collapse-timing: var(--timing-medium); -} -/* Notebook cells should be snappier */ -.notebook-cell { - --collapse-height-expanded: 2000px; - --collapse-timing: var(--timing-fast); -} -/* Tutorial sections can be more dramatic */ -.tutorial-section { - --collapse-height-expanded: 2500px; - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-emphasized); -} -/* Tabs need instant switching for good UX */ -.tab-content { - --collapse-height-expanded: 1500px; - --collapse-timing: var(--timing-fast); -} -/* ✅ SIDEBAR NAVIGATION TREE - Optimized for hierarchical content */ -.nested-content { - --collapse-height-expanded: 2000px; - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); - - /* Performance optimization for tree navigation */ - will-change: max-height, opacity; - transform: translateZ(0); /* Force hardware acceleration */ -} -/* ✅ UTILITY CLASSES - * =================== - * Common animation patterns as reusable classes - */ -.fade-in { - opacity: var(--opacity-hidden); - animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; -} -.fade-out { - opacity: var(--opacity-visible); - animation: fadeOut var(--timing-medium) var(--easing-standard) forwards; -} -.slide-up { - transform: var(--transform-translate-down); - animation: slideUp var(--timing-medium) var(--easing-standard) forwards; -} -.slide-in-up { - transform: var(--transform-slide-in-up); - opacity: var(--opacity-hidden); - animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; -} -.slide-in-down { - transform: var(--transform-slide-in-down); - opacity: var(--opacity-hidden); - animation: slideInDown var(--timing-medium) var(--easing-standard) forwards; -} -.scale-in { - transform: var(--transform-scale-down); - opacity: var(--opacity-hidden); - animation: scaleIn var(--timing-medium) var(--easing-emphasized) forwards; -} -.bounce-in { - transform: var(--transform-bounce-in); - opacity: var(--opacity-hidden); - animation: bounceIn var(--timing-slow) var(--easing-emphasized) forwards; -} -.lift-on-hover { - transition: transform var(--timing-fast) var(--easing-standard); -} -.lift-on-hover:hover { - transform: var(--transform-lift-medium); -} -/* ✅ KEYFRAME ANIMATIONS - * ======================= - * Standard animations used across components - */ -@keyframes fadeIn { - to { - opacity: var(--opacity-visible); - } -} -@keyframes fadeOut { - to { - opacity: var(--opacity-hidden); - } -} -@keyframes slideUp { - to { - transform: var(--transform-translate-none); - } -} -@keyframes slideInUp { - to { - transform: var(--transform-translate-none); - opacity: var(--opacity-visible); - } -} -@keyframes slideInDown { - to { - transform: var(--transform-translate-none); - opacity: var(--opacity-visible); - } -} -@keyframes scaleIn { - to { - transform: var(--transform-scale-normal); - opacity: var(--opacity-visible); - } -} -@keyframes bounceIn { - 0% { - transform: var(--transform-bounce-in); - opacity: var(--opacity-hidden); - } - 50% { - transform: translateY(-5px) scale(1.02); - opacity: var(--opacity-faded); - } - 100% { - transform: var(--transform-translate-none); - opacity: var(--opacity-visible); - } -} -/* ✅ STAGGER ANIMATIONS - * ====================== - * For animating groups of elements with delays - */ -.stagger-children > * { - animation-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); -} -.stagger-fade-in > * { - opacity: var(--opacity-hidden); - animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; -} -.stagger-slide-up > * { - transform: var(--transform-slide-in-up); - opacity: var(--opacity-hidden); - animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; -} -/* ✅ DEBUG MODE - * ============== - * Uncomment to visualize animation timing (development only) - */ -/* -.collapse-body { - border: 2px dashed red !important; -} - -.collapse-body.expanded { - border-color: green !important; -} - -[data-collapse-state] { - outline: 2px solid blue !important; -} -*/ -/* ✅ STEP 2: COMPONENT STATE MANAGEMENT - * ====================================== - * Depends on animation tokens. Provides state management patterns that - * interaction and loading systems build upon. - */ -/* 🎯 Universal Component State Management System - * ============================================== - * - * This file establishes consistent state management patterns across all - * interactive components, replacing inconsistent class-based approaches - * with data-attribute driven state management. - */ -/* ✅ COLLAPSE STATE MANAGEMENT - * ============================= - * Universal collapse/expand states using data attributes - */ -/* Base collapsed state - applies to any element with data-collapse-state */ -[data-collapse-state="collapsed"] { - max-height: var(--collapse-height-collapsed, 0); - opacity: var(--collapse-opacity-collapsed, 0); - overflow: hidden; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} -/* Transitioning state - shows element is mid-animation */ -[data-collapse-state="transitioning"] { - overflow: hidden; /* Ensure no content spillage during animation */ - pointer-events: none; /* Prevent interaction during transition */ -} -/* Expanded state - fully visible and interactive */ -[data-collapse-state="expanded"] { - max-height: var(--collapse-height-expanded, 2000px); - opacity: var(--collapse-opacity-expanded, 1); - overflow: visible; /* Allow content to be fully visible when expanded */ - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} -/* ✅ COMPONENT LIFECYCLE STATES - * ============================== - * Standard states for component initialization and interaction - */ -/* Loading state - component is being initialized */ -[data-component-state="loading"] { - opacity: var(--opacity-faded, 0.6); - pointer-events: none; - cursor: wait; - transition: opacity var(--timing-fast) var(--easing-standard); -} -/* Ready state - component is initialized and interactive */ -[data-component-state="ready"] { - opacity: var(--opacity-visible, 1); - pointer-events: auto; - transition: opacity var(--timing-fast) var(--easing-standard); -} -/* Disabled state - component is non-interactive */ -[data-component-state="disabled"] { - opacity: var(--opacity-faded, 0.6); - pointer-events: none; - cursor: not-allowed; - filter: grayscale(50%); - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} -/* Error state - component has encountered an error */ -[data-component-state="error"] { - opacity: var(--opacity-visible, 1); - border-color: var(--color-danger, #ef4444); - background-color: rgba(239, 68, 68, 0.05); - transition: - border-color var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard); -} -/* ✅ LEGACY CLASS SUPPORT (Backward Compatibility) - * ================================================= - * Bridge classes for existing components that use class-based states - */ -/* Support for existing .expanded classes */ -.expanded { - max-height: var(--collapse-height-expanded, 2000px) !important; - opacity: var(--collapse-opacity-expanded, 1) !important; - overflow: visible !important; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} -/* Support for existing .collapsed classes */ -.collapsed { - max-height: var(--collapse-height-collapsed, 0) !important; - opacity: var(--collapse-opacity-collapsed, 0) !important; - overflow: hidden !important; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} -/* ✅ INTERACTIVE STATES - * ===================== - * Consistent hover, focus, and active states - */ -/* Interactive elements with hover states */ -[data-interactive="true"]:hover, -.interactive:hover { - transform: var(--transform-translate-up, translateY(-2px)); - transition: transform var(--timing-fast) var(--easing-standard); -} -/* Interactive elements with focus states */ -[data-interactive="true"]:focus-visible, -.interactive:focus-visible { - outline: 2px solid var(--color-brand, #3b82f6); - outline-offset: 2px; - border-radius: 0.25rem; -} -/* Interactive elements with active states */ -[data-interactive="true"]:active, -.interactive:active { - transform: var(--transform-scale-down, scale(0.98)); - transition: transform var(--timing-instant) var(--easing-standard); -} -/* ✅ COMPONENT-SPECIFIC STATE OVERRIDES - * ====================================== - * Customization for specific component types - */ -/* OpenAPI Components */ -.openapi-response[data-collapse-state], -.openapi-endpoint[data-collapse-state], -.openapi-parameter[data-collapse-state] { - --collapse-height-expanded: 3000px; /* Complex API content needs more space */ - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); -} -/* Notebook Components */ -.notebook-cell[data-collapse-state], -.notebook-output[data-collapse-state] { - --collapse-height-expanded: 2000px; /* Code and output content */ - --collapse-timing: var(--timing-fast); /* Snappier interaction */ - --collapse-easing: var(--easing-standard); -} -/* Tutorial Components */ -.tutorial-section[data-collapse-state], -.section-content[data-collapse-state] { - --collapse-height-expanded: 2500px; /* Text-heavy content */ - --collapse-timing: var(--timing-slow); /* More dramatic for educational content */ - --collapse-easing: var(--easing-emphasized); -} -/* Tab Components */ -.tab-content[data-collapse-state], -[data-tabcontent][data-collapse-state] { - --collapse-height-expanded: 1500px; /* Tab content usually more compact */ - --collapse-timing: var(--timing-fast); /* Quick switching expected */ - --collapse-easing: var(--easing-standard); -} -/* ✅ UTILITY CLASSES - * =================== - * Quick state application classes - */ -/* Force immediate state without animation */ -.state-immediate { - transition: none !important; -} -/* Force slow animation timing */ -.state-slow { - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-smooth); -} -/* Force fast animation timing */ -.state-fast { - --collapse-timing: var(--timing-fast); - --collapse-easing: var(--easing-standard); -} -/* Emphasized dramatic animation */ -.state-dramatic { - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-emphasized); -} -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Enhanced states for screen readers and assistive technology - */ -/* ✅ REMOVED: Enhanced focus indicators causing ancestry tree echoing - * The :focus-within pseudo-class was applying styling to ALL ancestor elements - * with data-collapse-state attributes, creating the visual "echo" effect. - * Focus should be handled by individual interactive elements instead. - */ -/* Screen reader friendly state announcements */ -[data-collapse-state="collapsed"][aria-label]::before { - content: "Collapsed: "; - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} -[data-collapse-state="expanded"][aria-label]::before { - content: "Expanded: "; - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} -/* ✅ MOTION REDUCTION SUPPORT - * ============================ - * Respect user motion preferences - */ -@media (prefers-reduced-motion: reduce) { - [data-collapse-state], - [data-component-state], - .expanded, - .collapsed, - [data-interactive] { - transition: none !important; - animation: none !important; - transform: none !important; - } -} -/* ✅ HIGH CONTRAST MODE SUPPORT - * ============================== - * Enhanced visibility for high contrast users - */ -@media (prefers-contrast: high) { - [data-component-state="error"] { - border-width: 2px; - border-style: solid; - } - - /* ✅ REMOVED: focus-within outline for high contrast mode - * This was also contributing to the ancestry tree echo effect - */ -} -[data-interactive="true"]:focus-visible { - outline-width: 3px; - outline-style: solid; -} -/* ✅ DEBUG MODE (Development Only) - * ================================= - * Uncomment to visualize state management in development - */ /* -[data-collapse-state] { - position: relative; -} - -[data-collapse-state]::before { - content: "State: " attr(data-collapse-state); - position: absolute; - top: -1.5rem; - left: 0; - background: #000; - color: #fff; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - border-radius: 0.25rem; - z-index: 1000; - pointer-events: none; -} - -[data-component-state]::after { - content: "Component: " attr(data-component-state); - position: absolute; - top: -3rem; - left: 0; - background: #3b82f6; - color: #fff; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - border-radius: 0.25rem; - z-index: 1000; - pointer-events: none; -} -*/ -/* ✅ STEP 3: LAYOUT FOUNDATIONS - * ============================== - * Independent system that provides spacing, positioning, and layout tokens. - * Can be loaded in parallel with other systems. - */ -/* 🎯 Universal Layout Foundations System - * ======================================= - * - * This file centralizes common spacing, positioning, and layout patterns - * to ensure consistent spatial relationships across all components. + * MiloDocs v4 - Clean Foundation + * Modern CSS framework built on Tailwind utilities + semantic components */ -:root { - /* ✨ SPACING SCALE (based on 0.25rem = 4px base) */ - --space-0: 0; - --space-px: 1px; - --space-0-5: 0.125rem; /* 2px */ - --space-1: 0.25rem; /* 4px */ - --space-1-5: 0.375rem; /* 6px */ - --space-2: 0.5rem; /* 8px */ - --space-2-5: 0.625rem; /* 10px */ - --space-3: 0.75rem; /* 12px */ - --space-3-5: 0.875rem; /* 14px */ - --space-4: 1rem; /* 16px */ - --space-5: 1.25rem; /* 20px */ - --space-6: 1.5rem; /* 24px */ - --space-7: 1.75rem; /* 28px */ - --space-8: 2rem; /* 32px */ - --space-9: 2.25rem; /* 36px */ - --space-10: 2.5rem; /* 40px */ - --space-11: 2.75rem; /* 44px */ - --space-12: 3rem; /* 48px */ - --space-14: 3.5rem; /* 56px */ - --space-16: 4rem; /* 64px */ - --space-20: 5rem; /* 80px */ - --space-24: 6rem; /* 96px */ - --space-28: 7rem; /* 112px */ - --space-32: 8rem; /* 128px */ - --space-36: 9rem; /* 144px */ - --space-40: 10rem; /* 160px */ - --space-44: 11rem; /* 176px */ - --space-48: 12rem; /* 192px */ - --space-52: 13rem; /* 208px */ - --space-56: 14rem; /* 224px */ - --space-60: 15rem; /* 240px */ - --space-64: 16rem; /* 256px */ - --space-72: 18rem; /* 288px */ - --space-80: 20rem; /* 320px */ - --space-96: 24rem; /* 384px */ - - /* ✨ SEMANTIC SPACING TOKENS */ - --space-xs: var(--space-1); /* 4px - Minimal spacing */ - --space-sm: var(--space-2); /* 8px - Small spacing */ - --space-md: var(--space-4); /* 16px - Medium spacing */ - --space-lg: var(--space-6); /* 24px - Large spacing */ - --space-xl: var(--space-8); /* 32px - Extra large spacing */ - --space-2xl: var(--space-12); /* 48px - Double extra large */ - --space-3xl: var(--space-16); /* 64px - Triple extra large */ - - /* ✨ CONTENT SPACING TOKENS */ - --content-gap-tight: var(--space-2); /* 8px - Tight content */ - --content-gap-normal: var(--space-4); /* 16px - Normal content */ - --content-gap-relaxed: var(--space-6); /* 24px - Relaxed content */ - --content-gap-loose: var(--space-8); /* 32px - Loose content */ - - /* ✨ COMPONENT SPACING TOKENS */ - --component-padding-sm: var(--space-3); /* 12px - Small components */ - --component-padding-md: var(--space-4); /* 16px - Medium components */ - --component-padding-lg: var(--space-6); /* 24px - Large components */ - --component-padding-xl: var(--space-8); /* 32px - Extra large components */ - - /* ✨ BORDER RADIUS SCALE */ - --radius-none: 0; - --radius-sm: 0.125rem; /* 2px */ - --radius-base: 0.25rem; /* 4px */ - --radius-md: 0.375rem; /* 6px */ - --radius-lg: 0.5rem; /* 8px */ - --radius-xl: 0.75rem; /* 12px */ - --radius-2xl: 1rem; /* 16px */ - --radius-3xl: 1.5rem; /* 24px */ - --radius-full: 9999px; /* Full radius */ - /* ✨ SEMANTIC BORDER RADIUS TOKENS */ - --radius-button: var(--radius-md); /* Button border radius */ - --radius-card: var(--radius-lg); /* Card border radius */ - --radius-modal: var(--radius-xl); /* Modal border radius */ - --radius-input: var(--radius-base); /* Input border radius */ +@import "tailwindcss"; - /* ✨ Z-INDEX SCALE */ - --z-behind: -1; - --z-base: 0; - --z-low: 10; - --z-medium: 100; - --z-high: 1000; - --z-overlay: 10000; - --z-modal: 100000; - --z-popover: 1000000; - --z-tooltip: 10000000; - --z-top: 999999999; +/* Reset and base styles */ +@layer base { + /* Basic reset */ + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } - /* ✨ SEMANTIC Z-INDEX TOKENS */ - --z-dropdown: var(--z-overlay); - --z-sticky-header: var(--z-high); - --z-sidebar: var(--z-medium); - --z-loading-overlay: var(--z-modal); - --z-toast: var(--z-overlay); + /* Typography foundation */ + html { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + line-height: 1.6; + color: rgb(15 23 42); /* slate-900 */ + } - /* ✨ MAX WIDTH SCALE */ - --max-width-xs: 20rem; /* 320px */ - --max-width-sm: 24rem; /* 384px */ - --max-width-md: 28rem; /* 448px */ - --max-width-lg: 32rem; /* 512px */ - --max-width-xl: 36rem; /* 576px */ - --max-width-2xl: 42rem; /* 672px */ - --max-width-3xl: 48rem; /* 768px */ - --max-width-4xl: 56rem; /* 896px */ - --max-width-5xl: 64rem; /* 1024px */ - --max-width-6xl: 72rem; /* 1152px */ - --max-width-7xl: 80rem; /* 1280px */ - --max-width-full: 100%; - --max-width-prose: 65ch; /* Optimal reading width */ - --max-width-screen-sm: 640px; - --max-width-screen-md: 768px; - --max-width-screen-lg: 1024px; - --max-width-screen-xl: 1280px; - --max-width-screen-2xl: 1536px; + body { + background-color: rgb(255 255 255); /* white */ + min-height: 100vh; + } - /* ✨ SEMANTIC MAX WIDTH TOKENS */ - --max-width-content: var(--max-width-4xl); /* Main content area */ - --max-width-sidebar: var(--max-width-xs); /* Sidebar width */ - --max-width-modal: var(--max-width-2xl); /* Modal dialogs */ - --max-width-form: var(--max-width-lg); /* Form containers */ + /* Dark mode base */ + @media (prefers-color-scheme: dark) { + html { + color: rgb(248 250 252); /* slate-50 */ + } + + body { + background-color: rgb(15 23 42); /* slate-900 */ + } + } - /* ✨ LAYOUT SHELL TOKENS (moved from input.css) */ - --left-rail-width: 18rem; /* xl left rail */ - --right-rail-width: 22rem; /* xl right rail */ - --layout-gap-xl: var(--space-8);/* xl gap */ - --left-rail-width-2xl: 20rem; /* 2xl left rail */ - --right-rail-width-2xl: 28rem; /* 2xl right rail */ - --layout-gap-2xl: var(--space-16); /* 2xl gap */ + /* Basic content styling */ + h1, h2, h3, h4, h5, h6 { + font-weight: 600; + line-height: 1.25; + margin-bottom: 0.5rem; + } - /* ✨ GRID/TILE TOKENS (moved from input.css) */ - --grid-card-min: 280px; /* minimum card width for auto-fit grids */ - --tile-glass-blur: 12px; /* tile glass blur amount */ - --tile-glass-saturate: 140%; /* tile glass saturation */ + h1 { font-size: 2rem; } + h2 { font-size: 1.5rem; } + h3 { font-size: 1.25rem; } + h4 { font-size: 1.125rem; } - /* ✨ GLASSMORPHISM TOKENS (unified) */ - --glass-blur: 8px; - --glass-saturate: 1.15; - --glass-bg: rgba(255, 255, 255, 0.45); - --glass-border-color: rgba(255, 255, 255, 0.22); - --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); -} -/* Dark mode glass adjustments */ -.dark { - --glass-bg: rgba(17, 17, 17, 0.5); - --glass-border-color: rgba(255, 255, 255, 0.10); - --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); -} -/* Right-rail presence attribute hook */ -main.layout-shell[data-has-right-rail="false"] { - /* Slightly increase center column breathing room when right rail is hidden */ - --layout-gap-xl: var(--space-8); - --layout-gap-2xl: var(--space-12); - --max-width-content: var(--max-width-5xl); -} -/* Density presets - Apply by adding a class on or
, or via future param-driven mapping */ -.layout-density--compact { - --grid-card-min: 320px; /* wider cards to reduce row count */ - --layout-gap-xl: var(--space-6); /* slightly tighter gap */ - --layout-gap-2xl: var(--space-10); -} -.layout-density--comfortable { - --grid-card-min: 280px; - --layout-gap-xl: var(--space-8); - --layout-gap-2xl: var(--space-16); -} -/* ✅ SPACING UTILITY CLASSES - * =========================== - * Consistent spacing patterns for common use cases - */ -/* Margin utilities */ -.m-auto { margin: auto; } -.mx-auto { margin-left: auto; margin-right: auto; } -.my-auto { margin-top: auto; margin-bottom: auto; } -/* Padding utilities */ -.p-0 { padding: var(--space-0); } -.p-1 { padding: var(--space-1); } -.p-2 { padding: var(--space-2); } -.p-3 { padding: var(--space-3); } -.p-4 { padding: var(--space-4); } -.p-6 { padding: var(--space-6); } -.p-8 { padding: var(--space-8); } -/* Semantic spacing classes */ -.gap-tight { gap: var(--content-gap-tight); } -.gap-normal { gap: var(--content-gap-normal); } -.gap-relaxed { gap: var(--content-gap-relaxed); } -.gap-loose { gap: var(--content-gap-loose); } -/* Component padding classes */ -.padding-sm { padding: var(--component-padding-sm); } -.padding-md { padding: var(--component-padding-md); } -.padding-lg { padding: var(--component-padding-lg); } -.padding-xl { padding: var(--component-padding-xl); } -/* ✅ LAYOUT PATTERN CLASSES - * ========================== - * Common layout patterns as reusable classes - */ -/* Container patterns */ -.container { - width: 100%; - max-width: var(--max-width-content); - margin-left: auto; - margin-right: auto; - padding-left: var(--space-4); - padding-right: var(--space-4); -} -.container-narrow { - max-width: var(--max-width-2xl); -} -.container-wide { - max-width: var(--max-width-6xl); -} -.container-full { - max-width: none; - padding-left: 0; - padding-right: 0; -} -/* Content sections */ -.section { - padding-top: var(--space-12); - padding-bottom: var(--space-12); -} -.section-sm { - padding-top: var(--space-8); - padding-bottom: var(--space-8); -} -.section-lg { - padding-top: var(--space-16); - padding-bottom: var(--space-16); -} -/* Stack layouts (vertical spacing) */ -.stack > * + * { - margin-top: var(--content-gap-normal); -} -.stack-tight > * + * { - margin-top: var(--content-gap-tight); -} -.stack-relaxed > * + * { - margin-top: var(--content-gap-relaxed); -} -.stack-loose > * + * { - margin-top: var(--content-gap-loose); -} -/* Cluster layouts (horizontal spacing) */ -.cluster { - display: flex; - flex-wrap: wrap; - gap: var(--content-gap-normal); - align-items: center; -} -.cluster-tight { - gap: var(--content-gap-tight); -} -.cluster-relaxed { - gap: var(--content-gap-relaxed); -} -/* Grid patterns */ -.grid-auto { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: var(--content-gap-normal); -} -.grid-auto-sm { - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); -} -.grid-auto-lg { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); -} -/* Flexbox patterns */ -.flex-between { - display: flex; - justify-content: space-between; - align-items: center; -} -.flex-center { - display: flex; - justify-content: center; - align-items: center; -} -.flex-start { - display: flex; - justify-content: flex-start; - align-items: center; -} -.flex-end { - display: flex; - justify-content: flex-end; - align-items: center; -} -/* ✅ POSITIONING UTILITIES - * ========================= - * Common positioning patterns - */ -.relative { position: relative; } -.absolute { position: absolute; } -.fixed { position: fixed; } -.sticky { position: sticky; } -/* Absolute positioning helpers */ -.absolute-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -.absolute-top-left { - position: absolute; - top: var(--space-2); - left: var(--space-2); -} -.absolute-top-right { - position: absolute; - top: var(--space-2); - right: var(--space-2); -} -.absolute-bottom-left { - position: absolute; - bottom: var(--space-2); - left: var(--space-2); -} -.absolute-bottom-right { - position: absolute; - bottom: var(--space-2); - right: var(--space-2); -} -/* Z-index utilities */ -.z-behind { z-index: var(--z-behind); } -.z-base { z-index: var(--z-base); } -.z-low { z-index: var(--z-low); } -.z-medium { z-index: var(--z-medium); } -.z-high { z-index: var(--z-high); } -.z-overlay { z-index: var(--z-overlay); } -.z-modal { z-index: var(--z-modal); } -.z-top { z-index: var(--z-top); } -/* ✅ BORDER RADIUS UTILITIES - * =========================== - * Consistent border radius patterns - */ -.rounded-none { border-radius: var(--radius-none); } -.rounded-sm { border-radius: var(--radius-sm); } -.rounded { border-radius: var(--radius-base); } -.rounded-md { border-radius: var(--radius-md); } -.rounded-lg { border-radius: var(--radius-lg); } -.rounded-xl { border-radius: var(--radius-xl); } -.rounded-2xl { border-radius: var(--radius-2xl); } -.rounded-3xl { border-radius: var(--radius-3xl); } -.rounded-full { border-radius: var(--radius-full); } -/* Semantic border radius */ -.rounded-button { border-radius: var(--radius-button); } -.rounded-card { border-radius: var(--radius-card); } -.rounded-modal { border-radius: var(--radius-modal); } -.rounded-input { border-radius: var(--radius-input); } -/* ✅ MAX WIDTH UTILITIES - * ======================= - * Consistent content width constraints - */ -.max-w-xs { max-width: var(--max-width-xs); } -.max-w-sm { max-width: var(--max-width-sm); } -.max-w-md { max-width: var(--max-width-md); } -.max-w-lg { max-width: var(--max-width-lg); } -.max-w-xl { max-width: var(--max-width-xl); } -.max-w-2xl { max-width: var(--max-width-2xl); } -.max-w-3xl { max-width: var(--max-width-3xl); } -.max-w-4xl { max-width: var(--max-width-4xl); } -.max-w-5xl { max-width: var(--max-width-5xl); } -.max-w-6xl { max-width: var(--max-width-6xl); } -.max-w-7xl { max-width: var(--max-width-7xl); } -.max-w-full { max-width: var(--max-width-full); } -.max-w-prose { max-width: var(--max-width-prose); } -/* Semantic max width */ -.max-w-content { max-width: var(--max-width-content); } -.max-w-sidebar { max-width: var(--max-width-sidebar); } -.max-w-modal { max-width: var(--max-width-modal); } -.max-w-form { max-width: var(--max-width-form); } -/* ✅ RESPONSIVE PATTERNS - * ======================= - * Mobile-first responsive design patterns - */ -@media (min-width: 640px) { - .sm\:container { - max-width: var(--max-width-screen-sm); - } - - .sm\:section { - padding-top: var(--space-16); - padding-bottom: var(--space-16); - } - - .sm\:padding-lg { - padding: var(--component-padding-lg); - } -} -@media (min-width: 768px) { - .md\:container { - max-width: var(--max-width-screen-md); - } - - .md\:section { - padding-top: var(--space-20); - padding-bottom: var(--space-20); - } - - .md\:padding-xl { - padding: var(--component-padding-xl); - } - - .md\:grid-2 { - grid-template-columns: repeat(2, 1fr); + p { + margin-bottom: 1rem; } -} -@media (min-width: 1024px) { - .lg\:container { - max-width: var(--max-width-screen-lg); + + a { + color: rgb(59 130 246); /* blue-500 */ + text-decoration: none; } - - .lg\:section { - padding-top: var(--space-24); - padding-bottom: var(--space-24); + + a:hover { + text-decoration: underline; } - - .lg\:grid-3 { - grid-template-columns: repeat(3, 1fr); + + /* Dark mode links */ + @media (prefers-color-scheme: dark) { + a { + color: rgb(96 165 250); /* blue-400 */ + } } } -@media (min-width: 1280px) { - .xl\:container { - max-width: var(--max-width-screen-xl); - } - - .xl\:grid-4 { - grid-template-columns: repeat(4, 1fr); + +/* Component layer - semantic classes */ +@layer components { + /* Layout containers */ + .layout-container { + @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; } -} -@media (min-width: 1536px) { - .\32xl\:container { - max-width: var(--max-width-screen-2xl); + + .content-container { + @apply max-w-4xl mx-auto; } -} -/* ✅ CONTENT FLOW PATTERNS - * ========================= - * Typography and content spacing patterns - */ -/* Prose content */ -.prose { - max-width: var(--max-width-prose); - line-height: 1.7; -} -.prose > * + * { - margin-top: var(--space-4); -} -.prose h1, -.prose h2, -.prose h3, -.prose h4, -.prose h5, -.prose h6 { - margin-top: var(--space-8); - margin-bottom: var(--space-4); -} -.prose h1:first-child, -.prose h2:first-child, -.prose h3:first-child, -.prose h4:first-child, -.prose h5:first-child, -.prose h6:first-child { - margin-top: 0; -} -.prose p + h1, -.prose p + h2, -.prose p + h3 { - margin-top: var(--space-12); -} -.prose p + h4, -.prose p + h5, -.prose p + h6 { - margin-top: var(--space-8); -} -/* List spacing */ -.prose ul, -.prose ol { - padding-left: var(--space-6); -} -.prose li + li { - margin-top: var(--space-2); -} -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Spacing and layout for accessibility - */ -/* Focus spacing */ -.focus-spacing:focus-visible { - outline-offset: var(--space-1); -} -/* Touch target sizing */ -.touch-target { - min-height: 44px; - min-width: 44px; - padding: var(--space-2); -} -/* Screen reader spacing */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} -/* ✅ PRINT OPTIMIZATIONS - * ======================= - * Layout adjustments for print media - */ -@media print { - .section { - padding-top: var(--space-6); - padding-bottom: var(--space-6); + + /* Basic button component */ + .btn { + @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm; + @apply bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; } - - .container { - padding-left: 0; - padding-right: 0; + + /* Navigation component */ + .nav-link { + @apply block px-3 py-2 rounded-md text-sm font-medium; + @apply text-slate-700 hover:text-slate-900 hover:bg-slate-100; } - - .stack > * + * { - margin-top: var(--space-3); + + @media (prefers-color-scheme: dark) { + .nav-link { + @apply text-slate-300 hover:text-slate-100 hover:bg-slate-800; + } } -} -/* ✅ STEP 3.5: TYPOGRAPHY SYSTEM - * =============================== - * Global type rules and article typography. - */ -/* Typography System - Base type scales and article text - Centralizes type sizing tokens and base rules. */ -/* Global Headings */ -h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* 24px–28px */ - line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; -} -h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); /* 20px–22px */ - line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; -} -h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* 17px–19px */ - line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; -} -h4 { letter-spacing: -0.01em; } -/* Body */ -body { - font-size: clamp(1rem, 2vw, 1.0625rem); /* 16px–17px */ - line-height: 1.6; - letter-spacing: 0.01em; -} -/* Brand font on main */ -main { font-family: var(--font-family-brand, inherit); } -/* Article Content Typography */ -.article-content { - color: var(--color-text-primary); - font-size: 1rem; /* mobile-first */ - line-height: 1.65; /* mobile-first */ - letter-spacing: 0.01em; -} -@media (min-width: 768px) { + + /* Article content */ .article-content { - font-size: 1.0625rem; /* 17px */ - line-height: 1.6; + @apply prose prose-slate max-w-none; } -} -/* ✅ STEP 4: ELEVATION SYSTEM - * ============================ - * Independent shadow system. Provides elevation tokens that interaction - * patterns will reference. - */ -/* 🎯 Universal Elevation System - * ============================== - * - * This file centralizes all box-shadow patterns to create a consistent - * elevation system across the theme. Based on Material Design principles - * but adapted for our brand aesthetic. - */ -:root { - /* ✨ ELEVATION LEVELS (0-24dp equivalent) */ - --elevation-0: none; - /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.1); */ - --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06); - /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1); */ - --elevation-2: 0 1px 3px rgba(0, 0, 0, 0.08); - /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.1); */ - --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.08); - /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.1); */ - --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.1); - /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.1); */ - --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.12); - /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.1); */ - --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.12); - /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.1); */ - --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.14); - /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.1); */ - --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.14); - /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.15); */ - --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.16); - - /* ✨ INTERACTIVE ELEVATION (hover states) */ - /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.15); */ - --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.12); - /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.15); */ - --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.14); - /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.15); */ - --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.14); - /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.15); */ - --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.16); - /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.15); */ - --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.18); - /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.2); */ - --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.2); - - /* ✨ BRAND-COLORED ELEVATIONS */ - --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); - --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.2); - --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); - - /* ✨ SPECIALIZED ELEVATIONS */ - --elevation-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1); - --elevation-inset-deep: inset 0 2px 6px rgba(0, 0, 0, 0.15); - --elevation-outline: 0 0 0 1px rgba(0, 0, 0, 0.1); - --elevation-outline-brand: 0 0 0 1px var(--color-brand); - - /* ✨ ERROR/WARNING/SUCCESS ELEVATIONS */ - --elevation-error: 0 4px 12px rgba(239, 68, 68, 0.2); - --elevation-warning: 0 4px 12px rgba(245, 158, 11, 0.2); - --elevation-success: 0 4px 12px rgba(16, 185, 129, 0.2); - --elevation-info: 0 4px 12px rgba(59, 130, 246, 0.2); - - /* ✨ OVERLAYS AND MODALS */ - --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.3); - --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.4); - --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15); - --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.2); -} -/* 🌙 DARK MODE ELEVATION ADJUSTMENTS */ -.dark { - /* Stronger shadows for dark mode */ - /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); */ - --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.25); - /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); */ - --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.28); - /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.4); */ - --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.34); - /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); */ - --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.36); - /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); */ - --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.4); - /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.5); */ - --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.48); - /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.5); */ - --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.5); - /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.6); */ - --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.56); - /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.7); */ - --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.6); - - /* Enhanced hover states for dark mode */ - /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.5); */ - --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.44); - /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.5); */ - --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.48); - /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.6); */ - --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.5); - /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.6); */ - --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.54); - /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.7); */ - --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.58); - /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.8); */ - --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.62); - - /* Enhanced brand elevations for dark mode */ - --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.2); - --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.25); - --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); - --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); - - /* Enhanced overlay elevations for dark mode */ - --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.8); - --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.9); - --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6); - --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.7); -} -/* ✅ ELEVATION UTILITY CLASSES - * ============================= - * Apply these classes for consistent elevation - */ -.elevation-0 { box-shadow: var(--elevation-0); } -.elevation-1 { box-shadow: var(--elevation-1); } -.elevation-2 { box-shadow: var(--elevation-2); } -.elevation-3 { box-shadow: var(--elevation-3); } -.elevation-4 { box-shadow: var(--elevation-4); } -.elevation-6 { box-shadow: var(--elevation-6); } -.elevation-8 { box-shadow: var(--elevation-8); } -.elevation-12 { box-shadow: var(--elevation-12); } -.elevation-16 { box-shadow: var(--elevation-16); } -.elevation-24 { box-shadow: var(--elevation-24); } -/* Hover elevation classes */ -.elevation-hover-1:hover { box-shadow: var(--elevation-hover-1); } -.elevation-hover-2:hover { box-shadow: var(--elevation-hover-2); } -.elevation-hover-3:hover { box-shadow: var(--elevation-hover-3); } -.elevation-hover-4:hover { box-shadow: var(--elevation-hover-4); } -.elevation-hover-6:hover { box-shadow: var(--elevation-hover-6); } -.elevation-hover-8:hover { box-shadow: var(--elevation-hover-8); } -/* Brand elevation classes */ -.elevation-brand-subtle { box-shadow: var(--elevation-brand-subtle); } -.elevation-brand-medium { box-shadow: var(--elevation-brand-medium); } -.elevation-brand-strong { box-shadow: var(--elevation-brand-strong); } -.elevation-brand-glow { box-shadow: var(--elevation-brand-glow); } -/* Focus elevation */ -.elevation-focus:focus-visible { - box-shadow: var(--elevation-brand-focus); - outline: none; -} -/* ✅ COMPONENT-SPECIFIC ELEVATION MAPPINGS - * ========================================= - * Semantic elevation assignments for common components - */ -/* Surface elements */ -.surface { - box-shadow: var(--elevation-0); -} -.surface-raised { - box-shadow: var(--elevation-1); -} -/* Cards */ -.card-flat { - box-shadow: var(--elevation-1); -} -.card-raised { - box-shadow: var(--elevation-2); -} -.card-elevated { - box-shadow: var(--elevation-4); -} -.card-floating { - box-shadow: var(--elevation-8); -} -/* Interactive cards with hover */ -.card-interactive { - box-shadow: var(--elevation-2); - transition: box-shadow var(--timing-medium) var(--easing-standard); -} -.card-interactive:hover { - box-shadow: var(--elevation-hover-4); -} -/* Buttons */ -.btn-flat { - box-shadow: var(--elevation-0); -} -.btn-raised { - box-shadow: var(--elevation-1); -} -.btn-floating { - box-shadow: var(--elevation-6); -} -.btn-raised:hover, -.btn-floating:hover { - box-shadow: var(--elevation-hover-2); -} -/* Navigation */ -.nav-bar { - box-shadow: var(--elevation-2); -} -.nav-drawer { - box-shadow: var(--elevation-16); -} -.nav-tabs { - box-shadow: var(--elevation-1); -} -/* Overlays */ -.dropdown-menu { - box-shadow: var(--elevation-dropdown); -} -.modal-content { - box-shadow: var(--elevation-modal); -} -.tooltip { - box-shadow: var(--elevation-tooltip); -} -.popover { - box-shadow: var(--elevation-8); -} -/* Content sections */ -.content-section { - box-shadow: var(--elevation-1); -} -.featured-content { - box-shadow: var(--elevation-4); -} -.hero-section { - box-shadow: var(--elevation-8); -} -/* ✅ STATE-BASED ELEVATIONS - * ========================== - * Elevation changes based on component state - */ -/* Loading states get reduced elevation */ -[data-component-state="loading"] { - box-shadow: var(--elevation-1) !important; - opacity: var(--opacity-faded); -} -/* Error states get error elevation */ -[data-component-state="error"] { - box-shadow: var(--elevation-error) !important; -} -/* Focus states for accessibility */ -[data-component-state="focused"] { - box-shadow: var(--elevation-brand-focus) !important; -} -/* ✅ COMBINED ELEVATIONS - * ======================= - * Multiple shadows for complex effects - */ -.elevation-layered { - box-shadow: - var(--elevation-2), - var(--elevation-brand-glow); -} -.elevation-outlined { - box-shadow: - var(--elevation-4), - var(--elevation-outline); -} -.elevation-brand-outlined { - box-shadow: - var(--elevation-4), - var(--elevation-outline-brand); -} -/* ✅ PERFORMANCE OPTIMIZATIONS - * ============================= - * Enable hardware acceleration for elements with elevation changes - */ -.elevation-animated { - will-change: box-shadow; - transform: translateZ(0); /* Force hardware acceleration */ -} -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * High contrast and reduced motion support - */ -@media (prefers-contrast: high) { - /* Enhance shadows for better visibility */ - :root { - --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); - --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); - --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); - --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); + + @media (prefers-color-scheme: dark) { + .article-content { + @apply prose-invert; + } } } -@media (prefers-reduced-motion: reduce) { - /* Remove shadow transitions for reduced motion */ - .card-interactive, - .btn-raised, - .btn-floating, - .elevation-animated { - transition: none !important; + +/* Utility layer - custom utilities */ +@layer utilities { + .text-balance { + text-wrap: balance; } -} -/* ✅ PRINT STYLES - * ================ - * Remove shadows for print media - */ -@media print { - * { - box-shadow: none !important; - } -} -/* ✅ STEP 5: INTERACTION PATTERNS - * ================================ - * Depends on animation tokens and elevation tokens. Provides unified - * hover, focus, and active state patterns. - */ -/* 🎯 Universal Interaction Patterns System - * ======================================== - * - * This file centralizes all hover, focus, active, and interactive patterns - * to eliminate the hundreds of scattered transform/transition definitions - * across component files. - */ -:root { - /* ✨ INTERACTION TRANSFORM TOKENS */ - --hover-lift-subtle: translateY(-1px); /* Buttons, small elements */ - --hover-lift-medium: translateY(-2px); /* Cards, medium elements */ - --hover-lift-dramatic: translateY(-4px); /* Hero cards, dramatic elements */ - --hover-scale-up: scale(1.02); /* Slight growth on hover */ - --hover-scale-down: scale(0.98); /* Slight shrink on active */ - --hover-combined-lift: translateY(-2px) scale(1.02); /* Combined lift + scale */ - - /* ✨ SHADOW ELEVATION TOKENS */ - --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.1); - --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.1); - --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.15); - --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.12); - --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); - --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); - - /* ✨ TRANSITION SETS - Reusable combinations */ - --transition-interactive: - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - - --transition-elevation: - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - - --transition-button: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} -/* ✅ INTERACTION BEHAVIOR CLASSES - * ================================ - * Apply these classes for consistent interactive behavior - */ -/* Subtle interactive elements (buttons, small cards) */ -.interact-subtle { - transition: var(--transition-interactive); - cursor: pointer; -} -.interact-subtle:hover { - transform: var(--hover-lift-subtle); - box-shadow: var(--shadow-hover-subtle); -} -.interact-subtle:active { - transform: var(--hover-scale-down); - transition-duration: var(--timing-instant); -} -/* Medium interactive elements (content cards, tiles) */ -.interact-medium { - transition: var(--transition-elevation); - cursor: pointer; -} -.interact-medium:hover { - transform: var(--hover-lift-medium); - box-shadow: var(--shadow-hover-medium); -} -.interact-medium:active { - transform: var(--hover-scale-down); - transition-duration: var(--timing-instant); -} -/* Dramatic interactive elements (hero cards, featured content) */ -.interact-dramatic { - transition: var(--transition-elevation); - cursor: pointer; -} -.interact-dramatic:hover { - transform: var(--hover-lift-dramatic); - box-shadow: var(--shadow-hover-dramatic); - border-color: var(--color-brand); -} -.interact-dramatic:active { - transform: var(--hover-combined-lift); - transition-duration: var(--timing-instant); -} -/* ✅ BUTTON INTERACTION PATTERNS - * =============================== - * Specialized patterns for button-like elements - */ -.btn-interact { - transition: var(--transition-button); - position: relative; - overflow: hidden; -} -.btn-interact:hover { - transform: var(--hover-lift-subtle); - box-shadow: var(--shadow-hover-medium); -} -.btn-interact:active { - transform: var(--hover-scale-down); - transition-duration: var(--timing-instant); -} -.btn-interact:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: var(--shadow-focus); -} -/* ✅ BRAND-FOCUSED INTERACTIONS - * ============================== - * Elements that should emphasize brand colors - */ -.interact-brand { - transition: var(--transition-elevation); - cursor: pointer; -} -.interact-brand:hover { - transform: var(--hover-lift-medium); - box-shadow: - var(--shadow-hover-medium), - var(--shadow-brand-glow); - border-color: var(--color-brand); -} -.interact-brand:hover h1, -.interact-brand:hover h2, -.interact-brand:hover h3, -.interact-brand:hover h4, -.interact-brand:hover h5, -.interact-brand:hover h6 { - color: var(--color-brand); - transition: color var(--timing-fast) var(--easing-standard); -} -/* ✅ FOCUS MANAGEMENT - * ==================== - * Consistent focus indicators across all interactive elements - */ -.focusable { - border-radius: 0.25rem; /* Ensure focus outline has proper shape */ -} -.focusable:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: var(--shadow-focus); - transition: - outline-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} -/* ✅ DISABLED STATES - * =================== - * Consistent disabled behavior - */ -.interact-disabled, -[data-interactive="false"], -.interact-subtle:disabled, -.interact-medium:disabled, -.interact-dramatic:disabled { - opacity: var(--opacity-faded); - cursor: not-allowed; - pointer-events: none; - filter: grayscale(50%); - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} -/* ✅ LOADING STATES - * ================== - * Interactive elements in loading state - */ -.interact-loading { - opacity: var(--loading-opacity); - cursor: wait; - pointer-events: none; - filter: var(--loading-blur); - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} -/* ✅ NESTED INTERACTION INHERITANCE - * ================================== - * Child elements inherit parent interaction states - */ -.interact-subtle:hover .nested-text, -.interact-medium:hover .nested-text, -.interact-dramatic:hover .nested-text { - color: var(--color-brand); - transition: color var(--timing-fast) var(--easing-standard); -} -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Enhanced interaction patterns for accessibility - */ -/* High contrast mode support */ -@media (prefers-contrast: high) { - .focusable:focus-visible { - outline-width: 3px; - outline-style: solid; - } - - .interact-subtle:hover, - .interact-medium:hover, - .interact-dramatic:hover { - border-width: 2px; - border-style: solid; - border-color: var(--color-brand); - } -} -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .interact-subtle, - .interact-medium, - .interact-dramatic, - .btn-interact, - .interact-brand { - transition: none !important; - transform: none !important; - } - - .interact-subtle:hover, - .interact-medium:hover, - .interact-dramatic:hover, - .btn-interact:hover, - .interact-brand:hover { - transform: none !important; - } -} -/* ✅ TOUCH DEVICE OPTIMIZATIONS - * ============================== - * Better interactions for touch devices - */ -@media (hover: none) and (pointer: coarse) { - /* Reduce hover effects on touch devices */ - .interact-subtle:hover, - .interact-medium:hover, - .interact-dramatic:hover { - transform: none; - box-shadow: var(--shadow-rest); - } - - /* Enhance active states for touch feedback */ - .interact-subtle:active, - .interact-medium:active, - .interact-dramatic:active { - transform: var(--hover-scale-down); - opacity: 0.8; - } -} -/* ✅ DARK MODE ENHANCEMENTS - * ========================== - * Enhanced shadows and interactions for dark mode - */ -.dark { - --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.3); - --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.3); - --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.4); - --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.5); - --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); - --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); -} -/* ✅ COMPONENT-SPECIFIC OVERRIDES - * ================================ - * Allow components to customize interaction patterns - */ -/* Cards and tiles can use larger transforms */ -.card, -.tile { - /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ -} -/* Buttons get subtle interactions by default */ -.btn { - /* Use .btn-interact class instead of custom transforms */ -} -/* Navigation items get subtle interactions */ -.nav-item, -.sidebar__item { - /* Use .interact-subtle class instead of custom transforms */ -} -/* ✅ STEP 6: LOADING STATES - * ========================== - * Depends on animation tokens and layout tokens. Provides loading patterns - * and skeleton components. - */ -/* 🎯 Universal Loading States System - * =================================== - * - * This file centralizes all loading patterns, skeletons, and async state - * management to ensure consistent loading experiences across components. - */ -:root { - /* ✨ LOADING TIMING TOKENS */ - --loading-duration-fast: 1s; - --loading-duration-normal: 1.5s; - --loading-duration-slow: 2s; - --loading-pulse-duration: 2s; - --loading-shimmer-duration: 1.5s; - - /* ✨ LOADING VISUAL TOKENS */ - --loading-opacity: 0.6; - --loading-blur: blur(1px); - --loading-grayscale: grayscale(30%); - --loading-backdrop: rgba(255, 255, 255, 0.8); - --loading-spinner-size: 2rem; - --loading-spinner-border: 2px; - - /* ✨ SKELETON TOKENS */ - --skeleton-bg-base: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.1); - --skeleton-bg-shimmer: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.2); - --skeleton-border-radius: 0.25rem; - --skeleton-height-text: 1rem; - --skeleton-height-title: 1.5rem; - --skeleton-height-button: 2.5rem; - --skeleton-height-avatar: 3rem; - - /* ✨ SHIMMER GRADIENT */ - --shimmer-gradient: linear-gradient( - 90deg, - var(--skeleton-bg-base) 25%, - var(--skeleton-bg-shimmer) 50%, - var(--skeleton-bg-base) 75% - ); - - /* ✨ PULSE GRADIENT */ - --pulse-gradient: linear-gradient( - 45deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.3) 50%, - rgba(var(--color-brand-rgb), 0.1) 100% - ); -} -/* 🌙 DARK MODE LOADING ADJUSTMENTS */ -.dark { - --loading-backdrop: rgba(0, 0, 0, 0.8); - --skeleton-bg-base: rgba(255, 255, 255, 0.1); - --skeleton-bg-shimmer: rgba(255, 255, 255, 0.2); - - --shimmer-gradient: linear-gradient( - 90deg, - var(--skeleton-bg-base) 25%, - var(--skeleton-bg-shimmer) 50%, - var(--skeleton-bg-base) 75% - ); -} -/* ✅ LOADING STATE CLASSES - * ========================= - * Apply these classes to show loading states - */ -/* Basic loading state */ -.loading { - opacity: var(--loading-opacity); - pointer-events: none; - cursor: wait; - transition: opacity var(--timing-fast) var(--easing-standard); -} -/* Loading with blur effect */ -.loading-blur { - opacity: var(--loading-opacity); - filter: var(--loading-blur); - pointer-events: none; - cursor: wait; - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} -/* Loading with grayscale effect */ -.loading-muted { - opacity: var(--loading-opacity); - filter: var(--loading-grayscale); - pointer-events: none; - cursor: wait; - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} -/* Loading overlay */ -.loading-overlay { - position: relative; -} -.loading-overlay::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--loading-backdrop); - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); - z-index: var(--z-overlay); - opacity: 0; - pointer-events: none; - transition: opacity var(--timing-medium) var(--easing-standard); -} -.loading-overlay.is-loading::before { - opacity: 1; - pointer-events: auto; -} -/* ✅ SPINNER COMPONENTS - * ====================== - * Various spinner patterns - */ -/* Basic spinner */ -.spinner { - width: var(--loading-spinner-size); - height: var(--loading-spinner-size); - border: var(--loading-spinner-border) solid rgba(var(--color-brand-rgb), 0.2); - border-top: var(--loading-spinner-border) solid var(--color-brand); - border-radius: 50%; - animation: spin var(--loading-duration-fast) linear infinite; - display: inline-block; -} -.spinner-sm { - --loading-spinner-size: 1rem; - --loading-spinner-border: 1px; -} -.spinner-lg { - --loading-spinner-size: 3rem; - --loading-spinner-border: 3px; -} -/* Dots spinner */ -.spinner-dots { - display: inline-flex; - gap: 0.25rem; -} -.spinner-dots::before, -.spinner-dots::after { - content: ''; - width: 0.5rem; - height: 0.5rem; - background: var(--color-brand); - border-radius: 50%; - animation: pulse var(--loading-pulse-duration) ease-in-out infinite; -} -.spinner-dots::before { - animation-delay: 0s; -} -.spinner-dots::after { - animation-delay: 0.5s; -} -/* Pulse spinner */ -.spinner-pulse { - width: var(--loading-spinner-size); - height: var(--loading-spinner-size); - background: var(--color-brand); - border-radius: 50%; - animation: pulse var(--loading-pulse-duration) ease-in-out infinite; -} -/* ✅ SKELETON COMPONENTS - * ======================= - * Skeleton loading patterns for different content types - */ -/* Base skeleton */ -.skeleton { - background: var(--skeleton-bg-base); - border-radius: var(--skeleton-border-radius); - position: relative; - overflow: hidden; -} -.skeleton::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--shimmer-gradient); - animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; -} -/* Skeleton variations */ -.skeleton-text { - height: var(--skeleton-height-text); - width: 100%; -} -.skeleton-text-short { - width: 75%; -} -.skeleton-text-long { - width: 90%; -} -.skeleton-title { - height: var(--skeleton-height-title); - width: 60%; - margin-bottom: var(--space-2); -} -.skeleton-button { - height: var(--skeleton-height-button); - width: 120px; - border-radius: var(--radius-button); -} -.skeleton-avatar { - width: var(--skeleton-height-avatar); - height: var(--skeleton-height-avatar); - border-radius: 50%; -} -.skeleton-card { - height: 200px; - border-radius: var(--radius-card); -} -.skeleton-image { - height: 150px; - width: 100%; - border-radius: var(--radius-base); -} -/* ✅ SKELETON LAYOUTS - * ==================== - * Complete skeleton layouts for common components - */ -/* Article skeleton */ -.skeleton-article { - padding: var(--space-6); -} -.skeleton-article .skeleton-title { - margin-bottom: var(--space-4); -} -.skeleton-article .skeleton-text { - margin-bottom: var(--space-3); -} -.skeleton-article .skeleton-text:last-child { - width: 65%; - margin-bottom: 0; -} -/* Card skeleton */ -.skeleton-card-content { - padding: var(--space-4); -} -.skeleton-card-content .skeleton-image { - margin-bottom: var(--space-4); -} -.skeleton-card-content .skeleton-title { - margin-bottom: var(--space-3); -} -.skeleton-card-content .skeleton-text { - margin-bottom: var(--space-2); -} -/* List item skeleton */ -.skeleton-list-item { - display: flex; - align-items: center; - gap: var(--space-3); - padding: var(--space-3); -} -.skeleton-list-item .skeleton-avatar { - flex-shrink: 0; -} -.skeleton-list-item .skeleton-content { - flex: 1; -} -.skeleton-list-item .skeleton-text { - margin-bottom: var(--space-1); -} -.skeleton-list-item .skeleton-text:last-child { - width: 40%; - margin-bottom: 0; -} -/* ✅ PROGRESSIVE LOADING - * ======================= - * Progressive reveal patterns - */ -.progressive-load { - opacity: 0; - transform: var(--transform-slide-in-up); - transition: - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); -} -.progressive-load.loaded { - opacity: 1; - transform: var(--transform-translate-none); -} -/* Staggered progressive loading */ -.progressive-load-stagger > * { - opacity: 0; - transform: var(--transform-slide-in-up); - transition: - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - transition-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); -} -.progressive-load-stagger.loaded > * { - opacity: 1; - transform: var(--transform-translate-none); -} -/* ✅ ASYNC OPERATION STATES - * ========================== - * Loading states for different async operations - */ -/* Button loading states */ -.btn-loading { - position: relative; - color: transparent !important; - cursor: wait; - pointer-events: none; -} -.btn-loading::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 1rem; - height: 1rem; - border: 2px solid rgba(255, 255, 255, 0.3); - border-top: 2px solid currentColor; - border-radius: 50%; - animation: spin var(--loading-duration-fast) linear infinite; -} -/* Form loading states */ -.form-loading { - opacity: var(--loading-opacity); - pointer-events: none; -} -.form-loading input, -.form-loading textarea, -.form-loading select { - cursor: wait; - background-color: var(--color-surface-muted); -} -/* Content loading states */ -.content-loading { - min-height: 200px; - display: flex; - align-items: center; - justify-content: center; -} -/* ✅ ERROR AND RETRY STATES - * ========================== - * Loading error and retry patterns - */ -.loading-error { - padding: var(--space-6); - text-align: center; - color: var(--color-text-secondary); -} -.loading-error-icon { - width: 3rem; - height: 3rem; - margin: 0 auto var(--space-4); - opacity: 0.5; -} -.retry-button { - margin-top: var(--space-4); -} -/* ✅ KEYFRAME ANIMATIONS - * ======================= - * Loading-specific animations - */ -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -@keyframes pulse { - 0%, 100% { - opacity: 0.3; - transform: scale(1); - } - 50% { - opacity: 1; - transform: scale(1.1); - } -} -@keyframes shimmer { - 0% { - left: -100%; - } - 100% { - left: 100%; - } -} -@keyframes fade-pulse { - 0%, 100% { - opacity: 0.3; - } - 50% { - opacity: 0.7; - } -} -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Loading states for screen readers and reduced motion - */ -/* Screen reader announcements */ -.sr-loading-text { - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .spinner, - .spinner-pulse, - .skeleton::after { - animation: fade-pulse var(--loading-duration-slow) ease-in-out infinite; - } - - .progressive-load, - .progressive-load-stagger > * { - transition: opacity var(--timing-fast) ease; - transform: none !important; - } -} -/* High contrast mode */ -@media (prefers-contrast: high) { - .skeleton { - background: rgba(0, 0, 0, 0.2); - border: 1px solid rgba(0, 0, 0, 0.3); - } - - .dark .skeleton { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); - } -} -/* ✅ COMPONENT INTEGRATION - * ========================= - * Integration with existing component systems - */ -/* Loading states for data attributes */ -[data-loading="true"] { - opacity: var(--loading-opacity); - pointer-events: none; - cursor: wait; -} -[data-loading-type="skeleton"] { - background: var(--skeleton-bg-base); - border-radius: var(--skeleton-border-radius); - position: relative; - overflow: hidden; -} -[data-loading-type="skeleton"]::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--shimmer-gradient); - animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; -} -/* Loading states for component states */ -[data-component-state="loading"] { - opacity: var(--loading-opacity); - filter: var(--loading-blur); - pointer-events: none; - cursor: wait; -} -/* ✅ PERFORMANCE OPTIMIZATIONS - * ============================= - * Hardware acceleration for loading animations - */ -.spinner, -.skeleton::after, -.progressive-load { - will-change: transform, opacity; - transform: translateZ(0); /* Force hardware acceleration */ -} -/* ✅ UTILITY CLASSES - * =================== - * Quick loading state utilities - */ -.is-loading { opacity: var(--loading-opacity); pointer-events: none; } -.is-skeleton { background: var(--skeleton-bg-base); } -.has-shimmer { position: relative; overflow: hidden; } -.has-shimmer::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--shimmer-gradient); - animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; -} -/* 🎯 ARCHITECTURE SYSTEM SUMMARY - * =============================== - * - * This architecture system provides: - * - * 1. **Animation System** (animation-system.css) - * - Consistent timing tokens (--timing-*) - * - Easing curves (--easing-*) - * - Transform patterns (--transform-*) - * - Collapse/expand behaviors - * - Utility animation classes - * - * 2. **Component States** (component-states.css) - * - Data-attribute driven state management - * - Lifecycle states (loading, ready, disabled, error) - * - Collapse states (collapsed, transitioning, expanded) - * - Interactive states with accessibility support - * - * 3. **Layout Foundations** (layout-foundations.css) - * - Comprehensive spacing scale (--space-*) - * - Semantic spacing tokens (--space-xs, --space-md, etc.) - * - Border radius system (--radius-*) - * - Z-index scale (--z-*) - * - Max-width tokens (--max-width-*) - * - Layout pattern classes (.container, .stack, .cluster, etc.) - * - * 4. **Elevation System** (elevation-system.css) - * - Consistent shadow elevation levels (--elevation-*) - * - Interactive hover elevations (--elevation-hover-*) - * - Brand-colored elevations (--elevation-brand-*) - * - State-specific elevations (error, focus, etc.) - * - Semantic elevation classes (.card-elevated, .btn-floating, etc.) - * - * 5. **Interaction Patterns** (interaction-patterns.css) - * - Unified hover/focus/active behaviors - * - Interactive element classes (.interact-subtle, .interact-dramatic, etc.) - * - Consistent focus management - * - Disabled and loading state patterns - * - Touch device optimizations - * - * 6. **Loading States** (loading-states.css) - * - Loading state classes (.loading, .loading-blur, etc.) - * - Spinner components (.spinner, .spinner-dots, etc.) - * - Skeleton loading patterns (.skeleton, .skeleton-text, etc.) - * - Progressive loading behaviors - * - Async operation state management - * - * USAGE EXAMPLES: - * =============== - * - * // Use architectural tokens in components: - * .my-component { - * padding: var(--space-md); - * border-radius: var(--radius-card); - * box-shadow: var(--elevation-2); - * transition: var(--transition-interactive); - * } - * - * .my-component:hover { - * transform: var(--transform-lift-medium); - * box-shadow: var(--elevation-hover-4); - * } - * - * // Apply architectural classes: - *
- *
...
- *
- * - * // Use state management: - *
- *
Content
- *
- * - * BENEFITS: - * ========= - * - * ✅ **Consistency**: All components use the same timing, spacing, and interaction patterns - * ✅ **Maintainability**: Changes to timing/spacing/shadows happen in one place - * ✅ **Performance**: Optimized transitions and hardware acceleration - * ✅ **Accessibility**: Built-in support for reduced motion, high contrast, screen readers - * ✅ **Developer Experience**: Semantic tokens and utility classes speed up development - * ✅ **Brand Coherence**: Consistent elevation and interaction patterns across all components - * ✅ **Scalability**: Easy to extend with new tokens and patterns - * - * MIGRATION GUIDE: - * ================ - * - * To migrate existing components to use this architecture: - * - * 1. Replace hardcoded timing values with --timing-* tokens - * 2. Replace hardcoded shadows with --elevation-* tokens - * 3. Replace hardcoded transforms with --transform-* tokens - * 4. Use .interact-* classes instead of custom hover states - * 5. Use data-attributes for state management instead of classes - * 6. Replace loading patterns with .skeleton and .loading classes - * - * PERFORMANCE NOTES: - * ================== - * - * - All animations use transform and opacity for 60fps performance - * - Hardware acceleration is enabled on interactive elements - * - Reduced motion preferences are respected throughout - * - Z-index values are managed to prevent stacking conflicts - * - Specific property transitions prevent layout thrashing - */ -/* Buttons Component - Enhanced button system with NVIDIA styling */ -/* Enhanced Button System */ -.btn { - display: inline-flex; - justify-content: center; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - align-items: center; - font-weight: 500; -} -.related-content__view--compact .related-content__item .btn { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__view--compact .related-content__item:hover .btn { - color: var(--color-brand); -} -.btn:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-offset-width: 2px; -} -.btn { - border-radius: var(--radius-button); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); - min-height: 2.5rem; - text-decoration: none; - cursor: pointer; - position: relative; - overflow: hidden; -} -.btn:disabled { - cursor: not-allowed; - opacity: 0.5; -} -.btn--primary { - background-color: var(--color-brand); - color: var(--color-text-inverse); - --tw-ring-color: var(--color-brand); -} -.btn--primary:hover:not(:disabled) { - background-color: var(--color-brand-1); - transform: var(--transform-lift-subtle); - box-shadow: var(--elevation-hover-2); -} -.btn--secondary { - background-color: var(--color-surface); - color: var(--color-text-primary); - border: 1px solid var(--color-border-primary); - --tw-ring-color: var(--color-brand); -} -.btn--secondary:hover:not(:disabled) { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - transform: var(--transform-lift-subtle); -} -.btn--ghost { - background-color: transparent; - color: var(--color-text-secondary); - --tw-ring-color: var(--color-brand); -} -.btn--ghost:hover:not(:disabled) { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); -} -.btn--danger { - background-color: var(--color-brand-7); - color: var(--color-text-inverse); - --tw-ring-color: var(--color-brand-7); -} -.btn--danger:hover:not(:disabled) { - /* background-color: #dc2626; */ - background-color: var(--feedback-error); - transform: var(--transform-lift-subtle); -} -.btn--sm { - /* @apply px-3 py-1 text-sm; */ - font-size: 0.875rem; - line-height: 1.5; - min-height: 2rem; - min-width: 2rem; - padding: 0.375rem 0.5rem; /* tighter, more square */ -} -.btn--lg { - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 1.125rem; - line-height: 1.75; - min-height: 3rem; -} -.btn__icon { - /* @apply w-4 h-4 mr-2; */ - width: 1rem; - height: 1rem; - margin-right: 0.375rem; - display: inline-block; - vertical-align: middle; -} -/* Icon-only small buttons: remove right margin for centering */ -.btn--sm .btn__icon:only-child { - margin-right: 0; -} -.btn__icon--right { - margin-left: 0.5rem; - margin-right: 0px; - height: 1rem; - width: 1rem; -} -/* Enhanced loading state */ -.btn--loading { - cursor: wait; - opacity: 0.75; -} -.btn--loading::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 1rem; - height: 1rem; - margin: -0.5rem 0 0 -0.5rem; - border: 2px solid transparent; - border-top-color: currentColor; - border-radius: 50%; - animation: spin 1s linear infinite; -} -/* Topbar Button Component */ -.topbar__button { - position: relative; - padding: 0.5rem; - border-radius: var(--radius-lg); - min-width: 2.25rem; - min-height: 2.25rem; - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -} -.topbar__button::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at center, rgba(var(--color-brand-rgb), 0.1) 0%, transparent 70%); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} -.topbar__button:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-hover-2); -} -.topbar__button:hover::before { - opacity: 1; -} -.topbar__button:active { - transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-1); -} -.topbar__button img { - width: 1.125rem; - height: 1.125rem; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); - flex-shrink: 0; -} -.topbar__button:hover img { - filter: brightness(1); - transform: scale(1.1); -} -/* Legacy toggle-btn support for backward compatibility */ -.toggle-btn { - position: relative; - padding: 0.5rem; - border-radius: var(--radius-lg); - min-width: 2.25rem; - min-height: 2.25rem; - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - --tw-ring-color: var(--color-brand); -} -.toggle-btn:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand); -} -.toggle-btn::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient( - circle at center, - rgba(var(--color-brand-rgb), 0.1) 0%, - transparent 70% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} -.toggle-btn:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-hover-2); -} -.toggle-btn:hover::before { - opacity: 1; -} -.toggle-btn:active { - transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-1); -} -.toggle-btn--active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-color: var(--color-brand); -} -.toggle-btn--active:hover { - background-color: var(--color-brand-1); - color: var(--color-text-inverse); -} -.toggle-btn img { - width: 1.125rem !important; /* Properly sized icons */ - height: 1.125rem !important; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); - flex-shrink: 0; /* Prevent icon compression */ -} -.toggle-btn:hover img { - filter: brightness(1); - transform: scale(1.1); -} -.toggle-btn--active img { - filter: brightness(1) invert(1); -} -/* Button Ripple Effects */ -.ripple { - position: absolute !important; - border-radius: 50%; - background: rgba(255, 255, 255, 0.3); - transform: scale(0); - /* ✅ FIXED: Use animation tokens for ripple effect */ - animation: ripple-animation var(--timing-slow) linear; - pointer-events: none; - z-index: 1; - /* Ensure it doesn't affect layout */ - top: 0; - left: 0; - width: 0; - height: 0; -} -.dark .ripple { - background: rgba(255, 255, 255, 0.2); -} -/* ✅ KEYFRAME: Ripple animation using animation tokens */ -@keyframes ripple-animation { - to { - transform: scale(4); - opacity: var(--opacity-hidden); - } -} -/* Ensure buttons have proper positioning for ripple containment */ -button, .btn { - position: relative; - overflow: hidden; -} -/* Tables Component - BEM, dense, and glass variants aligned to design tokens */ -/* Enhanced Notice Component */ -/* Base Enhanced Notice Styles */ -.notice { - position: relative; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - border-radius: var(--radius-lg); - overflow: hidden; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens */ - animation: notice-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; -} -/* Removed legacy overrides that zeroed out spacing and styles */ -/* Enhanced Notice Container */ -.notice__container { - display: flex; - align-items: flex-start; - padding: 0.875rem 1rem; - position: relative; -} -/* Enhanced Notice Icon */ -.notice__icon-wrapper { - margin-right: 1rem; - flex-shrink: 0; - position: relative; - margin-top: 0.125rem; -} -.notice__icon { - height: 1.25rem; - width: 1.25rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 0.2s; - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); -} -/* Enhanced Notice Content */ -.notice__content { - min-width: 0; - flex: 1 1 0%; -} -.notice__title { - margin-bottom: 0.25rem; - font-family: "NVIDIA", Arial, Helvetica, sans-serif; - font-size: 1rem; - line-height: 1.5rem; - font-weight: 600; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 0.2s; - line-height: 1.3; -} -.notice__text { - font-size: 0.875rem; - line-height: 1.25rem; - line-height: 1.625; - color: var(--color-text-primary); - font-family: var(--font-brand); -} -.notice__text p { - margin-bottom: 0.5rem; -} -.notice__text p:last-child { - margin-bottom: 0; -} -.notice__text strong { - font-weight: 600; -} -.notice__text code { - border-radius: var(--radius-base); - padding: 0.125rem 0.375rem; - font-size: 0.75rem; - line-height: 1rem; - background-color: rgba(0, 0, 0, 0.1); - font-family: var(--font-family-mono, monospace); -} -/* Notice Type Variations */ -/* Info Notice */ -/* Old hex-based colors commented in favor of tokens */ -/* .notice--info { ... } */ -.notice--info { - background: linear-gradient( - 135deg, - rgba(var(--color-info-rgb), 0.1) 0%, - rgba(var(--color-info-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-info-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-info-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} -.notice--info .notice__title { color: var(--color-info); } -.notice--info .notice__icon { - filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.3)); -} -/* Note Notice */ -.notice--note { - background: linear-gradient( - 135deg, - rgba(var(--color-note-rgb), 0.1) 0%, - rgba(var(--color-note-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-note-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-note-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} -.notice--note .notice__title { color: var(--color-note); } -.notice--note .notice__icon { - filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.3)); -} -/* Tip Notice */ -.notice--tip { - background: linear-gradient( - 135deg, - rgba(var(--color-tip-rgb), 0.1) 0%, - rgba(var(--color-tip-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-tip-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-tip-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} -.notice--tip .notice__title { color: var(--color-tip); } -.notice--tip .notice__icon { - filter: drop-shadow(0 1px 2px rgba(34, 197, 94, 0.3)); -} -/* Warning Notice */ -.notice--warning { - background: linear-gradient( - 135deg, - rgba(var(--color-warning-rgb), 0.1) 0%, - rgba(var(--color-warning-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-warning-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-warning-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} -.notice--warning .notice__title { color: var(--color-warning); } -.notice--warning .notice__icon { - filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3)); -} -/* Danger Notice */ -.notice--danger { - background: linear-gradient( - 135deg, - rgba(var(--color-danger-rgb), 0.1) 0%, - rgba(var(--color-danger-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-danger-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-danger-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} -.notice--danger .notice__title { color: var(--color-danger); } -.notice--danger .notice__icon { - filter: drop-shadow(0 1px 2px rgba(239, 68, 68, 0.3)); -} -/* Security Notice */ -.notice--security { - background: linear-gradient( - 135deg, - rgba(var(--color-security-rgb), 0.1) 0%, - rgba(var(--color-security-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-security-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-security-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} -.notice--security .notice__title { color: var(--color-security); } -.notice--security .notice__icon { - filter: drop-shadow(0 1px 2px rgba(168, 85, 247, 0.3)); -} -/* Snack Notice */ -.notice--snack { - background: linear-gradient( - 135deg, - rgba(var(--color-snack-rgb), 0.1) 0%, - rgba(var(--color-snack-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-snack-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-snack-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} -.notice--snack .notice__title { color: var(--color-snack); } -.notice--snack .notice__icon { - filter: drop-shadow(0 1px 2px rgba(236, 72, 153, 0.3)); -} -/* Hover Effects */ -/* Subtle hover only when interactive content is inside */ -.notice:has(a:hover) .notice__icon { transform: scale(1.03); } -/* Entrance Animation */ -@keyframes notice-enter { - 0% { - opacity: 0; - transform: translateY(10px) scale(0.98); - } - 100% { - opacity: 1; - transform: translateY(0) scale(1); - } -} -/* Dark mode code styling */ -@media (prefers-color-scheme: dark) { - .notice__text code { - background-color: rgba(255, 255, 255, 0.1); - } -} -/* Remove heavy :has() spacing shifts; container layout handles alignment */ -/* Navigation Component - Modular navigation system with NVIDIA styling */ -/* Import modular navigation components */ -/* Navigation Module - Main import file for all navigation components */ -/* Import all navigation modules in proper order */ -/* Navigation Base - Container queries and shared navigation foundations */ -/* ======================================== - Container Query Context - ======================================== */ -.sidebar-container, -.topbar, -.chat-toc-toggle { - container-type: inline-size; -} -.sidebar-container { - container-name: sidebar; - container-type: inline-size; -} -.topbar { - container-name: topbar; -} -.chat-toc-toggle { - container-name: toggle; -} -/* Base navigation link styling */ -.nav-link { - position: relative; - padding: 0.5rem 0.75rem; - border-radius: var(--radius-md); - font-weight: 400; - font-size: 0.875rem; - line-height: 1.2; - min-height: 2.25rem; - color: var(--color-text-primary); - text-decoration: none; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - white-space: nowrap; - overflow: hidden; /* Essential for ripple containment */ - display: flex; - align-items: center; - cursor: pointer; -} -/* Enhanced focus states for nav-links */ -.nav-link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); /* Double focus ring */ -} -.nav-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.03) 100% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} -.nav-link:hover, -.nav-link:focus { - color: var(--color-brand); - /* Removed transform and background for cleaner minimal look */ -} -.nav-link:hover::before, -.nav-link:focus::before { - opacity: 0.5; /* More subtle hover effect */ -} -/* Base nested content styling - use new animation system */ -.nested-content { - /* Use animation bridge collapse system instead of display:none */ - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing); -} -/* Enhanced hover states - use animation tokens for consistency */ -.nested-content a:hover { - transform: translateX(4px); - transition: transform var(--timing-fast) var(--easing-standard); -} -/* Expand toggle button - use animation tokens */ -.expand-toggle { - padding: 0.25rem; - border-radius: var(--radius-base); - color: var(--color-text-secondary); - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); -} -.expand-toggle:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); -} -.expand-toggle svg { - transition: transform var(--timing-fast) var(--easing-standard); -} -/* Chat/TOC Toggle Component - Interactive toggle between chat and table of contents */ -/* Chat/TOC Toggle Component */ -.chat-toc-toggle { - display: flex; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - overflow: hidden; - box-shadow: var(--elevation-4); - height: 2.25rem; - min-width: 72px; /* Ensure minimum visibility */ - - /* Prevent flash during initialization */ - opacity: 1; - transition: opacity var(--timing-instant) var(--easing-standard); - - /* Enhance visibility */ - position: relative; -} -.chat-toc-toggle.initialized { - opacity: 1; - animation: none; /* Cancel fallback animation */ -} -@keyframes fallback-show { - to { opacity: 1; } -} -.chat-toc-toggle__option { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - min-width: 2.25rem; - min-height: 2.25rem; - border: none; - background: transparent; - color: var(--color-text-secondary); - cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - overflow: hidden; -} -.chat-toc-toggle__option:hover { - background: var(--color-surface-hover); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - box-shadow: 0 4px 8px color-mix(in srgb, black 10%, transparent); -} -.chat-toc-toggle__option--active { - background: var(--color-brand); - color: var(--color-text-inverse); -} -.chat-toc-toggle__option--active:hover { - background: var(--color-brand-1); - transform: var(--transform-lift-subtle); -} -.chat-toc-toggle__icon { - width: 1.125rem; - height: 1.125rem; - flex-shrink: 0; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); -} -.chat-toc-toggle__option:hover .chat-toc-toggle__icon { - filter: brightness(1); - transform: scale(1.1); -} -.chat-toc-toggle__option--active .chat-toc-toggle__icon { - filter: brightness(0) invert(1); -} -.chat-toc-toggle__option--active:hover .chat-toc-toggle__icon { - filter: brightness(0) invert(1); - transform: scale(1.1); -} -/* Focus states for accessibility */ -.chat-toc-toggle__option:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand); - z-index: 1; -} -/* Ripple effect on click */ -.chat-toc-toggle__option::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient( - circle at center, - color-mix(in srgb, var(--color-brand) 10%, transparent) 0%, - transparent 70% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} -.chat-toc-toggle__option:hover::before { - opacity: 1; -} -.chat-toc-toggle__option:active::before { - opacity: 1; -} -.chat-toc-toggle__option:active { - transform: translateY(0); - box-shadow: 0 2px 4px color-mix(in srgb, black 10%, transparent); -} -/* Sidebar Navigation - Main navigation sidebar with responsive behavior */ -/* Sidebar Container Styling */ -.sidebar, -.sidebar-container { - background-color: transparent; - color: var(--color-text-primary); - border-inline-end: none; - /* Enable named container for container queries in this file */ - container-type: inline-size; - container-name: sidebar; -} -/* Desktop sidebar styling */ -/* -@container sidebar (min-width: 768px) { - .sidebar, - .sidebar-container { - background-color: transparent; - border-inline-end: none; - transform: translateX(0) !important; - position: sticky !important; - display: flex !important; - } -} -*/ -/* FALLBACK: Media query for desktop sidebar visibility */ -/* -@media (min-width: 768px) { - .sidebar-container { - transform: translateX(0) !important; - position: sticky !important; - display: flex !important; - } -} -*/ -/* Mobile sidebar styling */ -@container sidebar (max-width: 767px) { - .sidebar-container { - /* Ensure it starts hidden on mobile */ - position: fixed; - z-index: 40; - width: 20rem; /* w-80 equivalent */ - height: 100vh; - top: 0; - left: 0; - transform: translateX(-100%); - /* ✅ FIXED: Use animation tokens */ - transition: transform var(--timing-medium) var(--easing-standard); - } - - .sidebar.translate-x-0, - .sidebar-container.translate-x-0 { - transform: translateX(0) !important; - } -} -/* Mobile Header Styling - Force hide on desktop */ -.sidebar-header { - border-bottom: none; - background-color: transparent; - color: var(--color-text-primary); - display: flex; -} -/* Force hide sidebar header on desktop */ -@container sidebar (min-width: 768px) { - .sidebar__header, - .sidebar-header { - display: none !important; - } -} -/* Fallback: Hide mobile navigation elements on desktop */ -@media (min-width: 768px) { - .sidebar__header, - .sidebar-header { - display: none !important; - } - - [data-component="navigation-mobile-toggle"] { - display: none !important; - } -} -/* Ensure sidebar starts hidden on mobile */ -@container sidebar (max-width: 767px) { - .sidebar:not(.translate-x-0), - .sidebar-container:not(.translate-x-0) { - transform: translateX(-100%) !important; - } -} -.sidebar__close-button, -.sidebar-close-btn { - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - border: none; - background: transparent; - cursor: pointer; -} -.sidebar__close-button:hover, -.sidebar-close-btn:hover { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); - border-radius: var(--radius-lg); -} -.sidebar__close-button:focus, -.sidebar-close-btn:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} -/* LinkTree Styling */ -[data-link-tree], -#linkTree { - background-color: transparent; - color: var(--color-text-primary); - width: 100%; -} -/* Desktop linkTree padding adjustment */ -@container sidebar (min-width: 768px) { - [data-link-tree], - #linkTree { - padding-inline-start: 4px; /* Add space for focus ring to prevent clipping */ - padding-inline-end: 0; - } -} -/* Mobile linkTree styling */ -@container sidebar (max-width: 767px) { - [data-link-tree], - #linkTree { - padding: 1rem; - } -} -/* Prevent layout shift during initialization */ -/* -#linkTree:not(.initialized) { - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); -} -*/ -[data-link-tree].initialized, -#linkTree.initialized { - opacity: 1; -} -/* Robust expansion using :has() based on aria-expanded (fallback if JS state desyncs) */ -li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="true"]) > .nested-content { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - overflow: visible; -} -li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested-content { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; -} -/* Allow interaction inside nested content while its parent is transitioning */ -.nested-content[data-collapse-state="transitioning"] { - /* Override global pattern that disables all pointer events during transitions */ - pointer-events: auto; -} -/* ✅ NEW ANIMATION SYSTEM - Use data attributes for consistent behavior */ -/* Ensure animations only work after initialization */ -[data-link-tree].initialized .nested-content[data-collapse-state="expanded"], -#linkTree.initialized .nested-content[data-collapse-state="expanded"] { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - overflow: visible; /* Allow content to be fully visible */ -} -[data-link-tree].initialized .nested-content[data-collapse-state="collapsed"], -#linkTree.initialized .nested-content[data-collapse-state="collapsed"] { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; -} -[data-link-tree].initialized .nested-content[data-collapse-state="transitioning"], -#linkTree.initialized .nested-content[data-collapse-state="transitioning"] { - overflow: hidden; /* Prevent content spillage during animation */ -} -/* Sidebar Navigation Components - Cohesive Design */ -.sidebar__item { - border-radius: 0.375rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; border-radius: var(--radius-md); - display: flex; - align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .sidebar__item { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -.sidebar__item { - background-color: transparent; - margin: 1px 0; -} -.sidebar__item:hover { - background-color: var(--color-surface-hover); -} -.sidebar__link { - flex-grow: 1; - border-top-left-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; - padding: 0.5rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; padding: var(--space-2); - display: flex; - align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .sidebar__link { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -.sidebar__link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.sidebar__link { - color: var(--color-text-primary); - text-decoration: none; - --tw-ring-color: var(--color-brand); - min-height: 2.5rem; /* Consistent touch target */ -} -.sidebar__link:hover, -.sidebar__link:focus { - color: var(--color-brand); -} -.sidebar__link--active { - color: var(--color-brand); - background-color: var(--color-hover); -} -.sidebar__icon { - /* Reduced icon size for tighter look */ - /* @apply w-5 h-5 mr-3 flex-shrink-0; */ - margin-right: 0.75rem; - height: 1rem; - width: 1rem; - flex-shrink: 0; -} -.sidebar__text { - flex-grow: 1; -} -.sidebar__expander { - justify-content: center; - border-top-right-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - padding: 0.5rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; padding: var(--space-2); - display: flex; - align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .sidebar__expander { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -.sidebar__expander:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.sidebar__expander { - color: var(--color-text-secondary); - min-width: 2.5rem; - min-height: 2.5rem; - --tw-ring-color: var(--color-brand); -} -.sidebar__expander:hover, -.sidebar__expander:focus { - color: var(--color-brand); - background-color: var(--color-surface-active); -} -.sidebar__chevron { - height: 1rem; - width: 1rem; - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; -} -/* Level-specific styling */ -.sidebar__item--level-1 .sidebar__text { - /* Step down one size from text-lg and slightly reduce weight */ - /* @apply text-lg font-brand font-bold; */ - font-family: NVIDIA, Arial, Helvetica, sans-serif; - font-size: 1rem; - line-height: 1.6; - font-weight: 600; -} -.related-content__card .sidebar__item--level-1 .sidebar__text { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__card:hover .sidebar__item--level-1 .sidebar__text { - color: var(--color-brand); -} -.sidebar__item--level-1 { - margin-bottom: 0.25rem; -} -.sidebar__item--level-2 { - margin-left: 1rem; -} -.sidebar__item--level-2 .sidebar__text { - /* Step down one size from text-base */ - /* @apply font-normal text-base; */ - font-size: 0.875rem; - line-height: 1.5; - font-weight: 400; -} -.sidebar__item--level-3 { - margin-left: 1.5rem; -} -.sidebar__item--level-3 .sidebar__text { - /* Step down one size from text-sm */ - /* @apply font-light text-sm; */ - font-size: 0.875rem; - line-height: 1.4; - font-weight: 300; -} -[data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-3 .sidebar__text { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .sidebar__item--level-3 .sidebar__text { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .sidebar__item--level-3 .sidebar__text { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-3 .sidebar__text { - font-size: 0.6875rem; - } -} -.sidebar__item--level-4 { - margin-left: 2rem; -} -.sidebar__item--level-4 .sidebar__text { - /* Step down one size from text-sm */ - /* @apply text-sm; */ - font-size: 0.875rem; - line-height: 1.4; -} -[data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-4 .sidebar__text { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .sidebar__item--level-4 .sidebar__text { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .sidebar__item--level-4 .sidebar__text { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-4 .sidebar__text { - font-size: 0.6875rem; - } -} -.sidebar__item--level-default { - margin-left: 2.5rem; -} -.sidebar__item--level-default .sidebar__text { - font-size: 0.875rem; - line-height: 1.4; -} -[data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-default .sidebar__text { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .sidebar__item--level-default .sidebar__text { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .sidebar__item--level-default .sidebar__text { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-default .sidebar__text { - font-size: 0.6875rem; - } -} -/* Ensure text-brand utility works with sidebar items */ -.sidebar__link.text-brand { - color: var(--color-brand) !important; -} -/* Enhanced active state for the whole item */ -.sidebar__item:has(.sidebar__link--active) { - background-color: var(--color-hover); - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ - box-shadow: var(--elevation-brand-subtle); -} -/* Performance hints for hover states (localize former global rules) */ -.sidebar:has(.sidebar__item:hover), -.sidebar-container:has(.sidebar__item:hover) { - will-change: transform; - contain: layout; -} -/* Right Sidebar Styling - Remove background in dark mode */ -#sidebar-right { - background: transparent; -} -.dark #sidebar-right { - background: transparent !important; - background-color: transparent !important; -} -/* Remove chat controls background in dark mode */ -.dark .chat-controls { - background: transparent !important; - background-color: transparent !important; - border: none !important; - box-shadow: none !important; -} -/* Topbar Navigation - Main horizontal navigation bar with responsive grid layout */ -/* Clean CSS Grid Topbar Layout */ -.topbar { - position: sticky; - top: 0; - z-index: 50; - /* background-color: var(--color-bg-primary); */ - /* border-bottom: 1px solid var(--color-border-primary); */ - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - - /* CSS Grid Layout */ - display: grid; - grid-template-columns: auto 1fr auto auto; - grid-template-areas: "logo navigation search controls"; - align-items: center; - gap: 1rem; - /* padding: 0.75rem 1.5rem; */ - padding: 0.5rem 0.75rem; - /* min-height: 4rem; */ - min-height: 3rem; - box-shadow: var(--glass-shadow); -} -/* Grid Areas */ -.topbar__logo { - grid-area: logo; - display: flex; - align-items: center; - flex-shrink: 0; -} -.topbar__logo-link { - display: flex; - align-items: center; - text-decoration: none; - transition: opacity var(--timing-fast) var(--easing-standard); -} -.topbar__logo-link:hover { - opacity: 0.8; -} -.topbar__logo-image { - width: 1.25rem; - height: 1.25rem; - -o-object-fit: contain; - object-fit: contain; -} -.topbar__navigation { - grid-area: navigation; - display: flex; - align-items: center; - gap: 0.75rem; - min-width: 0; /* Allow shrinking */ -} -.topbar__search { - grid-area: search; - display: flex; - align-items: center; - justify-content: center; - min-width: 0; /* Allow shrinking */ -} -.topbar__controls { - grid-area: controls; - display: flex; - align-items: center; - gap: 0.5rem; - flex-shrink: 0; -} -/* Responsive Grid Layout */ -@container topbar (max-width: 1024px) { - .topbar { - grid-template-columns: auto auto 1fr auto; - grid-template-areas: "logo navigation search controls"; - gap: 0.75rem; - padding: 0.5rem 1rem; - } -} -@container topbar (max-width: 768px) { - .topbar { - grid-template-columns: auto 1fr auto; - grid-template-areas: "logo search controls"; - gap: 0.5rem; - padding: 0.5rem 0.5rem; - min-height: 2.75rem; - } - - /* Hide navigation on mobile - it should be in a hamburger menu */ - .topbar__navigation { - display: none; - } -} -/* Updated Navigation Links for Grid Layout */ -.topbar__links { - display: flex; - align-items: center; - gap: 0.5rem; /* Tighter spacing for minimal look */ - font-family: var(--font-brand); - font-weight: 300; - font-size: 0.875rem; - color: var(--color-text-primary); -} -/* Hide navigation links on mobile */ -@container (max-width: 768px) { - .topbar__link { - display: none; /* Hidden on mobile, shown via hamburger menu */ - } -} -/* Topbar links */ -.topbar__link { - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.25rem 0.5rem; - color: var(--color-text-primary); - text-decoration: none; - transition: color var(--timing-fast) var(--easing-standard); -} -.topbar__link:hover, -.topbar__link:focus-visible { - color: var(--color-brand); - outline: none; -} -/* Table of Contents (TOC) - Navigation within content and sidebar TOC */ -/* Enhanced TOC Styling */ -.toc { - margin-bottom: 2rem; - border-radius: 0.5rem; - padding: 1.5rem; padding: var(--space-6); border-radius: var(--radius-lg); - background: transparent; - border: none; - box-shadow: none; -} -.toc-header { - margin-bottom: 1rem; - padding-bottom: 0.75rem; - display: flex; - align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .toc-header { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -.toc-header { - border: none; - color: var(--color-text-primary); -} -.toc-content a { - display: inline-block; - border-radius: 0.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; border-radius: var(--radius-lg); -} -.card--tile .toc-content a { - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - font-size: 0.75rem; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - transition: - filter var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: inline-block; - text-decoration: none; -} -.card--tile .toc-content a:hover { - background-color: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); - transform: var(--transform-lift-subtle); -} -.toc-content a { - color: var(--color-text-secondary); - text-decoration: none; -} -.toc-content a:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); -} -/* Enhanced Right Sidebar TOC */ -.toc { - padding: 1.5rem; - font-size: 0.875rem; - line-height: 1.5; padding: var(--space-6); - background: transparent; - border-radius: var(--radius-xl); - color: var(--color-text-primary); -} -.toc__nav { - position: relative; -} -.toc__nav::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 3px; - height: 100%; - background: linear-gradient( - to bottom, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.3) 50%, - transparent 100% - ); - border-radius: 2px; -} -.toc ul { - list-style-type: none; -} -.toc ul > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} -.toc ul { - padding-left: 1rem; - margin: 0; -} -.toc ul ul { - margin-top: 0.5rem; - border-left-width: 1px; - --tw-border-opacity: 0.2; - padding-left: 1rem; - border-color: var(--color-border-primary); -} -/* TOC Link Styling */ -.toc-link { - display: block; - overflow: hidden; - border-radius: 0.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; position: relative; border-radius: var(--radius-lg); -} -.language-switcher .toc-link { - opacity: 1; - transform: translateY(0); -} -.toc-link { - color: var(--color-text-secondary); - text-decoration: none; - line-height: 1.4; - font-weight: 400; - cursor: pointer; /* Ensure ripple-ready */ -} -.toc-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} -.toc-link:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); - padding-inline-start: calc(0.75rem + 2px); - border-inline-start: 2px solid var(--color-brand); -} -.toc-link:hover::before { - opacity: 1; -} -.toc-link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - color: var(--color-brand); - /* box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); */ /* Enhanced double focus ring */ - box-shadow: - var(--elevation-brand-focus), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); -} -/* Reading progress bar animation */ -#progress-bar { - transition: width 0.3s ease-out; -} -/* Heading Level Variations */ -.toc-link--h1 { - font-weight: 600; - /* Slightly reduce H1 TOC size for a lighter hierarchy */ - /* font-size: 0.95em; */ - font-size: 0.9em; - color: var(--color-text-primary); -} -.toc-link--h2 { - font-weight: 500; - color: var(--color-brand); - opacity: 0.9; -} -.toc-link--h3 { - /* Slightly reduce H3 TOC size in tandem with sidebar tightening */ - /* font-size: 0.85em; */ - font-size: 0.8em; - color: var(--color-text-tertiary); - font-weight: 400; -} -/* Active state styling */ -.toc-link.active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - font-weight: 500; - transform: translateX(2px); - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); */ - box-shadow: var(--elevation-brand-subtle); -} -.toc-link.active::before { - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 0.2) 0%, - transparent 100% - ); - opacity: 1; -} -/* Smooth scrolling indicator */ -.toc-progress { - position: absolute; - top: 0; - left: 0; - width: 2px; - height: 0%; - background-color: var(--color-brand); - transition: height var(--timing-medium) var(--easing-standard); - border-radius: 1px; -} -/* Enhanced animations */ -.toc { - /* ✅ FIXED: Use animation tokens */ - animation: toc-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; -} -@keyframes toc-enter { - from { - opacity: 0; - transform: translateX(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateX(0) scale(1); - } -} -/* Responsive adjustments */ -@container (max-width: 1024px) { - .toc { - padding: 1rem; - font-size: 0.875rem; - line-height: 1.4; padding: var(--space-4); - } -[data-component="article-next-prev"] .article-next-prev__link .toc { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .toc { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .toc { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .toc { - font-size: 0.6875rem; - } -} - - .toc-link { - padding-top: 0.375rem; - padding-bottom: 0.375rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - } -} -/* Remove TOC sidebar background in dark mode */ -.dark .toc { - background: transparent !important; -} -/* Enhanced active state context */ -.toc:has(.toc-link.active) .toc__nav::before { - opacity: 1; - transform: scaleY(1.1); - background: linear-gradient( - to bottom, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.5) 50%, - transparent 100% - ); -} -/* Localized performance hint for hover state */ -.toc:has(.toc-link:hover) { - will-change: transform; - contain: layout; -} -/* Dropdown Navigation - Dropdown menus for navigation links */ -.topbar__dropdown { - left: 0px; - margin-top: 0.5rem; - width: 13rem; - overflow: hidden; - border-radius: 0.75rem; - padding: 0.5rem; - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 300ms; padding: var(--space-2); position: absolute; border-radius: var(--radius-xl); - /* background-color: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - opacity: 0; - visibility: hidden; - transform: translateY(-10px) scale(0.95); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); -} -.group:hover .topbar__dropdown { - display: block; -} -.language-switcher .group:hover .topbar__dropdown { - opacity: 1; - transform: translateY(0); -} -.group:hover .topbar__dropdown { - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); -} -.topbar__dropdown::before { - content: ''; - position: absolute; - top: -6px; - left: 20px; - width: 12px; - height: 12px; - /* background-color: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-bottom: none; - border-right: none; - transform: rotate(45deg); - z-index: -1; -} -.topbar__dropdown-link { - overflow: hidden; - border-radius: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 0.875rem; - line-height: 1.5; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; position: relative; border-radius: var(--radius-lg); - display: flex; - align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .topbar__dropdown-link { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -.topbar__dropdown-link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.topbar__dropdown-link { - color: var(--color-text-primary); - --tw-ring-color: var(--color-brand); - text-decoration: none; - margin: 2px 0; -} -.topbar__dropdown-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} -.topbar__dropdown-link:hover, -.topbar__dropdown-link:focus { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); - border-inline-start: 3px solid var(--color-brand); - padding-inline-start: calc(1rem - 3px); -} -.topbar__dropdown-link:hover::before, -.topbar__dropdown-link:focus::before { - opacity: 1; -} -/* Language Switcher transitions migrated from page-enhancements.css */ -.language-switcher .hidden { - opacity: 0; - transform: translateY(-8px); - transition: opacity 0.2s ease-out, transform 0.2s ease-out; -} -.language-switcher .block { - opacity: 1; - transform: translateY(0); -} -@media (max-width: 640px) { - .language-switcher { position: relative; } -} -/* Navigation API Endpoint Styling */ -/* Enhanced styling for API endpoints in the main navigation sidebar */ -/* ========================================================================== - API Endpoint Items - ========================================================================== */ -.api-endpoint-item { - display: flex; - align-items: center; - gap: 0.5rem; - width: 100%; -} -/* ========================================================================== - HTTP Method Badges - ========================================================================== */ -.http-method-badge { - display: inline-block; - padding: 0.125rem 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - border-radius: 0.25rem; - min-width: 3rem; - text-align: center; - letter-spacing: 0.025em; - flex-shrink: 0; -} -/* GET - Green */ -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .http-method-badge--get { background: #10b981; color: white; } */ -.http-method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } -/* POST - Blue */ -/* .http-method-badge--post { background: #3b82f6; color: white; } */ -.http-method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } -/* PUT - Orange */ -/* .http-method-badge--put { background: #f59e0b; color: white; } */ -.http-method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } -/* PATCH - Purple */ -/* .http-method-badge--patch { background: #8b5cf6; color: white; } */ -.http-method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -/* DELETE - Red */ -/* .http-method-badge--delete { background: #ef4444; color: white; } */ -.http-method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } -/* HEAD, OPTIONS - Gray */ -/* .http-method-badge--head, .http-method-badge--options { background: #6b7280; color: white; } */ -.http-method-badge--head, -.http-method-badge--options { background: var(--http-head-bg); color: var(--http-head-text); } -/* ========================================================================== - API Endpoint Path and Summary - ========================================================================== */ -.api-endpoint-path { - font-weight: 500; - color: var(--color-text-primary); - font-size: 0.8125rem; - line-height: 1.3; - word-break: break-all; - flex: 1; -} -.api-endpoint-summary { - display: block; - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.3; - margin-top: 0.25rem; - font-weight: 400; - font-style: italic; -} -/* ========================================================================== - Enhanced Sidebar Item Styling for API Endpoints - ========================================================================== */ -/* Make API endpoint links have more vertical space */ -.sidebar__link:has(.api-endpoint-item) { - padding: 0.75rem; - align-items: flex-start; -} -/* Ensure the text wrapper takes full width */ -.sidebar__text:has(.api-endpoint-item) { - width: 100%; -} -/* ========================================================================== - Hover and Active States - ========================================================================== */ -/* Hover states are implicitly handled by dark-mode tokens; leaving hover overrides minimal */ -.sidebar__link:hover .http-method-badge--get { background: var(--http-get-bg); } -.sidebar__link:hover .http-method-badge--post { background: var(--http-post-bg); } -.sidebar__link:hover .http-method-badge--put { background: var(--http-put-bg); } -.sidebar__link:hover .http-method-badge--patch { background: var(--http-patch-bg); } -.sidebar__link:hover .http-method-badge--delete { background: var(--http-delete-bg); } -.sidebar__link:hover .http-method-badge--head, -.sidebar__link:hover .http-method-badge--options { background: var(--http-head-bg); } -/* Active state enhancements */ -.sidebar__link--active .api-endpoint-path { - color: var(--color-brand-primary); - font-weight: 600; -} -.sidebar__link--active .api-endpoint-summary { - color: var(--color-text-secondary); -} -/* ========================================================================== - Responsive Design - ========================================================================== */ -@media (max-width: 768px) { - .http-method-badge { - min-width: 2.5rem; - font-size: 0.625rem; - padding: 0.125rem 0.25rem; - } - - .api-endpoint-path { - font-size: 0.75rem; - } - - .api-endpoint-summary { - font-size: 0.6875rem; - } - - .sidebar__link:has(.api-endpoint-item) { - padding: 0.5rem; - } -} -/* ========================================================================== - Dark Mode Support - ========================================================================== */ -/* Dark mode handled via CSS variables in :root/.dark */ -/* ========================================================================== - Focus States for Accessibility - ========================================================================== */ -.sidebar__link:focus-visible:has(.api-endpoint-item) { - outline: 2px solid var(--color-brand-primary); - outline-offset: 2px; -} -/* ========================================================================== - Animation and Transitions - ========================================================================== */ -.http-method-badge { - transition: background-color 0.15s ease; -} -.api-endpoint-path, -.api-endpoint-summary { - transition: color 0.15s ease; -} -/* Breadcrumbs Navigation Component - Pure navigation styling */ -.breadcrumb { - flex: 1; - min-width: 0; -} -.breadcrumb__list { - display: flex; - flex-wrap: wrap; - align-items: center; - font-size: 0.875rem; - line-height: 1.25rem; - margin: 0; - padding: 0; - list-style: none; -} -.breadcrumb__item { - display: flex; - align-items: center; -} -.breadcrumb__link { - position: relative; - display: inline-flex; - align-items: center; - border-radius: var(--radius-lg); - /* padding: 0.5rem 0.75rem; */ - padding: 0.25rem 0.5rem; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - background-color: transparent; - color: var(--color-text-secondary); - text-decoration: none; - font-weight: 500; - overflow: hidden; -} -.breadcrumb__link:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.03) 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} -.breadcrumb__link:hover { - color: var(--color-brand); - /* background-color: var(--color-surface-hover); */ - /* transform: var(--transform-lift-subtle); */ - /* box-shadow: var(--elevation-4); */ -} -.breadcrumb__link:hover:before { - opacity: 1; -} -.breadcrumb__link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - color: var(--color-brand); - background-color: var(--color-surface-hover); - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); /* Enhanced double focus ring */ -} -.breadcrumb__separator { - margin-left: 0.75rem; - margin-right: 0.75rem; - font-size: 1.125rem; - line-height: 1.75rem; - color: var(--color-text-tertiary); - transition: - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - font-weight: 300; -} -.breadcrumb:hover .breadcrumb__separator { - color: var(--color-brand); - transform: scale(1.1); -} -.breadcrumb__current { - display: inline-flex; - align-items: center; - border-radius: var(--radius-lg); - /* padding: 0.5rem 0.75rem; */ - padding: 0.25rem 0.5rem; - font-weight: 600; - /* background-color: var(--color-brand); */ - /* color: var(--color-text-inverse); */ - background: var(--glass-bg); - color: var(--color-text-primary); - border: 1px solid var(--glass-border-color); - position: relative; - overflow: hidden; -} -/* Clickable current breadcrumb for metadata toggle */ -.breadcrumb__current--clickable { - cursor: pointer; - transition: color 0.2s ease, background-color 0.2s ease; - border: none; - gap: 0.5rem; - font-family: inherit; - font-size: inherit; - line-height: inherit; -} -.breadcrumb__current--clickable:hover { - background-color: var(--color-surface-hover); -} -.breadcrumb__current--clickable:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: - 0 0 0 2px var(--color-text-inverse), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.5); -} -.breadcrumb__current--clickable:active { - transform: translateY(0); -} -.breadcrumb__metadata-icon { - width: 1rem; - height: 1rem; - opacity: 0.8; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} -.breadcrumb__current--clickable:hover .breadcrumb__metadata-icon { - opacity: 1; - transform: scale(1.1); -} -.breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { - opacity: 1; - transform: rotate(180deg); -} -.breadcrumb__current:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.2), - transparent 50%, - rgba(255, 255, 255, 0.1) - ); - pointer-events: none; -} -/* Entrance Animation */ -.breadcrumb__current, -.breadcrumb__link { - animation: breadcrumb-enter 0.3s ease-out; - animation-fill-mode: both; -} -@keyframes breadcrumb-enter { - 0% { - opacity: 0; - transform: translateX(-10px); - } - 100% { - opacity: 1; - transform: translateX(0); - } -} -/* Responsive Design */ -@media (max-width: 768px) { - .breadcrumb__list { - font-size: 0.75rem; - line-height: 1rem; - } - - .breadcrumb__link, - .breadcrumb__current { - padding: 0.375rem 0.5rem; - } - - .breadcrumb__metadata-icon { - width: 0.875rem; - height: 0.875rem; - } - - .breadcrumb__separator { - margin-left: 0.5rem; - margin-right: 0.5rem; - font-size: 1rem; - } -} -/* High contrast mode support */ -@media (prefers-contrast: high) { - .breadcrumb__link { - border: 1px solid transparent; - } - - .breadcrumb__link:hover, - .breadcrumb__link:focus { - border-color: var(--color-brand); - } - - .breadcrumb__current { - border: 2px solid var(--color-brand); - } - - .breadcrumb__current--clickable:hover, - .breadcrumb__current--clickable:focus { - border: 2px solid var(--color-text-inverse); - } -} -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .breadcrumb__link, - .breadcrumb__separator, - .breadcrumb__current--clickable, - .breadcrumb__metadata-icon { - transition: none; - } - - .breadcrumb__current, - .breadcrumb__link { - animation: none; - } - - .breadcrumb__link:hover, - .breadcrumb__current--clickable:hover { - transform: none; - } - - .breadcrumb:hover .breadcrumb__separator { - transform: none; - } - - .breadcrumb__current--clickable:hover .breadcrumb__metadata-icon, - .breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { - transform: none; - } -} -/* ========================================================================== - :has() Breadcrumb Component Enhancements - ========================================================================== */ -/* Breadcrumb container awareness of metadata panel state */ -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 100% - ); - border-radius: var(--radius-lg); - margin: -0.25rem; - padding: 0.25rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} -/* Enhanced separator styling when metadata is expanded */ -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__separator { - color: var(--color-brand); - transform: scale(1.2); -} -/* Interactive breadcrumb links when metadata is open */ -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link { - background-color: rgba(var(--color-brand-rgb), 0.05); - border-radius: 0.375rem; -} -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link:hover { - background-color: rgba(var(--color-brand-rgb), 0.15); - transform: var(--transform-lift-medium); - box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.2); -} -/* Hover context awareness */ -.breadcrumb:has(.breadcrumb__link:hover) { - background: rgba(var(--color-surface), 0.5); - border-radius: var(--radius-lg); - transition: all 0.2s ease; -} -.breadcrumb:has(.breadcrumb__link:hover) .breadcrumb__current { - transform: scale(1.02); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); -} -/* Search Component - Sophisticated search interface with NVIDIA styling and complex grouping */ -/* SOPHISTICATED SEARCH INPUT - Matching design system */ -.search-input { - position: relative; - z-index: 10; - width: 100%; - max-width: 24rem; - padding: 0.625rem 0.75rem 0.625rem 2.25rem; - border-radius: var(--radius-lg); - border: 1px solid var(--color-border-primary); - font-size: 0.875rem; - font-weight: 500; - /* background: var(--color-surface); */ - background: var(--glass-bg); - font-family: var(--font-family-brand, inherit); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); - /* box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - - /* Search icon using brand color */ - /* Use currentColor for icon stroke; color is set via CSS variable for themeability */ - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z'/%3e%3c/svg%3e"); - background-position: left 0.75rem center; - background-repeat: no-repeat; - background-size: 1.125rem 1.125rem; - color: var(--color-text-primary); -} -.search-input:hover { - border-color: var(--color-brand); - background-color: var(--color-surface-hover); - transform: var(--transform-lift-subtle); - /* box-shadow: - 0 4px 8px rgba(0, 0, 0, 0.1), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - /* box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: var(--glass-shadow); -} -.search-input:focus { - outline: 2px solid transparent; - outline-offset: 2px; - border-color: var(--color-brand); - background-color: var(--glass-bg); - transform: var(--transform-lift-subtle); - /* box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), - 0 4px 12px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); */ - /* box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--elevation-hover-2), inset 0 1px 0 rgba(255, 255, 255, 0.2); */ - box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--glass-shadow); -} -.search-input::-moz-placeholder { - color: var(--color-text-tertiary); - font-style: italic; -} -.search-input::placeholder { - color: var(--color-text-tertiary); - font-style: italic; -} -/* SOPHISTICATED SEARCH CONTAINER - Matching design system */ -.search-container { - position: relative; - border-radius: 0.875rem; - padding: 0.75rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); -} -.search-container::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - /* transition: opacity 0.3s ease; */ - transition: opacity var(--timing-medium) var(--easing-standard); - pointer-events: none; - border-radius: 0.875rem; -} -.search-container:hover, -.search-container:focus-within { - border-color: var(--color-brand); - box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.1), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} -.search-container:hover::before, -.search-container:focus-within::before { - opacity: 1; -} -/* SOPHISTICATED SEARCH RESULTS CONTAINER */ -#searchResultsContainer { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - /* animation: search-container-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ - animation: search-container-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; - overflow: hidden; -} -#searchResultsContainer::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -#searchResultsContainer:hover::before { - opacity: 1; -} -@keyframes search-container-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} -/* SOPHISTICATED SEARCH HIT STYLING - Matching tiles and navigation patterns */ -.search-hit { - position: relative; - display: block; - text-decoration: none; - color: inherit; - margin-bottom: 0.75rem; - overflow: hidden; -} -.search-hit-content { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - padding: 1.25rem; - /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - overflow: hidden; -} -.search-hit-content::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - /* transition: opacity 0.3s ease; */ - transition: opacity var(--timing-medium) var(--easing-standard); - pointer-events: none; -} -.search-hit-content::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2)); - transform: scaleX(0); - /* transition: transform 0.3s ease; */ - transition: transform var(--timing-medium) var(--easing-standard); - transform-origin: left; -} -.search-hit:hover .search-hit-content { - transform: var(--transform-lift-dramatic); - border-color: var(--color-brand); - /* box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.12), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} -.search-hit:hover .search-hit-content::before { - opacity: 1; -} -.search-hit:hover .search-hit-content::after { - transform: scaleX(1); -} -/* Focus states for accessibility */ -.search-hit:focus-within .search-hit-content { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} -/* Search Hit Typography - Matching design system */ -.search-hit-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-bottom: 0.75rem; -} -.search-hit-section { - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--color-brand); - margin-bottom: 0.25rem; - transition: all 0.2s ease; -} -.search-hit:hover .search-hit-section { - transform: translateX(2px); - color: var(--color-brand-1); -} -.search-hit-title { - font-size: 1.125rem; - font-weight: 600; - line-height: 1.375; - color: var(--color-text-primary); - font-family: var(--font-family-brand, inherit); - margin: 0; - /* transition: color 0.2s ease; */ - transition: color var(--timing-fast) var(--easing-standard); -} -.search-hit:hover .search-hit-title { - color: var(--color-brand); -} -.search-hit-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin: 0.75rem 0; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} -.search-hit-metadata { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 0.75rem; - color: var(--color-text-tertiary); - margin-top: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid var(--color-border-secondary); -} -.search-hit-score { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.25rem 0.5rem; - background: var(--color-brand); - color: var(--color-text-inverse); - border-radius: 0.375rem; - font-size: 0.75rem; - font-weight: 600; - min-width: 3rem; - text-align: center; - transition: all 0.2s ease; - opacity: 0.8; -} -.search-hit:hover .search-hit-score { - transform: scale(1.05); - opacity: 1; - background: var(--color-brand-1); -} -/* SOPHISTICATED SEARCH SECTIONS */ -.search-section { - margin-bottom: 2rem; - border-radius: 0.875rem; - /* transition: all 0.3s ease; */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); -} -.search-section:hover { - transform: var(--transform-lift-medium); -} -.search-section-header { - display: flex; - align-items: center; - margin-bottom: 1.5rem; - padding: 1rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.75rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -} -.search-section-badge { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - border-radius: 50%; - background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2)); - color: var(--color-text-inverse); - font-size: 0.875rem; - font-weight: 600; - margin-right: 0.75rem; - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ - box-shadow: var(--elevation-brand-subtle); - transition: all 0.2s ease; -} -.search-section:hover .search-section-badge { - transform: scale(1.1); - /* box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.3); */ - box-shadow: var(--elevation-brand-medium); -} -.search-section-title { - font-size: 1.5rem; - font-weight: 700; - color: var(--color-text-primary); - font-family: var(--font-family-brand, inherit); - margin: 0; -} -/* SOPHISTICATED PARENT GROUPS */ -.search-parent-group { - position: relative; - margin-bottom: 1.5rem; -} -.search-parent-group h3 { - position: sticky; - top: 0; - z-index: 10; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-secondary); - font-family: var(--font-family-brand, inherit); - margin: 0 -1rem 1rem -1rem; - padding: 0.75rem 1rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-bottom: 1px solid var(--color-border-secondary); - border-radius: 0.5rem 0.5rem 0 0; -} -/* SEARCH RESULTS HEADER */ -.search-results-header { - padding: 1.5rem; - margin-bottom: 1.5rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-left: 4px solid var(--color-brand); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* animation: slideInUp 0.6s ease-out; */ - animation: slideInUp var(--timing-slow) var(--easing-standard); -} -.search-results-header h1 { - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; -} -.search-results-header p { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; -} -.search-stats { - text-align: right; -} -.search-stats div { - font-size: 0.75rem; - color: var(--color-text-tertiary); -} -/* SOPHISTICATED ANIMATIONS - Matching design system */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -@keyframes slideInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.7; - } -} -/* Animation Classes */ -.animate-fadeIn { - /* animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ - animation: fadeIn var(--timing-fast) var(--easing-standard); -} -.animate-slideInUp { - /* animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); */ - animation: slideInUp var(--timing-fast) var(--easing-standard); -} -.animate-pulse { - /* animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; */ - animation: pulse var(--timing-slow) var(--easing-emphasized) infinite; -} -/* Search Container Enhancements */ -.search-results-container { - transition: all 0.3s ease; -} -.search-results-header { - animation: slideInUp 0.6s ease-out; -} -/* Search Section Styling */ -.search-section { - border-radius: 12px; - transition: all 0.3s ease; -} -.search-section:hover { - transform: var(--transform-lift-medium); -} -/* Enhanced Search Hit Styling */ -.search-hit { - position: relative; - overflow: hidden; -} -.search-hit-content { - position: relative; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - border: 1px solid var(--color-border, #e0e0e0); -} -.search-hit:hover .search-hit-content { - border-color: var(--color-brand); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.1), - 0 0 0 1px var(--color-brand-alpha, rgba(74, 144, 226, 0.1)); -} -.search-hit-content::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-brand), var(--color-brand-secondary, var(--color-brand))); - transform: scaleX(0); - transition: transform 0.3s ease; - transform-origin: left; -} -.search-hit:hover .search-hit-content::before { - transform: scaleX(1); -} -/* Search Hit Typography */ -.search-hit-title { - transition: color 0.2s ease; -} -.search-hit:hover .search-hit-title { - color: var(--color-brand) !important; -} -.search-hit-section { - transition: all 0.2s ease; -} -.search-hit:hover .search-hit-section { - transform: translateX(2px); -} -/* Search Score Badge */ -.search-hit-score { - transition: all 0.2s ease; - min-width: 45px; - text-align: center; -} -.search-hit:hover .search-hit-score { - transform: scale(1.05); - opacity: 1 !important; -} -/* SOPHISTICATED FILTER STYLING - Matching navigation patterns */ -#filterSelect { - position: relative; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-radius: var(--radius-lg); - padding: 0.5rem 0.75rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-primary); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--glass-shadow); - cursor: pointer; -} -#filterSelect:hover { - background: var(--color-surface-hover); - border-color: var(--color-brand); - transform: var(--transform-lift-subtle); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} -#filterSelect:focus { - outline: 2px solid transparent; - outline-offset: 2px; - border-color: var(--color-brand); - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); -} -.filter-active { - background: var(--color-brand) !important; - color: var(--color-text-inverse) !important; - border-color: var(--color-brand) !important; - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.25) !important; -} -.filter-active:hover { - background: var(--color-brand-1) !important; - transform: var(--transform-lift-subtle); -} -/* Filter container styling */ -#filterContainer { - position: relative; -} -#filterContainer label { - display: block; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} -/* UTILITY CLASSES */ -.line-clamp-2 { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} -.line-clamp-3 { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} -.space-y-3 > * + * { - margin-top: 0.75rem; -} -.space-x-4 > * + * { - margin-left: 1rem; -} -.flex { - display: flex; -} -.items-center { - align-items: center; -} -.justify-between { - justify-content: space-between; -} -.flex-1 { - flex: 1 1 0%; -} -.font-medium { - font-weight: 500; -} -/* SOPHISTICATED LOADING STATES */ -.search-loading { - position: relative; - padding: 2rem; - text-align: center; -} -.search-loading::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 20px; - height: 20px; - margin: -10px 0 0 -10px; - border: 2px solid var(--color-border-primary); - border-top-color: var(--color-brand); - border-radius: 50%; - animation: spin 1s linear infinite; -} -@keyframes spin { - to { - transform: rotate(360deg); - } -} -.search-loading-text { - color: var(--color-text-secondary); - font-size: 0.875rem; - margin-top: 1rem; -} -/* Focus Management */ -.search-hit:focus-within .search-hit-content { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} -/* RESPONSIVE DESIGN */ -@media (max-width: 768px) { - .search-hit-content { - padding: 1rem; - } - - .search-hit-metadata { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .search-results-header { - padding: 1rem; - } - - .search-results-header .flex { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .search-section-header { - padding: 0.75rem; - } - - .search-section-badge { - width: 1.75rem; - height: 1.75rem; - font-size: 0.75rem; - } - - .search-section-title { - font-size: 1.25rem; - } - - .search-parent-group h3 { - font-size: 1rem; - padding: 0.5rem 0.75rem; - } -} -/* PRINT STYLES */ -@media print { - .search-hit-content { - -moz-column-break-inside: avoid; - break-inside: avoid; - box-shadow: none; - border: 1px solid #000; - background: white; - } - - .search-hit-score, - .animate-fadeIn, - .animate-slideInUp { - display: none; - } - - .search-section-badge { - background: #000; - color: white; - } -} -/* NO RESULTS AND ERROR STATES - Matching design system */ -.search-no-results, -.search-error { - text-align: center; - padding: 3rem 1.5rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border-radius: 0.875rem; - border: 1px solid var(--color-border-primary); - animation: fadeIn 0.5s ease-out; -} -.search-no-results .emoji, -.search-error .emoji { - font-size: 3rem; - margin-bottom: 1rem; - opacity: 0.6; - display: block; -} -.search-no-results h2, -.search-error h2 { - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-secondary); - margin: 0 0 0.5rem 0; -} -.search-no-results p, -.search-error p { - font-size: 0.875rem; - color: var(--color-text-tertiary); - margin: 0 0 1rem 0; -} -.search-error button { - background: var(--color-brand); - color: var(--color-text-inverse); - border: none; - border-radius: var(--radius-lg); - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} -.search-error button:hover { - background: var(--color-brand-1); - transform: var(--transform-lift-subtle); - box-shadow: 0 4px 8px rgba(var(--color-brand-rgb), 0.25); -} -/* High Contrast Mode Support */ -@media (prefers-contrast: high) { - .search-hit-content { - border-width: 2px; - } - - .search-hit:hover .search-hit-content { - border-width: 3px; - } -} -/* ACCESSIBILITY AND REDUCED MOTION SUPPORT */ -@media (prefers-reduced-motion: reduce) { - .search-hit-content, - .search-section, - .search-section-badge, - .animate-fadeIn, - .animate-slideInUp, - #searchResultsContainer { - animation: none; - transition: none; - } - - .search-hit:hover .search-hit-content, - .search-section:hover, - .search-section:hover .search-section-badge { - transform: none; - } -} -/* HIGH CONTRAST MODE SUPPORT */ -@media (prefers-contrast: high) { - .search-hit-content, - .search-section-header, - .search-results-header { - border-width: 2px; - } - - .search-hit:hover .search-hit-content { - border-width: 3px; - } - - .search-section-badge { - border: 2px solid var(--color-text-primary); - } -} -/* DARK MODE SUPPORT - All styles automatically work via CSS custom properties */ -/* The color system in colors.css handles dark mode via .dark class */ -/* No additional dark mode styles needed as we use semantic color variables */ -/* Chat Component - Enhanced chat interface with premium styling */ -/* Chat Header */ -.chat__header { - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-radius: 0.75rem 0.75rem 0 0; /* Top corners rounded to match design system */ -} -/* Chat header icon styling for proper dark mode */ -.chat__header-icon { - filter: brightness(0) saturate(100%) invert(42%) sepia(15%) saturate(566%) hue-rotate(202deg) brightness(96%) contrast(87%); -} -.dark .chat__header-icon { - filter: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(593%) hue-rotate(202deg) brightness(91%) contrast(92%); -} -/* Danger button variant for delete action */ -.topbar__button--danger:hover { - background-color: rgba(239, 68, 68, 0.1) !important; - border-color: rgb(239, 68, 68) !important; - color: rgb(239, 68, 68) !important; -} -.topbar__button--danger:hover img { - filter: brightness(0) saturate(100%) invert(35%) sepia(96%) saturate(2067%) hue-rotate(346deg) brightness(89%) contrast(94%) !important; -} -/* Chat Container - Clean transparent design */ -#chatContainer { - background: transparent; - border: none; - box-shadow: none; - border-radius: 0.75rem; /* Add consistent border radius */ - /* margin-right: 1.5rem; Align with page container padding */ - /* Replaced: remove right margin on wide screens to avoid pinching */ - margin-top: 1rem; /* Match the pageContainer's top padding to align with content start */ -} -/* On xl+, let chat use full sidebar column width */ -@media (min-width: 1280px) { - #chatContainer { - margin-right: 0; - } -} -/* Enhanced Chat Interface - Clean transparent design */ -.chat__controls { - background: transparent; - border: none; - border-radius: 0 0 0.75rem 0.75rem; /* Bottom corners rounded to match container */ -} -.chat__form { - width: 100%; -} -[data-component="tabs"] .chat__form { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ -} -.chat__input:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} -.chat__input { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - border-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard); - font-family: var(--font-brand); - line-height: 1.4; -} -.chat__input:hover { - border-color: var(--color-brand); - box-shadow: var(--elevation-4); -} -.chat__input:focus { - border-color: var(--color-brand); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.1), - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1); -} -/* Old styling moved to enhanced section below */ -/* Smooth transitions for chat container */ -#chatContainer { - /* ✅ FIXED: Use animation tokens for consistent timing */ - /* transition (was medium for all) */ - transition: - width var(--timing-medium) var(--easing-smooth), - max-width var(--timing-medium) var(--easing-smooth), - - box-shadow var(--timing-slow) var(--easing-smooth), - transform var(--timing-slow) var(--easing-smooth), - border-radius var(--timing-slow) var(--easing-standard), - - background-color var(--timing-medium) var(--easing-smooth), - border-color var(--timing-medium) var(--easing-smooth), - -webkit-backdrop-filter var(--timing-medium) var(--easing-smooth); - transition: - width var(--timing-medium) var(--easing-smooth), - max-width var(--timing-medium) var(--easing-smooth), - /* slower transform and shadow for more graceful feel */ - box-shadow var(--timing-slow) var(--easing-smooth), - transform var(--timing-slow) var(--easing-smooth), - border-radius var(--timing-slow) var(--easing-standard), - /* include background/border transitions for softer state change */ - background-color var(--timing-medium) var(--easing-smooth), - border-color var(--timing-medium) var(--easing-smooth), - backdrop-filter var(--timing-medium) var(--easing-smooth); - transition: - width var(--timing-medium) var(--easing-smooth), - max-width var(--timing-medium) var(--easing-smooth), - - box-shadow var(--timing-slow) var(--easing-smooth), - transform var(--timing-slow) var(--easing-smooth), - border-radius var(--timing-slow) var(--easing-standard), - - background-color var(--timing-medium) var(--easing-smooth), - border-color var(--timing-medium) var(--easing-smooth), - backdrop-filter var(--timing-medium) var(--easing-smooth), - -webkit-backdrop-filter var(--timing-medium) var(--easing-smooth); - transform-origin: top right; - will-change: width, transform, box-shadow; -} -/* Expanded Chat State - Enhanced Liquid Glass */ -.chat-expanded { - /* Lighter translucent surface */ - background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border: 1px solid var(--glass-border-color); - border-left-width: 3px; - /* box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08), 0 8px 28px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.18); */ - box-shadow: var(--glass-shadow); - transform: translateY(-2px); - overflow: visible; - display: flex; - flex-direction: column; -} -/* Dark theme tuning: slightly lighter sheet */ -.dark .chat-expanded { - background: var(--glass-bg); - border-color: var(--glass-border-color); -} -/* Ensure messages area scrolls within viewport when expanded */ -.chat-expanded #chat-messages { - flex: 1 1 auto; - min-height: 0; /* required for flex children to allow overflow */ - overflow-y: auto; - max-height: none; /* use container max-height instead */ -} -/* Modal overlay for expanded chat */ -.chat-overlay { - position: fixed; - inset: 0; - background: rgba(0,0,0,0.22); - opacity: 0; - transition: opacity var(--timing-medium) var(--easing-smooth); - z-index: 50; /* below chat container (which uses 60) */ -} -.chat-overlay.visible { - opacity: 1; -} -/* Enhanced input styling for expanded state */ -.chat-expanded .chat__input { - font-size: 1rem; - line-height: 1.6; -} -.related-content__card .chat-expanded .chat__input { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__card:hover .chat-expanded .chat__input { - color: var(--color-brand); -} -.chat-expanded .chat__input { - font-size: 15px; /* Slightly larger for better UX */ - line-height: 1.5; -} -/* Micro-interaction for expand button */ -.chat__header button { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard); -} -.chat__header button:hover { - transform: scale(1.1); - background-color: var(--color-surface-hover); -} -.chat__header button:active { - transform: scale(0.95); -} -/* Enhanced focus states */ -.chat-expanded .chat__input:focus { - box-shadow: - 0 0 0 3px rgba(var(--color-brand-rgb), 0.12), - 0 4px 20px rgba(0, 0, 0, 0.1); - border-color: var(--color-brand); -} -/* Subtle animation for chat messages in expanded state */ -.chat-expanded .chat__messages { - /* ✅ FIXED: Use animation tokens */ - animation: subtle-fade-in var(--timing-medium) var(--easing-standard) var(--reveal-stagger-delay) both; -} -@keyframes subtle-fade-in { - from { - opacity: 0.8; - transform: translateY(4px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -/* Liquid Glass Hover Effect */ -#chatContainer:not(.chat-expanded):hover { - background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-color: var(--glass-border-color); - /* transform: translateX(-1px); */ - box-shadow: var(--glass-shadow); -} -/* Auto-resize textarea styling with liquid glass focus */ -.chat-input { - overflow-y: hidden; - scrollbar-width: none; - -ms-overflow-style: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} -.chat-input::-webkit-scrollbar { - display: none; -} -.chat-input:focus { - background: rgba(255, 255, 255, 0.08) !important; - /* backdrop-filter: blur(12px) !important; */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; - border-color: rgba(255, 255, 255, 0.15) !important; - box-shadow: - 0 0 0 2px rgba(var(--color-brand-rgb), 0.1), - 0 4px 12px rgba(0, 0, 0, 0.06); -} -/* Enhanced send button styling */ -#sendButton { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} -/* :has() Chat Interface Enhancements */ -/* Chat container responds to input focus (no scale to avoid clipping) */ -#chatContainer:has(.chat__input:focus) { - transform: translateY(-1px); - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.15), - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - border-color: var(--color-brand); - overflow: visible; -} -/* Match header with lighter sheet while expanded */ -.chat-expanded .chat__header { - background: rgba(255, 255, 255, 0.08) !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.14); -} -.dark .chat-expanded .chat__header { - background: rgba(255, 255, 255, 0.05) !important; - border-bottom-color: rgba(255, 255, 255, 0.12); -} -/* Enhanced expanded state with input focus */ -.chat-expanded:has(.chat__input:focus) { - border-left-width: 4px; - border-color: var(--color-brand); - background: rgba(255, 255, 255, 0.15); -} -/* Chat form with content gets enhanced styling */ -#chatContainer:has(.chat__input:not(:-moz-placeholder)) .chat__header { - background: linear-gradient(135deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.05) 100%); - border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.2); -} -#chatContainer:has(.chat__input:not(:placeholder-shown)) .chat__header { - background: linear-gradient(135deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.05) 100%); - border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.2); -} -/* Send button activation based on input content */ -#chatContainer:has(.chat__input:not(:-moz-placeholder)) #sendButton { - background-color: var(--color-brand) !important; - color: var(--color-text-inverse) !important; - transform: scale(1.05); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.3), - 0 2px 8px rgba(0, 0, 0, 0.1); -} -#chatContainer:has(.chat__input:not(:placeholder-shown)) #sendButton { - background-color: var(--color-brand) !important; - color: var(--color-text-inverse) !important; - transform: scale(1.05); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.3), - 0 2px 8px rgba(0, 0, 0, 0.1); -} -#sendButton:not(:disabled) { - background-color: var(--color-brand) !important; - color: var(--color-text-inverse) !important; -} -#sendButton:not(:disabled):hover { - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); - filter: brightness(1.1); -} -#sendButton:not(:disabled):active { - transform: scale(0.95); - filter: brightness(0.9); -} -#sendButton:disabled { - background-color: var(--color-bg-secondary) !important; - color: var(--color-text-tertiary) !important; -} -/* Chat input improvements */ -.chat__input:focus { - box-shadow: - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), - 0 4px 12px rgba(0, 0, 0, 0.1); - border-color: var(--color-brand) !important; -} -.chat__input::-moz-placeholder { - color: var(--color-text-tertiary); -} -.chat__input::placeholder { - color: var(--color-text-tertiary); -} -/* Header button hover effects with enhanced micro-interactions */ -.chat__header button:hover svg { - transform: scale(1.15) rotate(2deg); - transition: transform var(--timing-fast) var(--easing-standard); -} -/* Smooth state transitions for expand button icon */ -.chat__header button svg { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: transform var(--timing-medium) var(--easing-standard); -} -/* Chat bubble improvements - tighter spacing and better hierarchy */ -.chat-bubble { - max-width: none; - border-radius: 0.75rem; - padding: 0.75rem; - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding: var(--space-3); position: relative; border-radius: var(--radius-xl); /* Reduced padding from p-4 to p-3 */ - word-wrap: break-word; - word-break: break-word; - overflow-wrap: break-word; - -webkit-hyphens: auto; - hyphens: auto; - white-space: pre-wrap; - line-height: 1.5; /* Slightly tighter line height */ - font-family: var(--font-brand); - border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent rounded corners with tail */ -} -.chat-bubble--user { - margin-left: 1.5rem; /* Reduced margin */ - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-radius: 1rem 1rem 0.25rem 1rem; /* User tail on right */ - box-shadow: var(--elevation-4); -} -.chat-bubble--bot { - margin-right: 1.5rem; /* Reduced margin */ - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; /* Bot tail on left */ - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} -/* Enhanced Chat Messages */ -#chat-messages { - display: flex; - flex-direction: column; -} -#chat-messages > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} -#chat-messages { - padding: 1rem; padding: var(--space-4); -} -#chat-messages > * + * { - margin-top: 0.75rem; -} -#chat-messages { - display: flex; -} -@media (max-width: 768px) { - - .search-results-header #chat-messages { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -.card--tile #chat-messages > * + * { - margin-top: 0.75rem; -} -.grid .tile #chat-messages { - display: flex; - flex-direction: column; - height: 100%; -} -.grid .tile #chat-messages > p { - /* Description takes only the space it needs */ - flex: 0 0 auto; -} -#chat-messages { /* Tighter spacing */ - max-height: calc(100vh - 12rem); - overflow-y: auto; - scroll-behavior: smooth; -} -.chat-bubble--error { - margin-right: 1.5rem; /* Consistent with other bubbles */ - background: linear-gradient( - 135deg, - rgba(239, 68, 68, 0.1) 0%, - rgba(239, 68, 68, 0.05) 100% - ); - border: 1px solid rgba(239, 68, 68, 0.2); - color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent tail */ -} -/* Chat message formatting */ -.chat-bubble p { - margin-bottom: 0.75rem; -} -.chat-bubble p:last-child { - margin-bottom: 0px; -} -.chat-bubble p { - word-wrap: break-word; - overflow-wrap: break-word; -} -.chat-bubble code { - border-radius: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - font-size: 0.875rem; - line-height: 1.5; border-radius: var(--radius-base); - background-color: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; - word-break: break-all; -} -.chat-bubble pre { - margin-top: 0.75rem; - margin-bottom: 0.75rem; - overflow-x: auto; - border-radius: 0.5rem; - padding: 0.75rem; - font-size: 0.875rem; - line-height: 1.5; padding: var(--space-3); border-radius: var(--radius-lg); - background-color: var(--color-bg-tertiary); - border: 1px solid var(--color-border-primary); -} -.chat-bubble pre code { - padding: 0px; padding: var(--space-0); - background: none; - color: var(--color-text-primary); -} -/* Chat message animations */ -.chat-bubble { - /* ✅ FIXED: Use animation tokens */ - animation: chat-message-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; -} -@keyframes chat-message-enter { - from { - opacity: 0; - transform: translateY(10px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} -/* Enhanced typing indicator */ -.typing-indicator { - margin-right: 2rem; - display: flex; - align-items: center; -} -.typing-indicator > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} -.typing-indicator { - border-radius: 0.75rem; - padding: 1rem; padding: var(--space-4); border-radius: var(--radius-xl); - display: flex; - align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .typing-indicator { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -.typing-indicator { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); -} -.typing-indicator::after { - content: ''; - display: inline-block; - width: 4px; - height: 4px; - border-radius: 50%; - background-color: var(--color-text-secondary); - animation: typing-dot 1.4s infinite; -} -.typing-indicator::before { - content: ''; - display: inline-block; - width: 4px; - height: 4px; - border-radius: 50%; - background-color: var(--color-text-secondary); - /* ✅ FIXED: Use animation tokens for stagger */ - animation: typing-dot 1.4s infinite var(--reveal-batch-delay); - margin-right: 4px; -} -@keyframes typing-dot { - 0%, 60%, 100% { - opacity: 0.3; - transform: scale(1); - } - 30% { - opacity: 1; - transform: scale(1.2); - } -} -/* Chat pair container - tighter spacing */ -.chat-pair > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} -.chat-pair > * + * { - margin-top: 0.75rem; -} -.card--tile .chat-pair > * + * { - margin-top: 0.75rem; -} -.grid .tile .chat-pair { - display: flex; - flex-direction: column; - height: 100%; -} -.grid .tile .chat-pair > p { - /* Description takes only the space it needs */ - flex: 0 0 auto; -} -.chat-pair { /* Slightly increased for better breathing room */ - position: relative; - margin-bottom: 1rem; -} -/* Improved delete button styling aligned with design system */ -.chat-delete { - top: -0.25rem; - right: -0.25rem; - height: 1.25rem; - width: 1.25rem; - justify-content: center; - border-radius: 9999px; - font-size: 0.875rem; - line-height: 1.4; - opacity: 0; position: absolute; border-radius: var(--radius-full); - display: flex; - align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .chat-delete { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -[data-component="article-next-prev"] .article-next-prev__link .chat-delete { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .chat-delete { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .chat-delete { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .chat-delete { - font-size: 0.6875rem; - } -} -.chat-delete:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-offset-width: 1px; -} -.group:hover .chat-delete { - opacity: 1; -} -.chat-delete { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - opacity var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - font-size: 0.75rem; - line-height: 1; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - /* backdrop-filter: blur(8px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -} -.chat-delete:hover { - background-color: rgba(239, 68, 68, 0.1); - border-color: rgb(239, 68, 68); - color: rgb(239, 68, 68); - transform: scale(1.1); - box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2); -} -.chat-delete:active { - transform: scale(0.95); - /* ✅ FIXED: Use animation tokens */ - animation: delete-shake var(--timing-medium) var(--easing-standard); -} -.chat-pair:hover .chat-delete { - opacity: 1; -} -/* Delete shake animation */ -@keyframes delete-shake { - 0%, 100% { transform: scale(0.95) rotate(0deg); } - 25% { transform: scale(0.95) rotate(-2deg); } - 75% { transform: scale(0.95) rotate(2deg); } -} -/* Article Header Component - Parent container managing breadcrumbs and metadata */ -.article-header { - position: relative; - margin-bottom: 1.5rem; -} -/* Navigation container - holds breadcrumbs and toggle button */ -.article-header__navigation { - display: flex; - align-items: center; - justify-content: space-between; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - border-radius: 0.75rem; - /* padding: 1rem 1.25rem; */ - padding: 0.5rem 0.75rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - background: var(--glass-bg); - box-shadow: var(--glass-shadow); - transition: background-color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard); -} -/* Reduced hover effect intentionally disabled to keep things airy */ -/* Actions Container - holds copy page and metadata toggle */ -.article-header__actions { - display: flex; - align-items: center; - gap: 0.75rem; -} -/* Copy Page Component Styles */ -.article-header__copy-page { - position: relative; -} -.article-header__copy-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-radius: 0.625rem; - background: var(--color-surface); - color: var(--color-text-primary); - border: 1px solid var(--color-border-primary); - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - font-family: var(--font-brand); -} -.article-header__copy-toggle:hover { - background: var(--color-bg-secondary); - border-color: var(--color-brand); - color: var(--color-brand); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); -} -.article-header__copy-toggle:focus { - outline: 2px solid rgba(var(--color-brand-rgb), 0.5); - outline-offset: 2px; -} -/* Copy Page Dropdown Styles */ -.article-header__copy-dropdown { - position: absolute; - right: 0; - margin-top: 0.5rem; - width: 14rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-radius: 0.5rem; - /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */ - box-shadow: var(--glass-shadow); - z-index: 999; - overflow: hidden; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); -} -.dark .article-header__copy-dropdown { - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); -} -.article-header__copy-dropdown[data-state="hidden"] { - display: none; -} -.article-header__copy-dropdown-content { - padding: 0.25rem; - /* Elevate glass on inner wrapper to ensure effect covers menu content */ - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - border-radius: 0.75rem; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); -} -/* Dropdown Menu Items */ -.copy-page-menu-item { - width: 100%; - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.5rem 0.75rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-primary); - background: transparent; - border: none; - border-radius: 0.375rem; - cursor: pointer; - transition: all 0.2s ease; - text-decoration: none; -} -.copy-page-menu-item:hover { - background: var(--color-surface-hover); - color: var(--color-brand); -} -.copy-page-menu-item:focus { - outline: 2px solid rgba(var(--color-brand-rgb), 0.5); - outline-offset: -2px; -} -.copy-page-menu-item svg { - width: 1rem; - height: 1rem; - flex-shrink: 0; - color: var(--color-text-secondary); - transition: color 0.2s ease; -} -.copy-page-menu-item:hover svg { - color: var(--color-brand); -} -/* Menu Separator */ -.copy-page-separator { - margin: 0.25rem 0; - border: 0; - border-top: 1px solid var(--color-border-primary); -} -/* Menu Section Header */ -.copy-page-section-header { - padding: 0.25rem 0.75rem; - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-tertiary); - text-transform: uppercase; - letter-spacing: 0.05em; - background: var(--color-bg-tertiary); - margin: 0.25rem 0; -} -/* Icon Styles */ -.article-header__copy-icon, -.article-header__copy-arrow { - width: 1rem; - height: 1rem; - flex-shrink: 0; - color: var(--color-text-secondary); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} -.article-header__copy-toggle:hover .article-header__copy-icon, -.article-header__copy-toggle:hover .article-header__copy-arrow { - color: var(--color-brand); -} -/* Dropdown arrow rotation */ -.article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { - transform: rotate(180deg); -} -/* Copy feedback states */ -.copy-page-menu-item.copying { - background: var(--color-brand); - color: var(--color-text-inverse); -} -.copy-page-menu-item.copying svg { - color: var(--color-text-inverse); -} -.copy-page-menu-item.success { - background: var(--color-brand-5); - color: var(--color-text-inverse); -} -.copy-page-menu-item.success svg { - color: var(--color-text-inverse); -} -.copy-page-menu-item.error { - background: var(--color-brand-7); - color: var(--color-text-inverse); -} -.copy-page-menu-item.error svg { - color: var(--color-text-inverse); -} -.article-header__copy-text { - white-space: nowrap; -} -.article-header__copy-icon, -.article-header__copy-arrow { - width: 1rem; - height: 1rem; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} -.article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { - transform: rotate(180deg); -} -.article-header__copy-dropdown { - position: absolute; - right: 0; - top: 100%; - margin-top: 0.5rem; - width: 14rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-radius: 0.75rem; - /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--glass-shadow); - z-index: 50; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; -} -.article-header__copy-dropdown .p-1 { - padding: 0.25rem; -} -/* Stronger glassmorphism for dropdown readability over underlying text */ -.article-header__copy-dropdown { - /* Locally override glass tokens for this component */ - --glass-blur: 14px; - --glass-saturate: 1.25; - --glass-bg: rgba(255, 255, 255, 0.72); - --glass-border-color: rgba(255, 255, 255, 0.32); - --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); - - /* Ensure it visually floats above overlapping content */ - z-index: 1000; - background-clip: padding-box; - /* Let inner content own the visual surface to avoid double borders */ - background: transparent; - border: none; -} -.dark .article-header__copy-dropdown { - --glass-bg: rgba(17, 17, 17, 0.72); - --glass-border-color: rgba(255, 255, 255, 0.18); - --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); -} -/* Responsive adjustments */ -@media (max-width: 768px) { - .article-header__actions { - gap: 0.5rem; - } - - .article-header__copy-text { - display: none; - } - - .article-header__copy-dropdown { - width: 12rem; - right: -2rem; - } -} -/* Metadata Toggle Button */ -.article-header__metadata-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-radius: 0.625rem; - background: var(--color-brand); - color: var(--color-text-inverse); - border: none; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), - transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); - font-family: var(--font-brand); -} -.article-header__metadata-toggle:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.2) 0%, - transparent 50%, - rgba(255, 255, 255, 0.1) 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} -.article-header__metadata-toggle:hover { - background: var(--color-brand-1); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.4); -} -.article-header__metadata-toggle:hover:before { - opacity: 1; -} -.article-header__metadata-toggle:focus { - outline: 2px solid rgba(var(--color-brand-rgb), 0.5); - outline-offset: 2px; -} -.article-header__metadata-toggle:active { - transform: translateY(0); -} -.article-header__toggle-text { - white-space: nowrap; -} -.article-header__toggle-icon { - width: 1rem; - height: 1rem; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} -/* Rotate icon when expanded */ -.article-header__metadata-toggle[aria-expanded="true"] .article-header__toggle-icon { - transform: rotate(180deg); -} -/* Metadata Panel */ -.article-header__metadata-panel { - max-height: 0; - overflow: hidden; - margin-top: 1rem; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - opacity: 0; - transform: translateY(-10px); -} -.article-header__metadata-panel[aria-hidden="false"] { - max-height: 200px; /* More reasonable max height for metadata */ - opacity: 1; - transform: translateY(0); -} -/* Enhanced UX styles for horizontal metadata flow within article header */ -.article-header__metadata-panel .metadata { - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.75rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - margin-top: 0.75rem; -} -.article-header__metadata-panel .metadata__flow { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0.75rem; - padding: 1rem 1.25rem; -} -.article-header__metadata-panel .metadata__item { - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 0.5rem; - padding: 0.5rem 0.75rem; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - color: var(--color-text-secondary); - position: relative; - overflow: hidden; - font-size: 0.875rem; - line-height: 1.4; - font-weight: 400; - white-space: nowrap; -} -.article-header__metadata-panel .metadata__item:before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} -.article-header__metadata-panel .metadata__item:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); - padding-left: calc(0.75rem + 2px); - border-left: 2px solid var(--color-brand); -} -.article-header__metadata-panel .metadata__item:hover:before { - opacity: 1; -} -/* Secondary metadata items (like last modified) */ -.article-header__metadata-panel .metadata__item--secondary { - color: var(--color-text-tertiary); - font-size: 0.8125rem; -} -.article-header__metadata-panel .metadata__item--secondary:hover { - color: var(--color-text-secondary); -} -/* Metadata separators removed - clean horizontal flow */ -/* Override global SVG styles for metadata icons - very specific targeting */ -.article-header__metadata-panel .metadata .metadata__icon, -.article-header__metadata-panel .metadata__icon, -.article-header__metadata-panel svg { - height: 1.25rem !important; - width: 1.25rem !important; - max-height: 1.25rem !important; - max-width: 1.25rem !important; - min-height: 1.25rem !important; - min-width: 1.25rem !important; - flex-shrink: 0 !important; - display: inline-block !important; -} -/* Mobile responsive styles */ -@media (max-width: 768px) { - .article-header__metadata-panel .metadata__flow { - padding: 0.75rem 1rem; - gap: 0.5rem; - flex-direction: column; - align-items: flex-start; - } - - .article-header__metadata-panel .metadata__item { - font-size: 0.8125rem; - padding: 0.375rem 0.5rem; - width: 100%; - } - - /* Separators removed - no longer needed */ - - .article-header__metadata-panel .metadata .metadata__icon, - .article-header__metadata-panel .metadata__icon, - .article-header__metadata-panel svg { - height: 1rem !important; - width: 1rem !important; - max-height: 1rem !important; - max-width: 1rem !important; - min-height: 1rem !important; - min-width: 1rem !important; - } -} -/* Additional responsive styles for navigation */ -@media (max-width: 768px) { - .article-header__navigation { - flex-direction: column; - gap: 1rem; - align-items: stretch; - } - - .article-header__metadata-toggle { - justify-content: center; - width: 100%; - } -} -/* Loading State */ -.article-header.loading .article-header__metadata-toggle { - pointer-events: none; - opacity: 0.7; -} -.article-header.loading .article-header__toggle-icon { - animation: spin 1s linear infinite; -} -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -/* Focus states for accessibility */ -.article-header__metadata-toggle:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.625rem; -} -/* High contrast mode support */ -@media (prefers-contrast: high) { - .article-header__navigation { - border-width: 2px; - } - - .article-header__metadata-toggle { - border: 2px solid var(--color-brand); - } -} -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .article-header__metadata-panel, - .article-header__toggle-icon { - transition: none; - } - - .article-header__navigation:hover { - transform: none; - } -} -/* Fix stacking context issues when dropdown is open */ -body:has(.article-header__copy-dropdown:not(.hidden)) h1[id] { - position: static; -} -body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { - display: none; -} -/* :has() Article Header Enhancements */ -/* Breadcrumb navigation with interactive states */ -.article-header:has(.breadcrumb__current[aria-expanded="true"]) .article-header__navigation { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - var(--color-surface) 100% - ); - border-color: rgba(var(--color-brand-rgb), 0.2); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.08), - 0 0 0 1px rgba(var(--color-brand-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} -/* Enhanced metadata panel visibility */ -.article-header:has(.article-header__metadata-panel[aria-hidden="false"]) { - margin-bottom: 2.5rem; -} -/* Related Content component styles migrated from page-enhancements.css */ -.related-content { - position: relative; - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - padding: 1.25rem; - transition: background-color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - box-shadow: var(--glass-shadow); -} -.related-content__header { - border-bottom: 1px solid var(--glass-border-color); - padding-bottom: 0.75rem; - margin-bottom: 1rem; -} -.related-content__header h2 { - margin: 0; - color: var(--color-text-primary); - font-weight: 600; -} -/* View Toggle Buttons */ -.related-content__view-toggle { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - border-radius: 0.5rem; - background-color: var(--color-surface); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-primary); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - cursor: pointer; - min-width: 2.25rem; - min-height: 2.25rem; -} -.related-content__view-toggle:hover { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); - border-color: var(--color-border-secondary); - transform: translateY(-1px); -} -.related-content__view-toggle.active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-color: var(--color-brand); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); -} -.related-content__view-toggle:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} -.related-content__collapse-toggle { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - border-radius: 0.5rem; - background-color: var(--color-surface); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-primary); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - cursor: pointer; - min-width: 2.25rem; - min-height: 2.25rem; -} -.related-content__collapse-toggle:hover { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); - border-color: var(--color-border-secondary); - transform: translateY(-1px); -} -.related-content__collapse-toggle[data-collapsed="true"] svg { - transform: rotate(180deg); -} -.related-content__collapse-toggle:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} -.related-content__container[data-collapsed="true"] { - display: none; -} -/* Compact View Styles */ -.related-content__view--compact .related-content__item { - position: relative; - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - border-radius: 0.5rem; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; - box-shadow: var(--glass-shadow); -} -.related-content__view--compact .related-content__item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} -.related-content__view--compact .related-content__item:hover { - border-color: rgba(var(--color-brand-rgb), 0.45); - background: var(--color-surface-hover); - transform: translateY(-1px); - box-shadow: var(--elevation-2); -} -.related-content__view--compact .related-content__item:hover::before { - opacity: 1; -} -.related-content__view--compact .related-content__item a { - position: relative; - z-index: 1; - text-decoration: none; - color: inherit; -} -.related-content__view--compact .related-content__item a:hover { - text-decoration: none; -} -.related-content__view--compact .related-content__item .font-medium { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__view--compact .related-content__item:hover .font-medium { - color: var(--color-brand); -} -/* Enhanced Card View Styles */ -.related-content__card { - position: relative; - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; - box-shadow: var(--glass-shadow); -} -.related-content__card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.03) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -.related-content__card:hover { - transform: translateY(-3px); - border-color: rgba(var(--color-brand-rgb), 0.45); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), var(--elevation-brand-subtle); -} -.related-content__card:hover::before { - opacity: 1; -} -.related-content__card:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: translateY(-2px); -} -.related-content__card a { - position: relative; - z-index: 1; - text-decoration: none; - color: inherit; - display: block; -} -.related-content__card a:hover { - text-decoration: none; -} -.related-content__card .text-base { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__card:hover .text-base { - color: var(--color-brand); -} -.related-content__card .text-gray-600 { - color: var(--color-text-secondary); -} -.related-content__card .text-gray-500 { - color: var(--color-text-tertiary); -} -/* Dark mode enhancements */ -.dark .related-content { - border-color: var(--color-border-secondary); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .related-content__view-toggle, -.dark .related-content__collapse-toggle { - border-color: var(--color-border-secondary); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .related-content__view-toggle:hover, -.dark .related-content__collapse-toggle:hover { - border-color: var(--color-border-primary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} -.dark .compact-view .compact-item { - border-color: var(--color-border-secondary); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); -} -.dark .compact-view .compact-item:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} -.dark .resource-card-compact { - border-color: var(--color-border-secondary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .resource-card-compact:hover { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--color-brand-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -/* Improved responsive behavior */ -@media (max-width: 768px) { - .related-content { - padding: 1rem; - margin-top: 1.5rem; - } - - .related-header { - flex-direction: column; - gap: 0.75rem; - align-items: flex-start; - } - - .related-content__view--compact .related-content__item { - padding: 0.75rem; - } - - .related-content__view--compact .related-content__item time { - display: none; - } - - .related-content__card { - padding: 1rem; - } - - .related-content__view--cards .grid { - grid-template-columns: 1fr; - } - - .related-content__view--compact .related-content__item:hover, - .related-content__card:hover { - transform: translateY(-1px); - } -} -/* High contrast mode support */ -@media (prefers-contrast: high) { - .related-content { border-width: 2px; } - .related-content__view-toggle, .related-content__collapse-toggle { border-width: 2px; } - .related-content__view--compact .related-content__item { border-width: 2px; } - .related-content__card { border-width: 2px; } -} -/* Animation for view transitions */ -.related-content__view--compact, .related-content__view--cards { - animation: fadeIn 0.3s ease-in-out; -} -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } -} -/* Print styles */ -@media print { - .related-content { display: none; } -} -/* Page Resources component minor rules */ -/* Hide resources block in print to reduce clutter */ -@media print { - [data-component="article-page-resources"] { display: none; } -} -/* Tiles Component - Interactive content cards with enhanced UX */ -/* Base Tile Styles */ -.card--tile { - position: relative; - /* Use a CSS var for the base background so JS can layer gradients on hover */ - --tile-base-bg: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - background: var(--tile-base-bg); - border-radius: var(--radius-card); - border: 1px solid var(--color-border-primary); - /* backdrop-filter: blur(var(--tile-glass-blur)) saturate(var(--tile-glass-saturate)); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard), - background var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - will-change: transform, filter; - isolation: isolate; -} -.card--tile::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -/* Subtle inner highlight for glass edge */ -.card--tile::after { - content: ''; - position: absolute; - inset: 0; - pointer-events: none; - border-radius: inherit; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); -} -.card--tile:hover::before { - opacity: 1; -} -/* Focus states for accessibility */ -.card--tile:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} -/* Tile content spacing */ -.card--tile .space-y-3 > * + * { - margin-top: 0.75rem; -} -.card--tile .space-y-2 > * + * { - margin-top: 0.5rem; -} -/* Tile links - ensure they take full space */ -.card--tile a { - display: block; - color: inherit; - text-decoration: none; - position: relative; - z-index: 2; -} -.card--tile a:hover { - color: inherit; -} -/* Tile headers */ -.card--tile h3 { - color: var(--color-text-primary); - font-weight: 600; - line-height: 1.3; - margin-bottom: 0.5rem; - transition: color 0.2s ease; -} -.card--tile:hover h3 { - color: var(--color-brand); -} -/* Tile descriptions */ -.card--tile p { - color: var(--color-text-secondary); - line-height: 1.5; - font-size: 0.875rem; -} -/* Tile icons */ -.card--tile .icon { - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - transition: - filter var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); -} -.card--tile:hover .icon { - filter: brightness(1); - transform: scale(1.05); -} -/* Tile tag/badge styles */ -.card--tile .inline-block { - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - font-size: 0.75rem; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - transition: - filter var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: inline-block; - text-decoration: none; -} -.card--tile .inline-block:hover { - background-color: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); - transform: var(--transform-lift-subtle); -} -/* Responsive adjustments */ -@media (max-width: 768px) { - .card--tile { - margin-bottom: 1rem; - } - - .card--tile:hover { - transform: var(--transform-lift-medium); - } -} -/* Grid layout enhancements - simplified for child links component */ -.grid .card--tile { - height: 100%; -} -/* Dark mode enhancements */ -.dark .card--tile { - border-color: var(--color-border-secondary); - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); */ - box-shadow: var(--glass-shadow); -} -.dark .card--tile:hover { box-shadow: var(--glass-shadow); } -/* Animation improvements */ -.card--tile { - animation: card-tile-enter 0.4s ease-out; - animation-fill-mode: both; -} -@keyframes card-tile-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} -/* Stagger animation for grids */ -.grid .card--tile:nth-child(1) { animation-delay: 0s; } -.grid .card--tile:nth-child(2) { animation-delay: 0.1s; } -.grid .card--tile:nth-child(3) { animation-delay: 0.2s; } -.grid .card--tile:nth-child(4) { animation-delay: 0.3s; } -.grid .card--tile:nth-child(5) { animation-delay: 0.4s; } -.grid .card--tile:nth-child(6) { animation-delay: 0.5s; } -/* Child Links Component - Flexbox layout approach */ -.child-links-container { - /* Position directly beneath description with consistent spacing */ - margin-top: 0.75rem; - padding-top: 0; -} -.child-links-list { - display: flex; - flex-wrap: wrap; - list-style: none; - padding: 0; - margin: 0; - gap: 0.5rem; - align-items: flex-start; -} -.child-link-item { - margin: 0; - padding: 0; -} -.child-link-pill { - display: inline-block; - font-size: 0.75rem; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - border: 1px solid var(--color-border-primary); - background-color: var(--color-bg-secondary); - color: var(--color-text-secondary); - text-decoration: none; - white-space: nowrap; - line-height: 1.4; -} -.child-link-pill:hover { - color: var(--color-brand); - border-color: var(--color-brand); - background-color: var(--color-hover); - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} -.child-link-pill:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} -/* Simplest approach: Main link fills most space, child links follow naturally */ -.grid .tile { - display: flex; - flex-direction: column; - position: relative; -} -.grid .tile > a { - /* Main link fills available space for maximum clickability */ - flex: 1; - display: flex; - flex-direction: column; - margin-bottom: 0.75rem; /* Space for child links */ -} -.grid .tile .space-y-3 { - display: flex; - flex-direction: column; - height: 100%; -} -.grid .tile .space-y-3 > p { - /* Description takes only the space it needs */ - flex: 0 0 auto; -} -/* Child links sit naturally after main content area */ -.grid .tile .child-links-container { - flex: 0 0 auto; - margin-top: 0; - padding-top: 0; -} -/* Dark mode support */ -.dark .child-link-pill { - border-color: var(--color-border-secondary); - background-color: var(--color-surface); -} -.dark .child-link-pill:hover { - background-color: var(--color-brand); - color: var(--color-text-inverse); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} -/* Responsive adjustments */ -@media (max-width: 768px) { - .child-links-container { - padding-top: 0.5rem; - } - - .child-link-pill { - font-size: 0.7rem; - padding: 0.2rem 0.6rem; - } -} -/* Animation for child links appearance */ -.child-link-item { - animation: child-link-appear 0.3s ease-out; - animation-fill-mode: both; -} -.child-link-item:nth-child(1) { animation-delay: 0.1s; } -.child-link-item:nth-child(2) { animation-delay: 0.15s; } -.child-link-item:nth-child(3) { animation-delay: 0.2s; } -.child-link-item:nth-child(4) { animation-delay: 0.25s; } -.child-link-item:nth-child(5) { animation-delay: 0.3s; } -.child-link-item:nth-child(6) { animation-delay: 0.35s; } -.child-link-item:nth-child(7) { animation-delay: 0.4s; } -@keyframes child-link-appear { - from { - opacity: 0; - transform: translateY(10px) scale(0.9); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} -/* Cards Component - Resource cards, content metadata, and generic card styles */ -/* Base Card Styles */ -.card { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); -} -.card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -/* Enhanced hover states - Use architectural classes instead */ -.card { - /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ -} -.card:hover::before { - opacity: 1; -} -/* Resource Card Styles */ - - html:not(.no-transitions) .card--resource { - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - } -.card--resource { - /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow) -} -.card--resource::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -.card--resource { - /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ -} -.card--resource:hover::before { - opacity: 1; -} -.card--resource:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} -@media (max-width: 768px) { - - .card--resource:hover { - transform: var(--transform-lift-medium); - } -} -.dark .card--resource { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .card--resource:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -.card--resource { - animation: card-enter 0.4s ease-out; - animation-fill-mode: both; -} -.card-grid .card--resource { - height: 100%; - display: flex; - flex-direction: column; -} -.card-grid .card--resource:nth-child(1) { animation-delay: 0s; } -.card-grid .card--resource:nth-child(2) { animation-delay: 0.1s; } -.card-grid .card--resource:nth-child(3) { animation-delay: 0.2s; } -.card-grid .card--resource:nth-child(4) { animation-delay: 0.3s; } -.card--resource:has(.card__image) { - padding-top: 0; -} -.card--resource:has(.card__image) .card__content { - padding-top: 1.5rem; -} -.card--resource:has(.card__icon) .card__title { - margin-left: 3rem; - position: relative; -} -.card--resource:has(.card__icon) .card__content { - padding-left: 1rem; -} -.card--resource:has(.card__actions) { - padding-bottom: 1rem; -} -.card--resource:has(.card__actions) .card__content { - padding-bottom: 2rem; -} -.card--resource:has(a:hover) { - transform: var(--transform-lift-and-scale); - /* box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.12), - 0 4px 16px rgba(0, 0, 0, 0.08); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); - border-color: rgba(var(--color-brand-rgb), 0.3); -} -.card--resource { - /* padding: 1.5rem; */ - padding: 1rem; - margin-bottom: 1rem; -} -.card--resource h3 { - color: var(--color-text-primary); - font-weight: 600; - font-size: 1.125rem; - line-height: 1.3; - margin-bottom: 0.75rem; - transition: color 0.2s ease; -} -.card--resource:hover h3 { - color: var(--color-brand); -} -.card--resource p { - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.875rem; - margin-bottom: 1rem; -} -.card--resource a { - color: var(--color-brand); - text-decoration: none; - font-weight: 500; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - position: relative; -} -.card--resource a::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: var(--color-brand); - /* transition: width 0.3s ease; */ - transition: width var(--timing-medium) var(--easing-standard); -} -.card--resource a:hover::after { - width: 100%; -} -.card--resource .icon { - width: 1.5rem; - height: 1.5rem; - margin-bottom: 0.75rem; - filter: brightness(0.8); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} -.card--resource:hover .icon { - filter: brightness(1); - transform: scale(1.05); -} -/* Content Metadata Styles */ -.content-metadata { - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - padding: 1rem 1.25rem; - font-size: 0.875rem; - color: var(--color-text-secondary); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; -} -.content-metadata:hover { - border-color: var(--color-brand); - color: var(--color-text-primary); -} -.content-metadata .icon { - width: 1rem; - height: 1rem; - flex-shrink: 0; - opacity: 0.7; - transition: opacity 0.2s ease; -} -.content-metadata:hover .icon { - opacity: 1; -} -.content-metadata time, -.content-metadata span { - white-space: nowrap; -} -/* Article Card Styles */ - - html:not(.no-transitions) .article-card { - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - } -.article-card { - /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow) -} -.article-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -.article-card { - /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ -} -.article-card:hover::before { - opacity: 1; -} -.article-card:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} -@media (max-width: 768px) { - - .article-card:hover { - transform: var(--transform-lift-medium); - } -} -.dark .article-card { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .article-card:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -.article-card { - animation: card-enter 0.4s ease-out; - animation-fill-mode: both; -} -.card-grid .article-card { - height: 100%; - display: flex; - flex-direction: column; -} -.card-grid .article-card:nth-child(1) { animation-delay: 0s; } -.card-grid .article-card:nth-child(2) { animation-delay: 0.1s; } -.card-grid .article-card:nth-child(3) { animation-delay: 0.2s; } -.card-grid .article-card:nth-child(4) { animation-delay: 0.3s; } -.article-card:has(.card__image) { - padding-top: 0; -} -.article-card:has(.card__image) .card__content { - padding-top: 1.5rem; -} -.article-card:has(.card__icon) .card__title { - margin-left: 3rem; - position: relative; -} -.article-card:has(.card__icon) .card__content { - padding-left: 1rem; -} -.article-card:has(.card__actions) { - padding-bottom: 1rem; -} -.article-card:has(.card__actions) .card__content { - padding-bottom: 2rem; -} -.article-card:has(a:hover) { - transform: var(--transform-lift-and-scale); - /* box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.12), - 0 4px 16px rgba(0, 0, 0, 0.08); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); - border-color: rgba(var(--color-brand-rgb), 0.3); -} -.article-card { - padding: 1.5rem; - margin-bottom: 1.5rem; - display: flex; - flex-direction: column; - height: 100%; -} -.article-card .card-header { - display: flex; - align-items: flex-start; - gap: 1rem; - margin-bottom: 1rem; -} -.article-card .card-icon { - width: 2rem; - height: 2rem; - flex-shrink: 0; - filter: brightness(0.8); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} -.article-card:hover .card-icon { - filter: brightness(1); - transform: scale(1.05); -} -.article-card .card-title { - color: var(--color-text-primary); - font-weight: 600; - font-size: 1.125rem; - line-height: 1.3; - margin: 0; - transition: color 0.2s ease; -} -.article-card:hover .card-title { - color: var(--color-brand); -} -.article-card .card-description { - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.875rem; - margin-bottom: 1rem; - flex: 1; -} -.article-card .card-meta { - color: var(--color-text-tertiary); - font-size: 0.75rem; - display: flex; - align-items: center; - gap: 0.5rem; - margin-top: auto; - padding-top: 1rem; - border-top: 1px solid var(--color-border-primary); -} -/* Interactive Card States */ -.card-interactive { - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.card-interactive:active { - transform: var(--transform-press-down); -} -/* Focus states for accessibility */ -.card:focus-within, -.resource-card:focus-within, -.article-card:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} -/* Responsive adjustments */ -@media (max-width: 768px) { - .resource-card, - .article-card { - padding: 1rem; - margin-bottom: 1rem; - } - - .card:hover, - .resource-card:hover, - .article-card:hover { - transform: var(--transform-lift-medium); - } - - .content-metadata { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -/* Dark mode enhancements */ -.dark .card, -.dark .resource-card, -.dark .content-metadata, -.dark .article-card { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .card:hover, -.dark .resource-card:hover, -.dark .article-card:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -/* Animation improvements */ -.card, -.resource-card, -.article-card { - animation: card-enter 0.4s ease-out; - animation-fill-mode: both; -} -@keyframes card-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} -/* Card grid layouts */ -.card-grid { - display: grid; - gap: 1.5rem; -} -.card-grid .card, -.card-grid .resource-card, -.card-grid .article-card { - height: 100%; - display: flex; - flex-direction: column; -} -/* Stagger animation for card grids */ -.card-grid .card:nth-child(1), -.card-grid .resource-card:nth-child(1), -.card-grid .article-card:nth-child(1) { animation-delay: 0s; } -.card-grid .card:nth-child(2), -.card-grid .resource-card:nth-child(2), -.card-grid .article-card:nth-child(2) { animation-delay: 0.1s; } -.card-grid .card:nth-child(3), -.card-grid .resource-card:nth-child(3), -.card-grid .article-card:nth-child(3) { animation-delay: 0.2s; } -.card-grid .card:nth-child(4), -.card-grid .resource-card:nth-child(4), -.card-grid .article-card:nth-child(4) { animation-delay: 0.3s; } -/* :has() Content-Aware Card Layouts */ -/* Cards with images get different padding */ -.card:has(.card__image) { - padding-top: 0; -} -.card:has(.card__image) .card__content { - padding-top: 1.5rem; -} -/* Cards with icons get enhanced layout */ -.card:has(.card__icon) .card__title { - margin-left: 3rem; - position: relative; -} -.card:has(.card__icon) .card__content { - padding-left: 1rem; -} -/* Resource cards with descriptions get enhanced spacing */ -.card--resource:has(.card__description) { - min-height: 180px; -} -.card--resource:has(.card__description) .card__footer { - margin-top: auto; - border-top: 1px solid var(--color-border-primary); - padding-top: 1rem; -} -/* Cards with actions get enhanced bottom padding */ -.card:has(.card__actions) { - padding-bottom: 1rem; -} -.card:has(.card__actions) .card__content { - padding-bottom: 2rem; -} -/* Interactive card states based on content */ -.card:has(a:hover) { - transform: var(--transform-lift-and-scale); - /* box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.12), - 0 4px 16px rgba(0, 0, 0, 0.08); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); - border-color: rgba(var(--color-brand-rgb), 0.3); -} -/* Glossary Component - Enhanced UX for glossary entries and navigation */ -/* Base Glossary Entry Styles */ -.glossary-entry { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-xl); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - margin-bottom: 1rem; -} -.glossary-entry::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -/* Enhanced hover states */ -.glossary-entry:hover { - border-color: var(--color-brand); - /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ -} -.glossary-entry:hover::before { - opacity: 1; -} -/* Focus states for accessibility */ -.glossary-entry:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: translateY(-2px); -} -/* Glossary entry content */ -.glossary-entry a { - display: block; - color: inherit; - text-decoration: none; - width: 100%; - position: relative; - z-index: 2; -} -.glossary-entry h2 { - color: var(--color-text-primary); - font-weight: 700; - font-size: 1.25rem; - line-height: 1.3; - margin-bottom: 0.5rem; - transition: color 0.2s ease; - position: relative; -} -.glossary-entry:hover h2 { - color: var(--color-brand); -} -.glossary-entry h2::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: linear-gradient( - 90deg, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.5) 100% - ); - transition: width 0.3s ease; -} -.glossary-entry:hover h2::after { - width: 100%; -} -/* Glossary entry descriptions */ -.glossary-entry p { - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.95rem; - margin: 0; - transition: color 0.2s ease; -} -.glossary-entry:hover p { - color: var(--color-text-primary); -} -/* Glossary letter headers */ -.glossary-entry + h1 { - color: var(--color-text-primary); - font-size: 2rem; - font-weight: 800; - margin: 3rem 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 3px solid var(--color-brand); - position: relative; -} -.glossary-entry + h1 a { - color: inherit; - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} -.glossary-entry + h1 a:hover { - color: var(--color-brand); - transform: translateX(4px); -} -/* First letter styling for glossary headers */ -h1[id] { - color: var(--color-text-primary); - font-size: 2rem; - font-weight: 800; - margin: 3rem 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 3px solid var(--color-brand); - position: relative; - scroll-margin-top: var(--header-offset, 64px); -} -h1[id] a { - color: inherit; - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: inline-block; -} -h1[id] a:hover { - color: var(--color-brand); - transform: translateX(4px); -} -h1[id]::before { - content: ''; - position: absolute; - bottom: -3px; - left: 0; - width: 100%; - height: 3px; - background: linear-gradient( - 90deg, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.3) 70%, - transparent 100% - ); -} -/* Glossary container */ -#enteries-container { - padding: 1rem 0; -} -/* Responsive adjustments */ -@media (max-width: 768px) { - .glossary-entry { - margin-bottom: 1rem; - padding: 1rem; - } - - .glossary-entry:hover { - transform: translateY(-2px); - } - - h1[id] { - font-size: 1.5rem; - margin: 2rem 0 1rem 0; - } -} -/* Dark mode enhancements */ -.dark .glossary-entry { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .glossary-entry:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -/* Animation improvements */ -.glossary-entry { - animation: glossary-enter 0.4s ease-out; - animation-fill-mode: both; -} -@keyframes glossary-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.98); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} -/* Stagger animation for multiple entries */ -.glossary-entry:nth-child(odd) { animation-delay: 0s; } -.glossary-entry:nth-child(even) { animation-delay: 0.1s; } -/* Glossary navigation enhancements */ -.glossary-nav { - position: sticky; - top: 2rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - border-radius: var(--radius-xl); - padding: 1rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - margin-bottom: 2rem; -} -.glossary-nav a { - display: inline-block; - padding: 0.5rem; - margin: 0.25rem; - border-radius: var(--radius-lg); - color: var(--color-text-secondary); - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - font-weight: 500; -} -.glossary-nav a:hover { - background-color: var(--color-brand); - color: var(--color-text-inverse); - transform: translateY(-1px); -} -/* Quicklinks Component - Enhanced UX for quickstart/feature tiles */ -/* Base Quicklinks Container */ -.quicklinks { - margin-bottom: 1.5rem; - position: relative; -} -.quicklinks--home { - padding-bottom: 1rem; -} -/* Quicklinks Grid */ -.quicklinks__grid { - display: grid; - grid-template-columns: 1fr; - gap: 1.5rem; - - /* Responsive grid */ - @media (min-width: 768px) { - grid-template-columns: repeat(2, 1fr); - gap: 1.75rem; - } - - @media (min-width: 1280px) { - grid-template-columns: repeat(2, 1fr); - gap: 2rem; - } -} -/* Quicklinks Item - Compact distinctive call-to-action card design */ -.quicklinks__item { - position: relative; - padding: 1.25rem; - display: flex; - flex-direction: column; - gap: 0.75rem; - min-height: 160px; - - /* Distinctive card styling - not like regular tiles */ - background: linear-gradient( - 145deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.03) 50%, - var(--color-bg-secondary) 100% - ); - border: 2px solid var(--color-border-primary); - border-radius: var(--radius-card); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.06), - 0 1px 4px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: - var(--elevation-2), - var(--elevation-outline), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - - /* Accent border - distinctive feature */ - border-left: 3px solid var(--color-brand); - - /* Optimized transition for performance */ - transition: var(--transition-interactive); - overflow: hidden; /* Essential for ripple effects */ - cursor: pointer; -} -.quicklinks__item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.06); - opacity: 0; - /* transition: opacity 0.2s ease; */ - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} -.quicklinks__item:hover { - transform: translateY(-3px); - border-color: var(--color-brand); - border-left-color: var(--color-brand-2); - /* box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.12), - 0 4px 8px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} -.quicklinks__item:hover::before { - opacity: 1; -} -/* Quicklinks Header */ -.quicklinks__header { - display: flex; - align-items: flex-start; - gap: 0.5rem; - margin-bottom: 0.25rem; -} -/* Quicklinks Icon - Compact design */ -.quicklinks__icon { - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - padding: 0.25rem; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.05) 100% - ); - border-radius: var(--radius-lg); - border: 1px solid rgba(var(--color-brand-rgb), 0.2); - filter: brightness(0.9); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - margin-top: 0; -} -.quicklinks__item:hover .quicklinks__icon { - background: linear-gradient( - 135deg, - var(--color-brand) 0%, - var(--color-brand-2) 100% - ); - border-color: var(--color-brand); - filter: brightness(1) saturate(1.2); - transform: scale(1.05); -} -/* Target the actual SVG/image inside the icon container */ -.quicklinks__item:hover .quicklinks__icon img, -.quicklinks__item:hover .quicklinks__icon svg { - filter: brightness(0) invert(1); -} -/* Quicklinks Title - Compact but prominent */ -.quicklinks__title { - color: var(--color-text-primary); - font-size: 1.125rem; - font-weight: 700; - font-family: var(--font-brand); - line-height: 1.3; - margin: 0; - /* transition: color 0.2s ease; */ - transition: color var(--timing-fast) var(--easing-standard); - position: relative; - letter-spacing: -0.025em; -} -.quicklinks__item:hover .quicklinks__title { - color: var(--color-brand); -} -.quicklinks__title::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: var(--color-brand); - border-radius: 1px; - /* transition: width 0.2s ease; */ - transition: width var(--timing-fast) var(--easing-standard); -} -.quicklinks__item:hover .quicklinks__title::after { - width: 100%; -} -/* Quicklinks Description */ -.quicklinks__description { - color: var(--color-text-secondary); - font-size: 0.8125rem; - line-height: 1.5; - margin: 0; - flex: 1; - /* transition: color 0.2s ease; */ - transition: color var(--timing-fast) var(--easing-standard); - font-family: var(--font-body); -} -.quicklinks__item:hover .quicklinks__description { - color: var(--color-text-primary); -} -/* Quicklinks Actions Container */ -.quicklinks__actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-top: auto; - padding-top: 0.5rem; - border-top: 1px solid var(--color-border-primary); - /* transition: border-color 0.2s ease; */ - transition: border-color var(--timing-fast) var(--easing-standard); -} -.quicklinks__item:hover .quicklinks__actions { - border-color: var(--color-brand); -} -/* Quicklinks Action Links - Compact CTA buttons */ -.quicklinks__link { - position: relative; - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.5rem 0.875rem; - background: var(--color-brand); - border: 1px solid var(--color-brand); - border-radius: var(--radius-lg); - color: var(--color-text-inverse); - text-decoration: none; - font-size: 0.75rem; - font-weight: 600; - font-family: var(--font-brand); - text-transform: uppercase; - letter-spacing: 0.25px; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - overflow: hidden; /* Enable ripple effects */ - cursor: pointer; - /* box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.25); */ - box-shadow: var(--elevation-brand-subtle); -} -.quicklinks__link:hover { - background: var(--color-brand-2); - border-color: var(--color-brand-2); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.35); */ - box-shadow: var(--elevation-brand-medium); -} -.quicklinks__link:active { - transform: translateY(0); -} -/* Enhanced focus states for accessibility */ -.quicklinks__link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - /* box-shadow: - 0 2px 6px rgba(var(--color-brand-rgb), 0.25), - 0 0 0 2px var(--color-surface), - 0 0 0 4px var(--color-brand); */ /* Inverted double focus ring */ - box-shadow: - var(--elevation-brand-subtle), - 0 0 0 2px var(--color-surface), - 0 0 0 4px var(--color-brand); -} -/* Enhanced focus for quicklinks items */ -.quicklinks__item:focus { - outline: 2px solid transparent; - outline-offset: 2px; - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.06), - 0 1px 4px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); */ /* Double focus ring */ - box-shadow: - var(--elevation-2), - var(--elevation-outline), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); -} -/* External link indicator */ -.quicklinks__link[href^="http"]::after { - content: '↗'; - margin-left: 0.25rem; - font-size: 0.75em; - opacity: 0.7; - transition: opacity 0.2s ease; -} -.quicklinks__link[href^="http"]:hover::after { - opacity: 1; -} -/* Responsive adjustments */ -@media (max-width: 768px) { - .quicklinks__grid { - gap: 1.25rem; - } - - .quicklinks__item { - padding: 1rem; - min-height: 140px; - } - - .quicklinks__item:hover { - transform: var(--transform-lift-medium); - } - - .quicklinks__icon { - width: 1.375rem; - height: 1.375rem; - padding: 0.25rem; - } - - .quicklinks__title { - font-size: 1rem; - font-weight: 700; - } - - .quicklinks__description { - font-size: 0.75rem; - } - - .quicklinks__actions { - flex-direction: column; - gap: 0.375rem; - padding-top: 0.375rem; - } - - .quicklinks__link { - justify-content: center; - text-align: center; - padding: 0.5rem 0.75rem; - font-size: 0.6875rem; - } -} -@media (max-width: 480px) { - .quicklinks__item { - padding: 0.875rem; - min-height: 120px; - gap: 0.5rem; - } - - .quicklinks__header { - gap: 0.375rem; - margin-bottom: 0.125rem; - } - - .quicklinks__icon { - width: 1.25rem; - height: 1.25rem; - padding: 0.1875rem; - } - - .quicklinks__title { - font-size: 0.9375rem; - } -} -/* Dark mode enhancements */ -.dark .quicklinks__item { - background: linear-gradient( - 145deg, - rgba(var(--color-surface), 0.9) 0%, - rgba(var(--color-brand-rgb), 0.05) 50%, - rgba(var(--color-bg-secondary), 0.7) 100% - ); - border-color: var(--color-border-secondary); - /* box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); */ - box-shadow: - var(--elevation-8), - var(--elevation-2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .quicklinks__item:hover { - border-color: var(--color-brand); - /* box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.4), - 0 8px 32px rgba(var(--color-brand-rgb), 0.3), - 0 0 40px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: - var(--elevation-hover-4), - var(--elevation-brand-medium), - var(--elevation-brand-glow), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -.dark .quicklinks__icon { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.15) 0%, - rgba(var(--color-brand-rgb), 0.08) 100% - ); - border-color: rgba(var(--color-brand-rgb), 0.3); -} -.dark .quicklinks__item:hover .quicklinks__icon { - background: linear-gradient( - 135deg, - var(--color-brand) 0%, - var(--color-brand-2) 100% - ); - border-color: var(--color-brand); -} -/* Target the actual SVG/image inside the icon container for dark mode */ -.dark .quicklinks__item:hover .quicklinks__icon img, -.dark .quicklinks__item:hover .quicklinks__icon svg { - filter: brightness(0) invert(1); -} -/* Animation improvements - simplified for performance */ -.quicklinks__item { - animation: quicklinks-enter 0.3s ease-out; - animation-fill-mode: both; -} -@keyframes quicklinks-enter { - from { - opacity: 0; - transform: translateY(15px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -/* Stagger animation for multiple items */ -.quicklinks__item:nth-child(1) { animation-delay: 0s; } -.quicklinks__item:nth-child(2) { animation-delay: 0.1s; } -.quicklinks__item:nth-child(3) { animation-delay: 0.2s; } -.quicklinks__item:nth-child(4) { animation-delay: 0.3s; } -/* Loading state placeholders */ -.quicklinks--loading .quicklinks__item { - background: linear-gradient(90deg, - var(--color-surface) 25%, - var(--color-bg-secondary) 50%, - var(--color-surface) 75%); - background-size: 200% 100%; - animation: quicklinks-loading 2s infinite; -} -@keyframes quicklinks-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} -/* Print styles */ -@media print { - .quicklinks__item { - -moz-column-break-inside: avoid; - break-inside: avoid; - border: 1px solid #ccc; - margin-bottom: 1rem; - } - - .quicklinks__link { - color: #000 !important; - text-decoration: underline; - } -} -/* Next-Prev Navigation Component - Enhanced UX for page navigation */ -/* Base Navigation Container */ -[data-component="article-next-prev"] { - margin-top: 2rem; - margin-bottom: 1rem; - position: relative; -} -/* Next-Prev Navigation Link Base Styles - Scoped to avoid topbar conflicts */ -[data-component="article-next-prev"] .article-next-prev__link { - position: relative; - display: flex; - align-items: center; - padding: 1.25rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - color: var(--color-text-primary); - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - overflow: hidden; - min-height: 4rem; - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -[data-component="article-next-prev"] .article-next-prev__link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.04); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} -/* Navigation Link Hover States */ -[data-component="article-next-prev"] .article-next-prev__link:hover { - border-color: var(--color-brand); - transform: translateY(-2px); - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.1), - 0 2px 8px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} -[data-component="article-next-prev"] .article-next-prev__link:hover::before { - opacity: 1; -} -[data-component="article-next-prev"] .article-next-prev__link:hover div > div[class*="font-medium"], -[data-component="article-next-prev"] .article-next-prev__link:hover .article-next-prev__title { - color: var(--color-brand) !important; -} -[data-component="article-next-prev"] .article-next-prev__link:hover svg { - color: var(--color-brand); - transform: translateX(2px); -} -/* Previous link - align icon to left, slide left on hover */ -[data-component="article-next-prev"] .article-next-prev__link:hover:has(svg[class*="mr-"]) svg { - transform: translateX(-2px); -} -/* Navigation Link Typography */ -[data-component="article-next-prev"] .article-next-prev__link .text-xs { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -/* Target the title content specifically, avoiding Tailwind utility classes */ -[data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], -[data-component="article-next-prev"] .article-next-prev__title { - color: var(--color-text-primary) !important; - font-size: 0.9375rem !important; - font-weight: 600 !important; - line-height: 1.3 !important; - transition: color 0.2s ease !important; - font-family: var(--font-brand) !important; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .text-xs { - color: var(--color-text-secondary); -} -/* SVG Icons */ -[data-component="article-next-prev"] .article-next-prev__link svg { - color: var(--color-text-secondary); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - flex-shrink: 0; -} -/* Disabled Navigation Links */ -[data-component="article-next-prev"] .article-next-prev__link--disabled { - background: linear-gradient( - 135deg, - var(--color-bg-secondary) 0%, - rgba(var(--color-surface), 0.5) 100% - ); - border-color: var(--color-border-secondary); - color: var(--color-text-tertiary); - cursor: not-allowed; - pointer-events: none; - opacity: 0.6; -} -[data-component="article-next-prev"] .article-next-prev__link--disabled svg { - color: var(--color-text-tertiary); - opacity: 0.5; -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .text-xs, -[data-component="article-next-prev"] .article-next-prev__link--disabled div > div[class*="font-medium"] { - color: var(--color-text-tertiary) !important; -} -/* Focus States for Accessibility */ -[data-component="article-next-prev"] .article-next-prev__link:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} -[data-component="article-next-prev"] .article-next-prev__link:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} -/* Enhanced Visual Hierarchy */ -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { - border-left: 3px solid transparent; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-left-color var(--timing-fast) var(--easing-standard); -} -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { - border-right: 3px solid transparent; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-right-color var(--timing-fast) var(--easing-standard); -} -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"]:hover { - border-left-color: var(--color-brand); -} -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"]:hover { - border-right-color: var(--color-brand); -} -/* Responsive Adjustments */ -@media (max-width: 768px) { - [data-component="article-next-prev"] { - margin-top: 1.5rem; - } - - [data-component="article-next-prev"] .article-next-prev__link { - padding: 1rem; - min-height: 3.5rem; - } - - [data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], - [data-component="article-next-prev"] .article-next-prev__title { - font-size: 0.875rem !important; - } - - [data-component="article-next-prev"] .article-next-prev__link .text-xs { - font-size: 0.6875rem; - } - - [data-component="article-next-prev"] .article-next-prev__link svg { - width: 1rem; - height: 1rem; - } -} -@media (max-width: 480px) { - [data-component="article-next-prev"] { - flex-direction: column; - gap: 0.75rem; - } - - [data-component="article-next-prev"] .article-next-prev__link { - padding: 0.875rem; - min-height: 3rem; - flex: none; - } - - [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { - border-left: none; - border-top: 3px solid transparent; - } - - [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { - border-right: none; - border-bottom: 3px solid transparent; - } - - [data-component="article-next-prev"] .nav-link[aria-label*="Previous"]:hover { - border-left-color: transparent; - border-top-color: var(--color-brand); - } - - [data-component="article-next-prev"] .nav-link[aria-label*="Next"]:hover { - border-right-color: transparent; - border-bottom-color: var(--color-brand); - } -} -/* Dark Mode Enhancements */ -.dark [data-component="article-next-prev"] .article-next-prev__link { - background: linear-gradient( - 135deg, - rgba(var(--color-surface), 0.8) 0%, - rgba(var(--color-bg-secondary), 0.6) 100% - ); - border-color: var(--color-border-secondary); - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark [data-component="article-next-prev"] .article-next-prev__link:hover { - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -.dark [data-component="article-next-prev"] .article-next-prev__link--disabled { - background: linear-gradient( - 135deg, - rgba(var(--color-bg-secondary), 0.4) 0%, - rgba(var(--color-surface), 0.2) 100% - ); - border-color: rgba(var(--color-border-secondary), 0.5); -} -/* Animation Enhancements */ -[data-component="article-next-prev"] .article-next-prev__link { - animation: nav-link-enter 0.3s ease-out; - animation-fill-mode: both; -} -@keyframes nav-link-enter { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -/* Stagger animation for prev/next pair */ -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { animation-delay: 0s; } -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { animation-delay: 0.1s; } -/* Loading state placeholders */ -[data-component="article-next-prev"] .article-next-prev__link--loading { - background: linear-gradient(90deg, - var(--color-surface) 25%, - var(--color-bg-secondary) 50%, - var(--color-surface) 75%); - background-size: 200% 100%; - animation: nav-link-loading 2s infinite; -} -@keyframes nav-link-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} -/* Print styles */ -@media print { - [data-component="article-next-prev"] .article-next-prev__link { - border: 1px solid #ccc; - box-shadow: none; - background: white; - } - - [data-component="article-next-prev"] .nav-link svg { - display: none; - } -} -/* Tutorial Component - Enhanced tutorial system with modern UX patterns */ -/* ========================================================================== - Tutorial Overview Components - ========================================================================== */ -.tutorial-overview { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 2rem; - margin: 2rem 0; - padding: 0 1rem; -} -.tutorial-card { - position: relative; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border-radius: 1rem; - border: 1px solid var(--color-border-primary); - padding: 2rem; - /* ✅ FIXED: Specific properties instead of transition: all */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -.tutorial-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -.tutorial-card:hover { - transform: translateY(-8px); - border-color: var(--color-brand); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.15), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} -.tutorial-card:hover::before { - opacity: 1; -} -.tutorial-card__header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1rem; - flex-wrap: wrap; - gap: 0.5rem; -} -.tutorial-card__badges { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} -.tutorial-card__title { - color: var(--color-text-primary); - font-size: 1.5rem; - font-weight: 700; - line-height: 1.3; - margin: 1rem 0 0.75rem 0; - transition: color 0.2s ease; -} -.tutorial-card:hover .tutorial-card__title { - color: var(--color-brand); -} -.tutorial-card__description { - color: var(--color-text-secondary); - line-height: 1.6; - margin-bottom: 1.5rem; - font-size: 0.95rem; -} -.tutorial-card__metadata { - margin-top: auto; - padding-top: 1rem; - border-top: 1px solid var(--color-border-primary); -} -/* Tutorial Badges */ -.tutorial-badge { - display: inline-flex; - align-items: center; - padding: 0.375rem 0.875rem; - border-radius: 9999px; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} -.tutorial-badge--difficulty { - background: linear-gradient(135deg, var(--color-brand-3) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} -.tutorial-badge--time { - background-color: var(--color-bg-tertiary); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-secondary); -} -.tutorial-badge--prerequisites { - background: linear-gradient(135deg, var(--color-brand-5) 0%, var(--color-brand-6) 100%); - color: var(--color-text-primary); -} -/* Tutorial Progress Mini Display */ -.tutorial-progress-mini { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; -} -.progress-bar-mini { - flex: 1; - height: 6px; - background-color: var(--color-border-secondary); - border-radius: 3px; - overflow: hidden; - position: relative; -} -.progress-bar-mini__fill { - height: 100%; - background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - border-radius: 3px; - transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; -} -.progress-bar-mini__fill::after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 20px; - background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); - animation: progress-shine 2s infinite; -} -@keyframes progress-shine { - 0% { transform: translateX(-20px); opacity: 0; } - 50% { opacity: 1; } - 100% { transform: translateX(20px); opacity: 0; } -} -.progress-text { - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - white-space: nowrap; -} -/* Tutorial Actions */ -.tutorial-actions { - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} -.tutorial-actions__primary { - display: flex; - gap: 0.75rem; -} -.tutorial-actions__secondary { - display: flex; - gap: 0.5rem; -} -.bookmark-tutorial { - position: relative; - transition: transform var(--timing-fast) var(--easing-standard); -} -.bookmark-tutorial:hover { - transform: scale(1.1); -} -.bookmark-tutorial.bookmarked .bookmark-icon { - fill: var(--color-brand); - transform: scale(1.1); -} -/* ========================================================================== - Compact Progress Components (Primary) - ========================================================================== */ -.tutorial-progress-compact { - background: var(--color-surface); - border-radius: 0.75rem; - border: 1px solid var(--color-border-primary); - padding: 1rem; - margin: 1rem 0; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); -} -.tutorial-compact-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 0.75rem; - gap: 1rem; -} -.tutorial-compact-info { - flex: 1; - min-width: 0; -} -.tutorial-compact-breadcrumb { - display: flex; - align-items: center; - gap: 0.375rem; - margin-bottom: 0.375rem; - font-size: 0.875rem; -} -.tutorial-parent-link { - color: var(--color-text-secondary); - text-decoration: none; - font-weight: 500; - transition: color 0.2s ease; - white-space: nowrap; -} -.tutorial-parent-link:hover { - color: var(--color-brand); -} -.breadcrumb-separator { - color: var(--color-text-tertiary); - flex-shrink: 0; - width: 1rem; - height: 1rem; -} -.current-step-title { - color: var(--color-text-primary); - font-weight: 600; - font-size: 1rem; - line-height: 1.3; - margin: 0; -} -.tutorial-compact-meta { - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; - font-size: 0.875rem; -} -.step-counter { - color: var(--color-text-secondary); - font-weight: 500; - white-space: nowrap; -} -.progress-percentage { - color: var(--color-brand); - font-weight: 700; - white-space: nowrap; -} -.time-estimate { - color: var(--color-text-secondary); - background: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.375rem; - white-space: nowrap; - font-size: 0.8125rem; -} -.tutorial-compact-actions { - display: flex; - gap: 0.375rem; - flex-shrink: 0; -} -.btn-compact { - display: flex; - align-items: center; - justify-content: center; - width: 1.75rem; - height: 1.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - cursor: pointer; - flex-shrink: 0; -} -.btn-compact:hover { - background: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); -} -.btn-compact svg { - width: 0.875rem; - height: 0.875rem; -} -/* Compact Progress Bar */ -.tutorial-progress-bar { - position: relative; - margin-bottom: 0.75rem; -} -.progress-track { - height: 3px; - background: var(--color-border-secondary); - border-radius: 2px; - overflow: hidden; - margin-bottom: 0.625rem; - position: relative; -} -.progress-fill { - height: 100%; - background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - border-radius: 2px; - transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; -} -.progress-fill::after { - content: ''; - position: absolute; - top: 0; - right: -8px; - bottom: 0; - width: 8px; - background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); - animation: progress-shine 2s infinite; -} -.step-dots { - display: flex; - justify-content: space-between; - align-items: center; - position: relative; -} -.step-dot { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - font-size: 0.6875rem; - font-weight: 600; - text-decoration: none; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - position: relative; - z-index: 2; -} -.step-dot.completed { - background: var(--color-brand); - color: var(--color-text-inverse); - box-shadow: 0 2px 4px rgba(var(--color-brand-rgb), 0.2); -} -.step-dot.current { - background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.3); - animation: pulse-gentle 2s infinite; -} -.step-dot.pending { - background: var(--color-bg-tertiary); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-secondary); -} -.step-dot.pending:hover:not(.disabled) { - background: var(--color-surface-hover); - border-color: var(--color-brand); - transform: scale(1.1); -} -.step-dot.disabled { - opacity: 0.5; - cursor: not-allowed; - pointer-events: none; -} -.step-number { - font-size: 0.6875rem; - font-weight: 700; - line-height: 1; -} -.step-dot svg { - width: 0.75rem; - height: 0.75rem; -} -/* Expandable Progress Section */ -.tutorial-progress-expanded { - border-top: 1px solid var(--color-border-primary); - padding-top: 1rem; - margin-top: 1rem; -} -.tutorial-steps-list { - display: grid; - gap: 0.75rem; -} -.tutorial-step-item { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.5rem; - border-radius: 0.5rem; - transition: background-color 0.2s ease; -} -.tutorial-step-item:hover { - background: var(--color-surface-hover); -} -.tutorial-step-item.current { - background: var(--color-hover); -} -.step-indicator-small { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - flex-shrink: 0; -} -.step-indicator-small .current-indicator, -.step-indicator-small .pending-indicator { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.625rem; - font-weight: 700; - border-radius: 50%; -} -.step-indicator-small .current-indicator { - background: var(--color-brand); - color: var(--color-text-inverse); -} -.step-indicator-small .pending-indicator { - background: var(--color-bg-tertiary); - color: var(--color-text-secondary); -} -.step-info-small { - flex: 1; - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; -} -.step-link { - color: var(--color-text-primary); - text-decoration: none; - font-size: 0.875rem; - font-weight: 500; - transition: color 0.2s ease; -} -.step-link:hover { - color: var(--color-brand); -} -.step-title-disabled { - color: var(--color-text-tertiary); - font-size: 0.875rem; - font-weight: 500; -} -.step-time-small { - color: var(--color-text-tertiary); - font-size: 0.75rem; - background: var(--color-bg-tertiary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} -/* Compact Navigation */ -.tutorial-compact-nav { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.75rem; - border-top: 1px solid var(--color-border-primary); - padding-top: 0.75rem; - margin-top: 0.75rem; -} -/* ========================================================================== - Enhanced Progress Navigation (Legacy) - ========================================================================== */ -/* Legacy Progress Components (for backward compatibility) */ -.tutorial-progress { - background: var(--color-surface); - border-radius: 1rem; - border: 1px solid var(--color-border-primary); - padding: 2rem; - margin: 2rem 0; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} -.tutorial-progress__header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 2rem; - flex-wrap: wrap; - gap: 1rem; -} -.tutorial-title { - color: var(--color-text-primary); - font-size: 1.75rem; - font-weight: 700; - margin: 0; - line-height: 1.2; -} -.tutorial-meta { - display: flex; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} -.time-remaining { - font-size: 0.875rem; - color: var(--color-text-secondary); - background-color: var(--color-bg-tertiary); - padding: 0.5rem 1rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); -} -/* Progress Track */ -.tutorial-progress__track { - position: relative; - margin: 3rem 0; -} -.progress-line { - position: absolute; - top: 3rem; - left: 3rem; - right: 3rem; - height: 3px; - background-color: var(--color-border-secondary); - border-radius: 2px; - z-index: 1; -} -.progress-line::after { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 100%; - background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - border-radius: 2px; - width: var(--progress-width, 0%); - transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 0 10px rgba(var(--color-brand-rgb), 0.3); -} -.tutorial-steps { - display: flex; - justify-content: space-between; - align-items: flex-start; - position: relative; - z-index: 2; - gap: 1rem; -} -.tutorial-step { - display: flex; - flex-direction: column; - align-items: center; - max-width: 200px; - text-align: center; - flex: 1; - cursor: pointer; - transition: all 0.3s ease; -} -.tutorial-step:hover { - transform: translateY(-2px); -} -.tutorial-step.disabled { - cursor: not-allowed; - opacity: 0.6; -} -.tutorial-step.disabled:hover { - transform: none; -} -/* Step Indicators */ -.step-indicator { - width: 4rem; - height: 4rem; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 1rem; - position: relative; - transition: all 0.3s ease; - font-weight: 700; - font-size: 1.1rem; - border: 3px solid transparent; -} -.step-icon--complete { - background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - box-shadow: 0 4px 15px rgba(var(--color-brand-rgb), 0.3); -} -/* Checkmark handled by SVG, no need for ::before content */ -.step-icon--current { - background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - animation: pulse-gentle 2s infinite; - box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4); - border-color: var(--color-brand); -} -.step-icon--pending { - background-color: var(--color-bg-tertiary); - color: var(--color-text-secondary); - border-color: var(--color-border-secondary); -} -.step-icon--pending:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); -} -@keyframes pulse-gentle { - 0%, 100% { - transform: scale(1); - box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4), 0 0 0 0 rgba(var(--color-brand-rgb), 0.4); - } - 50% { - transform: scale(1.05); - box-shadow: 0 6px 25px rgba(var(--color-brand-rgb), 0.6), 0 0 0 15px rgba(var(--color-brand-rgb), 0); - } -} -/* Step Content */ -.step-content { - min-height: 80px; - display: flex; - flex-direction: column; - justify-content: flex-start; -} -.step-title { - color: var(--color-text-primary); - font-size: 1rem; - font-weight: 600; - margin: 0 0 0.5rem 0; - line-height: 1.3; -} -.step-description { - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.4; - margin: 0 0 0.5rem 0; -} -.step-time { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - background-color: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.375rem; - display: inline-block; -} -/* Progress Actions */ -.tutorial-progress__actions { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 2rem; - padding-top: 1.5rem; - border-top: 1px solid var(--color-border-primary); - gap: 1rem; -} -/* ========================================================================== - Interactive Content Components - ========================================================================== */ -/* Enhanced Code Blocks - Now used by render-codeblock.html */ -.code-block-enhanced { - background: var(--color-bg-tertiary); - border-radius: 0.75rem; - border: 1px solid var(--color-border-primary); - overflow: hidden; - margin: 1rem 0; - box-shadow: var(--glass-shadow); -} -.code-content { - background: var(--color-bg-tertiary); -} -.code-content pre { - margin: 0; - background: transparent; -} -.code-content code { - background: transparent; - padding: 0.75rem; - display: block; - overflow-x: auto; -} -/* Reduce default code font size; allow override via --code-font-size */ -.code-content pre, -.code-content code { - font-size: var(--code-font-size, 0.875rem); - line-height: 1.55; -} -.code-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0.75rem; - background: var(--color-surface); - border-bottom: 1px solid var(--color-border-primary); -} -.code-language { - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; - background-color: var(--color-bg-tertiary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} -.code-actions { - display: flex; - gap: 0.375rem; -} -.copy-code { - position: relative; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} -.copy-code.copied { - background-color: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} -/* Collapsible Sections */ -.tutorial-section { - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - margin: 1.5rem 0; - overflow: hidden; - background: var(--color-surface); -} -.section-header { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.25rem 1.5rem; - background: none; - border: none; - cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard); - text-align: left; -} -.section-header:hover { - background-color: var(--color-surface-hover); -} -.section-header[aria-expanded="true"] { - border-bottom: 1px solid var(--color-border-primary); -} -.section-title { - color: var(--color-text-primary); - font-size: 1.125rem; - font-weight: 600; - margin: 0; - line-height: 1.3; -} -.section-chevron { - width: 1.25rem; - height: 1.25rem; - color: var(--color-text-secondary); - transition: transform 0.3s ease; -} -.section-header[aria-expanded="true"] .section-chevron { - transform: rotate(180deg); -} -.section-content { - padding: 0 1.5rem; - max-height: 0; - opacity: 0; - overflow: hidden; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - padding var(--timing-medium) var(--easing-standard); - /* Tutorial-specific customization */ - --collapse-height-expanded: 2500px; - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-emphasized); -} -.section-content.expanded { - max-height: var(--collapse-height-expanded, 2500px); - opacity: 1; - padding: 1.5rem; -} -/* Step Validation */ -.step-validation { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - padding: 1.5rem; - margin: 2rem 0; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); -} -.validation-checklist h4 { - color: var(--color-text-primary); - font-size: 1.125rem; - font-weight: 600; - margin: 0 0 1rem 0; -} -.validation-item { - display: flex; - align-items: center; - padding: 0.75rem 0; - cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - padding var(--timing-fast) var(--easing-standard); - border-radius: 0.5rem; - margin-bottom: 0.5rem; -} -.validation-item:hover { - background-color: var(--color-surface-hover); - padding-left: 0.5rem; - padding-right: 0.5rem; -} -.validation-checkbox { - margin-right: 1rem; - width: 1.25rem; - height: 1.25rem; - accent-color: var(--color-brand); -} -.validation-text { - color: var(--color-text-primary); - font-weight: 500; - line-height: 1.5; -} -.validate-step { - margin-top: 1.5rem; - width: 100%; - transition: all 0.3s ease; -} -.validate-step:disabled { - opacity: 0.5; - cursor: not-allowed; - transform: none; -} -/* ========================================================================== - Responsive Design - ========================================================================== */ -@media (max-width: 1024px) { - .tutorial-overview { - grid-template-columns: 1fr; - gap: 1.5rem; - padding: 0 0.5rem; - } - - .tutorial-card { - padding: 1.5rem; - } - - .tutorial-progress { - padding: 1.5rem; - } - - .tutorial-steps { - gap: 0.75rem; - } - - .tutorial-step { - max-width: 150px; - } - - .step-indicator { - width: 3rem; - height: 3rem; - font-size: 1rem; - } -} -@media (max-width: 768px) { - .tutorial-overview { - padding: 0; - } - - .tutorial-card { - border-radius: 0.75rem; - margin: 0 0.5rem; - } - - .tutorial-card__header { - flex-direction: column; - align-items: flex-start; - gap: 0.75rem; - } - - /* Compact Progress Mobile */ - .tutorial-progress-compact { - margin: 0.75rem 0.5rem; - padding: 0.75rem; - border-radius: 0.5rem; - } - - .tutorial-compact-header { - flex-direction: column; - align-items: stretch; - gap: 0.75rem; - } - - .tutorial-compact-meta { - justify-content: space-between; - } - - .tutorial-compact-actions { - align-self: flex-end; - } - - .tutorial-compact-nav { - flex-direction: column; - gap: 0.75rem; - } - - .tutorial-compact-nav .btn { - width: 100%; - justify-content: center; - } - - .step-dots { - gap: 0.5rem; - overflow-x: auto; - padding: 0.25rem 0; - } - - .step-dot { - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - } - - /* Legacy tutorial progress mobile */ - .tutorial-progress { - margin: 1rem 0.5rem; - padding: 1rem; - border-radius: 0.75rem; - } - - .tutorial-progress__header { - flex-direction: column; - align-items: flex-start; - gap: 1rem; - } - - .tutorial-title { - font-size: 1.5rem; - } - - .tutorial-meta { - width: 100%; - justify-content: space-between; - } - - /* Mobile Step Layout */ - .tutorial-steps { - flex-direction: column; - gap: 1.5rem; - align-items: stretch; - } - - .tutorial-step { - flex-direction: row; - max-width: none; - text-align: left; - align-items: center; - padding: 1rem; - background-color: var(--color-surface); - border-radius: 0.75rem; - border: 1px solid var(--color-border-primary); - } - - .step-indicator { - margin-bottom: 0; - margin-right: 1rem; - flex-shrink: 0; - width: 3rem; - height: 3rem; - } - - .step-content { - min-height: auto; - flex: 1; - } - - .progress-line { - display: none; /* Hide connecting line on mobile */ - } - - .tutorial-progress__actions { - flex-direction: column; - gap: 1rem; - } - - .tutorial-progress__actions .btn { - width: 100%; - justify-content: center; - } - - /* Mobile Code Blocks */ - .code-header { - padding: 0.75rem 1rem; - flex-direction: column; - align-items: flex-start; - gap: 0.75rem; - } - - .code-actions { - width: 100%; - justify-content: flex-end; - } - - /* Mobile Sections */ - .section-header { - padding: 1rem 1.25rem; - } - - .section-content.expanded { - padding: 1rem 1.25rem 1.5rem; - } - - /* Mobile Validation */ - .step-validation { - margin: 1.5rem 0.5rem; - padding: 1.25rem; - } -} -@media (max-width: 480px) { - .tutorial-card { - margin: 0 0.25rem; - padding: 1.25rem; - } - - .tutorial-progress { - margin: 1rem 0.25rem; - padding: 0.75rem; - } - - .tutorial-title { - font-size: 1.25rem; - } - - .tutorial-step { - padding: 0.75rem; - } - - .step-indicator { - width: 2.5rem; - height: 2.5rem; - font-size: 0.9rem; - } - - .step-title { - font-size: 0.9rem; - } - - .step-description { - font-size: 0.8rem; - } -} -/* ========================================================================== - Dark Mode Adjustments - ========================================================================== */ -.dark .tutorial-card { - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .tutorial-card:hover { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -.dark .tutorial-progress { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} -.dark .code-block-enhanced { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} -.dark .tutorial-section { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); -} -.dark .step-validation { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} -/* ========================================================================== - Accessibility Enhancements - ========================================================================== */ -.tutorial-step:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} -.section-header:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} -.validation-item:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} -/* Reduced motion preferences */ -@media (prefers-reduced-motion: reduce) { - .tutorial-card, - .tutorial-step, - .step-indicator, - .progress-bar-mini__fill, - .progress-line::after { - transition: none; - } - - .step-icon--current { - animation: none; - } - - .progress-bar-mini__fill::after { - animation: none; - } -} -/* High contrast mode support */ -@media (prefers-contrast: high) { - .tutorial-card { - border-width: 2px; - } - - .tutorial-badge { - border: 1px solid currentColor; - } - - .step-indicator { - border-width: 2px; - } -} -/* Toast Notification Component - Dedicated CSS */ -/* Enhanced Toast Styles */ -.toast-notification { - /* Enhanced backdrop blur for modern glass effect */ - /* backdrop-filter: blur(20px) saturate(180%); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - - /* Smooth shadow that matches notice components */ - /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - - /* Ensure proper font rendering */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - /* Base positioning and sizing */ - position: fixed; - top: 1.5rem; - right: 1.5rem; - z-index: var(--z-toast, 9999); - max-width: 20rem; - width: 100%; - transform: translateX(100%); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-slow) var(--easing-emphasized), - opacity var(--timing-slow) var(--easing-emphasized); - border-radius: 0.75rem; - overflow: hidden; - border: 1px solid; -} -/* Toast content */ -.toast-notification__content { - display: flex; - align-items: flex-start; - padding: 1rem; - gap: 0.75rem; -} -.toast-notification__icon { - flex-shrink: 0; - margin-top: 0.125rem; - width: 1.25rem; - height: 1.25rem; -} -.toast-notification__message { - flex: 1; - min-width: 0; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - font-family: "NVIDIA", Arial, Helvetica, sans-serif; -} -.toast-notification__close { - flex-shrink: 0; - margin-left: 1rem; - color: rgba(156, 163, 175, 1); - transition: color 0.2s ease; - background: none; - border: none; - cursor: pointer; - padding: 0; - width: 1rem; - height: 1rem; -} -.toast-notification__close:hover { - color: rgba(107, 114, 128, 1); -} -/* Dark mode close button */ -.dark .toast-notification__close:hover { - color: rgba(209, 213, 219, 1); -} -/* Type-specific styling */ -/* Old hex-based colors commented in favor of tokens */ -/* .toast-notification--success { ... } */ -.toast-notification--success { - background: linear-gradient( - 135deg, - rgba(var(--color-success-rgb), 0.1) 0%, - rgba(var(--color-success-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-success-rgb), 0.2); - color: rgb(20, 83, 45); -} -.toast-notification--success .toast-notification__icon { color: var(--color-success); } -.dark .toast-notification--success { - color: rgb(187, 247, 208); -} -.toast-notification--error { - background: linear-gradient( - 135deg, - rgba(var(--color-danger-rgb), 0.1) 0%, - rgba(var(--color-danger-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: rgb(127, 29, 29); -} -.toast-notification--error .toast-notification__icon { color: var(--color-danger); } -.dark .toast-notification--error { - color: rgb(254, 202, 202); -} -.toast-notification--warning { - background: linear-gradient( - 135deg, - rgba(var(--color-warning-rgb), 0.1) 0%, - rgba(var(--color-warning-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-warning-rgb), 0.2); - color: rgb(120, 53, 15); -} -.toast-notification--warning .toast-notification__icon { color: var(--color-warning); } -.dark .toast-notification--warning { - color: rgb(254, 215, 170); -} -.toast-notification--info { - background: linear-gradient( - 135deg, - rgba(var(--color-info-rgb), 0.1) 0%, - rgba(var(--color-info-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-info-rgb), 0.2); - color: rgb(30, 58, 138); -} -.toast-notification--info .toast-notification__icon { color: var(--color-info); } -.dark .toast-notification--info { - color: rgb(191, 219, 254); -} -/* Animation states */ -.toast-notification--visible { - transform: translateX(0); -} -.toast-notification--hiding { - transform: translateX(100%); - opacity: 0; - scale: 0.95; -} -/* Enhanced animations */ -@keyframes toast-slide-in { - 0% { - transform: translateX(100%) scale(0.95); - opacity: 0; - } - 100% { - transform: translateX(0) scale(1); - opacity: 1; - } -} -.toast-notification--entering { - animation: toast-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); -} -/* Dark mode enhancements */ -.dark .toast-notification { - box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, 0.4), - 0 10px 10px -5px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -/* Mobile responsiveness */ -@media (max-width: 640px) { - .toast-notification { - left: 1rem; - right: 1rem; - max-width: none; - transform: translateY(-100%); - } - - .toast-notification--visible { - transform: translateY(0); - } - - .toast-notification--hiding { - transform: translateY(-100%); - } - - @keyframes toast-slide-in { - 0% { - transform: translateY(-100%) scale(0.95); - opacity: 0; - } - 100% { - transform: translateY(0) scale(1); - opacity: 1; - } - } -} -/* Stacking for multiple toasts */ -.toast-notification:nth-child(1) { z-index: 9999; } -.toast-notification:nth-child(2) { z-index: 9998; top: 5.5rem; } -.toast-notification:nth-child(3) { z-index: 9997; top: 9.5rem; } -.toast-notification:nth-child(4) { z-index: 9996; top: 13.5rem; } -/** - * Notebook Component Styles - * Modern, accessible styling for Jupyter notebook rendering - * Aligned with site-wide design system for consistency - * - * Features: - * - Unified code block styling with article content - * - Consistent button components across the site - * - Aligned typography and spacing patterns - * - Semantic color system integration - * - Performance optimizations for theme switching - * - Simplified container structure (reduced nesting) - * - Container queries for true responsive behavior - * - CSS logical properties for internationalization - */ -/* ======================================== - Container Query Context - ======================================== */ -.notebook { - container-type: inline-size; - container-name: notebook; -} -/* ======================================== - Core Notebook Container (consolidated into .notebook__cells) - ======================================== */ -/* ======================================== - Progressive Cell Visibility - ======================================== */ -/* Notebook cell wrapper functionality merged into .notebook-cell */ -.notebook-cell.notebook-cell-wrapper { - /* CSS containment for performance isolation */ - contain: layout style paint; - /* No transitions on wrapper to avoid layout issues */ -} -.notebook-cell--hidden { - /* ✅ FIXED: Use animation tokens instead of display: none */ - max-height: 0; - opacity: 0; - overflow: hidden; - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - transform: translateY(20px); -} -.notebook-cell--revealing { - /* ✅ FIXED: Use animation tokens for smooth transitions */ - max-height: var(--collapse-height-expanded, 2000px); - opacity: 1; - transform: translateY(0); - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); -} -@keyframes revealCell { - to { - opacity: 1; - transform: translateY(0); - } -} -/* ======================================== - Notebook Header - ======================================== */ -.notebook__header { - padding: 1.5rem 2rem; - border-bottom: 1px solid var(--color-border-primary); - background: var(--color-surface); - margin-bottom: 1rem; -} -/* Hide header if it's empty */ -.notebook__header:empty { - display: none; -} -.notebook__title { - font-size: 1.875rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; - line-height: 1.2; -} -.notebook__description { - color: var(--color-text-secondary); - font-size: 1.125rem; - margin: 0; - line-height: 1.5; -} -.notebook__metadata { - display: flex; - gap: 1rem; - margin-top: 1rem; - flex-wrap: wrap; -} -.notebook__metadata-item { - /* Align with site button/badge patterns */ - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.5rem; - background: var(--color-surface); - color: var(--color-text-secondary); - border-radius: 0.375rem; /* Match site border radius */ - border: 1px solid var(--color-border-primary); - font-size: 0.875rem; - font-weight: 500; -} -/* ======================================== - Notebook Cells Container - ======================================== */ -.notebook__cells { - /* Simplified container - no shadow since cells have their own */ - max-width: 100%; - margin: 0 auto; - padding: 0; - - /* Layout for cells */ - display: flex; - flex-direction: column; - gap: 0.75rem; - - /* Performance optimizations */ - contain: layout style; -} -/* Density variants based on data-view attribute */ -[data-view="compact"] .notebook__cells { - gap: 0.25rem; /* Much tighter cell spacing */ - padding: 0.25rem; /* Minimal container padding */ -} -[data-view="comfortable"] .notebook__cells { - gap: 2rem; /* More spacious cell spacing */ - padding: 2rem; /* Generous container padding */ -} -/* Reduce space for first cell */ -.notebook__cells > .notebook-cell-wrapper:first-child .notebook-cell.collapse { - margin-top: 0; -} -/* ======================================== - Individual Cell Styling (extends existing collapse) - ======================================== */ -.notebook-cell.collapse { - /* Notebook-specific styling for cells */ - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - margin: 0 !important; - --collapse-padding-expanded: 0; -} -/* ======================================== - Cell Headers (extends existing collapse headers) - ======================================== */ -.notebook-cell__header.collapse__header { - /* Notebook-specific header styling: narrower, glassmorphism */ - padding: 0.5rem 0.75rem; - background: var(--glass-bg); - border-color: var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); -} -/* Chevron/icon rotation synced to ARIA for notebook cells */ -.notebook-cell .collapse__header .collapse__icon { - transform: rotate(0deg); -} -.notebook-cell .collapse__header[aria-expanded="true"] .collapse__icon { - transform: rotate(90deg) !important; -} -/* Compact cell headers */ -[data-view="compact"] .notebook-cell__header.collapse__header { - padding: 0.375rem 0.75rem; /* Much more compact header padding */ -} -[data-view="comfortable"] .notebook-cell__header.collapse__header { - padding: 1.5rem 2.5rem; /* More generous header padding */ -} -.notebook-cell__type { - display: flex; - align-items: center; - gap: 0.75rem; -} -.notebook-cell__type-icon { - width: 1.25rem; - height: 1.25rem; - opacity: 0.8; - color: var(--color-brand); -} -.notebook-cell__type-text { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0; -} -.notebook-cell__execution-indicator { - font-size: 0.875rem; - font-weight: 400; - color: var(--color-text-secondary); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - margin-inline-start: 0.5rem; -} -/* Cell numbering - Jupyter style */ -.notebook-cell__number { - font-size: 0.75rem; - font-weight: 500; - color: var(--color-text-tertiary); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - background: var(--color-bg-secondary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - border: 1px solid var(--color-border-secondary); - min-width: 2rem; - text-align: center; - display: inline-flex; - align-items: center; - justify-content: center; -} -.notebook-cell--code .notebook-cell__number { - background: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.1); - color: var(--color-brand-3); - border-color: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.2); -} -.notebook-cell--markdown .notebook-cell__number { - background: color-mix(in srgb, rgb(134, 239, 172) 10%, transparent); - color: #16a34a; - border-color: color-mix(in srgb, rgb(134, 239, 172) 20%, transparent); -} -/* Execution status indicators */ -.notebook-cell__status { - font-size: 0.75rem; - font-weight: 500; - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} -.notebook-cell__status--executed { - background: color-mix(in srgb, rgb(34, 197, 94) 10%, transparent); - color: #16a34a; - border: 1px solid color-mix(in srgb, rgb(34, 197, 94) 20%, transparent); -} -.notebook-cell__status--pending { - background: color-mix(in srgb, rgb(251, 191, 36) 10%, transparent); - color: #d97706; - border: 1px solid color-mix(in srgb, rgb(251, 191, 36) 20%, transparent); -} -.notebook-cell__status--error { - background: color-mix(in srgb, rgb(239, 68, 68) 10%, transparent); - color: #dc2626; - border: 1px solid color-mix(in srgb, rgb(239, 68, 68) 20%, transparent); -} -/* ======================================== - Cell Content (extends existing collapse body) - ======================================== */ -.notebook-cell .collapse__body-content { - padding: 0; -} -/* Notebook cell body: align borders/background with glass style and avoid brand/green accents */ -.notebook-cell .collapse__body { - background: var(--glass-bg); - border-color: var(--glass-border-color); - /* Ensure body animates using data attributes on itself or parent */ - --collapse-padding-expanded: 0.75rem; -} -.notebook-cell.collapse[data-collapse-state="expanded"] .collapse__body, -.notebook-cell.collapse.expanded .collapse__body { - border-color: var(--glass-border-color); -} -/* Render Markdown cells as normal article content (less chrome) */ -.notebook-cell--markdown.collapse { - background: transparent; - border: none; - box-shadow: none !important; - transform: none !important; -} -.notebook-cell--markdown.collapse:hover { - box-shadow: none !important; - transform: none !important; -} -.notebook-cell--markdown .notebook-cell__header { - display: none; -} -.notebook-cell--markdown .collapse__body { - background: transparent; - border: none; -} -.notebook-cell--markdown .collapse__body-content { - padding: 0; -} -/* Compact cell content */ -[data-view="compact"] .notebook-cell .collapse__body-content { - padding: 0.5rem; /* Much more compact cell content */ -} -[data-view="comfortable"] .notebook-cell .collapse__body-content { - padding: 2.5rem; /* More generous cell content padding */ -} -/* ======================================== - Markdown Cells - ======================================== */ -.notebook-cell--markdown .notebook-cell__type-icon { - color: #16a34a; -} -.notebook-cell__markdown-content { - line-height: 1.7; -} -.notebook-cell__markdown-content h1, -.notebook-cell__markdown-content h2, -.notebook-cell__markdown-content h3, -.notebook-cell__markdown-content h4, -.notebook-cell__markdown-content h5, -.notebook-cell__markdown-content h6 { - /* Align with global heading styles from input.css */ - margin-top: 0; - margin-bottom: 1rem; - color: var(--color-text-primary); - font-weight: 700; - word-wrap: break-word; -} -.notebook-cell__markdown-content h1 { font-size: 1.875rem; font-weight: 900; } -.notebook-cell__markdown-content h2 { font-size: 1.5rem; } -.notebook-cell__markdown-content h3 { font-size: 1.25rem; } -.notebook-cell__markdown-content h4 { font-size: 1.125rem; } -.notebook-cell__markdown-content h5 { font-size: 1rem; } -.notebook-cell__markdown-content h6 { font-size: 0.875rem; } -.notebook-cell__markdown-content p { - /* Match #articleContent spacing pattern */ - margin: 0.75rem 0; - color: var(--color-text-primary); -} -.notebook-cell__markdown-content p:last-child { - margin-bottom: 0; -} -.notebook-cell__markdown-content ul, -.notebook-cell__markdown-content ol { - /* Match #articleContent list patterns */ - margin: 0.75rem 0; - padding-inline-start: 1.5rem; -} -.notebook-cell__markdown-content ul { - list-style-type: disc; - margin-inline-start: 1.5rem; -} -.notebook-cell__markdown-content strong { - /* Match #articleContent strong styling */ - font-family: var(--font-family-brand); - font-weight: 600; -} -.notebook-cell__markdown-content code { - /* Align with #articleContent code:not(pre code) styling */ - padding: 0.25rem; - border-radius: 0.25rem; - font-size: 0.75rem; - font-weight: 300; - background-color: var(--color-bg-secondary); - color: var(--color-brand-1); - font-family: var(--font-family-mono, RobotoMono, monospace); -} -/* Dark mode support for inline code */ -.dark .notebook-cell__markdown-content code { - color: var(--color-brand); -} -/* ======================================== - Code Cells - ======================================== */ -.notebook-cell--code .notebook-cell__type-icon { - color: var(--color-brand-3); /* Uses semantic color system */ -} -/* Notebook code cells now use .code-block-enhanced with proper corner radius handling */ -/* Fix border radius for code blocks with headers */ -.code-block-enhanced .code-header { - border-radius: 0.75rem 0.75rem 0 0; /* Only top corners rounded */ -} -.code-block-enhanced .code-content { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ -} -/* Target the actual highlighted code element that has the background */ -.code-block-enhanced .code-content .highlight { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ -} -.code-block-enhanced .code-content .highlight pre { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ -} -/* Copy button styling handled by .code-block-enhanced */ -/* ======================================== - Cell Outputs - ======================================== */ -.notebook-cell__outputs { - margin-top: 0.5rem; - display: flex; - flex-direction: column; - gap: 0.75rem; -} -/* Compact output spacing */ -[data-view="compact"] .notebook-cell__outputs { - margin-top: 0.5rem; - gap: 0.375rem; -} -[data-view="comfortable"] .notebook-cell__outputs { - margin-top: 1.5rem; - gap: 1rem; -} -.notebook-cell__output { - border-radius: 0.5rem; - overflow: hidden; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); -} -/* Stream Output */ -.notebook-cell__output--stream { - background: var(--color-bg-secondary); - color: #4ade80; - padding: 1rem; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 0.875rem; - line-height: 1.5; -} -.notebook-cell__output--stream pre { - margin: 0; - padding: 0; - background: transparent; - color: inherit; - white-space: pre-wrap; - word-break: break-word; -} -/* Execute Result Output */ -.notebook-cell__output--execute-result { - padding: 1rem; -} -.notebook-cell__output--execute-result .html-output { - margin-bottom: 1rem; -} -.notebook-cell__output--execute-result .html-output:last-child { - margin-bottom: 0; -} -.notebook-cell__output--execute-result .text-output { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-primary); - margin: 0; - padding: 0; - background: transparent; - white-space: pre-wrap; - word-break: break-word; -} -/* Display Data Output */ -.notebook-cell__output--display-data { - padding: 1rem; -} -.notebook-cell__output--display-data img { - max-width: 100%; - height: auto; - aspect-ratio: auto; /* Preserve natural ratio but allow override */ - -o-object-fit: contain; - object-fit: contain; - border-radius: 0.375rem; - box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); -} -/* For plots and charts, maintain square aspect ratio */ -.notebook-cell__output--display-data img[alt*="plot"], -.notebook-cell__output--display-data img[alt*="chart"], -.notebook-cell__output--display-data img[alt*="graph"] { - aspect-ratio: 4 / 3; -} -/* Error Output */ -.notebook-cell__output--error { - background: #7f1d1d; - color: #fee2e2; - border-color: #b91c1c; - padding: 1rem; -} -.notebook-cell__error-name { - font-weight: 700; - font-size: 1rem; - margin-bottom: 0.5rem; - color: #fca5a5; -} -.notebook-cell__error-value { - margin-bottom: 1rem; - font-weight: 500; - line-height: 1.5; -} -.notebook-cell__error-traceback { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 0.875rem; - line-height: 1.4; - opacity: 0.9; -} -.notebook-cell__traceback-line { - padding: 0.125rem 0; - border-inline-start: 2px solid #ef4444; - padding-inline-start: 0.75rem; - margin: 0.25rem 0; -} -/* Collapsible outputs for long content */ -.notebook-cell__output--collapsible { - position: relative; -} -.notebook-cell__output-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - transition: all 0.2s ease; -} -.notebook-cell__output-toggle:hover { - background: var(--color-bg-tertiary); - color: var(--color-text-primary); -} -.notebook-cell__output-toggle-icon { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} -.notebook-cell__output--collapsed .notebook-cell__output-toggle-icon { - transform: rotate(-90deg); -} -.notebook-cell__output-content { - transition: all 0.3s ease; -} -.notebook-cell__output--collapsed .notebook-cell__output-content { - /* ✅ FIXED: Use height-based collapse for smooth animation */ - max-height: 0; - opacity: 0; - overflow: hidden; - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard); -} -.notebook-cell__output-preview { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - color: var(--color-text-secondary); - font-size: 0.875rem; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - border-bottom: 1px solid var(--color-border-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -/* Output size indicators */ -.notebook-cell__output-size { - font-size: 0.75rem; - color: var(--color-text-tertiary); - margin-inline-start: auto; -} -/* ======================================== - Raw Cells - ======================================== */ -.notebook-cell--raw .notebook-cell__type-icon { - color: #9333ea; -} -.notebook-cell__raw-content { - background: var(--color-bg-secondary); - border-radius: 0.375rem; - padding: 1rem; - border: 1px solid var(--color-border-primary); -} -.notebook-cell__raw-content pre { - margin: 0; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 0.875rem; - line-height: 1.5; - white-space: pre-wrap; - word-break: break-word; -} -.notebook-cell__raw-content code { - background: transparent; - padding: 0; - color: var(--color-text-primary); -} -/* ======================================== - Density Toggle and Navigation - ======================================== */ -.notebook__toolbar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem 1rem; - background: var(--color-surface); - border-bottom: 1px solid var(--color-border-primary); - gap: 1rem; - flex-wrap: wrap; -} -.notebook__density-toggle { - display: flex; - align-items: center; - gap: 0.25rem; - background: var(--color-bg-secondary); - border-radius: 0.5rem; - padding: 0.25rem; - border: 1px solid var(--color-border-primary); -} -.notebook__density-btn { - padding: 0.375rem 0.75rem; - font-size: 0.75rem; - font-weight: 500; - border: none; - background: transparent; - color: var(--color-text-secondary); - border-radius: 0.25rem; - cursor: pointer; - transition: all 0.2s ease; - min-width: 4rem; - text-align: center; -} -.notebook__density-btn:hover { - background: var(--color-bg-tertiary); - color: var(--color-text-primary); -} -.notebook__density-btn--active { - background: var(--color-brand); - color: white; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} -.notebook__cell-counter { - font-size: 0.875rem; - color: var(--color-text-secondary); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} -.notebook__actions { - display: flex; - align-items: center; - gap: 0.5rem; -} -.notebook__nav-btn { - padding: 0.5rem; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); - color: var(--color-text-secondary); - border-radius: 0.375rem; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} -.notebook__nav-btn:hover { - background: var(--color-bg-secondary); - color: var(--color-text-primary); - border-color: var(--color-border-secondary); -} -.notebook__nav-btn svg { - width: 1rem; - height: 1rem; -} -/* Cell outline/navigation */ -.notebook__outline { - position: fixed; - top: 50%; - right: 1rem; - transform: translateY(-50%); - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 0.75rem; - box-shadow: var(--elevation-6); - max-height: 60vh; - overflow-y: auto; - width: 200px; - z-index: 50; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; -} -.notebook__outline--visible { - opacity: 1; - visibility: visible; -} -.notebook__outline-item { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.375rem 0.5rem; - font-size: 0.75rem; - color: var(--color-text-secondary); - cursor: pointer; - border-radius: 0.25rem; - transition: all 0.2s ease; - text-decoration: none; -} -.notebook__outline-item:hover { - background: var(--color-bg-secondary); - color: var(--color-text-primary); -} -.notebook__outline-item--active { - background: var(--color-brand); - color: white; -} -.notebook__outline-icon { - width: 0.75rem; - height: 0.75rem; - flex-shrink: 0; -} -/* ======================================== - Loading States and Performance Indicators - ======================================== */ -.notebook__performance-notice { - margin-bottom: 1.5rem; -} -.notebook-cell-wrapper { - /* Wrapper for lazy-loaded cells */ - margin-bottom: 0; -} -.notebook-cell--lazy { - /* Hidden cells waiting to be loaded */ - display: none; -} -.notebook-load-trigger { - display: flex; - align-items: center; - justify-content: center; - padding: 2rem; - color: var(--color-text-secondary); - font-size: 0.875rem; - border-top: 1px solid var(--color-border-primary); - margin-top: 2rem; -} -.loading-indicator { - display: flex; - align-items: center; - gap: 0.5rem; -} -.notebook-completion-indicator { - display: flex; - align-items: center; - justify-content: center; - padding: 1.5rem; - color: var(--color-text-secondary); - font-size: 0.875rem; - border-top: 1px solid var(--color-border-primary); - margin-top: 2rem; - background: var(--color-surface); - border-radius: 0.5rem; -} -/* ======================================== - Light Mode Enhancements - ======================================== */ -/* Light mode styles handled in .notebook__cells */ -.notebook-cell.collapse { - /* Light mode cell styling */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); - /* Add theme transition only to cells that need it */ - transition: var(--transition-elevation); -} -.notebook-cell.collapse:hover { - /* Enhanced light mode hover */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); - transform: translateY(-1px); -} -/* Light mode styling handled by .code-block-enhanced */ -.notebook-cell__output--stream { - /* Stream output styling with consistent colors */ - background: var(--color-bg-inverse); - color: var(--color-brand-2); -} -.notebook-cell__output--error { - /* Error output styling with semantic colors */ - background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.1); - color: var(--color-brand-7); - border-color: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.3); -} -.notebook-cell__output--error .notebook-cell__error-name { - color: var(--color-brand-7); - font-weight: 600; -} -.notebook-cell__traceback-line { - border-inline-start-color: var(--color-brand-7); -} -/* ======================================== - Dark Theme Support - ======================================== */ -/* Dark mode handled by individual cell shadows */ -.dark .notebook-cell.collapse { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); -} -.dark .notebook-cell.collapse:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); -} -/* Dark mode styling handled by .code-block-enhanced */ -.dark .notebook-cell__output--error { - background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.2); - color: var(--color-text-primary); - border-color: var(--color-brand-7); -} -.dark .notebook-cell__output--error .notebook-cell__error-name { - color: var(--color-brand-7); -} -.dark .notebook-cell__traceback-line { - border-inline-start-color: var(--color-brand-7); -} -/* ======================================== - Container Query Responsive Design - ======================================== */ -@container notebook (max-width: 768px) { - .notebook__cells { - margin: 0; - padding: 0; - } - - .notebook__header { - padding: 1rem 1.5rem; - } - - .notebook__title { - font-size: 1.5rem; - } - - .notebook__description { - font-size: 1rem; - } - - .notebook__cells { - gap: 0; - } - - .notebook-cell .collapse__body-content { - padding: 0; - } - - /* Compact mode on mobile should be even more compact */ - [data-view="compact"] .notebook__cells { - padding: 0; - gap: 0; - } - - [data-view="compact"] .notebook-cell .collapse__body-content { - padding: 0; - } - - /* Mobile code block styling handled by .code-block-enhanced */ - - .notebook__performance-notice { - margin: 0 1rem 1.5rem; - } - - /* Hide outline on mobile */ - .notebook__outline { - display: none; - } - - /* Stack toolbar on mobile */ - .notebook__toolbar { - flex-direction: column; - align-items: stretch; - gap: 0.75rem; - } - - .notebook__actions { - justify-content: center; - } -} -@container notebook (max-width: 480px) { - .notebook__metadata { - flex-direction: column; - gap: 0.5rem; - } - - .notebook-cell__header.collapse__header { - padding: 0.75rem 1rem; - } - - .notebook-cell .collapse__body-content { - padding: 0.75rem; - } - - /* Print code block styling handled by .code-block-enhanced */ - - .notebook-cell__type-text { - font-size: 0.875rem; - } - - .notebook__performance-notice { - margin: 0 0.75rem 1rem; - } -} -/* ======================================== - Print Styles - ======================================== */ -@media print { - .notebook__cells { - border: 1px solid #ccc; - -moz-column-break-inside: avoid; - break-inside: avoid; - margin: 0; - } - - .notebook-cell .copy-code, - .collapse__icon-wrapper, - .notebook__performance-notice, - .notebook-load-trigger, - .notebook-completion-indicator { - display: none !important; - } - - /* ✅ FIXED: Use standard collapse behavior with animation tokens */ - .notebook-cell .collapse__body { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing); - } - - .notebook-cell .collapse__body.expanded { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - } - - .notebook-cell { - -moz-column-break-inside: avoid; - break-inside: avoid; - page-break-inside: avoid; - box-shadow: none; - border: 1px solid #ddd; - margin-bottom: 1rem; - } - - .notebook-cell__outputs { - -moz-column-break-inside: avoid; - break-inside: avoid; - } - - /* Print code styling handled by .code-block-enhanced */ - - .notebook-cell__output--stream { - background: #f0f0f0 !important; - color: #333 !important; - } -} -/* ======================================== - Accessibility Enhancements - ======================================== */ -@media (prefers-reduced-motion: reduce) { - .notebook-cell, - .notebook-cell__toggle, - .notebook-cell__copy-btn, - .notebook-cell__toggle-icon { - transition: none; - } -} -@media (prefers-contrast: high) { - .notebook__cells { - --notebook-border: #111827; - --cell-border: #1f2937; - --cell-hover-border: #1d4ed8; - --cell-active-border: #2563eb; - } - - .dark .notebook__cells { - --notebook-border: #f3f4f6; - --cell-border: #d1d5db; - --cell-hover-border: #93c5fd; - --cell-active-border: #60a5fa; - } -} -/* ======================================== - Animation Keyframes - ======================================== */ -@keyframes notebook-cell-enter { - from { - opacity: 0; - transform: translateY(1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} -@keyframes copy-success { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.1); } -} -@keyframes copy-error { - 0%, 100% { transform: translateX(0); } - 25% { transform: translateX(-0.25rem); } - 75% { transform: translateX(0.25rem); } -} -/* ======================================== - Entry Animations - ======================================== */ -.notebook-cell { - animation: notebook-cell-enter 0.4s ease-out; - animation-delay: calc(var(--cell-index, 0) * 0.1s); - animation-fill-mode: both; -} -.notebook-cell__copy-btn--success { - animation: copy-success 0.3s ease-out; -} -.notebook-cell__copy-btn--error { - animation: copy-error 0.3s ease-out; -} -/* ======================================== - :has() Notebook Component Enhancements - ======================================== */ -/* Notebook cells with error states get enhanced styling */ -.notebook-cell:has(.notebook-cell__error-name) { - border-inline-start: 4px solid var(--color-danger); - background: linear-gradient( - 90deg, - color-mix(in srgb, rgb(239, 68, 68) 5%, transparent) 0%, - transparent 50% - ); - margin-inline-start: -1rem; - padding-inline-start: calc(1rem - 4px); -} -.notebook-cell:has(.notebook-cell__error-name) .collapse__icon-wrapper { - background: var(--color-danger); - color: white; - border-radius: 50%; -} -/* Cells with outputs get enhanced spacing */ -.notebook-cell:has(.notebook-cell__outputs) { - margin-bottom: 2rem; - border-bottom: 1px solid var(--color-border-secondary); - padding-bottom: 1.5rem; -} -.notebook-cell:has(.notebook-cell__outputs) .notebook-cell__outputs { - background: var(--color-surface); - border-radius: 0.5rem; - padding: 1rem; - margin-top: 1rem; -} -/* Interactive notebook cells on hover */ -.notebook-cell:has(.notebook-cell__copy-btn) { - transition: all 0.2s ease; -} -.notebook-cell:has(.notebook-cell__copy-btn:hover) { - background: rgba(var(--color-brand-rgb), 0.02); - border-radius: 0.5rem; - margin: 0.5rem 0; - padding: 0.5rem; -} -/* Notebook with metadata gets enhanced header */ -.notebook:has(.notebook__metadata) .notebook__header { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border-radius: 0.75rem 0.75rem 0 0; -} -/* Enhanced notebook title when description is present */ -.notebook__header:has(.notebook__description) .notebook__title { - margin-bottom: 1rem; - font-size: 2.25rem; -} -/* ======================================== - Modern CSS Features Summary - ======================================== */ -/* - * This notebook component showcases modern CSS techniques: - * - * ✅ Container Queries: - * - Responsive behavior based on container size, not viewport - * - @container notebook (max-width: 768px) replaces @media queries - * - * ✅ CSS Logical Properties: - * - margin-inline-start/end for better internationalization - * - border-inline-start for RTL language support - * - padding-inline-start for semantic spacing - * - * ✅ Modern Color Functions: - * - color-mix() for alpha blending instead of rgba() - * - More semantic and maintainable color mixing - * - * ✅ Aspect Ratio: - * - aspect-ratio property for consistent image display - * - object-fit: contain for proper image scaling - * - * ✅ Advanced Pseudo-classes: - * - :has() for parent selector functionality - * - :focus-visible for keyboard navigation - * - :focus-within for container focus states - * - * Browser Support: Modern features with graceful fallbacks - * Performance: CSS containment for layout isolation - */ -/* OpenAPI Component - Modular imports */ -/* OpenAPI Base Container & Section Headers */ -/* ========================================================================== - OpenAPI Base Container - ========================================================================== */ -.openapi-spec { - max-width: none; - margin: 0; - padding: 0; -} -.openapi-content { - display: flex; - flex-direction: column; - gap: 3rem; -} -/* ========================================================================== - Section Headers - ========================================================================== */ -.section-header { - margin-bottom: 2rem; - text-align: center; -} -.section-title { - font-family: var(--font-family-brand); - font-size: 2.5rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; - background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} -.section-description { - font-size: 1.125rem; - color: var(--color-text-secondary); - margin: 0; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} -/* OpenAPI Header */ -/* ========================================================================== - OpenAPI Header - ========================================================================== */ -.openapi-header { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 2px solid var(--color-border-primary); - border-radius: 1.5rem; - padding: 2rem; - margin-bottom: 2rem; - position: relative; - overflow: hidden; -} -.openapi-header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-accent-rgb), 0.05) 100% - ); - pointer-events: none; -} -.openapi-header__meta { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; - position: relative; -} -.openapi-header__badge { - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.1); - border: 1px solid rgba(var(--color-brand-rgb, 59, 130, 246), 0.2); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand, #3b82f6); - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} -.openapi-header__badge:hover { - background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.15); - border-color: rgba(var(--color-brand-rgb, 59, 130, 246), 0.3); - transform: translateY(-1px); -} -/* Version Badge */ -.openapi-header__badge--version { - background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.1); - border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.2); - color: var(--color-accent, #8b5cf6); -} -.openapi-header__badge--version:hover { - background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.15); - border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.3); -} -/* API Type Badge */ -.openapi-header__badge--type[data-api-type="REST"] { - background: rgba(var(--color-info-rgb), 0.1); - border-color: rgba(var(--color-info-rgb), 0.2); - color: var(--color-info); -} -.openapi-header__badge--type[data-api-type="GraphQL"] { - background: rgba(var(--color-danger-rgb), 0.1); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: var(--color-danger); -} -/* Maturity Badge */ -.openapi-header__badge--maturity[data-maturity="stable"] { - background: rgba(var(--color-success-rgb), 0.1); - border-color: rgba(var(--color-success-rgb), 0.2); - color: var(--color-success); -} -.openapi-header__badge--maturity[data-maturity="beta"] { - background: rgba(var(--color-warning-rgb), 0.1); - border-color: rgba(var(--color-warning-rgb), 0.2); - color: var(--color-warning); -} -.openapi-header__badge--maturity[data-maturity="alpha"] { - background: rgba(var(--color-danger-rgb), 0.1); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: var(--color-danger); -} -/* Stability Badge */ -.openapi-header__badge--stability { - background: rgba(var(--color-security-rgb), 0.1); - border-color: rgba(var(--color-security-rgb), 0.2); - color: var(--color-security); -} -.openapi-version { - font-family: var(--font-family-mono); -} -.openapi-header__version { - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - background: rgba(var(--color-accent-rgb), 0.1); - border: 1px solid rgba(var(--color-accent-rgb), 0.2); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-accent); -} -.api-version { - font-family: var(--font-family-mono); -} -.openapi-header__version-stat { - min-width: auto; - flex: none; - min-height: auto; - padding: 0.5rem 1rem; -} -.openapi-header__version-stat .overview-stat__value { - font-family: var(--font-family-mono); - font-size: 0.875rem; -} -.openapi-header__title { - font-family: var(--font-family-brand); - font-size: 3rem; - font-weight: 800; - margin: 0 0 1rem 0; - color: var(--color-text-primary); - position: relative; -} -.openapi-header__summary { - font-size: 1.25rem; - color: var(--color-text-secondary); - margin-bottom: 1rem; - position: relative; -} -.openapi-header__description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1.5rem; - position: relative; -} -.openapi-header__info { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; - position: relative; -} -.openapi-contact, -.openapi-license, -.openapi-terms { - background: rgba(255, 255, 255, 0.5); - padding: 1.5rem; - border-radius: 1rem; - border: 1px solid var(--color-border-primary); -} -.openapi-contact h3, -.openapi-license h3, -.openapi-terms h3 { - margin: 0 0 1rem 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); -} -.contact-name, -.contact-email, -.contact-url, -.license-name, -.terms-link { - margin-bottom: 0.5rem; -} -.contact-email a, -.contact-url a, -.license-name a, -.terms-link a { - color: var(--color-brand); - text-decoration: none; - transition: color 0.2s ease; -} -.contact-email a:hover, -.contact-url a:hover, -.license-name a:hover, -.terms-link a:hover { - color: var(--color-accent); - text-decoration: underline; -} -/* ========================================================================== - :has() Content-Aware Header Enhancements - ========================================================================== */ -/* Header with description gets enhanced layout */ -.openapi-header:has(.openapi-header__description) { - padding-bottom: 2.5rem; -} -.openapi-header:has(.openapi-header__description) .openapi-header__title { - margin-bottom: 1.25rem; -} -/* Header without info section is more compact */ -.openapi-header:not(:has(.openapi-header__info *)) .openapi-header__description { - margin-bottom: 0; -} -/* Meta section adapts based on version presence */ -.openapi-header__meta:has(.openapi-header__version-stat) { - gap: 1.5rem; - align-items: stretch; -} -/* Info section adapts to number of sections */ -.openapi-header__info:has(.openapi-contact:only-child) { - grid-template-columns: 1fr; - max-width: 400px; -} -.openapi-header__info:has(.openapi-contact + .openapi-license:not(+ *)) { - grid-template-columns: repeat(2, 1fr); -} -.openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); -} -/* Enhanced contact styling based on available info */ -.openapi-contact:has(.contact-email):has(.contact-url) { - background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); - border-color: rgba(var(--color-brand-rgb), 0.15); -} -.openapi-contact:has(.contact-name) h3 { - color: var(--color-brand); -} -/* License with URL gets enhanced styling */ -.openapi-license:has(a) .license-name a { - color: var(--color-brand); - font-weight: 600; - text-decoration: none; - transition: all 0.2s ease; -} -.openapi-license:has(a) .license-name a:hover { - color: var(--color-accent); - text-decoration: underline; -} -/* Header with full info gets enhanced spacing */ -.openapi-header:has(.openapi-contact):has(.openapi-license):has(.openapi-terms) { - padding: 2.5rem; -} -/* Responsive adaptations using :has() */ -@media (max-width: 768px) { - .openapi-header:has(.openapi-header__info) { - padding: 1.5rem; - } - - .openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { - grid-template-columns: 1fr; - gap: 1rem; - } - - .openapi-header__meta:has(.openapi-header__version-stat) { - flex-direction: column; - gap: 0.75rem; - align-items: flex-start; - } -} -/* OpenAPI Overview - Modern Info-Dense Layout */ -/* ========================================================================== - Overview Section - ========================================================================== */ -.openapi-overview { - padding: 1.5rem 0; - margin-bottom: 1rem; -} -/* Header */ -.overview-header { - margin-bottom: 1.5rem; - text-align: left; -} -.overview-title { - font-family: var(--font-family-brand); - font-size: 1.75rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; -} -/* Enhanced gradient text with fallback */ -@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) { - .overview-title { - background: linear-gradient(135deg, var(--color-brand, #3b82f6), var(--color-accent, #8b5cf6)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; - } -} -.overview-subtitle { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; - opacity: 0.8; -} -/* Content Container */ -.overview-content { - display: flex; - flex-direction: column; - gap: 1.5rem; -} -/* ========================================================================== - Stats Bar - Horizontal info-dense layout - ========================================================================== */ -.overview-stats { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - align-items: stretch; -} -.overview-stat { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - transition: - background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); - min-height: 60px; - position: relative; - overflow: hidden; - flex: 1; - min-width: 140px; -} -.overview-stat::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.03); - opacity: 0; - transition: opacity 0.2s ease; -} -.overview-stat:hover { - transform: translateY(-2px); - border-color: var(--color-brand); - box-shadow: var(--elevation-hover-2); -} -.overview-stat:hover::before { - opacity: 1; -} -/* Stat Icon - Container-based sizing following theme patterns */ -.overview-stat__icon { - width: 1.25rem; - height: 1.25rem; - color: var(--color-text-secondary); - flex-shrink: 0; - transition: color 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} -/* SVG naturally fills container */ -.overview-stat__icon svg { - width: 100%; - height: 100%; - display: block; -} -.overview-stat:hover .overview-stat__icon { - color: var(--color-brand); -} -/* Stat Content */ -.overview-stat__content { - display: flex; - flex-direction: column; - gap: 0.125rem; - min-width: 0; - flex: 1; -} -.overview-stat__label { - font-size: 0.75rem; - font-weight: 500; - color: var(--color-text-tertiary); - text-transform: uppercase; - letter-spacing: 0.025em; - line-height: 1; -} -.overview-stat__value { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - line-height: 1.2; - word-break: break-word; -} -/* Stat Variants */ -.overview-stat--primary { - background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); - color: var(--color-text-inverse); - border-color: transparent; -} -.overview-stat--primary .overview-stat__icon, -.overview-stat--primary .overview-stat__label, -.overview-stat--primary .overview-stat__value { - color: currentColor; -} -.overview-stat--primary .overview-stat__label { - opacity: 0.8; -} -.overview-stat--primary:hover { - transform: translateY(-3px); - box-shadow: - 0 8px 20px rgba(var(--color-brand-rgb), 0.25), - 0 4px 8px rgba(0, 0, 0, 0.1); -} -/* ========================================================================== - Description Section - ========================================================================== */ -.overview-description { - padding: 1rem 1.25rem; - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - border-left: 3px solid var(--color-brand); -} -.overview-description p { - margin: 0; - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.875rem; -} -/* ========================================================================== - Documentation Links - ========================================================================== */ -.overview-documentation { - margin-top: 0.5rem; -} -.overview-documentation__title { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 1rem 0; -} -.overview-documentation__grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 0.75rem; - margin-top: 1.5rem; -} -.overview-doc-link { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.875rem 1rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - text-decoration: none; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; - position: relative; - overflow: hidden; -} -.overview-doc-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.03); - opacity: 0; - transition: opacity 0.2s ease; -} -.overview-doc-link:hover { - transform: translateY(-2px); - border-color: var(--color-brand); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); -} -.overview-doc-link:hover::before { - opacity: 1; -} -.overview-doc-link__icon { - width: 1.125rem; - height: 1.125rem; - color: var(--color-text-secondary); - flex-shrink: 0; - transition: color 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} -/* SVG naturally fills container */ -.overview-doc-link__icon svg { - width: 100%; - height: 100%; - display: block; -} -.overview-doc-link:hover .overview-doc-link__icon { - color: var(--color-brand); -} -.overview-doc-link__content { - display: flex; - flex-direction: column; - gap: 0.125rem; - flex: 1; - min-width: 0; -} -.overview-doc-link__title { - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-primary); - line-height: 1.3; - transition: color 0.2s ease; -} -.overview-doc-link:hover .overview-doc-link__title { - color: var(--color-brand); -} -.overview-doc-link__description { - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.4; -} -.overview-doc-link__arrow { - width: 1rem; - height: 1rem; - color: var(--color-text-tertiary); - flex-shrink: 0; - transition: - color 0.2s ease, - transform 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} -/* SVG naturally fills container */ -.overview-doc-link__arrow svg { - width: 100%; - height: 100%; - display: block; -} -.overview-doc-link:hover .overview-doc-link__arrow { - color: var(--color-brand); - transform: translateX(2px) translateY(-2px); -} -/* ========================================================================== - Responsive Design - ========================================================================== */ -@media (max-width: 768px) { - .overview-stats { flex-direction: column; gap: 0.5rem; } - - .overview-stat { min-width: unset; } - - .overview-documentation__grid { grid-template-columns: 1fr; } - - .overview-title { font-size: 1.5rem; } -} -@media (max-width: 480px) { - .overview-stat { - gap: 0.5rem; - padding: 0.625rem 0.75rem; - min-height: 50px; - } - - .overview-stat__icon { - width: 1rem; - height: 1rem; - } - - .overview-doc-link { - gap: 0.5rem; - padding: 0.75rem; - } -} -/* ========================================================================== - :has() Content-Aware Overview Enhancements - ========================================================================== */ -/* Overview with documentation gets enhanced layout */ -.openapi-overview:has(.overview-documentation) { - padding-bottom: 2rem; -} -.openapi-overview:has(.overview-documentation) .overview-stats { - margin-bottom: 2rem; -} -/* Stats container adapts based on number of stats */ -.overview-stats:has(.overview-stat:nth-child(4)) { - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); -} -.overview-stats:has(.overview-stat:nth-child(3)) { - grid-template-columns: repeat(3, 1fr); -} -.overview-stats:has(.overview-stat:nth-child(2)) { - grid-template-columns: repeat(2, 1fr); -} -/* Enhanced hover effects for overview with documentation */ -.openapi-overview:has(.overview-documentation) .overview-stat:hover { - transform: translateY(-3px); - box-shadow: var(--elevation-hover-4); -} -/* Documentation section gets enhanced styling when stats are present */ -.openapi-overview:has(.overview-stats) .overview-documentation { - border-top: 1px solid var(--color-border-primary); - padding-top: 1.5rem; - margin-top: 1.5rem; -} -/* Single stat gets special treatment */ -.overview-stats:has(.overview-stat:only-child) .overview-stat { - max-width: 300px; - margin: 0 auto; -} -/* API type specific enhancements */ -[data-api-type="REST"] .overview-stat--secondary { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.1), rgba(var(--color-security-rgb), 0.1)); - border-color: rgba(var(--color-info-rgb), 0.2); -} -[data-api-type="GraphQL"] .overview-stat--secondary { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); - border-color: rgba(var(--color-danger-rgb), 0.2); -} -/* Maturity-based styling */ -[data-maturity="stable"] .overview-stat--accent { - background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.1), rgba(var(--color-success-rgb), 0.1)); - border-color: rgba(var(--color-success-rgb), 0.2); -} -[data-maturity="beta"] .overview-stat--accent { - background: linear-gradient(135deg, rgba(var(--color-warning-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); - border-color: rgba(var(--color-warning-rgb), 0.2); -} -[data-maturity="alpha"] .overview-stat--warning { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-danger-rgb), 0.1)); - border-color: rgba(var(--color-danger-rgb), 0.2); -} -/* OpenAPI Servers */ -/* ========================================================================== - Servers Section - ========================================================================== */ -.openapi-servers { - padding: 2rem 0; -} -.servers-list { - display: flex; - flex-direction: column; - gap: 1.5rem; -} -.server-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - padding: 2rem; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} -.server-item:hover { - border-color: var(--color-brand); - box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.1); -} -.server-url { - font-family: var(--font-family-mono); - font-size: 1.125rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 1rem; - word-break: break-all; -} -.server-description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-secondary); - margin-bottom: 1.5rem; -} -.server-variables { - margin-top: 1.5rem; -} -.server-variables h4 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); -} -.variables-list { - display: flex; - flex-direction: column; - gap: 1rem; -} -.variable-item { - background: var(--color-bg-secondary); - padding: 1rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); -} -.variable-name { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; -} -.variable-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} -.variable-default { - font-size: 0.875rem; - color: var(--color-text-primary); -} -.variable-default strong { - color: var(--color-text-primary); -} -.variable-default code { - font-family: var(--font-family-mono); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; - color: var(--color-brand); -} -/* OpenAPI Navigation */ -/* ========================================================================== - Endpoints Navigation - ========================================================================== */ -.endpoints-nav { - margin-bottom: 2rem; - padding: 1.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; -} -.endpoints-nav__section { - margin-bottom: 1.5rem; -} -.endpoints-nav__section:last-child { - margin-bottom: 0; -} -.endpoints-nav__header { - font-weight: 600; - color: var(--color-text-primary); - margin-bottom: 1rem; -} -.endpoints-nav__tags, -.endpoints-nav__methods { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} -.endpoints-nav__search { - position: relative; -} -.endpoint-search { - width: 100%; - padding: 0.75rem 2rem 0.75rem 0.75rem; - font-size: 0.875rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); - color: var(--color-text-primary); - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - box-shadow 0.2s ease; -} -.endpoint-search:focus { - outline: none; - border-color: var(--color-brand); - box-shadow: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); -} -.search-icon { - position: absolute; - right: 0.5rem; - top: 50%; - transform: translateY(-50%); - width: 1rem; - height: 1rem; - color: var(--color-text-secondary); -} -.tag-filter, -.method-filter { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 2rem; - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} -.tag-filter:hover, -.tag-filter--active { - background: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} -.method-filter:hover, -.method-filter--active { - border-color: var(--color-brand); - color: var(--color-brand); -} -/* Method-specific colors */ -/* Old hex-based method filter colors commented out in favor of tokens per themes/milodocs/init */ -/* .method-filter--get { border-color: #22c55e; color: #22c55e; } -.method-filter--post { border-color: #3b82f6; color: #3b82f6; } -.method-filter--put { border-color: #f59e0b; color: #f59e0b; } -.method-filter--patch { border-color: #8b5cf6; color: #8b5cf6; } -.method-filter--delete { border-color: #ef4444; color: #ef4444; } */ -.method-filter--get { border-color: var(--http-get-bg); color: var(--http-get-bg); } -.method-filter--post { border-color: var(--http-post-bg); color: var(--http-post-bg); } -.method-filter--put { border-color: var(--http-put-bg); color: var(--http-put-bg); } -.method-filter--patch { border-color: var(--http-patch-bg); color: var(--http-patch-bg); } -.method-filter--delete { border-color: var(--http-delete-bg); color: var(--http-delete-bg); } -/* .method-filter--get.method-filter--active { background: #22c55e; border-color: #22c55e; color: white; } */ -.method-filter--get.method-filter--active { background: var(--http-get-bg); border-color: var(--http-get-bg); color: var(--http-get-text); } -/* .method-filter--post.method-filter--active { background: #3b82f6; border-color: #3b82f6; color: white; } */ -.method-filter--post.method-filter--active { background: var(--http-post-bg); border-color: var(--http-post-bg); color: var(--http-post-text); } -/* .method-filter--put.method-filter--active { background: #f59e0b; border-color: #f59e0b; color: white; } */ -.method-filter--put.method-filter--active { background: var(--http-put-bg); border-color: var(--http-put-bg); color: var(--http-put-text); } -/* .method-filter--patch.method-filter--active { background: #8b5cf6; border-color: #8b5cf6; color: white; } */ -.method-filter--patch.method-filter--active { background: var(--http-patch-bg); border-color: var(--http-patch-bg); color: var(--http-patch-text); } -/* .method-filter--delete.method-filter--active { background: #ef4444; border-color: #ef4444; color: white; } */ -.method-filter--delete.method-filter--active { background: var(--http-delete-bg); border-color: var(--http-delete-bg); color: var(--http-delete-text); } -/* OpenAPI Sidebar Styles */ -/* Inspired by Mintlify's clean, hierarchical design */ -/* ========================================================================== - OpenAPI Sidebar Base - ========================================================================== */ -.openapi-sidebar-section { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} -.openapi-sidebar-section:last-child { - border-bottom: none; -} -.openapi-sidebar-header { - margin-bottom: 1rem; -} -.openapi-sidebar-title { - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; - line-height: 1.4; -} -.openapi-sidebar-version { - display: inline-block; - padding: 0.125rem 0.5rem; - background: var(--color-brand-primary); - color: white; - font-size: 0.75rem; - font-weight: 500; - border-radius: 0.375rem; - margin-left: 0.5rem; -} -.openapi-sidebar-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - line-height: 1.5; - margin: 0.5rem 0 0 0; -} -/* ========================================================================== - Navigation Links - ========================================================================== */ -.openapi-sidebar-nav { - list-style: none; - margin: 0; - padding: 0; -} -.openapi-sidebar-nav-item { - margin-bottom: 0.25rem; -} -.openapi-sidebar-link { - display: flex; - align-items: center; - padding: 0.5rem 0.75rem; - color: var(--color-text-secondary); - text-decoration: none; - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - transition: - background-color 0.15s ease, - border-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease, - box-shadow 0.15s ease; - border: 1px solid transparent; -} -.openapi-sidebar-link:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); -} -.openapi-sidebar-link--active { - color: var(--color-brand-primary); - background: var(--color-brand-background); - border-color: var(--color-brand-border); - font-weight: 600; -} -.openapi-sidebar-link-text { - flex: 1; -} -/* ========================================================================== - Section Headers - ========================================================================== */ -.openapi-sidebar-section-header { - margin-bottom: 1rem; -} -.openapi-sidebar-section-header h4 { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0; - text-transform: uppercase; - letter-spacing: 0.05em; -} -/* ========================================================================== - Tag Groups - ========================================================================== */ -.openapi-sidebar-endpoints { - list-style: none; - margin: 0; - padding: 0; -} -.openapi-sidebar-tag-group { - margin-bottom: 1rem; -} -.openapi-sidebar-tag-header { - display: flex; - align-items: center; - margin-bottom: 0.5rem; -} -.openapi-sidebar-tag-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; - padding: 0; - margin-right: 0.5rem; - background: none; - border: none; - color: var(--color-text-secondary); - cursor: pointer; - border-radius: 0.25rem; - transition: - background-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease; -} -.openapi-sidebar-tag-toggle:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); -} -.openapi-sidebar-chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform 0.15s ease; -} -.openapi-sidebar-tag-toggle--expanded .openapi-sidebar-chevron { - transform: rotate(90deg); -} -.openapi-sidebar-tag-name { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - text-transform: capitalize; -} -/* ========================================================================== - Endpoints List - ========================================================================== */ -.openapi-sidebar-endpoints-list { - list-style: none; - margin: 0; - padding: 0; - overflow: hidden; - transition: max-height 0.15s ease, opacity 0.15s ease; -} -.openapi-sidebar-endpoints-list--expanded { - /* Animation handled by display property changes in JS */ -} -.openapi-sidebar-endpoint { - margin-bottom: 0.125rem; -} -.openapi-sidebar-endpoint-link { - display: flex; - align-items: flex-start; - padding: 0.5rem 0.75rem; - color: var(--color-text-secondary); - text-decoration: none; - border-radius: 0.375rem; - font-size: 0.8125rem; - transition: - background-color 0.15s ease, - border-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease; - border: 1px solid transparent; - margin-left: 1.75rem; /* Indent under tag */ - gap: 0.5rem; -} -.openapi-sidebar-endpoint-link:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); -} -.openapi-sidebar-endpoint-link--active { - color: var(--color-brand-primary); - background: var(--color-brand-background); - border-color: var(--color-brand-border); - font-weight: 500; -} -/* ========================================================================== - HTTP Method Badges - ========================================================================== */ -.openapi-sidebar-method { - display: inline-block; - padding: 0.125rem 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - border-radius: 0.25rem; - min-width: 3rem; - text-align: center; - flex-shrink: 0; - letter-spacing: 0.025em; -} -.openapi-sidebar-method--get { background: var(--http-get-bg); color: var(--http-get-text); } -.openapi-sidebar-method--post { background: var(--http-post-bg); color: var(--http-post-text); } -.openapi-sidebar-method--put { background: var(--http-put-bg); color: var(--http-put-text); } -.openapi-sidebar-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -.openapi-sidebar-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } -.openapi-sidebar-method--head, -.openapi-sidebar-method--options { background: var(--http-head-bg); color: var(--http-head-text); } -/* ========================================================================== - Endpoint Details - ========================================================================== */ -.openapi-sidebar-endpoint-path { - flex: 1; - font-weight: 500; - color: var(--color-text-primary); - line-height: 1.3; - word-break: break-all; -} -.openapi-sidebar-endpoint-summary { - display: block; - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.3; - margin-top: 0.125rem; - font-weight: 400; -} -/* ========================================================================== - Responsive Design - ========================================================================== */ -@media (max-width: 768px) { - .openapi-sidebar-section { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - } - - .openapi-sidebar-title { - font-size: 1rem; - } - - .openapi-sidebar-endpoint-link { - margin-left: 1.5rem; - padding: 0.375rem 0.5rem; - } - - .openapi-sidebar-method { - min-width: 2.5rem; - font-size: 0.625rem; - } -} -/* ========================================================================== - Dark Mode Support - ========================================================================== */ -@media (prefers-color-scheme: dark) { - .openapi-sidebar-version { background: var(--color-brand-primary-dark, var(--color-brand-primary)); } -} -/* ========================================================================== - Focus States - ========================================================================== */ -.openapi-sidebar-link:focus-visible, -.openapi-sidebar-endpoint-link:focus-visible, -.openapi-sidebar-tag-toggle:focus-visible { - outline: 2px solid var(--color-brand-primary); - outline-offset: 2px; -} -/* ========================================================================== - Smooth Scrolling Enhancement - ========================================================================== */ -html { - scroll-behavior: smooth; -} -@media (prefers-reduced-motion: reduce) { - html { - scroll-behavior: auto; - } - - .openapi-sidebar-chevron, - .openapi-sidebar-endpoints-list { - transition: none; - } -} -/* OpenAPI Generated Pages Styles */ -/* Styling for API overview, tag, and endpoint pages generated by content adapter */ -/* ========================================================================== - API Overview Page - ========================================================================== */ -.api-overview .api-endpoint-groups { - margin: 2rem 0; -} -.endpoint-groups-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 1.5rem; - margin-top: 1.5rem; -} -.card--endpoint-group { - padding: 1.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} -.card--endpoint-group:hover { - border-color: var(--color-brand-primary); - box-shadow: var(--elevation-hover-2); -} -.card--endpoint-group h3 { - margin: 0 0 0.5rem 0; - font-size: 1.125rem; - font-weight: 600; -} -.card--endpoint-group h3 a { - color: var(--color-text-primary); - text-decoration: none; -} -.card--endpoint-group h3 a:hover { - color: var(--color-brand-primary); -} -.card--endpoint-group p { - margin: 0 0 1rem 0; - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.5; -} -.endpoint-count { - font-size: 0.75rem; - color: var(--color-text-tertiary); - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.05em; -} -/* ========================================================================== - API Tag Page - ========================================================================== */ -.api-tag-header { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} -.api-tag-breadcrumb { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} -.api-tag-breadcrumb a { - color: var(--color-brand-primary); - text-decoration: none; -} -.api-tag-breadcrumb a:hover { - text-decoration: underline; -} -.api-tag-header h1 { - margin: 0 0 0.5rem 0; - font-size: 2rem; - font-weight: 700; - color: var(--color-text-primary); -} -.api-tag-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 1rem; - line-height: 1.6; -} -.card--endpoint-summary { - padding: 1.25rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - margin-bottom: 1rem; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} -.card--endpoint-summary:hover { - border-color: var(--color-brand-border); - box-shadow: var(--elevation-hover-1); -} -.endpoint-summary-header { - display: flex; - align-items: flex-start; - gap: 1rem; -} -.endpoint-summary-info { - flex: 1; -} -.endpoint-summary-info h3 { - margin: 0 0 0.5rem 0; - font-size: 1rem; - font-weight: 600; -} -.endpoint-summary-info h3 a { - color: var(--color-text-primary); - text-decoration: none; - font-family: var(--font-mono, monospace); -} -.endpoint-summary-info h3 a:hover { - color: var(--color-brand-primary); -} -.endpoint-summary-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.5; -} -/* ========================================================================== - API Endpoint Page - ========================================================================== */ -.api-endpoint-header { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} -.api-endpoint-breadcrumb { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} -.api-endpoint-breadcrumb a { - color: var(--color-brand-primary); - text-decoration: none; -} -.api-endpoint-breadcrumb a:hover { - text-decoration: underline; -} -.endpoint-title-section { - margin-top: 1rem; -} -.endpoint-method-path { - display: flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 0.75rem; -} -.endpoint-path { - font-family: var(--font-mono, monospace); - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - background: var(--color-surface-alt); - padding: 0.375rem 0.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); -} -.api-endpoint-header h1 { - margin: 0 0 0.75rem 0; - font-size: 1.875rem; - font-weight: 700; - color: var(--color-text-primary); - line-height: 1.3; -} -.endpoint-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 1rem; - line-height: 1.6; -} -/* ========================================================================== - Method Badges (Enhanced) - ========================================================================== */ -.method-badge { - display: inline-block; - padding: 0.25rem 0.75rem; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - border-radius: 0.375rem; - letter-spacing: 0.025em; - flex-shrink: 0; - min-width: 4rem; - text-align: center; -} -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .method-badge--get { background: #10b981; color: white; } */ -.method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } -/* .method-badge--post { background: #3b82f6; color: white; } */ -.method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } -/* .method-badge--put { background: #f59e0b; color: white; } */ -.method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } -/* .method-badge--patch { background: #8b5cf6; color: white; } */ -.method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -/* .method-badge--delete { background: #ef4444; color: white; } */ -.method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } -/* .method-badge--head, .method-badge--options { background: #6b7280; color: white; } */ -.method-badge--head, -.method-badge--options { - background: var(--http-head-bg); - color: var(--http-head-text); -} -/* ========================================================================== - Page Content Integration - ========================================================================== */ -.page-content { - margin-top: 2rem; - padding-top: 2rem; - border-top: 1px solid var(--color-border-light); -} -.page-content h2:first-child { - margin-top: 0; -} -/* ========================================================================== - Responsive Design - ========================================================================== */ -@media (max-width: 768px) { - .endpoint-groups-grid { - grid-template-columns: 1fr; - gap: 1rem; - } - - .endpoint-group-card { - padding: 1rem; - } - - .endpoint-summary-header { - flex-direction: column; - gap: 0.75rem; - } - - .endpoint-method-path { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .endpoint-path { - font-size: 1rem; - word-break: break-all; - } - - .api-endpoint-header h1 { - font-size: 1.5rem; - } -} -/* ========================================================================== - Dark Mode Adjustments - ========================================================================== */ -/* Dark mode handled via CSS variables in :root/.dark */ -/* - * OpenAPI Single Endpoint Page Styles - * Content-aware styling using :has() selectors - */ -/* ============================================================================= - Base Single Page Layout - ============================================================================= */ -.api-endpoint { - /* Content-aware layout adjustments */ - container-type: inline-size; - container-name: endpoint-page; -} -/* Override the hidden default - single pages should show endpoint details */ -.api-endpoint .endpoint-details { - display: block; -} -/* ============================================================================= - Header Enhancements with :has() - ============================================================================= */ -/* Enhanced header when endpoint has both summary and description */ -.api-endpoint-header:has(.endpoint-description) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-brand-rgb), 0.02) 100%); - border-left: 4px solid rgba(var(--color-brand-rgb), 0.3); - padding: 2rem; - border-radius: 0.75rem; - margin-bottom: 2rem; -} -/* Method-specific header styling */ -.api-endpoint-header:has(.method-badge--get) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(34, 197, 94, 0.02) 100%); - border-left-color: rgba(34, 197, 94, 0.3); -} -.api-endpoint-header:has(.method-badge--post) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(59, 130, 246, 0.02) 100%); - border-left-color: rgba(59, 130, 246, 0.3); -} -.api-endpoint-header:has(.method-badge--put) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(245, 158, 11, 0.02) 100%); - border-left-color: rgba(245, 158, 11, 0.3); -} -.api-endpoint-header:has(.method-badge--delete) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(239, 68, 68, 0.02) 100%); - border-left-color: rgba(239, 68, 68, 0.3); -} -.api-endpoint-header:has(.method-badge--patch) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(168, 85, 247, 0.02) 100%); - border-left-color: rgba(168, 85, 247, 0.3); -} -/* ============================================================================= - Breadcrumb Enhancements - ============================================================================= */ -.api-endpoint-breadcrumb { - margin-bottom: 1.5rem; - font-size: 0.875rem; - color: var(--color-text-muted); -} -.api-endpoint-breadcrumb a { - color: var(--color-brand); - text-decoration: none; - transition: color 0.2s ease; -} -.api-endpoint-breadcrumb a:hover { - color: var(--color-brand-dark); - text-decoration: underline; -} -/* ============================================================================= - Content Area Enhancements with :has() - ============================================================================= */ -/* Enhanced spacing for endpoints with multiple sections */ -.api-endpoint-content:has(.endpoint-section:nth-child(n+3)) { - display: grid; - gap: 2rem; -} -/* Special layout for complex endpoints */ -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - container-type: inline-size; -} -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) .endpoint-details { - display: grid; - gap: 2.5rem; -} -/* Enhanced visual hierarchy for parameter-heavy endpoints */ -.endpoint-item:has([data-parameter-count]) { - /* Parameters count specific styling */ -} -.endpoint-item:has([data-parameter-count="0"]) .endpoint-details { - /* Simplified layout for parameter-less endpoints */ - gap: 1.5rem; -} -.endpoint-item:has([data-parameter-count^="1"]) .endpoint-section, -.endpoint-item:has([data-parameter-count^="2"]) .endpoint-section, -.endpoint-item:has([data-parameter-count^="3"]) .endpoint-section { - /* Enhanced styling for endpoints with 10+ parameters */ - border: 1px solid rgba(var(--color-border-rgb), 0.5); - border-radius: 0.5rem; - padding: 1.5rem; - background: rgba(var(--color-surface-rgb), 0.5); -} -/* ============================================================================= - Section-Specific :has() Patterns - ============================================================================= */ -/* Parameters Section */ -.endpoint-details:has(.endpoint-parameters) { - /* Enhanced layout when parameters are present */ -} -.endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { - /* Special handling for parameter-heavy endpoints */ - grid-template-columns: 1fr 1fr; - gap: 2rem; -} -@container endpoint-page (max-width: 768px) { - .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { - grid-template-columns: 1fr; - } -} -/* Request Body Section */ -.endpoint-details:has(.endpoint-request-body) .endpoint-section { - border-left: 3px solid rgba(var(--color-brand-rgb), 0.2); - padding-left: 1rem; -} -/* Responses Section */ -.endpoint-details:has(.endpoint-responses) { - /* Enhanced styling when responses are present */ -} -.endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { - /* Special handling for endpoints with many response types */ - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-success-rgb), 0.01) 100%); - border-radius: 0.75rem; - padding: 1.5rem; -} -/* Security Section */ -.endpoint-details:has(.endpoint-security) { - /* Enhanced styling when security requirements are present */ - border-top: 1px solid rgba(var(--color-border-rgb), 0.3); - padding-top: 2rem; -} -/* Code Examples Section */ -.endpoint-details:has(.endpoint-examples) { - /* Enhanced styling when code examples are present */ -} -.endpoint-details:has(.endpoint-examples .example-tabs .tab-button:nth-child(n+4)) { - /* Special styling for endpoints with many code examples */ - background: rgba(var(--color-accent-rgb), 0.02); - border-radius: 0.5rem; - padding: 1rem; -} -/* ============================================================================= - Method-Specific Page Styling - ============================================================================= */ -/* GET endpoints - Success/data focused */ -.api-endpoint[data-method="GET"] { - --endpoint-accent: rgba(34, 197, 94, 0.1); -} -.api-endpoint[data-method="GET"]:has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} -/* POST endpoints - Creation focused */ -.api-endpoint[data-method="POST"] { - --endpoint-accent: rgba(59, 130, 246, 0.1); -} -.api-endpoint[data-method="POST"]:has([data-has-request-body="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} -/* PUT/PATCH endpoints - Update focused */ -.api-endpoint[data-method="PUT"], -.api-endpoint[data-method="PATCH"] { - --endpoint-accent: rgba(245, 158, 11, 0.1); -} -.api-endpoint[data-method="PUT"]:has([data-has-request-body="true"]):has([data-has-responses="true"]), -.api-endpoint[data-method="PATCH"]:has([data-has-request-body="true"]):has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} -/* DELETE endpoints - Deletion focused */ -.api-endpoint[data-method="DELETE"] { - --endpoint-accent: rgba(239, 68, 68, 0.1); -} -.api-endpoint[data-method="DELETE"]:has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} -/* ============================================================================= - Complexity-Based Styling - ============================================================================= */ -/* Simple endpoints (no parameters, no request body) */ -.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] { - /* Simplified, clean layout */ -} -.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] .endpoint-details { - gap: 1rem; -} -/* Complex endpoints (has parameters, request body, and multiple responses) */ -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]), -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]), -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) { - /* Enhanced organization for complex endpoints */ -} -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { - border: 1px solid rgba(var(--color-border-rgb), 0.2); - border-radius: 1rem; - padding: 2rem; - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-accent-rgb), 0.01) 100%); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); -} -/* ============================================================================= - Responsive Enhancements - ============================================================================= */ -@container endpoint-page (max-width: 768px) { - .api-endpoint-header:has(.endpoint-description) { - padding: 1.5rem; - margin-bottom: 1.5rem; - } - - .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+3)) { - grid-template-columns: 1fr; - } - - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { - padding: 1rem; - } -} -/* ============================================================================= - Accessibility Enhancements - ============================================================================= */ -/* Enhanced focus styles for interactive elements */ -.api-endpoint:has(:focus-visible) { - /* Container styling when child elements have focus */ -} -/* Reduced motion preferences */ -@media (prefers-reduced-motion: reduce) { - .api-endpoint-header:has(.endpoint-description), - .endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { - background: var(--color-surface); - transition: none; - } -} -/* OpenAPI Endpoints */ -/* ========================================================================== - Endpoints Section - ========================================================================== */ -.openapi-endpoints { - padding: 2rem 0; -} -/* Endpoint Groups */ -.endpoint-group { - margin-bottom: 2rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; -} -.endpoint-group-header { - padding: 1rem 1.5rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; -} -.endpoint-group-header:hover { - background: var(--color-bg-tertiary); -} -.endpoint-group-title { - display: flex; - align-items: center; - gap: 0.75rem; -} -.endpoint-group-title h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-primary); -} -.endpoint-count { - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.25rem 0.75rem; - border-radius: 1rem; - font-size: 0.8rem; - font-weight: 500; -} -.endpoint-group-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; -} -.endpoint-group-toggle .chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} -.endpoint-group-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} -.endpoint-group-content { - /* Use height-based collapse (consistent with response-details) */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - - /* Configure collapse behavior */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; /* Larger for endpoint lists */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 0; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); -} -/* Remove old class-based approach - component-states.css handles this */ -/* Endpoint Items within Groups */ -.endpoint-item { - background: var(--color-surface); - border: none; - border-bottom: 1px solid var(--color-border-primary); - border-radius: 0; - margin-bottom: 0; - overflow: hidden; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} -.endpoint-item:last-child { - border-bottom: none; -} -.endpoint-item:hover { - background: var(--color-bg-secondary); -} -/* Endpoint Header */ -.endpoint-header { - padding: 0.75rem 1rem; - display: flex; - align-items: center; - gap: 0.75rem; - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} -/* Keyboard focus visibility */ -.endpoint-group-header:focus-visible, -.endpoint-header:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} -.endpoint-header:hover { - background: var(--color-bg-secondary); -} -.endpoint-header__method { - flex-shrink: 0; -} -.endpoint-header__path { - flex: 1; - min-width: 0; -} -.endpoint-header__summary { - flex: 2; - min-width: 0; -} -.endpoint-header__meta { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 0.5rem; -} -.endpoint-header__toggle { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; -} -.endpoint-path { - font-family: var(--font-family-mono); - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} -.endpoint-summary { - font-size: 0.875rem; - color: var(--color-text-primary); - font-weight: 500; -} -.endpoint-operation-id { - font-size: 0.75rem; - color: var(--color-text-secondary); -} -.operation-id-label { - font-weight: 500; -} -.endpoint-tags { - display: flex; - gap: 0.375rem; -} -.endpoint-tag { - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} -/* HTTP Method Badges */ -.http-method { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.375rem 0.75rem; - border-radius: 0.375rem; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - min-width: 4rem; -} -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .http-method--get { background: #22c55e; color: white; } -.http-method--post { background: #3b82f6; color: white; } -.http-method--put { background: #f59e0b; color: white; } -.http-method--patch { background: #8b5cf6; color: white; } -.http-method--delete { background: #ef4444; color: white; } -.http-method--head { background: #6b7280; color: white; } -.http-method--options { background: #9333ea; color: white; } */ -.http-method--get { background: var(--http-get-bg); color: var(--http-get-text); } -.http-method--post { background: var(--http-post-bg); color: var(--http-post-text); } -.http-method--put { background: var(--http-put-bg); color: var(--http-put-text); } -.http-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -.http-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } -.http-method--head { background: var(--http-head-bg); color: var(--http-head-text); } -.http-method--options { background: var(--http-options-bg); color: var(--http-options-text); } -/* Endpoint Details */ -.endpoint-details { - display: none; - padding: 1.5rem; - background: var(--color-surface); - border-top: 1px solid var(--color-border-primary); -} -.endpoint-details.expanded { - display: block; -} -.endpoint-section { - margin-bottom: 2rem; -} -.endpoint-section:last-child { - margin-bottom: 0; -} -.endpoint-section h4 { - margin: 0 0 1rem 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - display: flex; - align-items: center; - gap: 0.5rem; -} -.endpoint-description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1.5rem; -} -/* Chevron Icon */ -.chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} -.endpoint-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} -/* ========================================================================== - :has() Content-Aware Endpoints Enhancements - ========================================================================== */ -/* API endpoint viewer adapts based on content type */ -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-parameters="true"]) { - --has-params: true; -} -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-request-body="true"]) { - --has-body: true; -} -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-responses="true"]) { - --has-responses: true; -} -/* Method-specific styling enhancements */ -.openapi-spec[data-method="GET"]:has([data-has-parameters="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-info-rgb), 0.5); -} -.openapi-spec[data-method="POST"]:has([data-has-request-body="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-success-rgb), 0.5); -} -.openapi-spec[data-method="PUT"]:has([data-has-request-body="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-warning-rgb), 0.5); -} -.openapi-spec[data-method="DELETE"]:has([data-has-responses="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-danger-rgb), 0.5); -} -/* Enhanced endpoint header based on content */ -.api-endpoint-header:has([data-has-summary="true"]):has([data-has-description="true"]) { - padding: 2rem 1.5rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); -} -/* Endpoint item adapts based on available sections */ -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - --sections: comprehensive; - border: 2px solid var(--color-border-primary); - border-radius: 1rem; - background: var(--color-surface); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} -.endpoint-item:has([data-has-security="true"]) { - border-left: 3px solid var(--color-accent); -} -.endpoint-item:has([data-has-examples="true"]) .endpoint-details { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); -} -/* Parameter count indicators */ -.endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before { - content: attr(data-parameter-count) " params"; - position: absolute; - top: 0.5rem; - right: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 1rem; - font-weight: 500; -} -/* Response count indicators */ -.endpoint-item[data-response-count]:not([data-response-count="0"])::after { - content: attr(data-response-count) " responses"; - position: absolute; - top: 2.5rem; - right: 0.5rem; - background: rgba(var(--color-accent-rgb), 0.1); - color: var(--color-accent); - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 1rem; - font-weight: 500; -} -/* Endpoint group with many endpoints gets grid layout */ -.endpoint-group:has(.endpoint-item:nth-child(n+6)) .endpoint-group-content { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 1rem; -} -/* Enhanced hover effects for content-rich endpoints */ -.endpoint-item:has([data-has-examples="true"]):hover { - transform: translateY(-2px); - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); -} -/* Responsive adaptations for endpoints */ -@media (max-width: 768px) { - .endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - border-radius: 0.5rem; - margin: 0.5rem 0; - } - - .endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before, - .endpoint-item[data-response-count]:not([data-response-count="0"])::after { - position: static; - display: inline-block; - margin: 0.25rem; - } -} -/* Reduced motion: remove transitions for interactive rows/headers */ -@media (prefers-reduced-motion: reduce) { - .endpoint-group-header, - .endpoint-item, - .endpoint-header { - transition: none !important; - } -} -/* OpenAPI Parameters */ -/* ========================================================================== - Parameters - ========================================================================== */ -.parameters-container { - display: flex; - flex-direction: column; - gap: 2rem; -} -.parameters-section { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; -} -.parameters-section-header { - padding: 1rem 1.5rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); -} -.parameters-section-title { - margin: 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); -} -/* Parameter Group Headers */ -.parameter-group-header { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; -} -.parameter-group-header:hover { - background: var(--color-bg-tertiary); -} -.parameter-group-title { - margin: 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - display: flex; - align-items: center; - gap: 0.5rem; -} -.parameter-count { - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} -.parameter-group-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; -} -.parameter-group-toggle .chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform var(--timing-fast) var(--easing-standard); -} -.parameter-group-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} -.parameter-list { - /* Height-based collapse (consistent with all components) */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - - /* Configure collapse behavior */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 1500px; /* Good for parameter lists */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); -} -/* Remove old class-based approach - component-states.css handles this */ -.parameters-list { - padding: 0; -} -.parameter-item { - padding: 1rem 1.5rem; - border-bottom: 1px solid var(--color-border-primary); - transition: background-color 0.2s ease; -} -.parameter-item:last-child { - border-bottom: none; -} -.parameter-item:hover { - background: var(--color-bg-secondary); -} -.parameter-item--required { - border-left: 4px solid var(--color-brand); -} -.parameter-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-bottom: 0.75rem; -} -.parameter-name { - display: flex; - align-items: center; - gap: 0.5rem; -} -.parameter-name code { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.875rem; -} -.parameter-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; -} -.parameter-type { - display: flex; - align-items: center; - gap: 0.375rem; -} -.parameter-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 0.75rem; -} -.parameter-constraints { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} -.constraint-item { - background: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.75rem; - color: var(--color-text-secondary); -} -.constraint-label { - font-weight: 600; -} -.constraint-value { - font-family: var(--font-family-mono); - color: var(--color-brand); -} -/* OpenAPI Responses */ -/* ========================================================================== - Response Sections - ========================================================================== */ -.responses-container { - display: flex; - flex-direction: column; - gap: 1rem; -} -.response-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - overflow: hidden; -} -.response-header { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; -} -.response-header:hover { - background: var(--color-bg-tertiary); -} -.response-status { - display: flex; - align-items: center; - gap: 0.75rem; - flex: 1; -} -.response-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; -} -.response-toggle .chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform var(--timing-fast) var(--easing-standard); -} -.response-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} -.response-details { - border-top: 1px solid var(--color-border-primary); - - /* Use height-based collapse (not display-based) for smooth animations */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); - - /* Start collapsed */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; -} -.response-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; -} -/* Status Code Badges */ -.status-code { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.25rem 0.75rem; - border-radius: 0.375rem; - font-size: 0.8rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - min-width: 3rem; -} -/* Old hex-based status colors commented out in favor of tokens per themes/milodocs/init */ -/* .status-code--2xx { background: #22c55e; color: white; } -.status-code--3xx { background: #3b82f6; color: white; } -.status-code--4xx { background: #f59e0b; color: white; } -.status-code--5xx { background: #ef4444; color: white; } -.status-code--dxx { background: #6b7280; color: white; } */ -.status-code--2xx { background: var(--status-2xx-bg); color: var(--status-2xx-text); } -.status-code--3xx { background: var(--status-3xx-bg); color: var(--status-3xx-text); } -.status-code--4xx { background: var(--status-4xx-bg); color: var(--status-4xx-text); } -.status-code--5xx { background: var(--status-5xx-bg); color: var(--status-5xx-text); } -.status-code--dxx { background: var(--status-dxx-bg); color: var(--status-dxx-text); } -/* Response Content */ -.response-content { - margin-top: 1rem; -} -.response-content h6 { - margin: 0 0 0.75rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - text-transform: uppercase; - letter-spacing: 0.05em; -} -.response-media-type { - margin-bottom: 1rem; - padding: 0.75rem; - background: var(--color-bg-tertiary); - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); -} -.media-type-label { - font-family: var(--font-family-mono); - font-size: 0.8rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; -} -.response-schema { - margin-top: 0.75rem; -} -/* Response Headers */ -.response-headers { - margin-bottom: 1rem; -} -.response-headers h6 { - margin: 0 0 0.75rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} -.headers-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} -.header-item { - padding: 0.5rem 0.75rem; - background: var(--color-bg-tertiary); - border-radius: 0.25rem; - border: 1px solid var(--color-border-primary); -} -.header-name { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.25rem; -} -.header-name code { - font-family: var(--font-family-mono); - font-size: 0.8rem; - font-weight: 600; - color: var(--color-brand); -} -.header-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-size: 0.7rem; - font-weight: 600; - text-transform: uppercase; -} -.header-description { - font-size: 0.8rem; - color: var(--color-text-secondary); - margin-bottom: 0.25rem; -} -.header-type { - display: flex; - align-items: center; - gap: 0.25rem; -} -/* OpenAPI Schemas */ -/* ========================================================================== - Schemas - ========================================================================== */ -.schema-container { - background: transparent; - border: none; - border-left: 2px solid var(--color-border-primary); - border-radius: 0; - padding: 0.5rem 0 0.5rem 0.75rem; - margin: 0.5rem 0; -} -.schema-container[data-level="0"] { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - padding: 0.75rem; - border-left: none; -} -.schema-container[data-level="1"] { - margin-left: 1rem; - border-left: 3px solid var(--color-brand); -} -.schema-container[data-level="2"] { - margin-left: 2rem; - border-left: 3px solid var(--color-accent); -} -.schema-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.5rem; -} -.schema-title { - margin: 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); -} -.schema-type-info { - display: flex; - align-items: center; - gap: 0.5rem; -} -.type-nullable, -.type-readonly, -.type-writeonly { - background: rgba(var(--color-text-secondary-rgb, 107, 114, 128), 0.1); - color: var(--color-text-secondary); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} -.schema-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} -.schema-constraints { - display: flex; - flex-wrap: wrap; - gap: 1rem; - margin-bottom: 1.5rem; - padding: 1rem; - background: var(--color-bg-tertiary); - border-radius: 0.5rem; - border: 1px solid var(--color-border-secondary); -} -.schema-properties { - margin-bottom: 1.5rem; -} -.schema-properties h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); -} -.properties-list { - display: flex; - flex-direction: column; - gap: 0; - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - overflow: hidden; -} -.property-item { - background: var(--color-surface); - border: none; - border-bottom: 1px solid var(--color-border-primary); - border-radius: 0; - padding: 1rem 0.75rem; - display: flex; - flex-direction: column; - gap: 0.5rem; - position: relative; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} -.property-item:last-child { - border-bottom: none; -} -.property-item:hover { - background: var(--color-bg-secondary); - transform: translateX(2px); -} -.property-item--required { - border-left: 3px solid var(--color-brand); -} -.property-header { - margin-bottom: 0; - display: flex; - align-items: center; - gap: 0.375rem; -} -.property-name { - display: flex; - align-items: center; - gap: 0.5rem; -} -.property-name code { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.875rem; -} -.property-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; -} -.property-schema { - margin-left: 0; -} -/* Enhanced property information layout */ -.property-meta { - display: flex; - align-items: center; - gap: 0.75rem; - margin-top: 0.25rem; -} -.property-type { - display: flex; - align-items: center; - gap: 0.375rem; -} -.property-type .type-badge { - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.025em; -} -.property-format { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-secondary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} -.property-description { - margin-top: 0.5rem; - font-size: 0.875rem; - color: var(--color-text-secondary); - line-height: 1.4; -} -.property-constraints { - margin-top: 0.5rem; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} -.property-constraint { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-secondary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - border: 1px solid var(--color-border-secondary); -} -/* Enhanced constraint styling */ -.constraint-modifier { - font-size: 0.7rem; - color: var(--color-warning); - font-style: italic; - margin-left: 0.25rem; -} -/* Array schema styling */ -.schema-array-info { - margin-bottom: 1.5rem; -} -.schema-array-info h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); -} -.array-constraints { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 1rem; -} -.array-constraints .constraint { - display: flex; - align-items: center; - gap: 0.25rem; - font-size: 0.875rem; - background: var(--color-bg-secondary); - padding: 0.5rem 0.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-secondary); -} -.array-item-schema { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 1rem; - margin-top: 0.5rem; -} -/* Enhanced schema composition styling */ -.schema-composition { - margin-bottom: 1.5rem; -} -.schema-composition h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); -} -.composition-list { - display: flex; - flex-direction: column; - gap: 1rem; -} -.composition-item { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 1rem; - position: relative; -} -.composition-index { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; - text-transform: uppercase; - letter-spacing: 0.025em; -} -/* ========================================================================== - :has() Content-Aware Schema Enhancements - ========================================================================== */ -/* Schema containers adapt based on content type and complexity */ -.schema-container:has(.schema-properties) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-brand-rgb), 0.3); -} -.schema-container:has(.schema-array-info) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-success-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-success-rgb), 0.3); -} -.schema-container:has(.schema-composition) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-accent-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-accent-rgb), 0.3); -} -/* Schema properties section enhances based on property count */ -.schema-properties:has(.properties-list .property-item:nth-child(n+5)) { - border: 2px solid rgba(var(--color-brand-rgb), 0.1); - border-radius: 0.5rem; - padding: 1rem; - background: rgba(var(--color-brand-rgb), 0.02); -} -.schema-properties:has(.properties-list .property-item:nth-child(n+10)) { - border-color: rgba(var(--color-accent-rgb), 0.2); - background: rgba(var(--color-accent-rgb), 0.03); -} -/* Properties adapt to required field density */ -.properties-list:has(.property-item--required:nth-child(n+3)) { - border-left: 4px solid var(--color-warning); - padding-left: 0.5rem; -} -/* Individual property items enhance based on content */ -.property-item:has(.property-constraints) { - border-left: 2px solid rgba(var(--color-info-rgb), 0.4); - background: rgba(var(--color-info-rgb), 0.02); -} -.property-item:has(.property-meta .property-format) { - border-left-color: rgba(var(--color-accent-rgb), 0.4); - background: rgba(var(--color-accent-rgb), 0.02); -} -/* Schema constraints section adapts to constraint complexity */ -.schema-constraints:has(.constraint:nth-child(n+3)) { - background: rgba(var(--color-bg-secondary-rgb), 0.5); - border: 1px solid var(--color-border-secondary); - border-radius: 0.5rem; - padding: 1rem; -} -.schema-constraints:has(.constraint-modifier) { - border-left: 3px solid var(--color-warning); -} -/* Array info enhances based on constraints */ -.schema-array-info:has(.array-constraints .constraint:nth-child(n+2)) { - border: 1px solid rgba(var(--color-success-rgb), 0.2); - border-radius: 0.5rem; - padding: 1rem; - background: rgba(var(--color-success-rgb), 0.02); -} -/* Schema composition gets enhanced styling */ -.schema-composition:has(.composition-item:nth-child(n+3)) { - border: 2px solid rgba(var(--color-accent-rgb), 0.2); - border-radius: 0.75rem; - padding: 1.5rem; - background: rgba(var(--color-accent-rgb), 0.02); -} -/* Nested schema containers get reduced visual weight */ -.schema-container[data-level="1"]:has(.schema-properties) { - background: rgba(var(--color-bg-secondary-rgb), 0.3); - border-left-width: 2px; -} -.schema-container[data-level="2"]:has(.schema-properties) { - background: rgba(var(--color-bg-secondary-rgb), 0.2); - border-left-width: 1px; -} -/* Type-specific enhancements */ -.schema-header:has(.type-badge--object) + .schema-constraints, -.schema-header:has(.type-badge--object) + * .schema-constraints { - border-top: 2px solid rgba(var(--color-brand-rgb), 0.1); -} -.schema-header:has(.type-badge--array) + .schema-array-info { - border-top: 2px solid rgba(var(--color-success-rgb), 0.1); -} -.schema-header:has(.type-badge--string) + .schema-constraints { - border-top: 2px solid rgba(var(--color-info-rgb), 0.1); -} -/* Reference schemas get special styling */ -.schema-container:has(.schema-ref) { - background: linear-gradient( - 135deg, - rgba(var(--color-accent-rgb), 0.05) 0%, - var(--color-surface) 100% - ); - border: 1px dashed rgba(var(--color-accent-rgb), 0.3); -} -/* Error and debug styling adaptations */ -.schema-container:has(.schema-ref-error) { - background: rgba(var(--color-danger-rgb), 0.05); - border: 1px solid rgba(var(--color-danger-rgb), 0.2); -} -/* Schema References */ -.schema-ref { - margin: 0.5rem 0; - padding: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.05); - border-left: 3px solid var(--color-brand); - border-radius: 0 0.25rem 0.25rem 0; -} -.ref-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.5rem; -} -.ref-label { - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; -} -.ref-name { - font-family: var(--font-family-mono); - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand); -} -.schema-ref-error { - padding: 0.75rem; - background: rgba(239, 68, 68, 0.05); - border: 1px solid rgba(239, 68, 68, 0.2); - border-radius: 0.375rem; - margin: 0.5rem 0; -} -.schema-ref-error .error-message { - color: var(--color-danger); - font-weight: 500; - margin-bottom: 0.5rem; -} -.debug-info { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-tertiary); - padding: 0.5rem; - border-radius: 0.25rem; - margin-top: 0.5rem; -} -.debug-info p { - margin: 0.25rem 0; -} -.debug-info code { - font-family: var(--font-family-mono); - background: rgba(0, 0, 0, 0.1); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; -} -/* Array and Object Indicators */ -.schema-array-items, -.schema-object-properties { - margin-top: 0.75rem; -} -.schema-array-items h6, -.schema-object-properties h6 { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} -/* Type Badges */ -.type-badge { - display: inline-block; - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: lowercase; -} -/* Old hex-based type colors commented out in favor of tokens per themes/milodocs/init */ -/* .type-badge--string { background: rgba(34, 197, 94, 0.1); color: #059669; } -.type-badge--number, -.type-badge--integer { background: rgba(59, 130, 246, 0.1); color: #2563eb; } -.type-badge--boolean { background: rgba(168, 85, 247, 0.1); color: #7c3aed; } -.type-badge--array { background: rgba(245, 158, 11, 0.1); color: #d97706; } -.type-badge--object { background: rgba(239, 68, 68, 0.1); color: #dc2626; } -.type-badge--null { background: rgba(107, 114, 128, 0.1); color: #4b5563; } */ -.type-badge--string { background: var(--type-string-bg); color: var(--type-string-text); } -.type-badge--number { background: var(--type-number-bg); color: var(--type-number-text); } -.type-badge--integer { background: var(--type-integer-bg); color: var(--type-integer-text); } -.type-badge--boolean { background: var(--type-boolean-bg); color: var(--type-boolean-text); } -.type-badge--array { background: var(--type-array-bg); color: var(--type-array-text); } -.type-badge--object { background: var(--type-object-bg); color: var(--type-object-text); } -.type-badge--null { background: var(--type-null-bg); color: var(--type-null-text); } -.type-format { - font-size: 0.75rem; - color: var(--color-text-secondary); - font-style: italic; - margin-left: 0.25rem; -} -/* OpenAPI Code Examples */ -/* ========================================================================== - Code Examples - ========================================================================== */ -.code-examples { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - overflow: hidden; -} -.code-tabs-nav { - display: flex; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); -} -.code-tab { - background: transparent; - border: none; - padding: 0.75rem 1rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-secondary); - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; - border-bottom: 3px solid transparent; -} -.code-tab:hover, -.code-tab--active { - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.05); - border-bottom-color: var(--color-brand); -} -.code-tabs-content { - position: relative; -} -.code-tab-panel { - display: none; -} -.code-tab-panel--active { - display: block; -} -.code-example { - position: relative; -} -.code-example-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.625rem 1rem; - background: var(--color-bg-tertiary); - border-bottom: 1px solid var(--color-border-primary); -} -.code-example-title { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} -.copy-button { - display: flex; - align-items: center; - justify-content: center; - width: 1.75rem; - height: 1.75rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - color: var(--color-text-secondary); - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} -.copy-button:hover { - background: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} -.copy-button svg { - width: 0.95rem; - height: 0.95rem; -} -.code-example pre { - margin: 0; - padding: 0.875rem 1rem; - background: var(--color-bg-code); - overflow-x: auto; -} -.code-example code { - font-family: var(--font-family-mono); - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-code); -} -/* OpenAPI Components */ -/* ========================================================================== - Components Section - ========================================================================== */ -.openapi-components { - padding: 2rem 0; -} -.components-section { - margin-bottom: 3rem; -} -.components-section:last-child { - margin-bottom: 0; -} -.components-section-title { - font-size: 1.5rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 2px solid var(--color-border-primary); -} -.components-list { - display: flex; - flex-direction: column; - gap: 1rem; -} -.component-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} -.component-item:hover { - border-color: var(--color-brand); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); -} -.component-header { - padding: 1rem 1.5rem; - display: flex; - align-items: center; - gap: 1rem; - cursor: pointer; - transition: background-color 0.2s ease; -} -.component-header:hover { - background: var(--color-bg-secondary); -} -.component-icon { - width: 1.5rem; - height: 1.5rem; - color: var(--color-brand); - flex-shrink: 0; -} -.component-name { - flex: 1; - min-width: 0; -} -.component-name h4 { - margin: 0 0 0.25rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); -} -.component-type { - display: flex; - align-items: center; - gap: 0.375rem; -} -.component-toggle { - width: 1.5rem; - height: 1.5rem; - color: var(--color-text-secondary); - flex-shrink: 0; -} -.component-toggle .chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} -.component-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} -.component-details { - border-top: 1px solid var(--color-border-primary); - - /* Height-based collapse (consistent with all components) */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - - /* Configure collapse behavior */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; /* Large for complex schemas */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1.5rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); -} -/* Remove old class-based approach - component-states.css handles this */ -/* Legacy styles removed - component-states.css now handles all collapse behavior */ -@keyframes schema-expand { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -/* ========================================================================== - :has() Content-Aware Components Enhancements - ========================================================================== */ -/* Components section adapts based on content type and count */ -.openapi-components:has(.components-section[data-section-type="schemas"]) { - --primary-section: schemas; -} -.openapi-components:has(.components-section[data-section-type="parameters"]) { - --secondary-section: parameters; -} -/* Enhanced styling for sections with many items */ -.components-section:has([data-item-count^="1"]) .components-section-title::after, -.components-section:has([data-item-count^="2"]) .components-section-title::after, -.components-section:has([data-item-count^="3"]) .components-section-title::after { - content: " (" attr(data-item-count) ")"; - color: var(--color-text-secondary); - font-size: 0.875rem; - font-weight: 400; -} -/* ========================================================================== - Enhanced Schema Expansion States with :has() - ========================================================================== */ -/* Component items with expanded content */ -.component-item:has(.component-details.expanded) { - border-color: var(--color-brand); - box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); -} -.component-item:has(.component-details.expanded) .component-header { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.1); -} -/* Enhanced chevron rotation for expanded state */ -.component-item:has(.component-details.expanded) .chevron { - transform: rotate(90deg); - color: var(--color-brand); -} -/* Schema-specific expanded state styling */ -.component-item[data-component="component-schema"]:has(.component-details.expanded) { - border-left: 4px solid var(--color-brand); -} -.component-item[data-component="component-schema"]:has(.component-details.expanded) .component-name h4 { - color: var(--color-brand); - font-weight: 700; -} -/* Complex schemas (with many properties) get enhanced styling when expanded */ -.component-item[data-property-count^="1"]:has(.component-details.expanded), -.component-item[data-property-count^="2"]:has(.component-details.expanded), -.component-item[data-property-count^="3"]:has(.component-details.expanded) { - border-left: 4px solid var(--color-accent); -} -.component-item[data-property-count^="1"]:has(.component-details.expanded) .component-name h4, -.component-item[data-property-count^="2"]:has(.component-details.expanded) .component-name h4, -.component-item[data-property-count^="3"]:has(.component-details.expanded) .component-name h4 { - color: var(--color-accent); -} -/* Required schemas get special highlighting when expanded */ -.component-item[data-has-required="true"]:has(.component-details.expanded) .component-header { - background: linear-gradient( - 135deg, - rgba(var(--color-warning-rgb), 0.08) 0%, - rgba(var(--color-warning-rgb), 0.03) 100% - ); -} -/* Different schema types get unique expanded styling */ -.component-item[data-schema-type="array"]:has(.component-details.expanded) { - border-left-color: var(--color-success); -} -.component-item[data-schema-type="object"]:has(.component-details.expanded) { - border-left-color: var(--color-brand); -} -.component-item[data-schema-type="string"]:has(.component-details.expanded) { - border-left-color: var(--color-info); -} -/* Schema-specific enhancements */ -.component-item[data-component="component-schema"]:has([data-has-properties="true"]) { - border-left: 3px solid var(--color-brand); -} -.component-item[data-component="component-schema"]:has([data-has-required="true"]) .component-header { - background: rgba(var(--color-accent-rgb), 0.05); -} -.component-item[data-schema-type="object"]:has([data-property-count]) .component-name::after { - content: " (" attr(data-property-count) " properties)"; - color: var(--color-text-secondary); - font-size: 0.75rem; - font-weight: 400; -} -.component-item[data-schema-type="array"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); -} -.component-item[data-schema-type="string"] .component-icon { - color: var(--color-accent); -} -/* Parameter-specific enhancements */ -.component-item[data-component="component-parameter"][data-param-required="true"] { - border-left: 3px solid var(--color-accent); -} -.component-item[data-component="component-parameter"][data-param-required="true"] .component-header { - background: rgba(var(--color-accent-rgb), 0.08); -} -.component-item[data-param-in="path"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.05), rgba(var(--color-danger-rgb), 0.05)); -} -.component-item[data-param-in="query"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-info-rgb), 0.05)); -} -.component-item[data-param-in="header"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); -} -/* Enhanced hover effects based on content */ -.component-item:has([data-has-description="true"]):hover { - transform: translateY(-2px); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.15), - 0 2px 4px rgba(0, 0, 0, 0.08); -} -/* Responsive adaptations */ -.components-section:has(.component-item:nth-child(n+10)) { - --large-section: true; -} -.components-section:has(.component-item:nth-child(n+10)) .components-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1rem; -} -/* Section with only one item gets special treatment */ -.components-section:has(.component-item:only-child) .component-item { - max-width: 600px; - margin: 0 auto; -} -/* Enhanced focus states for accessibility */ -.component-item:has(.component-header:focus-visible) { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} -/* OpenAPI Security */ -/* ========================================================================== - Security Section - ========================================================================== */ -.openapi-security { - padding: 2rem 0; -} -.security-requirements { - display: flex; - flex-direction: column; - gap: 1.5rem; -} -.security-requirement { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - padding: 1.5rem; -} -.security-scheme { - display: flex; - align-items: flex-start; - gap: 1rem; - margin-bottom: 1rem; -} -.security-scheme:last-child { - margin-bottom: 0; -} -.security-icon { - width: 2rem; - height: 2rem; - background: rgba(var(--color-brand-rgb), 0.1); - border-radius: 0.5rem; - display: flex; - align-items: center; - justify-content: center; - color: var(--color-brand); - flex-shrink: 0; -} -.security-info { - flex: 1; - min-width: 0; -} -.security-name { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; -} -.security-type { - display: inline-block; - background: rgba(var(--color-accent-rgb), 0.1); - color: var(--color-accent); - padding: 0.25rem 0.75rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 0.75rem; -} -.security-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} -.security-scopes { - margin-top: 1rem; -} -.security-scopes h5 { - margin: 0 0 0.5rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} -.scopes-list { - display: flex; - flex-wrap: wrap; - gap: 0.375rem; -} -.scope-item { - background: var(--color-bg-secondary); - color: var(--color-text-primary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.75rem; - font-weight: 500; - border: 1px solid var(--color-border-primary); -} -.security-details { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 1rem; - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid var(--color-border-primary); -} -.security-detail { - font-size: 0.875rem; -} -.security-detail strong { - color: var(--color-text-primary); - display: block; - margin-bottom: 0.25rem; -} -.security-detail code { - font-family: var(--font-family-mono); - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; - font-size: 0.8rem; -} -/* OpenAPI Responsive Styles */ -/* ========================================================================== - Responsive & Mobile - ========================================================================== */ -@media (max-width: 768px) { - .openapi-header { - padding: 2rem 1.5rem; - } - - .openapi-header__title { - font-size: 2rem; - } - - .openapi-header__info { - grid-template-columns: 1fr; - gap: 1rem; - } - - .section-title { - font-size: 2rem; - } - - .overview-grid { - grid-template-columns: 1fr; - gap: 1rem; - } - - .endpoints-nav { - padding: 1rem; - } - - .endpoints-nav__tags, - .endpoints-nav__methods { - gap: 0.375rem; - } - - .tag-filter, - .method-filter { - padding: 0.375rem 0.75rem; - font-size: 0.8rem; - } - - .endpoint-header { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - padding: 1rem; - } - - .endpoint-header__method { - align-self: flex-start; - } - - .endpoint-header__toggle { - position: absolute; - top: 1rem; - right: 1rem; - } - - .endpoint-details { - padding: 1rem; - } - - .property-item { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - .code-tabs-nav { - flex-wrap: wrap; - } - - .code-tab { - padding: 0.75rem 1rem; - font-size: 0.8rem; - } - - .code-example-header { - padding: 0.75rem 1rem; - } - - .parameters-section-header, - .parameter-item { - padding: 0.75rem 1rem; - } -} -@media (max-width: 480px) { - .openapi-header { - padding: 1.5rem 1rem; - } - - .openapi-header__title { - font-size: 1.75rem; - } - - .section-title { - font-size: 1.75rem; - } - - .overview-stat { - gap: 0.5rem; - padding: 0.625rem 0.75rem; - min-height: 50px; - } - - .overview-stat__icon { - width: 1rem; - height: 1rem; - } - - .overview-doc-link { - gap: 0.5rem; - padding: 0.75rem; - } - - .endpoint-header { - padding: 0.75rem; - } - - .endpoint-details { - padding: 0.75rem; - } -} -/* ========================================================================== - Print Styles - ========================================================================== */ -@media print { - .openapi-spec { - background: white !important; - color: black !important; - } - - .endpoint-details { - display: block !important; - } - - .code-tab-panel { - display: block !important; - } - - .endpoints-nav, - .copy-button, - .endpoint-header__toggle { - display: none !important; - } -} -/* Unified Tabs Component CSS - * - Enhanced tabs ([data-component="tabs"], .tabs__*) - */ -/* ========================== - Enhanced Tabs (BEM + data) - ========================== */ -[data-component="tabs"], -.tabs { - margin: 1.5rem 0; - border-radius: 1rem; - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - box-shadow: var(--glass-shadow); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; - position: relative; -} -/* Light mode: strengthen overall container border for visibility */ -@media (prefers-color-scheme: light) { - [data-component="tabs"], - .tabs { - border-color: var(--color-border-primary); - } -} -/* Header-aligned visuals are now the default */ -/* Tab buttons container */ -[data-component="tabs"] [data-tab-id], -.tabs__nav { - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - padding: 0.5rem 0.5rem; - display: flex; - flex-wrap: wrap; - gap: 0.25rem; -} -/* Light mode: strengthen nav divider for visibility */ -@media (prefers-color-scheme: light) { - [data-component="tabs"] [data-tab-id], - .tabs__nav { - border-bottom-color: var(--color-border-primary); - } -} -/* Individual tab buttons */ -[data-component="tabs"] button[data-tab-option], -.tabs__button { - position: relative; - border-radius: 0.625rem; - font-weight: 600; - transition: - background-color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - border: 1px solid var(--glass-border-color); - cursor: pointer; - white-space: nowrap; - background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - padding: 0.25rem 0.5rem; /* match breadcrumb */ -} -/* Default (inactive) */ -[data-component="tabs"] button[data-tab-option]:not(.bg-brand), -.tabs__button:not(.bg-brand) { - background: var(--glass-bg) !important; - color: var(--color-text-primary) !important; - border-color: var(--glass-border-color); -} -/* Light mode: increase inactive button border contrast */ -@media (prefers-color-scheme: light) { - [data-component="tabs"] button[data-tab-option]:not(.bg-brand), - .tabs__button:not(.bg-brand) { - border-color: var(--color-border-primary); - } -} -/* Hover */ -[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover, -.tabs__button:not(.bg-brand):hover { - background: var(--color-surface-hover) !important; - color: var(--color-brand) !important; - border-color: rgba(var(--color-brand-rgb), 0.35); - transform: translateY(-1px); - box-shadow: var(--elevation-2); -} -/* Active */ -[data-component="tabs"] button.bg-brand, -.tabs__button.bg-brand { - background: var(--color-brand) !important; - color: var(--color-text-inverse, #fff) !important; - border-color: var(--color-brand); - box-shadow: var(--elevation-brand-subtle); - transform: translateY(-1px); -} -/* Subtle variant: revert to tinted-active style */ -[data-component="tabs"].tabs--subtle button.bg-brand, -.tabs.tabs--subtle .tabs__button.bg-brand { - background: - linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.06) 100% - ), - var(--glass-bg) !important; - color: var(--color-text-primary) !important; - border-color: rgba(var(--color-brand-rgb), 0.45); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.18), var(--elevation-2); -} -/* Dark mode: increase active contrast by default */ -@media (prefers-color-scheme: dark) { - [data-component="tabs"] button.bg-brand, - .tabs__button.bg-brand { - background: var(--color-brand) !important; - color: var(--color-text-inverse, #fff) !important; - border-color: var(--color-brand); - box-shadow: var(--elevation-brand-medium); - } -} -/* Focus */ -[data-component="tabs"] button[data-tab-option]:focus-visible, -.tabs__button:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); -} -/* Content container */ -[data-component="tabs"] .w-full, -.tabs__content { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ -} -/* Panels */ -[data-component="tabs"] [data-tabcontent], -.tabs__panel { - padding: 1.25rem 1.5rem; - background: transparent; - position: absolute; - top: 0; - left: 0; - right: 0; - will-change: opacity, transform; - backface-visibility: hidden; - transform: var(--transform-slide-in-up); - opacity: 0; - visibility: hidden; - pointer-events: none; - transition: - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - visibility 0s linear var(--timing-medium); -} -/* Visible panel */ -[data-component="tabs"] [data-tabcontent].is-active, -.tabs__panel.is-active { - opacity: 1; - transform: var(--transform-translate-none); - visibility: visible; - pointer-events: auto; - transition-delay: 0s, 0s, 0s; - animation: slideInUp var(--timing-medium) var(--easing-standard); -} -/* Panel content spacing */ -[data-component="tabs"] [data-tabcontent] > *:first-child, -.tabs__panel > *:first-child { margin-top: 0; } -[data-component="tabs"] [data-tabcontent] > *:last-child, -.tabs__panel > *:last-child { margin-bottom: 0; } -/* Smooth entrance */ -[data-component="tabs"] [data-tabcontent] *, -.tabs__panel * { transition: none; } -/* Compact density variant */ -[data-component="tabs"].tabs--compact .tabs__nav, -.tabs.tabs--compact .tabs__nav { - padding: 0.25rem 0.25rem; - gap: 0.125rem; -} -[data-component="tabs"].tabs--compact button[data-tab-option], -.tabs.tabs--compact .tabs__button { - padding: 0.375rem 0.5rem; - font-size: 0.875rem; -} -/* Underline hover animation for inactive buttons */ -[data-component="tabs"] button[data-tab-option]:not(.bg-brand)::after, -.tabs__button:not(.bg-brand)::after { - content: ""; - position: absolute; - left: 0.5rem; right: 0.5rem; bottom: 0.25rem; - height: 2px; - background: rgba(var(--color-brand-rgb), 0.35); - transform: scaleX(0); - transform-origin: left center; - transition: transform var(--timing-medium) var(--easing-standard); -} -[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover::after, -.tabs__button:not(.bg-brand):hover::after { transform: scaleX(1); } -/* Responsive */ -@media (max-width: 640px) { - [data-component="tabs"] [data-tab-id], - .tabs__nav { flex-direction: column; align-items: stretch; } - [data-component="tabs"] button[data-tab-option], - .tabs__button { text-align: left; justify-content: flex-start; } - [data-component="tabs"] [data-tabcontent], - .tabs__panel { padding: 1.5rem; } -} -/* Print */ -@media print { - [data-component="tabs"] [data-tab-id], - .tabs__nav { display: none; } - [data-component="tabs"] [data-tabcontent], - .tabs__panel { position: static !important; display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; page-break-inside: avoid; } - [data-component="tabs"] [data-tabcontent]:not(:first-of-type), - .tabs__panel:not(:first-of-type) { margin-top: 2rem; border-top: 1px solid var(--color-border-primary); padding-top: 2rem; } - [data-component="tabs"] [data-tabcontent]::before, - .tabs__panel::before { content: "Tab: " attr(data-tabcontent); display: block; font-weight: bold; margin-bottom: 1rem; color: var(--color-text-secondary); font-size: 0.875rem; text-transform: capitalize; } -} -@media (prefers-color-scheme: dark) { - [data-component="tabs"], .tabs { box-shadow: var(--elevation-4); } - [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { box-shadow: var(--elevation-brand-medium); } - [data-component="tabs"]::after, - .tabs::after { - background: linear-gradient( - to bottom, - rgba(0,0,0,0) 0%, - rgba(0,0,0,0.18) 55%, - rgba(0,0,0,0.28) 100% - ); - } -} -/* Code Blocks - align with header/tabs glass surface and tokens */ -.code-block-enhanced { - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); - overflow: hidden; -} -/* Light mode: strengthen wrapper border for visibility */ -@media (prefers-color-scheme: light) { - .code-block-enhanced { - border-color: var(--color-border-primary); - } -} -.code-block-enhanced .code-header { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.75rem; - padding: 0.5rem 0.75rem; - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); -} -/* Light mode: strengthen header divider similar to article header */ -@media (prefers-color-scheme: light) { - .code-block-enhanced .code-header { - border-bottom-color: var(--color-border-primary); - } -} -.code-block-enhanced .code-language { - color: var(--color-text-secondary); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.04em; - font-size: 0.75rem; -} -.code-block-enhanced .code-actions .btn { - border-radius: 0.5rem; -} -.code-block-enhanced .code-actions .btn.btn--ghost { - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); -} -.code-block-enhanced .code-actions .btn.btn--ghost:hover { - background: var(--color-surface-hover); - color: var(--color-brand); - border-color: rgba(var(--color-brand-rgb), 0.35); -} -.code-block-enhanced .code-content { - background: transparent; -} -.code-block-enhanced .code-content .highlight, -.code-block-enhanced .code-content .highlight pre, -.code-block-enhanced .code-content pre, -.code-block-enhanced .code-content code { - background: transparent; -} -.code-block-enhanced .code-content pre { - margin: 0; - padding: 0.75rem 1rem; -} -.code-block-enhanced .code-content code { - display: block; -} -/* Dark mode glow tuning aligns with header action glow */ -@media (prefers-color-scheme: dark) { - .code-block-enhanced { - box-shadow: var(--elevation-4); - } -} -/* Copy button icon alignment and sizing - Ensure the single SVG icon in the copy button is visually centered and consistent */ -.code-block-enhanced .code-actions .copy-code .btn__icon { - margin-right: 0; /* no trailing space for icon-only buttons */ - width: 1rem; /* enforce square icon */ - height: 1rem; - display: block; /* remove inline alignment quirks */ -} -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} -/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ -} -::before, -::after { - --tw-content: ''; -} -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ -html, -:host { - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-tab-size: 4; /* 3 */ - -o-tab-size: 4; - tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ - font-feature-settings: normal; /* 5 */ - font-variation-settings: normal; /* 6 */ - -webkit-tap-highlight-color: transparent; /* 7 */ -} -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ -body { - margin: 0; /* 1 */ - line-height: inherit; /* 2 */ -} -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ - border-top-width: 1px; /* 3 */ -} -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} -/* -Remove the default font size and weight for headings. -*/ -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ -a { - color: inherit; - text-decoration: inherit; -} -/* -Add the correct font weight in Edge and Safari. -*/ -b, -strong { - font-weight: bolder; -} -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-feature-settings: normal; /* 2 */ - font-variation-settings: normal; /* 3 */ - font-size: 1em; /* 4 */ -} -/* -Add the correct font size in all browsers. -*/ -small { - font-size: 80%; -} -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sub { - bottom: -0.25em; -} -sup { - top: -0.5em; -} -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ - border-collapse: collapse; /* 3 */ -} -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-feature-settings: inherit; /* 1 */ - font-variation-settings: inherit; /* 1 */ - font-size: 100%; /* 1 */ - font-weight: inherit; /* 1 */ - line-height: inherit; /* 1 */ - letter-spacing: inherit; /* 1 */ - color: inherit; /* 1 */ - margin: 0; /* 2 */ - padding: 0; /* 3 */ -} -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ -button, -select { - text-transform: none; -} -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; /* 1 */ - background-color: transparent; /* 2 */ - background-image: none; /* 2 */ -} -/* -Use the modern Firefox focus style for all focusable elements. -*/ -:-moz-focusring { - outline: auto; -} -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ -:-moz-ui-invalid { - box-shadow: none; -} -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ -progress { - vertical-align: baseline; -} -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ -[type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ -::-webkit-search-decoration { - -webkit-appearance: none; -} -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} -/* -Add the correct display in Chrome and Safari. -*/ -summary { - display: list-item; -} -/* -Removes the default spacing and border for appropriate elements. -*/ -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} -fieldset { - margin: 0; - padding: 0; -} -legend { - padding: 0; -} -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} -/* -Reset default styling for dialogs. -*/ -dialog { - padding: 0; -} -/* -Prevent resizing textareas horizontally by default. -*/ -textarea { - resize: vertical; -} -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ -} -input::placeholder, -textarea::placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ -} -/* -Set the default cursor for buttons. -*/ -button, -[role="button"] { - cursor: pointer; -} -/* -Make sure disabled buttons don't get the pointer cursor. -*/ -:disabled { - cursor: default; -} -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; /* 1 */ - vertical-align: middle; /* 2 */ -} -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ -img, -video { - max-width: 100%; - height: auto; -} -/* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden]:where(:not([hidden="until-found"])) { - display: none; -} -:root { - /* Used for scroll anchoring above headings */ - --header-offset: 64px; - } -/* ✅ FIXED: Use animation tokens instead of hardcoded values */ -html:not(.no-transitions) { - transition: color-scheme var(--timing-medium) var(--easing-standard); - } -/* Apply transitions only to specific elements that need them */ -html:not(.no-transitions) .btn, - html:not(.no-transitions) .nav-link, - html:not(.no-transitions) .card, - html:not(.no-transitions) .collapse__header, - html:not(.no-transitions) .search-container, - html:not(.no-transitions) .toast-notification, - html:not(.no-transitions) .theme-transition { - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - } -/* Disable transitions during page load to prevent flash */ -html.no-transitions, - html.no-transitions * { - transition: none !important; - } -/* Global Header Sizes & Thickness with Responsive Scaling */ -/* h1 { - font-size: clamp(1.5rem, 4vw, 1.875rem); */ -/* Responsive 24px-30px */ -/* line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; - } */ -h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* Responsive 24px-28px */ - line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; - } -/* h2 { - font-size: clamp(1.25rem, 3.5vw, 1.5rem); */ -/* Responsive 20px-24px */ -/* line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; - } */ -h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); /* Responsive 20px-22px */ - line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; - } -/* h3 { - font-size: clamp(1.125rem, 3vw, 1.25rem); */ -/* Responsive 18px-20px */ -/* line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; - } */ -h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* Responsive 17px-19px */ - line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; - } -h4 { - font-size: 1.125rem; - line-height: 1.75; - font-weight: 700; - letter-spacing: -0.01em; - word-wrap: break-word; -} -h5 { - font-size: 1rem; - line-height: 1.6; - font-weight: 700; -} -.related-content__card h5 { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__card:hover h5 { - color: var(--color-brand); -} -h5 { - word-wrap: break-word; - } -h6 { - font-size: 1rem; /* Increased from 0.875rem for accessibility */ - line-height: 1.5; - font-weight: 700; - word-wrap: break-word; - } -/* Global Font Family & Body Text - Uses brand font with fallbacks */ -main { - font-family: NVIDIA, Arial, Helvetica, sans-serif; -} -/* Improve font loading consistency between dev and production */ -html { - font-synthesis: none; /* Prevent synthetic font generation */ - } -/* Ensure consistent font metrics during font loading */ -body, main { - font-optical-sizing: auto; - font-feature-settings: "kern" 1; - text-rendering: optimizeLegibility; - } -/* Enhanced Body Text Typography */ -/* body { - font-size: clamp(1rem, 2.5vw, 1.125rem); */ -/* Responsive 16px-18px */ -/* line-height: 1.6; - letter-spacing: 0.01em; - } */ -body { - font-size: clamp(1rem, 2vw, 1.0625rem); /* Responsive 16px-17px */ - line-height: 1.6; - letter-spacing: 0.01em; - } -/* Article Content Styles */ -/* Margins */ -.article-content > * { - margin-top: 0.75rem; - margin-bottom: 0.75rem; -} -/* Font Color & Thickness */ -.article-content { - color: var(--color-text-primary); - font-size: 1rem; /* mobile-first */ - line-height: 1.65; /* mobile-first */ - letter-spacing: 0.01em; - } -/* Bump article typography at md and up (replaces mobile max-width overrides) */ -/* @screen md { - .article-content { - font-size: 1.125rem; */ -/* 18px for improved readability */ -/* line-height: 1.6; - } - } */ -@media (min-width: 768px) { - .article-content { - font-size: 1.0625rem; /* 17px for improved readability */ - line-height: 1.6; - } - } -.article-content p { - font-size: inherit; - line-height: inherit; - letter-spacing: inherit; - } -.article-content strong { - font-family: NVIDIA, Arial, Helvetica, sans-serif; - font-weight: 600; -} -/* List Styles */ -.article-content li li { - margin-left: 3rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} -.\!container { - width: 100% !important; -} -.container { - width: 100%; -} -@media (min-width: 640px) { - .\!container { - max-width: 640px !important; - } - .container { - max-width: 640px; - } -} -@media (min-width: 768px) { - .\!container { - max-width: 768px !important; - } - .container { - max-width: 768px; - } -} -@media (min-width: 1024px) { - .\!container { - max-width: 1024px !important; - } - .container { - max-width: 1024px; - } -} -@media (min-width: 1280px) { - .\!container { - max-width: 1280px !important; - } - .container { - max-width: 1280px; - } -} -@media (min-width: 1536px) { - .\!container { - max-width: 1536px !important; - } - .container { - max-width: 1536px; - } -} -/* - * Replacement policy: retire global element styles in favor of a semantic component API. - * Old global table selectors are intentionally removed to avoid leakage across the site. - */ -/* Bridge default Markdown tables to component rules until all markup adopts .table */ -:where(.table, .article-content table) { - width: 100%; - font-size: 0.875rem; - line-height: 1.5; -} -[data-component="tabs"] :where(.table, .article-content table) { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ -} -:where(.table, .article-content table) { - border-collapse: separate; - border-spacing: 0; - color: var(--color-text-primary); - } -/* Container (enables horizontal scroll when needed) */ -.table__container { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - overflow-y: hidden; /* avoid clipping rounded headers within container */ -} -/* Ensure rounded headers aren't visually clipped when inside a scroll container */ -.table__container--rounded { border-radius: 0.75rem; } -/* Progressive enhancement: auto-round container if it has a rounded/glass table */ -.table__container:has(> .table.table--rounded), - .table__container:has(> .table.table--glass) { border-radius: 0.75rem; } -/* Head */ -:where(.table__head, .article-content table thead) th { - text-align: left; - font-size: 0.875rem; - line-height: 1.4; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.025em; -} -[data-component="article-next-prev"] .article-next-prev__link :where(.table__head, .article-content table thead) th { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover :where(.table__head, .article-content table thead) th { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled :where(.table__head, .article-content table thead) th { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link :where(.table__head, .article-content table thead) th { - font-size: 0.6875rem; - } -} -:where(.table__head, .article-content table thead) th { - background-color: var(--color-surface-active); - color: var(--color-text-primary); - } -/* Rows */ -:where(.table__row, .article-content table tbody tr) { - vertical-align: top; -} -/* Cells */ -:where(.table__cell, .article-content table th, .article-content table td) { - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - border-top: 1px solid var(--color-border-primary); -} -.table__cell--nowrap { - white-space: nowrap; -} -/* Density variants */ -.table--dense .table__cell { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} -.table--compact .table__cell { - padding-top: 0.125rem; - padding-bottom: 0.125rem; -} -/* Row states */ -.table :where(.table__row:hover) { background-color: var(--color-surface-hover); } -:where(.article-content table tbody tr:hover) { background-color: var(--color-surface-hover); } -.table--zebra .table__body > .table__row:nth-child(even) { background-color: var(--color-surface); } -/* Ensure hover wins over zebra striping */ -.table--zebra .table__body > .table__row:nth-child(even):hover { background-color: var(--color-surface-hover); } -/* Pinned header (opt-in) */ -/* Glass morphism (opt-in) */ -.table--glass { - border-radius: 0.5rem; - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); border-radius: var(--radius-lg); - backdrop-filter: saturate(150%) blur(8px); - -webkit-backdrop-filter: saturate(150%) blur(8px); - /* Light: subtle translucent surface; Dark: stronger translucency */ - background-color: rgb(255 255 255 / 0.6); -} -@media (prefers-color-scheme: dark) { - .table--glass { - background-color: rgb(24 24 27 / 0.4); - } -} -.table--glass { - border: 1px solid var(--color-border-primary); - } -/* Inspired header: match code/tabs glass header visuals */ -.table--header-glass .table__head, - .table--glass .table__head { - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - overflow: hidden; /* ensure rounded corners show */ - } -.table--header-glass .table__head th, - .table--glass .table__head th { - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-size: 0.875rem; - line-height: 1.4; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.025em; -} -[data-component="article-next-prev"] .article-next-prev__link .table--header-glass .table__head th,[data-component="article-next-prev"] .article-next-prev__link - .table--glass .table__head th { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .table--header-glass .table__head th,[data-component="article-next-prev"] .article-next-prev__link:hover - .table--glass .table__head th { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .table--header-glass .table__head th,[data-component="article-next-prev"] .article-next-prev__link--disabled - .table--glass .table__head th { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .table--header-glass .table__head th,[data-component="article-next-prev"] .article-next-prev__link - .table--glass .table__head th { - font-size: 0.6875rem; - } -} -.table--header-glass .table__head th, - .table--glass .table__head th { - background: var(--glass-bg); - border-top: none; /* avoid double border at the top */ - } -/* Subtle separators between header cells (like tabs nav) */ -.table--header-glass .table__head th + th, - .table--glass .table__head th + th { - border-left: 1px solid var(--glass-border-color); - } -/* Light mode: strengthen dividers for visibility */ -@media (prefers-color-scheme: light) { - .table--header-glass .table__head, - .table--glass .table__head { border-bottom-color: var(--color-border-primary); } - .table--header-glass .table__head th + th, - .table--glass .table__head th + th { border-left-color: var(--color-border-primary); } - } -/* Rounded top corners when using glass/rounded variant */ -.table--rounded .table__head th:first-child, - .table--glass .table__head th:first-child { border-top-left-radius: 0.75rem; } -.table--rounded .table__head th:last-child, - .table--glass .table__head th:last-child { border-top-right-radius: 0.75rem; } -.table--rounded .table__head { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden; } -/* Object Model Component */ -[data-component="object-model"] { - /* Align nested option text with summary text start: px-3 + chevron(1rem) + gap(0.5rem) */ - --om-pad-x: 0rem; /* no outer horizontal padding on rows */ - --om-chevron: 1rem; /* h-4 w-4 */ - --om-gap: 0.5rem; /* gap-2 */ - --om-indent: calc(var(--om-pad-x) + var(--om-chevron) + var(--om-gap)); - } -.object-model__title, - .object-model__heading { - scroll-margin-top: var(--header-offset); - } -.object-model__heading, - .object-model__subheading { - color: var(--color-text-primary); - } -/* Token-based badge for section headings (replaces hard-coded bg classes) */ -.object-model__heading-badge { - display: inline-block; - padding: 0.25rem 0.5rem; /* px-2 py-1 */ - border-radius: 0.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - } -.object-model__intro-text, - .object-model__summary { - color: var(--color-text-primary); - } -.object-model__list { - /* Borderless, airy list; separation via spacing and summary hover */ - background: transparent; - border: 0; - box-shadow: none; - overflow: visible; - color: var(--color-text-primary); - list-style: none; - padding-left: 0; - } -/* Ensure inner text inherits proper token-based colors */ -.object-model__item, - .object-model__field, - .object-model__options { - color: inherit; - } -.object-model__details { - /* Remove default marker for consistent chevron */ - } -.object-model__details > summary::-webkit-details-marker { - display: none; - } -.object-model__details > summary { - list-style: none; - } -/* Fine tune nested lists */ -.object-model__options { - /* Use only the explicit padding from markup; remove UA list padding/indent */ - list-style: none; - padding-inline-start: 0; - margin-left: 0.5em; - padding-left: var(--om-indent); - padding-top: 0.25rem; /* tighter attach under summary */ - } -/* Override global article nested list indent for this component only */ -.article-content[data-component="object-model"] .object-model__list li, - .article-content[data-component="object-model"] .object-model__list li li { - margin-left: 0; - padding-left: 0; - } -/* Ensure summary row has clear focus ring */ -.object-model__summary-row { - border-radius: 0.375rem; - outline: 2px solid transparent; - outline-offset: 2px; border-radius: var(--radius-md); -} -.object-model__summary-row:focus-visible { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-opacity: 1; - --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1)); -} -@media (prefers-color-scheme: dark) { - .object-model__summary-row:focus-visible { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity, 1)); - } -} -.object-model__summary-row:hover { - background-color: rgba(var(--color-brand-rgb), 0.03); - } -/* Ensure names/descriptions use token text colors automatically */ -.object-model__name { - color: var(--color-text-primary); - } -.object-model__description { - color: var(--color-text-primary); - } -.object-model__chevron { - color: var(--color-text-secondary); - } -.object-model__dash { - color: var(--color-border-primary); - } -/* Option items typography */ -/* Keys and values color tokens */ -.object-model__option-key code { - color: var(--color-text-primary); - font-weight: 600; /* add visual weight to keys */ - } -.object-model__option-value, - .object-model__option-value p, - .object-model__option-value a { - color: var(--color-text-primary); - } -.object-model__option-value { display: inline; margin-left: 0.375rem; } -.object-model__option-value p { display: inline; margin: 0; } -.object-model__option-value a:hover { color: var(--color-brand); } -/* Option item in normal inline flow (avoid flex to prevent text splitting into multiple flex items) */ -.object-model__option-item { - display: block; - padding: 0.125rem 0; - font-size: 0.875rem; /* text-sm */ - line-height: 1.45; - } -.object-model__option-key { - color: var(--color-text-secondary); - white-space: nowrap; - } -.object-model__option-value { - color: var(--color-text-primary); - } -/* Strong label variant (for legacy markup without key/value wrappers) */ -.object-model__option-item > strong { - margin-right: 0.375rem; - font-weight: 600; - } -.object-model__option-item code { - white-space: nowrap; - } -/* Compact spacing for rows in dense lists */ -.object-model__row, - .object-model__summary-row { - padding-top: 0.375rem; - padding-bottom: 0.375rem; -} -@media (min-width: 768px) { - .object-model__row, - .object-model__summary-row { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } -} -.object-model__details:not([open]) .object-model__summary-row { box-shadow: none; } -.object-model__details[open] .object-model__summary-row { box-shadow: none; } -/* Soft separation between items without borders */ -.object-model__item + .object-model__item { margin-top: 0.25rem; } -/* Responsive auto-fit grid for cards/tiles */ -.grid-autofit { - grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min, 280px), 1fr)); - } -@media (min-width: 768px) { - .grid-autofit { - gap: 2rem; - } - } -/* Layout shell: centralizes the app's three-column grid with tokens */ -.layout-shell { - width: 100%; - padding-left: 1rem; - padding-right: 1rem; - transition-property: all; - transition-duration: 300ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} -[data-component="tabs"] .layout-shell { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ -} -@media (min-width: 640px) { - .layout-shell { - padding-left: 1.5rem; - padding-right: 1.5rem; - } -} -@media (min-width: 1024px) { - .layout-shell { - padding-left: 2rem; - padding-right: 2rem; - } -} -@media (min-width: 1280px) { - .layout-shell { - padding-left: 0px; - padding-right: 0px; - display: grid; - grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width); - gap: var(--layout-gap-xl); - } -} -@media (min-width: 1536px) { - .layout-shell { - grid-template-columns: var(--left-rail-width-2xl) minmax(0, 1fr) var(--right-rail-width-2xl); - gap: var(--layout-gap-2xl); - } - } -/* Page container max-width controlled by token */ -.page-container { - max-width: var(--max-width-content); - } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} -.pointer-events-none { - pointer-events: none; -} -.visible { - visibility: visible; -} -.collapse { - visibility: collapse; -} -.static { - position: static; -} -.fixed { - position: fixed; -} -.absolute { - position: absolute; -} -.relative { - position: relative; -} -.sticky { - position: sticky; -} -.inset-0 { - inset: 0px; -} -.bottom-\[9px\] { - bottom: 9px; -} -.left-0 { - left: 0px; -} -.left-4 { - left: 1rem; -} -.right-0 { - right: 0px; -} -.right-2\.5 { - right: 0.625rem; -} -.top-0 { - top: 0px; -} -.top-10 { - top: 2.5rem; -} -.top-16 { - top: 4rem; -} -.top-20 { - top: 5rem; -} -.top-4 { - top: 1rem; -} -.z-10 { - z-index: 10; -} -.z-40 { - z-index: 40; -} -.z-50 { - z-index: 50; -} -.m-4 { - margin: 1rem; -} -.mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; -} -.mx-8 { - margin-left: 2rem; - margin-right: 2rem; -} -.mx-auto { - margin-left: auto; - margin-right: auto; -} -.my-1 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; -} -.my-10 { - margin-top: 2.5rem; - margin-bottom: 2.5rem; -} -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} -.-mr-1 { - margin-right: -0.25rem; -} -.mb-1 { - margin-bottom: 0.25rem; -} -.mb-2 { - margin-bottom: 0.5rem; -} -.mb-3 { - margin-bottom: 0.75rem; -} -.mb-4 { - margin-bottom: 1rem; -} -.mb-6 { - margin-bottom: 1.5rem; -} -.mb-8 { - margin-bottom: 2rem; -} -.ml-1 { - margin-left: 0.25rem; -} -.ml-2 { - margin-left: 0.5rem; -} -.ml-3 { - margin-left: 0.75rem; -} -.ml-4 { - margin-left: 1rem; -} -.ml-8 { - margin-left: 2rem; -} -.mr-1 { - margin-right: 0.25rem; -} -.mr-2 { - margin-right: 0.5rem; -} -.mr-3 { - margin-right: 0.75rem; -} -.mt-1 { - margin-top: 0.25rem; -} -.mt-12 { - margin-top: 3rem; -} -.mt-2 { - margin-top: 0.5rem; -} -.mt-3 { - margin-top: 0.75rem; -} -.mt-4 { - margin-top: 1rem; -} -.mt-6 { - margin-top: 1.5rem; -} -.mt-8 { - margin-top: 2rem; -} -.line-clamp-2 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; -} -.line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} -.\!block { - display: block !important; -} -.block { - display: block; -} -.inline-block { - display: inline-block; -} -.inline { - display: inline; -} -.flex { - display: flex; -} -.inline-flex { - display: inline-flex; -} -.table { - display: table; -} -.grid { - display: grid; -} -.contents { - display: contents; -} -.hidden { - display: none; -} -.h-1\.5 { - height: 0.375rem; -} -.h-10 { - height: 2.5rem; -} -.h-16 { - height: 4rem; -} -.h-3 { - height: 0.75rem; -} -.h-3\.5 { - height: 0.875rem; -} -.h-32 { - height: 8rem; -} -.h-4 { - height: 1rem; -} -.h-48 { - height: 12rem; -} -.h-5 { - height: 1.25rem; -} -.h-6 { - height: 1.5rem; -} -.h-7 { - height: 1.75rem; -} -.h-8 { - height: 2rem; -} -.h-\[calc\(100vh-4rem\)\] { - height: calc(100vh - 4rem); -} -.h-\[calc\(100vh-5rem\)\] { - height: calc(100vh - 5rem); -} -.h-\[calc\(100vh-6rem\)\] { - height: calc(100vh - 6rem); -} -.h-full { - height: 100%; -} -.h-screen { - height: 100vh; -} -.w-1 { - width: 0.25rem; -} -.w-3 { - width: 0.75rem; -} -.w-3\.5 { - width: 0.875rem; -} -.w-3\/4 { - width: 75%; -} -.w-4 { - width: 1rem; -} -.w-4\/6 { - width: 66.666667%; -} -.w-5 { - width: 1.25rem; -} -.w-5\/6 { - width: 83.333333%; -} -.w-56 { - width: 14rem; -} -.w-6 { - width: 1.5rem; -} -.w-7 { - width: 1.75rem; -} -.w-8 { - width: 2rem; -} -.w-80 { - width: 20rem; -} -.w-full { - width: 100%; -} -.min-w-0 { - min-width: 0px; -} -.max-w-2xl { - max-width: 42rem; -} -.max-w-3xl { - max-width: 48rem; -} -.max-w-4xl { - max-width: 56rem; -} -.max-w-6xl { - max-width: 72rem; -} -.max-w-7xl { - max-width: 80rem; -} -.flex-1 { - flex: 1 1 0%; -} -.flex-shrink { - flex-shrink: 1; -} -.flex-shrink-0 { - flex-shrink: 0; -} -.shrink-0 { - flex-shrink: 0; -} -.flex-grow { - flex-grow: 1; -} -.grow { - flex-grow: 1; -} -.-translate-x-full { - --tw-translate-x: -100%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.translate-x-0 { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.rotate-90 { - --tw-rotate: 90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.scale-0 { - --tw-scale-x: 0; - --tw-scale-y: 0; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.scale-100 { - --tw-scale-x: 1; - --tw-scale-y: 1; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -@keyframes pulse { - 50% { - opacity: .5; - } -} -.animate-pulse { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} -@keyframes spin { - to { - transform: rotate(360deg); - } -} -.animate-spin { - animation: spin 1s linear infinite; -} -.cursor-not-allowed { - cursor: not-allowed; -} -.cursor-pointer { - cursor: pointer; -} -.resize-none { - resize: none; -} -.resize { - resize: both; -} -.list-inside { - list-style-position: inside; -} -.list-disc { - list-style-type: disc; -} -.list-none { - list-style-type: none; -} -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} -.grid-cols-\[repeat\(auto-fit\2c minmax\(280px\2c 1fr\)\)\] { - grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); -} -.flex-row { - flex-direction: row; -} -.flex-col { - flex-direction: column; -} -.flex-wrap { - flex-wrap: wrap; -} -.items-start { - align-items: flex-start; -} -.items-end { - align-items: flex-end; -} -.items-center { - align-items: center; -} -.justify-end { - justify-content: flex-end; -} -.justify-center { - justify-content: center; -} -.justify-between { - justify-content: space-between; -} -.gap-1 { - gap: 0.25rem; -} -.gap-2 { - gap: 0.5rem; -} -.gap-3 { - gap: 0.75rem; -} -.gap-4 { - gap: 1rem; -} -.gap-6 { - gap: 1.5rem; -} -.space-x-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.25rem * var(--tw-space-x-reverse)); - margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-x-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-x-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-y-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} -.space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} -.space-y-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} -.space-y-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} -.divide-y > :not([hidden]) ~ :not([hidden]) { - --tw-divide-y-reverse: 0; - border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); -} -.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: 1; - border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1)); -} -.overflow-hidden { - overflow: hidden; -} -.overflow-y-auto { - overflow-y: auto; -} -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.rounded { - border-radius: 0.25rem; -} -.rounded-2xl { - border-radius: 1rem; -} -.rounded-full { - border-radius: 9999px; -} -.rounded-lg { - border-radius: 0.5rem; -} -.rounded-md { - border-radius: 0.375rem; -} -.border { - border-width: 1px; -} -.border-2 { - border-width: 2px; -} -.border-4 { - border-width: 4px; -} -.border-l-4 { - border-left-width: 4px; -} -.border-t { - border-top-width: 1px; -} -.border-dotted { - border-style: dotted; -} -.border-blue-200 { - --tw-border-opacity: 1; - border-color: rgb(191 219 254 / var(--tw-border-opacity, 1)); -} -.border-blue-300 { - --tw-border-opacity: 1; - border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)); -} -.border-border-primary { - border-color: var(--color-border-primary); -} -.border-brand { - border-color: var(--color-brand); -} -.border-gray-100 { - --tw-border-opacity: 1; - border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)); -} -.border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); -} -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); -} -.border-red-200 { - --tw-border-opacity: 1; - border-color: rgb(254 202 202 / var(--tw-border-opacity, 1)); -} -.border-red-400 { - --tw-border-opacity: 1; - border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); -} -.border-red-500 { - --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); -} -.border-transparent { - border-color: transparent; -} -.border-yellow-200 { - --tw-border-opacity: 1; - border-color: rgb(254 240 138 / var(--tw-border-opacity, 1)); -} -.border-yellow-400 { - --tw-border-opacity: 1; - border-color: rgb(250 204 21 / var(--tw-border-opacity, 1)); -} -.border-yellow-500 { - --tw-border-opacity: 1; - border-color: rgb(234 179 8 / var(--tw-border-opacity, 1)); -} -.border-zinc-200 { - --tw-border-opacity: 1; - border-color: rgb(228 228 231 / var(--tw-border-opacity, 1)); -} -.border-t-current { - border-top-color: currentColor; -} -.border-t-transparent { - border-top-color: transparent; -} -.border-opacity-20 { - --tw-border-opacity: 0.2; -} -.bg-bg-primary { - background-color: var(--color-bg-primary); -} -.bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); -} -.bg-blue-100 { - --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); -} -.bg-blue-50 { - --tw-bg-opacity: 1; - background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); -} -.bg-brand { - background-color: var(--color-brand); -} -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); -} -.bg-gray-200 { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); -} -.bg-green-100 { - --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); -} -.bg-green-500 { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); -} -.bg-green-600 { - --tw-bg-opacity: 1; - background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); -} -.bg-red-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); -} -.bg-red-50 { - --tw-bg-opacity: 1; - background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); -} -.bg-red-600 { - --tw-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); -} -.bg-surface { - background-color: var(--color-surface); -} -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); -} -.bg-yellow-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)); -} -.bg-yellow-50 { - --tw-bg-opacity: 1; - background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1)); -} -.bg-zinc-100 { - --tw-bg-opacity: 1; - background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1)); -} -.bg-zinc-600 { - --tw-bg-opacity: 1; - background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1)); -} -.bg-opacity-50 { - --tw-bg-opacity: 0.5; -} -.object-cover { - -o-object-fit: cover; - object-fit: cover; -} -.p-1 { - padding: 0.25rem; -} -.p-1\.5 { - padding: 0.375rem; -} -.p-2 { - padding: 0.5rem; -} -.p-3 { - padding: 0.75rem; -} -.p-4 { - padding: 1rem; -} -.p-5 { - padding: 1.25rem; -} -.p-6 { - padding: 1.5rem; -} -.p-8 { - padding: 2rem; -} -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} -.px-3\.5 { - padding-left: 0.875rem; - padding-right: 0.875rem; -} -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} -.py-2\.5 { - padding-top: 0.625rem; - padding-bottom: 0.625rem; -} -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} -.pl-0 { - padding-left: 0px; -} -.pl-2 { - padding-left: 0.5rem; -} -.pl-4 { - padding-left: 1rem; -} -.pr-1 { - padding-right: 0.25rem; -} -.pr-12 { - padding-right: 3rem; -} -.pr-2 { - padding-right: 0.5rem; -} -.pt-2 { - padding-top: 0.5rem; -} -.pt-3 { - padding-top: 0.75rem; -} -.pt-4 { - padding-top: 1rem; -} -.pt-5 { - padding-top: 1.25rem; -} -.text-left { - text-align: left; -} -.text-center { - text-align: center; -} -.text-right { - text-align: right; -} -.font-brand { - font-family: NVIDIA, Arial, Helvetica, sans-serif; -} -.text-2xl { - font-size: 1.5rem; - line-height: 2; -} -.text-3xl { - font-size: 1.875rem; - line-height: 2.25; -} -.text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; -} -.text-base { - font-size: 1rem; - line-height: 1.6; -} -.text-lg { - font-size: 1.125rem; - line-height: 1.75; -} -.text-sm { - font-size: 0.875rem; - line-height: 1.5; -} -.text-xl { - font-size: 1.25rem; - line-height: 1.75; -} -.text-xs { - font-size: 0.875rem; - line-height: 1.4; -} -.font-black { - font-weight: 900; -} -.font-bold { - font-weight: 700; -} -.font-light { - font-weight: 300; -} -.font-medium { - font-weight: 500; -} -.font-semibold { - font-weight: 600; -} -.font-thin { - font-weight: 100; -} -.uppercase { - text-transform: uppercase; -} -.italic { - font-style: italic; -} -.leading-relaxed { - line-height: 1.625; -} -.leading-tight { - line-height: 1.25; -} -.tracking-wide { - letter-spacing: 0.025em; -} -.text-black { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity, 1)); -} -.text-blue-600 { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity, 1)); -} -.text-blue-900 { - --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity, 1)); -} -.text-brand { - color: var(--color-brand); -} -.text-current { - color: currentColor; -} -.text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity, 1)); -} -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity, 1)); -} -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity, 1)); -} -.text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity, 1)); -} -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity, 1)); -} -.text-green-100 { - --tw-text-opacity: 1; - color: rgb(220 252 231 / var(--tw-text-opacity, 1)); -} -.text-green-500 { - --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity, 1)); -} -.text-red-500 { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)); -} -.text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity, 1)); -} -.text-red-700 { - --tw-text-opacity: 1; - color: rgb(185 28 28 / var(--tw-text-opacity, 1)); -} -.text-red-900 { - --tw-text-opacity: 1; - color: rgb(127 29 29 / var(--tw-text-opacity, 1)); -} -.text-text-primary { - color: var(--color-text-primary); -} -.text-text-secondary { - color: var(--color-text-secondary); -} -.text-transparent { - color: transparent; -} -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} -.text-yellow-700 { - --tw-text-opacity: 1; - color: rgb(161 98 7 / var(--tw-text-opacity, 1)); -} -.text-yellow-800 { - --tw-text-opacity: 1; - color: rgb(133 77 14 / var(--tw-text-opacity, 1)); -} -.underline { - text-decoration-line: underline; -} -.antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -.opacity-40 { - opacity: 0.4; -} -.opacity-50 { - opacity: 0.5; -} -.opacity-60 { - opacity: 0.6; -} -.opacity-70 { - opacity: 0.7; -} -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} -.shadow-xl { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} -.ring-1 { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.ring-black { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1)); -} -.ring-opacity-5 { - --tw-ring-opacity: 0.05; -} -.blur { - --tw-blur: blur(8px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} -.filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} -.backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -} -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.transition-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.duration-200 { - transition-duration: 200ms; -} -.duration-300 { - transition-duration: 300ms; -} -.duration-500 { - transition-duration: 500ms; -} -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} -.hover\:border-brand:hover { - border-color: var(--color-brand); -} -.hover\:bg-brand-1:hover { - background-color: var(--color-brand-1); -} -.hover\:bg-gray-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); -} -.hover\:bg-gray-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); -} -.hover\:bg-red-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); -} -.hover\:bg-zinc-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1)); -} -.hover\:text-blue-600:hover { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity, 1)); -} -.hover\:text-blue-800:hover { - --tw-text-opacity: 1; - color: rgb(30 64 175 / var(--tw-text-opacity, 1)); -} -.hover\:text-brand:hover { - color: var(--color-brand); -} -.hover\:text-gray-900:hover { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity, 1)); -} -.hover\:text-red-800:hover { - --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity, 1)); -} -.hover\:opacity-100:hover { - opacity: 1; -} -.hover\:opacity-80:hover { - opacity: 0.8; -} -.focus\:border-blue-500:focus { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); -} -.focus\:text-blue-600:focus { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity, 1)); -} -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); -} -.focus\:ring-brand:focus { - --tw-ring-color: var(--color-brand); -} -.focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; -} -.disabled\:cursor-not-allowed:disabled { - cursor: not-allowed; -} -.disabled\:opacity-50:disabled { - opacity: 0.5; -} -.group[open] .group-open\:rotate-90 { - --tw-rotate: 90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.group:hover .group-hover\:inline { - display: inline; -} -.group:hover .group-hover\:scale-105 { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.group:hover .group-hover\:opacity-100 { - opacity: 1; -} -@media (min-width: 640px) { - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} -@media (min-width: 768px) { - .md\:relative { - position: relative; - } - .md\:sticky { - position: sticky; - } - .md\:top-16 { - top: 4rem; - } - .md\:mb-0 { - margin-bottom: 0px; - } - .md\:block { - display: block; - } - .md\:flex { - display: flex; - } - .md\:hidden { - display: none; - } - .md\:h-\[calc\(100vh-4rem\)\] { - height: calc(100vh - 4rem); - } - .md\:h-full { - height: 100%; - } - .md\:w-1\/5 { - width: 20%; - } - .md\:w-32 { - width: 8rem; - } - .md\:max-w-80 { - max-width: 20rem; - } - .md\:flex-1 { - flex: 1 1 0%; - } - .md\:translate-x-0 { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - } - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - .md\:flex-row { - flex-direction: row; - } - .md\:gap-5 { - gap: 1.25rem; - } - .md\:px-0 { - padding-left: 0px; - padding-right: 0px; - } - .md\:pt-4 { - padding-top: 1rem; - } - .md\:shadow-none { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } -} -@media (min-width: 1024px) { - .lg\:mt-0 { - margin-top: 0px; - } - .lg\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - .lg\:text-5xl { - font-size: 3rem; - line-height: 1; - } -} -@media (min-width: 1280px) { - .xl\:sticky { - position: sticky; - } - .xl\:top-16 { - top: 4rem; - } - .xl\:block { - display: block; - } - .xl\:hidden { - display: none; - } - .xl\:h-\[calc\(100vh-4rem\)\] { - height: calc(100vh - 4rem); - } - .xl\:w-auto { - width: auto; - } - .xl\:max-w-4xl { - max-width: 56rem; - } - .xl\:translate-x-0 { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - } - .xl\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - .xl\:px-8 { - padding-left: 2rem; - padding-right: 2rem; - } -} -@media (min-width: 1536px) { - .\32xl\:max-w-5xl { - max-width: 64rem; - } - .\32xl\:max-w-7xl { - max-width: 80rem; - } - .\32xl\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - .\32xl\:px-12 { - padding-left: 3rem; - padding-right: 3rem; - } -} -@media (prefers-color-scheme: dark) { - .dark\:border-gray-600 { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); - } - .dark\:border-gray-700 { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity, 1)); - } - .dark\:border-yellow-800 { - --tw-border-opacity: 1; - border-color: rgb(133 77 14 / var(--tw-border-opacity, 1)); - } - .dark\:border-zinc-800 { - --tw-border-opacity: 1; - border-color: rgb(39 39 42 / var(--tw-border-opacity, 1)); - } - .dark\:bg-gray-800 { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); - } - .dark\:bg-yellow-900\/20 { - background-color: rgb(113 63 18 / 0.2); - } - .dark\:text-gray-200 { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity, 1)); - } - .dark\:text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity, 1)); - } - .dark\:text-yellow-200 { - --tw-text-opacity: 1; - color: rgb(254 240 138 / var(--tw-text-opacity, 1)); - } - .dark\:text-yellow-300 { - --tw-text-opacity: 1; - color: rgb(253 224 71 / var(--tw-text-opacity, 1)); - } - .dark\:hover\:bg-gray-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); + + .focus-visible-ring { + @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2; } -} +} \ No newline at end of file diff --git a/assets/css/src/input.css b/assets/css/src/input.css deleted file mode 100644 index b180d218..00000000 --- a/assets/css/src/input.css +++ /dev/null @@ -1,233 +0,0 @@ -/* This file is used to compile the main.css file. */ -/* Import component CSS files - MUST be first! */ - -@import "../architecture/index.css"; - -@import "../components/buttons.css"; -@import "../components/tables.css"; -@import "../components/notice.css"; -@import "../components/navigation.css"; -@import "../components/navigation-api.css"; -@import "../components/breadcrumbs.css"; -@import "../components/search.css"; -@import "../components/chat.css"; -@import "../components/article-header.css"; -@import "../components/article/related-content.css"; -@import "../components/article/page-resources.css"; -@import "../components/tiles.css"; -@import "../components/child-links.css"; -@import "../components/cards.css"; -@import "../components/glossary.css"; -@import "../components/quicklinks.css"; -@import "../components/next-prev.css"; -@import "../components/tutorial.css"; -@import "../components/toast.css"; -@import "../components/notebook.css"; -@import "../components/openapi/index.css"; -@import "../components/tabs.css"; -@import "../components/code.css"; -@import "../components/object-model.css"; - -@tailwind base; -@tailwind components; - -@layer components { - /* Responsive auto-fit grid for cards/tiles */ - .grid-autofit { - grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min, 280px), 1fr)); - } - @screen md { - .grid-autofit { - gap: theme('spacing.8'); - } - } - - /* Layout shell: centralizes the app's three-column grid with tokens */ - .layout-shell { - @apply w-full px-4 sm:px-6 lg:px-8 xl:px-0 transition-all duration-300 ease-in-out; - } - @screen xl { - .layout-shell { - display: grid; - grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width); - gap: var(--layout-gap-xl); - } - } - @screen 2xl { - .layout-shell { - grid-template-columns: var(--left-rail-width-2xl) minmax(0, 1fr) var(--right-rail-width-2xl); - gap: var(--layout-gap-2xl); - } - } - - /* Page container max-width controlled by token */ - .page-container { - max-width: var(--max-width-content); - } -} - -@layer base { - :root { - /* Used for scroll anchoring above headings */ - --header-offset: 64px; - } - - /* ✅ FIXED: Use animation tokens instead of hardcoded values */ - html:not(.no-transitions) { - transition: color-scheme var(--timing-medium) var(--easing-standard); - } - - /* Apply transitions only to specific elements that need them */ - html:not(.no-transitions) .btn, - html:not(.no-transitions) .nav-link, - html:not(.no-transitions) .card, - html:not(.no-transitions) .collapse__header, - html:not(.no-transitions) .search-container, - html:not(.no-transitions) .toast-notification, - html:not(.no-transitions) .theme-transition { - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - } - - /* Disable transitions during page load to prevent flash */ - html.no-transitions, - html.no-transitions * { - transition: none !important; - } - - /* Global Header Sizes & Thickness with Responsive Scaling */ - /* h1 { - font-size: clamp(1.5rem, 4vw, 1.875rem); */ /* Responsive 24px-30px */ - /* line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; - } */ - h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* Responsive 24px-28px */ - line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; - } - /* h2 { - font-size: clamp(1.25rem, 3.5vw, 1.5rem); */ /* Responsive 20px-24px */ - /* line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; - } */ - h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); /* Responsive 20px-22px */ - line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; - } - /* h3 { - font-size: clamp(1.125rem, 3vw, 1.25rem); */ /* Responsive 18px-20px */ - /* line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; - } */ - h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* Responsive 17px-19px */ - line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; - } - h4 { - @apply text-lg font-bold; - letter-spacing: -0.01em; - word-wrap: break-word; - } - h5 { - @apply text-base font-bold; - word-wrap: break-word; - } - h6 { - font-size: 1rem; /* Increased from 0.875rem for accessibility */ - line-height: 1.5; - font-weight: 700; - word-wrap: break-word; - } - - /* Global Font Family & Body Text - Uses brand font with fallbacks */ - main { - @apply font-brand; - } - - /* Improve font loading consistency between dev and production */ - html { - font-synthesis: none; /* Prevent synthetic font generation */ - } - - /* Ensure consistent font metrics during font loading */ - body, main { - font-optical-sizing: auto; - font-feature-settings: "kern" 1; - text-rendering: optimizeLegibility; - } - - /* Enhanced Body Text Typography */ - /* body { - font-size: clamp(1rem, 2.5vw, 1.125rem); */ /* Responsive 16px-18px */ - /* line-height: 1.6; - letter-spacing: 0.01em; - } */ - body { - font-size: clamp(1rem, 2vw, 1.0625rem); /* Responsive 16px-17px */ - line-height: 1.6; - letter-spacing: 0.01em; - } - - /* Article Content Styles */ - - /* Margins */ - .article-content > * { - @apply my-3; - } - - /* Font Color & Thickness */ - .article-content { - color: var(--color-text-primary); - font-size: 1rem; /* mobile-first */ - line-height: 1.65; /* mobile-first */ - letter-spacing: 0.01em; - } - - /* Bump article typography at md and up (replaces mobile max-width overrides) */ - /* @screen md { - .article-content { - font-size: 1.125rem; */ /* 18px for improved readability */ - /* line-height: 1.6; - } - } */ - @screen md { - .article-content { - font-size: 1.0625rem; /* 17px for improved readability */ - line-height: 1.6; - } - } - - .article-content p { - font-size: inherit; - line-height: inherit; - letter-spacing: inherit; - } - - .article-content strong { - @apply font-brand font-semibold; - } - - /* List Styles */ - .article-content li li { - @apply ml-12 py-1; - } -} - -@tailwind utilities; diff --git a/assets/js/components/article/Asciinema.js b/assets/js/components/article/Asciinema.js index 4b5fcb9d..11465d87 100644 --- a/assets/js/components/article/Asciinema.js +++ b/assets/js/components/article/Asciinema.js @@ -31,7 +31,7 @@ class AsciinemaEmbed extends Component { if (isOffline) { // Offline fallback: provide a link to the recording URL if known const url = el.getAttribute('data-asciinema-url') || `https://asciinema.org/a/${id}`; - el.innerHTML = `
Asciinema embed unavailable offline. Open recording when online.
`; + el.innerHTML = `
Asciinema embed unavailable offline. Open recording when online.
`; return; } const script = document.createElement('script'); diff --git a/assets/js/components/chat/ChatBubbles.js b/assets/js/components/chat/ChatBubbles.js index fc20d6b2..0e68406a 100644 --- a/assets/js/components/chat/ChatBubbles.js +++ b/assets/js/components/chat/ChatBubbles.js @@ -47,7 +47,7 @@ export class ChatBubbles { */ createLoadingBubble() { const bubble = document.createElement('div'); - bubble.className = 'chat-bubble bot p-2 rounded-lg text-black font-regular text-sm is-loading'; + bubble.className = 'chat-bubble chat-bubble--bot is-loading'; // Use LoadingStateManager for consistent loading display const loaderId = showLoading(bubble, { diff --git a/assets/js/utils/CopyManager.js b/assets/js/utils/CopyManager.js index e1a92f1a..38777f0e 100644 --- a/assets/js/utils/CopyManager.js +++ b/assets/js/utils/CopyManager.js @@ -285,8 +285,8 @@ export class CopyManager { // Update button appearance button.textContent = options.successMessage; - button.classList.add('copy-button--success', 'bg-green-600'); - button.classList.remove('copy-button--error', 'bg-red-600', 'bg-zinc-600'); + button.classList.add('copy-button--success'); + button.classList.remove('copy-button--error'); // Reset after duration setTimeout(() => { @@ -306,8 +306,8 @@ export class CopyManager { // Update button appearance button.textContent = options.errorMessage; - button.classList.add('copy-button--error', 'bg-red-600'); - button.classList.remove('copy-button--success', 'bg-green-600', 'bg-zinc-600'); + button.classList.add('copy-button--error'); + button.classList.remove('copy-button--success'); // Reset after duration setTimeout(() => { diff --git a/assets/js/utils/NotificationManager.js b/assets/js/utils/NotificationManager.js index 0a30f919..89b27711 100644 --- a/assets/js/utils/NotificationManager.js +++ b/assets/js/utils/NotificationManager.js @@ -580,7 +580,7 @@ export class NotificationManager { } .notification__icon { - flex-shrink: 0; + shrink: 0; margin-top: 0.125rem; } diff --git a/enterprise_html_architecture.md b/enterprise_html_architecture.md new file mode 100644 index 00000000..398ee6c5 --- /dev/null +++ b/enterprise_html_architecture.md @@ -0,0 +1,431 @@ +# Enterprise Technical Documentation HTML Architecture + +## Design Goals + +### Enterprise Requirements +- **Multi-format content support**: Markdown, OpenAPI specs, Jupyter notebooks, code samples, API docs +- **Accessibility compliance**: WCAG 2.1 AA standard for enterprise customers +- **Internationalization ready**: RTL support, multiple languages +- **Developer experience**: Clean markup for theming, testing, automation +- **Performance**: Semantic HTML that's fast to parse and render +- **SEO optimized**: Proper structured data and meta information + +### Content Type Support +1. **Technical Articles** - In-depth documentation, tutorials, guides +2. **API Documentation** - OpenAPI specs with interactive examples +3. **Code Documentation** - Auto-generated from source code (Sphinx, pdoc) +4. **Jupyter Notebooks** - Interactive data science documentation +5. **Reference Materials** - Glossaries, command references, object models +6. **Tutorial Series** - Step-by-step learning paths +7. **Release Notes** - Version history and changelogs + +## Core HTML Patterns + +### 1. Document Structure (baseof.html) +```html + + + + + + + + {{/* SEO and meta */}} + {{ block "head" . }}{{ end }} + {{ block "head-extra" . }}{{ end }} + + + + + + + + {{ block "site-navigation" . }}{{ end }} + +
+
+ + {{ block "breadcrumbs" . }}{{ end }} + +
+ + +
+ {{ block "content" . }}{{ end }} +
+ + +
+
+
+ +
+ {{ block "site-footer" . }}{{ end }} +
+ + {{ block "scripts" . }}{{ end }} + + +``` + +### 2. Technical Article Pattern (single.html) +```html +{{ define "content" }} +
+ +
+
+ {{ with .Params.category }} + {{ . }} + {{ end }} + + {{ with .Date }} + + {{ end }} +
+ +

{{ .Title }}

+ + {{ with .Description }} +

{{ . }}

+ {{ end }} + + {{ with .Params.author }} + + {{ end }} + + {{ if .Params.toc }} + + {{ end }} +
+ +
+ {{ .Content }} +
+ +
+ {{ with .Params.tags }} +
+ Tags: + {{ range . }} + {{ . }} + {{ end }} +
+ {{ end }} + + {{ if .Params.lastmod }} +

+ Last updated: + +

+ {{ end }} +
+
+{{ end }} +``` + +### 3. API Documentation Pattern (openapi/single.html) +```html +{{ define "content" }} +
+ +
+

{{ .Title }}

+ + {{ with .Params.api_version }} + Version {{ . }} + {{ end }} + + {{ with .Description }} +

{{ . }}

+ {{ end }} +
+ + + +
+
+

Overview

+ {{ .Content }} +
+ +
+

Endpoints

+ {{ range .Params.endpoints }} +
+ +
+ {{ .method }} + {{ .path }} +
+ +
+

{{ .description }}

+ + {{ if .parameters }} +
+

Parameters

+ + + + + + + + + + + {{ range .parameters }} + + + + + + + {{ end }} + +
NameTypeRequiredDescription
{{ .name }}{{ .type }}{{ if .required }}Yes{{ else }}No{{ end }}{{ .description }}
+
+ {{ end }} + +
+

Examples

+
+ + +
+
+ 
{{ .examples.curl }}
+
+ + +
+
+
+
+
+ {{ end }} +
+
+
+{{ end }} +``` + +### 4. Jupyter Notebook Pattern (notebook/single.html) +```html +{{ define "content" }} +
+ +
+

{{ .Title }}

+ + {{ with .Params.kernel }} + Kernel: {{ . }} + {{ end }} + +
+ + + +
+
+ +
+ {{ range .Params.cells }} +
+ + {{ if eq .cell_type "markdown" }} +
+ {{ .source | markdownify }} +
+ {{ else if eq .cell_type "code" }} +
+ 
{{ .source }}
+
+ + {{ if .outputs }} +
+ {{ range .outputs }} + {{ if eq .output_type "stream" }} + 
{{ .text }}
+ {{ else if eq .output_type "display_data" }} +
+ {{ if .data.image }} + Output visualization + {{ else if .data.text }} + 
{{ .data.text }}
+ {{ end }} +
+ {{ end }} + {{ end }} +
+ {{ end }} + {{ end }} +
+ {{ end }} +
+
+{{ end }} +``` + +### 5. Navigation Patterns + +#### Primary Navigation (sidebar-left.html) +```html + +``` + +## Component Data Patterns + +### JavaScript Component Integration +```html + +
+ + + + +
+``` + +### Accessibility Standards +- Semantic HTML5 elements for structure +- ARIA labels and roles where needed +- Focus management for dynamic content +- Keyboard navigation support +- Screen reader announcements +- Color contrast compliance +- Reduced motion preferences + +### Performance Optimizations +- Semantic markup reduces CSS specificity needs +- Clean class names for efficient selectors +- Structured data for SEO +- Progressive enhancement ready +- Mobile-first responsive structure + +## Next Steps + +1. Create these core patterns as Hugo partials +2. Build the baseof.html foundation first +3. Implement each content type systematically +4. Add comprehensive accessibility testing +5. Layer on the CSS framework after HTML is perfect diff --git a/exampleSite/config/_default/security.yaml b/exampleSite/config/_default/security.yaml index b514e8ba..4b984913 100644 --- a/exampleSite/config/_default/security.yaml +++ b/exampleSite/config/_default/security.yaml @@ -4,6 +4,7 @@ exec: - '^go$' - '^npx$' - '^postcss$' + - '^tailwindcss$' - '^rst2html.py$' - '^rst2html$' - '^asciidoctor$' diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 10655e6e..9e339e7f 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -15,4 +15,4 @@ cascade: {{%prod%}} is a [Hugo](https://gohugo.io/) theme made for **documentation engineers** and **technical writers**, by one. - {{}} \ No newline at end of file + {{}} \ No newline at end of file diff --git a/exampleSite/content/guides/themes/search/algolia.md b/exampleSite/content/guides/themes/search/algolia.md index 2e5ca45f..13275f57 100644 --- a/exampleSite/content/guides/themes/search/algolia.md +++ b/exampleSite/content/guides/themes/search/algolia.md @@ -99,7 +99,7 @@ Let's create our search results container element. This element will be hidden b ``` 3. Add the partial to your theme's `layouts/_default/baseof.html` layout file. Here's where I've put mine: ```html -
+
{{partial "navigation/sidebar-left.html" . }}
{{- if .IsHome}}{{ block "home" . }}{{ end }}{{else}}{{ block "main" . }}{{ end }}{{- end}} diff --git a/exampleSite/content/guides/theming-and-tokens.md b/exampleSite/content/guides/theming-and-tokens.md index 5c017f35..f087e9f3 100644 --- a/exampleSite/content/guides/theming-and-tokens.md +++ b/exampleSite/content/guides/theming-and-tokens.md @@ -9,7 +9,7 @@ This theme centralizes styling in CSS variables (tokens) and small component cla ## Where tokens live - Architecture: `assets/css/architecture/` - `colors*.css`: color palettes and brand tokens - - `elevation-system.css`: shadow/elevation tokens (e.g., `--elevation-2`, `--elevation-hover-4`) + - `elevation-system.css`: shadow tokens (e.g., `--elevation-2`, `--elevation-hover-4`) - `animation-system.css`: timing/easing/transform tokens - `layout-foundations.css`: spacing/width/z-index and layout tokens diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 58207021..8e94ae92 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -4,7 +4,6 @@ "a", "article", "aside", - "blockquote", "body", "br", "button", @@ -18,23 +17,19 @@ "dl", "dt", "em", + "figure", "footer", "form", "h1", "h2", "h3", "h4", - "h5", - "h6", "head", "header", "hr", "html", "img", - "input", - "label", "li", - "line", "link", "main", "meta", @@ -42,9 +37,7 @@ "ol", "p", "path", - "polyline", "pre", - "rect", "script", "section", "span", @@ -64,77 +57,36 @@ "ul" ], "classes": [ - "-translate-x-full", - "2xl:grid-cols-3", - "2xl:max-w-5xl", - "2xl:max-w-7xl", - "2xl:px-12", "absolute", - "active", + "action-icon", + "action-text", "admonition", "admonition-title", - "animate-spin", - "antialiased", - "api-endpoint", - "api-endpoint-breadcrumb", - "api-endpoint-content", - "api-endpoint-groups", - "api-endpoint-header", - "api-endpoint-item", - "api-endpoint-path", - "api-overview", - "api-tag", - "api-tag-breadcrumb", - "api-tag-content", - "api-tag-description", - "api-tag-header", + "alternative-link", + "article-author", "article-content", + "article-date", "article-description", + "article-footer", "article-header", - "article-header__actions", - "article-header__copy-arrow", - "article-header__copy-dropdown", - "article-header__copy-dropdown-content", - "article-header__copy-icon", - "article-header__copy-page", - "article-header__copy-text", - "article-header__copy-toggle", - "article-header__metadata-panel", - "article-header__navigation", - "article-next-prev__link", - "article-next-prev__link--disabled", + "article-link", + "article-meta", + "article-modified", + "article-pagination", + "article-reading-time", + "article-status-warnings", + "article-summary", + "article-title", "ask-ai", - "badge-label", - "bg-bg-primary", - "bg-black", - "bg-brand", - "bg-opacity-50", - "bg-surface", - "bg-yellow-50", - "bg-zinc-100", "block", - "border", - "border-4", - "border-border-primary", - "border-brand", - "border-dotted", - "border-gray-100", - "border-gray-200", - "border-opacity-20", - "border-t", - "border-t-transparent", - "border-yellow-200", - "border-zinc-200", "bottom-[9px]", - "breadcrumb", + "breadcrumb-current", + "breadcrumb-item", + "breadcrumb-item--current", + "breadcrumb-link", + "breadcrumb-list", "breadcrumb-separator", - "breadcrumb__current", - "breadcrumb__current--clickable", - "breadcrumb__item", - "breadcrumb__link", - "breadcrumb__list", - "breadcrumb__metadata-icon", - "breadcrumb__separator", + "breadcrumbs", "btn", "btn--ghost", "btn--primary", @@ -143,11 +95,15 @@ "btn-compact", "btn__icon", "btn__icon--right", - "card", - "card--endpoint-group", - "card--endpoint-summary", - "card--resource", - "card--tile", + "card-action", + "card-content", + "card-date", + "card-footer", + "card-header", + "card-link", + "card-meta", + "card-summary", + "card-title", "caution", "chat", "chat-assistant-disclaimer-text", @@ -160,261 +116,156 @@ "chat__header-icon", "chat__input", "chat__messages", - "chevron", - "child-link-item", - "child-link-pill", - "child-links-container", - "child-links-list", "class", + "close-icon", "code-actions", "code-block-enhanced", "code-content", - "code-example", - "code-example-header", - "code-example-title", - "code-examples", "code-header", "code-language", - "code-tab", - "code-tab--active", - "code-tab-panel", - "code-tab-panel--active", - "code-tabs-content", - "code-tabs-nav", "collapse", - "collapse__body", - "collapse__body-content", - "collapse__content-wrapper", - "collapse__description", - "collapse__header", - "collapse__icon", - "collapse__icon-wrapper", - "collapse__title", + "collapse--default", + "collapse-content", + "collapse-description", + "collapse-header-content", + "collapse-icon", + "collapse-indicator", + "collapse-inner", + "collapse-summary", + "collapse-title", + "collapse-toggle", "completed", - "component-details", - "component-header", - "component-icon", - "component-item", - "component-name", - "component-toggle", - "component-type", - "components-list", - "components-section", - "components-section-title", - "container", - "copy-button", + "content-layout", + "content-nav", + "content-nav--primary", + "content-nav--secondary", + "content-primary", "copy-code", "copy-icon", - "copy-page-menu-item", - "copy-page-section-header", - "copy-page-separator", + "csv-action", + "csv-action--export", + "csv-action--fullscreen", + "csv-data-cell", + "csv-data-row", + "csv-header-row", + "csv-rows", + "csv-source", + "csv-table", + "csv-table-actions", + "csv-table-body", + "csv-table-container", + "csv-table-figure", + "csv-table-head", + "csv-table-header", + "csv-table-meta", "current", "current-indicator", "current-step-title", - "cursor-pointer", - "dark", - "dark:bg-gray-800", - "dark:bg-yellow-900/20", - "dark:bg-zinc-800", - "dark:border-gray-600", - "dark:border-gray-700", - "dark:border-yellow-800", - "dark:border-zinc-800", - "dark:divide-zinc-800", - "dark:hover:bg-gray-700", - "dark:text-gray-200", - "dark:text-gray-400", - "dark:text-yellow-200", - "dark:text-yellow-300", - "dark:text-zinc-100", - "dark:text-zinc-200", - "dark:text-zinc-300", "desc", + "direction-icon", + "direction-text", "disabled", "disabled:cursor-not-allowed", "disabled:opacity-50", - "divide-y", - "divide-zinc-200", "document", "docutils", "duration-200", - "duration-300", - "duration-500", - "ease-in-out", - "endpoint-count", - "endpoint-details", - "endpoint-groups-grid", - "endpoint-item", - "endpoint-method-path", - "endpoint-path", - "endpoint-section", - "endpoint-summary-description", - "endpoint-summary-header", - "endpoint-summary-info", - "endpoint-title-section", - "endpoints-list", + "empty-state", + "error-action", + "error-action--primary", + "error-action--secondary", + "error-actions", + "error-code", + "error-content", + "error-description", + "error-header", + "error-help", + "error-help-list", + "error-help-title", + "error-nav-card", + "error-nav-card-description", + "error-nav-card-title", + "error-nav-grid", + "error-nav-title", + "error-navigation", + "error-page", + "error-title", + "error-visual", "expand-progress", + "featured-sections", + "featured-sections-title", "first", - "fixed", "flex", "flex-1", "flex-col", - "flex-grow", - "flex-shrink-0", - "focus-ring", "focus:outline-none", "font-bold", - "font-brand", - "font-light", - "font-medium", "font-semibold", + "footer-bottom", + "footer-content", + "footer-copyright", + "footer-section", + "footer-section--primary", + "footer-section-title", "frame-all", "gap-1", "gap-2", "gap-3", "gap-4", - "gap-6", - "glossary-entry", - "grid", + "glossary-breadcrumbs", "grid-all", - "grid-cols-1", - "grid-cols-[repeat(auto-fit,minmax(280px,1fr))]", "group", "group-hover:inline", - "group-hover:opacity-100", - "group-open:rotate-90", "grow", - "h-10", - "h-16", - "h-3", "h-3.5", "h-4", "h-5", - "h-6", "h-7", - "h-[calc(100vh-4rem)]", "h-[calc(100vh-5rem)]", - "h-[calc(100vh-6rem)]", - "h-full", - "h-screen", "halign-left", + "header-actions", + "hero-content", + "hero-description", + "hero-section", + "hero-title", "hidden", - "hide-scrollbar", "highlight", - "hit-target", - "hover:bg-gray-50", - "hover:border-brand", - "hover:opacity-100", - "hover:text-brand", - "http-method-badge", - "http-method-badge--get", + "homepage", "icon", "ident", - "inline-block", - "inset-0", "items-center", "items-end", - "items-start", "justify-between", "justify-center", - "justify-end", "last", - "layout-density--comfortable", - "layout-density--compact", - "layout-shell", - "leading-relaxed", - "leading-tight", - "left-0", - "left-4", - "lg:grid-cols-2", - "lg:grid-cols-3", - "lg:mt-0", - "line-clamp-2", - "line-clamp-3", - "list-disc", - "list-inside", - "list-none", - "m-4", - "max-w-3xl", - "max-w-6xl", - "mb-1", - "mb-2", - "mb-3", - "mb-4", - "mb-6", - "md:block", - "md:flex-1", - "md:flex-row", - "md:gap-5", - "md:grid-cols-2", - "md:mb-0", - "md:pt-4", - "md:px-0", - "md:relative", - "md:translate-x-0", - "md:w-32", - "media-type-label", - "metadata", - "metadata__flow", - "metadata__icon", - "metadata__item", - "metadata__item--secondary", - "method-badge", - "method-badge--get", - "min-w-0", - "ml-1", + "layout-container", "ml-2", - "ml-3", - "ml-4", - "mr-2", - "mr-3", - "mt-1", - "mt-2", + "mobile-nav-icon", + "mobile-nav-overlay", + "mobile-nav-toggle", "mt-4", - "mt-6", - "mt-8", - "mx-2", "mx-8", - "mx-auto", - "my-1", - "my-10", "my-4", "name", - "nested-content", - "no-js", - "not-prose", + "nav-children", + "nav-children--collapsed", + "nav-item", + "nav-item-content", + "nav-link", + "nav-link--current", + "nav-list", + "nav-list--level-1", + "nav-list--level-2", + "nav-list--level-3", + "nav-list--level-4", + "nav-text", + "nav-toggle", + "nav-toggle-icon", + "nav-tree", + "nav-version", + "nav-version-label", + "nav-version-number", "note", - "notebook-cell", - "notebook-cell--code", - "notebook-cell--hidden", - "notebook-cell--markdown", - "notebook-cell-wrapper", - "notebook-cell__header", - "notebook-cell__markdown-content", - "notebook-cell__number", - "notebook-cell__output", - "notebook-cell__output--execute-result", - "notebook-cell__output--stream", - "notebook-cell__outputs", - "notebook-cell__status", - "notebook-cell__status--executed", - "notebook-cell__status--pending", - "notebook-cell__text-output", - "notebook-cell__type", - "notebook-cell__type-icon", - "notebook-cell__type-text", - "notebook__actions", - "notebook__cell-counter", - "notebook__cells", - "notebook__density-btn", - "notebook__density-btn--active", - "notebook__density-toggle", - "notebook__launch", - "notebook__launch-arrow", - "notebook__launch-dropdown", - "notebook__launch-toggle", - "notebook__nav-btn", - "notebook__toolbar", "notice", "notice--danger", "notice--info", @@ -423,184 +274,135 @@ "notice--snack", "notice--tip", "notice--warning", - "notice__container", - "notice__content", - "notice__icon", - "notice__icon-wrapper", - "notice__text", - "notice__title", - "object-model__chevron", - "object-model__dash", - "object-model__description", - "object-model__details", - "object-model__field", - "object-model__group", - "object-model__groups", - "object-model__header", - "object-model__heading", - "object-model__heading-badge", - "object-model__intro", - "object-model__intro-text", - "object-model__item", - "object-model__list", - "object-model__name", - "object-model__option-item", - "object-model__option-key", - "object-model__option-value", - "object-model__options", - "object-model__row", - "object-model__section", - "object-model__subheading", - "object-model__summary", - "object-model__summary-row", - "object-model__title", - "opacity-40", - "opacity-60", - "opacity-70", - "openapi-components", - "openapi-content", - "openapi-header", - "openapi-header__badge", - "openapi-header__badge--maturity", - "openapi-header__badge--type", - "openapi-header__badge--version", - "openapi-header__description", - "openapi-header__info", - "openapi-header__meta", - "openapi-header__title", - "openapi-overview", - "openapi-spec", - "openapi-version", + "notice-container", + "notice-content", + "notice-icon", + "notice-icon--danger", + "notice-icon--info", + "notice-icon--note", + "notice-icon--security", + "notice-icon--tip", + "notice-icon--warning", + "notice-icon-wrapper", + "notice-text", + "notice-title", "overflow-y-auto", - "overview-content", - "overview-doc-link", - "overview-doc-link__arrow", - "overview-doc-link__content", - "overview-doc-link__description", - "overview-doc-link__icon", - "overview-doc-link__title", - "overview-documentation", - "overview-documentation__grid", - "p-1", "p-1.5", - "p-2", - "p-3", "p-4", - "p-5", - "page-container", - "page-content", - "pb-3", + "page-action", + "page-action-icon", + "page-actions", + "page-actions-list", + "page-actions-title", + "page-chat", + "page-chat-container", + "page-chat-title", + "page-meta", + "page-meta-item", + "page-meta-label", + "page-meta-list", + "page-meta-title", + "page-meta-value", + "page-navigation", + "page-toc", + "page-toc-content", + "page-toc-title", + "pagination-alternatives", + "pagination-container", + "pagination-content", + "pagination-direction", + "pagination-item", + "pagination-item--next", + "pagination-item--prev", + "pagination-item--section", + "pagination-link", + "pagination-link--disabled", + "pagination-section-link", + "pagination-summary", + "pagination-title", "pending", "pending-indicator", - "pl-0", - "pl-2", - "pr-1", "pr-12", - "pr-2", + "preview-article-link", + "primary-nav", + "primary-nav-close", + "primary-nav-content", + "primary-nav-footer", + "primary-nav-header", + "primary-nav-title", "progress-fill", "progress-percentage", "progress-track", - "properties-list", - "property-description", - "property-format", - "property-header", - "property-item", - "property-item--required", - "property-meta", - "property-name", - "property-required", - "property-type", - "prose", - "pt-2", - "pt-4", - "px-2", - "px-3", "px-3.5", - "px-4", - "px-6", - "py-1", - "py-2", "py-2.5", - "py-3", "py-4", - "py-8", + "quicklink-action", + "quicklink-actions", + "quicklink-card", + "quicklink-content", + "quicklink-description", + "quicklink-header", + "quicklink-icon", + "quicklink-title", "quicklinks", - "quicklinks__actions", - "quicklinks__description", - "quicklinks__grid", - "quicklinks__header", - "quicklinks__icon", - "quicklinks__item", - "quicklinks__link", - "quicklinks__title", + "quicklinks-grid", + "quicklinks-header", + "quicklinks-title", + "read-more-link", + "recent-updates", + "recent-updates-footer", + "recent-updates-title", + "related-article", + "related-card", "related-content", - "related-content__card", - "related-content__collapse-toggle", - "related-content__container", - "related-content__header", - "related-content__item", - "related-content__view", - "related-content__view--cards", - "related-content__view--compact", - "related-content__view-toggle", + "related-content-container", + "related-content-controls", + "related-content-footer", + "related-content-header", + "related-content-title", + "related-grid", + "related-item", + "related-list", + "related-view", + "related-view--grid", + "related-view--list", "relative", "resize-none", - "response-content", - "response-description", - "response-details", - "response-header", - "response-item", - "response-media-type", - "response-schema", - "response-status", - "response-toggle", - "responses-container", - "right-0", "right-2.5", "rounded-2xl", - "rounded-full", "rounded-lg", - "rounded-md", "save-progress", - "schema-container", - "schema-header", - "schema-properties", - "schema-type-info", "scroll-anchor", - "section-chevron", - "section-content", + "section-card", + "section-card-articles", + "section-card-content", + "section-card-count", + "section-card-description", + "section-card-icon", + "section-card-preview", + "section-card-preview-title", + "section-card-title", + "section-count", + "section-grid", "section-header", + "section-icon", + "section-page", + "section-text", "section-title", - "shadow-lg", "shadow-sm", - "shrink-0", - "sidebar", - "sidebar__chevron", - "sidebar__close-button", - "sidebar__expander", - "sidebar__header", - "sidebar__icon", - "sidebar__item", - "sidebar__item--level-1", - "sidebar__item--level-2", - "sidebar__item--level-3", - "sidebar__item--level-4", - "sidebar__link", - "sidebar__link--active", - "sidebar__link-tree", - "sidebar__text", - "sidebar__toggle", + "sidebar-right-container", + "site-branding", + "site-footer", + "site-footer-container", + "site-header", + "site-header-container", + "site-logo-link", + "site-main", + "site-title", + "site-title-group", + "skip-link", "source", - "space-x-1", - "space-x-2", - "space-x-3", - "space-y-1", - "space-y-2", - "space-y-3", "sr-only", - "status-code", - "status-code--2xx", - "status-code--dxx", "step-counter", "step-dot", "step-dots", @@ -610,64 +412,29 @@ "step-number", "step-time-small", "step-title-disabled", - "step-validation", "sticky", "stretch", - "table", - "table--dense", - "table--glass", - "table--rounded", - "table--zebra", - "table__body", - "table__cell", - "table__cell--nowrap", - "table__container", - "table__container--rounded", - "table__head", - "table__row", + "tab-content", + "tab-content-header", + "tab-content-title", + "tab-item", "tableblock", - "tabs", - "tabs__button", - "tabs__content", - "tabs__nav", - "tabs__panel", - "tag-endpoints", - "text-2xl", - "text-3xl", - "text-base", + "technical-article", "text-center", "text-current", - "text-decoration-none", - "text-gray-500", - "text-gray-700", - "text-left", - "text-lg", - "text-right", "text-sm", - "text-text-primary", - "text-text-secondary", - "text-white", - "text-xl", "text-xs", - "text-yellow-700", - "text-yellow-800", - "text-zinc-300", - "text-zinc-400", - "text-zinc-700", - "text-zinc-800", - "text-zinc-900", + "theme-toggle", + "theme-toggle-icon", + "theme-toggle-icon--dark", + "theme-toggle-icon--light", "time-estimate", "tip", "title", + "title-icon", "toc", - "toc-link", - "toc-link--h1", - "toc__nav", - "top-0", - "top-10", + "toggle-icon", "top-16", - "top-20", - "top-4", "topbar", "topbar__button", "topbar__button--danger", @@ -677,14 +444,7 @@ "topbar__logo-link", "topbar__navigation", "topbar__search", - "tracking-wide", - "transform", - "transition", "transition-all", - "transition-colors", - "transition-opacity", - "transition-transform", - "truncate", "tutorial-compact-actions", "tutorial-compact-breadcrumb", "tutorial-compact-header", @@ -695,47 +455,27 @@ "tutorial-progress-bar", "tutorial-progress-compact", "tutorial-progress-expanded", - "tutorial-section", - "tutorial-step-content", "tutorial-step-item", - "tutorial-step-wrapper", "tutorial-steps-list", - "type-badge", - "type-badge--[array]", - "type-badge--[integer]", - "type-badge--[object]", - "type-badge--[string]", "underline", - "uppercase", - "validate-step", - "validation-checkbox", - "validation-checklist", - "validation-item", - "validation-text", + "update-card", + "update-card-meta", + "update-card-summary", + "update-card-title", + "update-section", + "updates-grid", "valign-top", - "w-1", - "w-3", + "version-error", + "version-number", + "view-all-link", + "view-toggle", + "view-toggle--active", "w-3.5", "w-4", "w-5", - "w-56", - "w-6", "w-7", - "w-80", "w-full", - "warning", - "xl:block", - "xl:h-[calc(100vh-4rem)]", - "xl:hidden", - "xl:max-w-4xl", - "xl:px-8", - "xl:sticky", - "xl:top-16", - "xl:translate-x-0", - "xl:w-auto", - "z-10", - "z-40", - "z-50" + "warning" ], "ids": [ "-notebook-component-split-test", @@ -749,817 +489,154 @@ "4-production-vs-development", "5-init-repo", "6-deploy-locally", - "GET-////", - "GET-////-details", "TableOfContents", - "a", - "a-note-on-ignore_conversion_failuretrue", "add-algolia-search-lite-script", "add-tailwindcss-before-you-start", "add-tailwindcss-how-to-add-tailwindcss-to-a-hugo-theme", "advanced-features", - "analyze-image-size", "api-documentation", "args", - "article-container", - "article-metadata-panel", - "articleContent", - "articleSummarizationContainer", - "articleSummaryOutput", "asciihtml-before-you-start", "asciihtml-examples", "asciihtml-source-code", "asciihtml-table", - "async-openai-client-usage", "author-tips", "available-variants", "aws-amplify", - "az", - "b", "before-you-start", - "best-practices-summary", "blah-this-is-an-embedded-section", "blocks-you-can-override", "body-attributes", - "build-the-container-image", - "building-and-containerizing-applications-analyze-image-size", - "building-and-containerizing-applications-best-practices-summary", - "building-and-containerizing-applications-build-the-container-image", - "building-and-containerizing-applications-container-resource-usage", - "building-and-containerizing-applications-create-dockerignore", - "building-and-containerizing-applications-create-packagejson", - "building-and-containerizing-applications-create-tests", - "building-and-containerizing-applications-create-the-application-structure", - "building-and-containerizing-applications-create-the-server-application", - "building-and-containerizing-applications-dockerfile-optimization", "building-and-containerizing-applications-overview", - "building-and-containerizing-applications-performance-testing", - "building-and-containerizing-applications-scan-for-vulnerabilities", - "building-and-containerizing-applications-security-best-practices", - "building-and-containerizing-applications-security-checklist", - "building-and-containerizing-applications-step-1-create-a-sample-web-application", - "building-and-containerizing-applications-step-2-create-an-optimized-dockerfile", - "building-and-containerizing-applications-step-3-build-and-test-your-container", - "building-and-containerizing-applications-step-4-optimize-your-images", - "building-and-containerizing-applications-step-5-container-security-best-practices", - "building-and-containerizing-applications-step-6-create-docker-compose-for-development", - "building-and-containerizing-applications-test-the-container-locally", - "building-and-containerizing-applications-test-with-docker-compose", - "building-and-containerizing-applications-testing-and-validation", - "building-and-containerizing-applications-use-docker-buildx-for-advanced-builds", - "building-and-containerizing-applications-whats-next", "building-for-production", - "built-in-sdg-pipelines", - "c", - "cell-code-11", - "cell-code-11-body", - "cell-code-11-code", - "cell-code-11-header", - "cell-code-13", - "cell-code-13-body", - "cell-code-13-code", - "cell-code-13-header", - "cell-code-15", - "cell-code-15-body", - "cell-code-15-code", - "cell-code-15-header", - "cell-code-17", - "cell-code-17-body", - "cell-code-17-code", - "cell-code-17-header", - "cell-code-19", - "cell-code-19-body", - "cell-code-19-code", - "cell-code-19-header", - "cell-code-2", - "cell-code-2-body", - "cell-code-2-code", - "cell-code-2-header", - "cell-code-22", - "cell-code-22-body", - "cell-code-22-code", - "cell-code-22-header", - "cell-code-26", - "cell-code-26-body", - "cell-code-26-code", - "cell-code-26-header", - "cell-code-28", - "cell-code-28-body", - "cell-code-28-code", - "cell-code-28-header", - "cell-code-30", - "cell-code-30-body", - "cell-code-30-code", - "cell-code-30-header", - "cell-code-32", - "cell-code-32-body", - "cell-code-32-code", - "cell-code-32-header", - "cell-code-34", - "cell-code-34-body", - "cell-code-34-code", - "cell-code-34-header", - "cell-code-36", - "cell-code-36-body", - "cell-code-36-code", - "cell-code-36-header", - "cell-code-38", - "cell-code-38-body", - "cell-code-38-code", - "cell-code-38-header", - "cell-code-4", - "cell-code-4-body", - "cell-code-4-code", - "cell-code-4-header", - "cell-code-40", - "cell-code-40-body", - "cell-code-40-code", - "cell-code-40-header", - "cell-code-41", - "cell-code-41-body", - "cell-code-41-code", - "cell-code-41-header", - "cell-code-43", - "cell-code-43-body", - "cell-code-43-code", - "cell-code-43-header", - "cell-code-45", - "cell-code-45-body", - "cell-code-45-code", - "cell-code-45-header", - "cell-code-48", - "cell-code-48-body", - "cell-code-48-code", - "cell-code-48-header", - "cell-code-5", - "cell-code-5-body", - "cell-code-5-code", - "cell-code-5-header", - "cell-code-50", - "cell-code-50-body", - "cell-code-50-code", - "cell-code-50-header", - "cell-code-52", - "cell-code-52-body", - "cell-code-52-code", - "cell-code-52-header", - "cell-code-54", - "cell-code-54-body", - "cell-code-54-code", - "cell-code-54-header", - "cell-code-56", - "cell-code-56-body", - "cell-code-56-code", - "cell-code-56-header", - "cell-code-58", - "cell-code-58-body", - "cell-code-58-code", - "cell-code-58-header", - "cell-code-60", - "cell-code-60-body", - "cell-code-60-code", - "cell-code-60-header", - "cell-code-64", - "cell-code-64-body", - "cell-code-64-code", - "cell-code-64-header", - "cell-code-66", - "cell-code-66-body", - "cell-code-66-code", - "cell-code-66-header", - "cell-code-67", - "cell-code-67-body", - "cell-code-67-code", - "cell-code-67-header", - "cell-code-7", - "cell-code-7-body", - "cell-code-7-code", - "cell-code-7-header", - "cell-code-70", - "cell-code-70-body", - "cell-code-70-code", - "cell-code-70-header", - "cell-code-71", - "cell-code-71-body", - "cell-code-71-code", - "cell-code-71-header", - "cell-code-74", - "cell-code-74-body", - "cell-code-74-code", - "cell-code-74-header", - "cell-code-76", - "cell-code-76-body", - "cell-code-76-code", - "cell-code-76-header", - "cell-code-78", - "cell-code-78-body", - "cell-code-78-code", - "cell-code-78-header", - "cell-code-80", - "cell-code-80-body", - "cell-code-80-code", - "cell-code-80-header", - "cell-code-81", - "cell-code-81-body", - "cell-code-81-code", - "cell-code-81-header", - "cell-code-83", - "cell-code-83-body", - "cell-code-83-code", - "cell-code-83-header", - "cell-code-84", - "cell-code-84-body", - "cell-code-84-code", - "cell-code-84-header", - "cell-code-87", - "cell-code-87-body", - "cell-code-87-code", - "cell-code-87-header", - "cell-code-88", - "cell-code-88-body", - "cell-code-88-code", - "cell-code-88-header", - "cell-code-9", - "cell-code-9-body", - "cell-code-9-code", - "cell-code-9-header", - "cell-code-90", - "cell-code-90-body", - "cell-code-90-code", - "cell-code-90-header", - "cell-code-91", - "cell-code-91-body", - "cell-code-91-code", - "cell-code-91-header", - "cell-markdown-0", - "cell-markdown-0-body", - "cell-markdown-0-header", - "cell-markdown-1", - "cell-markdown-1-body", - "cell-markdown-1-header", - "cell-markdown-10", - "cell-markdown-10-body", - "cell-markdown-10-header", - "cell-markdown-12", - "cell-markdown-12-body", - "cell-markdown-12-header", - "cell-markdown-14", - "cell-markdown-14-body", - "cell-markdown-14-header", - "cell-markdown-16", - "cell-markdown-16-body", - "cell-markdown-16-header", - "cell-markdown-18", - "cell-markdown-18-body", - "cell-markdown-18-header", - "cell-markdown-20", - "cell-markdown-20-body", - "cell-markdown-20-header", - "cell-markdown-21", - "cell-markdown-21-body", - "cell-markdown-21-header", - "cell-markdown-23", - "cell-markdown-23-body", - "cell-markdown-23-header", - "cell-markdown-24", - "cell-markdown-24-body", - "cell-markdown-24-header", - "cell-markdown-25", - "cell-markdown-25-body", - "cell-markdown-25-header", - "cell-markdown-27", - "cell-markdown-27-body", - "cell-markdown-27-header", - "cell-markdown-29", - "cell-markdown-29-body", - "cell-markdown-29-header", - "cell-markdown-3", - "cell-markdown-3-body", - "cell-markdown-3-header", - "cell-markdown-31", - "cell-markdown-31-body", - "cell-markdown-31-header", - "cell-markdown-33", - "cell-markdown-33-body", - "cell-markdown-33-header", - "cell-markdown-35", - "cell-markdown-35-body", - "cell-markdown-35-header", - "cell-markdown-37", - "cell-markdown-37-body", - "cell-markdown-37-header", - "cell-markdown-39", - "cell-markdown-39-body", - "cell-markdown-39-header", - "cell-markdown-42", - "cell-markdown-42-body", - "cell-markdown-42-header", - "cell-markdown-44", - "cell-markdown-44-body", - "cell-markdown-44-header", - "cell-markdown-46", - "cell-markdown-46-body", - "cell-markdown-46-header", - "cell-markdown-47", - "cell-markdown-47-body", - "cell-markdown-47-header", - "cell-markdown-49", - "cell-markdown-49-body", - "cell-markdown-49-header", - "cell-markdown-51", - "cell-markdown-51-body", - "cell-markdown-51-header", - "cell-markdown-53", - "cell-markdown-53-body", - "cell-markdown-53-header", - "cell-markdown-55", - "cell-markdown-55-body", - "cell-markdown-55-header", - "cell-markdown-57", - "cell-markdown-57-body", - "cell-markdown-57-header", - "cell-markdown-59", - "cell-markdown-59-body", - "cell-markdown-59-header", - "cell-markdown-6", - "cell-markdown-6-body", - "cell-markdown-6-header", - "cell-markdown-61", - "cell-markdown-61-body", - "cell-markdown-61-header", - "cell-markdown-62", - "cell-markdown-62-body", - "cell-markdown-62-header", - "cell-markdown-63", - "cell-markdown-63-body", - "cell-markdown-63-header", - "cell-markdown-65", - "cell-markdown-65-body", - "cell-markdown-65-header", - "cell-markdown-68", - "cell-markdown-68-body", - "cell-markdown-68-header", - "cell-markdown-69", - "cell-markdown-69-body", - "cell-markdown-69-header", - "cell-markdown-72", - "cell-markdown-72-body", - "cell-markdown-72-header", - "cell-markdown-73", - "cell-markdown-73-body", - "cell-markdown-73-header", - "cell-markdown-75", - "cell-markdown-75-body", - "cell-markdown-75-header", - "cell-markdown-77", - "cell-markdown-77-body", - "cell-markdown-77-header", - "cell-markdown-79", - "cell-markdown-79-body", - "cell-markdown-79-header", - "cell-markdown-8", - "cell-markdown-8-body", - "cell-markdown-8-header", - "cell-markdown-82", - "cell-markdown-82-body", - "cell-markdown-82-header", - "cell-markdown-85", - "cell-markdown-85-body", - "cell-markdown-85-header", - "cell-markdown-86", - "cell-markdown-86-body", - "cell-markdown-86-header", - "cell-markdown-89", - "cell-markdown-89-body", - "cell-markdown-89-header", "chat-form", "chat-messages", - "chat-model-usage", "chatContainer", "chatTocToggle", "cicd-integration", - "classify-math-entity", - "classify-python-entity", "clearAll", - "closed-question-pipeline", - "code-1755130845060377000", - "code-1755130845060857000", - "code-1755130845061391000", - "code-1755130845061754000", - "code-1755130845061924000", - "code-1755130845062077000", - "code-1755130845062178000", - "code-1755130845062496000", - "code-1755130845062590000", - "code-1755130845066386000", - "code-1755130845066491000", - "code-1755130845066568000", - "code-1755130845066640000", - "code-1755130845066763000", - "code-1755130845066922000", - "code-1755130845066996000", - "code-1755130845067070000", - "code-1755130845067216000", - "code-1755130845067378000", - "code-1755130845067918000", - "code-1755130845119340000", - "code-1755130845119629000", - "code-1755130845120275000", - "code-1755130845120631000", - "code-1755130845120884000", - "code-1755130845121022000", - "code-1755130845121135000", - "code-1755130845121237000", - "code-1755130845121373000", - "code-1755130845121498000", - "code-1755130845121631000", - "code-1755130845121763000", - "code-1755130845122141000", - "code-1755130845122487000", - "code-1755130845122727000", - "code-1755130845123040000", - "code-1755130845123117000", - "code-1755130845123216000", - "code-1755130845123288000", - "code-1755130845123377000", - "code-1755130845123523000", - "code-1755130845126790000", - "code-1755130845127279000", - "code-1755130845135048000", - "code-1755130845137055000", - "code-1755130845140401000", - "code-1755130845140815000", - "code-1755130845141100000", - "code-1755130845142811000", - "code-1755130845144215000", - "code-1755130845145336000", - "code-1755130845150139000", - "code-1755130845151252000", - "code-1755130845152298000", - "code-1755130845152632000", - "code-1755130845152697000", - "code-1755130845153184000", - "code-1755130845153232000", - "code-1755130845153933000", - "code-1755130845155276000", - "code-1755130845155399000", - "code-1755130845155524000", - "code-1755130845162231000", - "code-1755130845163583000", - "code-1755130845164055000", - "code-1755130845179239000", - "code-1755130845179447000", - "code-1755130845179675000", - "code-1755130845179792000", - "code-1755130845180020000", - "code-1755130845196518000", - "code-1755130845196712000", - "code-1755130845197060000", - "code-1755130845197251000", - "code-1755130845197524000", - "code-1755130845197832000", - "code-1755130845198005000", - "code-1755130845198176000", - "code-1755130845204513000", - "code-1755130845204712000", - "code-1755130845205312000", - "code-1755130845206424000", - "code-1755130845207127000", - "code-1755130845207822000", - "code-1755130845207946000", - "code-1755130845208145000", - "code-1755130845208440000", - "code-1755130845208574000", - "code-1755130845208772000", - "code-1755130845208935000", - "code-1755130845209239000", - "code-1755130845209444000", - "code-1755130845209576000", - "code-1755130845217776000", - "code-1755130845217967000", - "code-1755130845218235000", - "code-1755130845218934000", - "code-1755130845219467000", - "code-1755130845219700000", - "code-1755130845220119000", - "code-1755130845220284000", - "code-1755130845220553000", - "code-1755130845220740000", - "code-1755130845220974000", - "code-1755130845221231000", - "code-1755130845221448000", - "code-1755130845221709000", - "code-1755130845222029000", - "code-1755130845222206000", - "code-1755130845222371000", - "code-1755130845235783000", - "code-1755130845235955000", - "code-1755130845236072000", - "code-1755130845236175000", - "code-1755130845239313000", - "code-1755130845239365000", - "code-1755130845241862000", - "code-1755130845242389000", - "code-1755130845242508000", - "code-1755130845242646000", - "code-1755130845242751000", - "code-1755130845242879000", - "code-1755130845242965000", - "code-1755130845280401000", - "code-1755130845280403000", - "code-1755130845280511000", - "code-1755130845280517000", - "code-1755130845280585000", - "code-1755130845280598000", - "code-1755130845280681000", - "code-1755130845280844000", - "code-1755130845280845000", - "code-1755130845281288000", - "code-1755130845281645000", - "code-1755130845282626000", - "code-1755130845282742000", - "code-1755130845284820000", - "code-1755130845285060000", - "code-1755130845285170000", - "code-1755130845285374000", - "code-1755130845285890000", - "code-1755130845285990000", - "code-1755130845286077000", - "code-1755130845286175000", - "code-1755130845286266000", - "code-1755130845286306000", - "code-1755130845286484000", - "code-1755130845286505000", - "code-1755130845286927000", - "code-1755130845287044000", - "code-1755130845287530000", - "code-1755130845287640000", - "code-1755130845287728000", - "code-1755130845287846000", - "code-1755130845287867000", - "code-1755130845287961000", - "code-1755130845288022000", - "code-1755130845288327000", - "code-1755130845288465000", - "code-1755130845288814000", - "code-1755130845289018000", - "code-1755130845297145000", - "code-1755130845297363000", - "code-1755130845297563000", - "code-1755130845297666000", - "code-1755130845307958000", - "code-1755130845308076000", - "code-1755130845308589000", - "code-1755130845326066000", - "code-1755130845326653000", - "code-1755130845326679000", - "code-1755130845341624000", - "code-1755177601120077000", - "code-1755177601123348000", - "code-1755177601125337000", - "code-1755177601126846000", - "code-1755177601132600000", - "code-1755177601134735000", - "code-1755177601135403000", - "code-1755177968052331000", - "code-1755177968053729000", - "code-1755177968055003000", - "code-1755177968056224000", - "code-1755177968061106000", - "code-1755177968062928000", - "code-1755177968063514000", - "code-1755178061531606000", - "code-1755178061533057000", - "code-1755178061534302000", - "code-1755178061535473000", - "code-1755178061542051000", - "code-1755178061543943000", - "code-1755178061544560000", - "code-1755178087041656000", - "code-1755178087042954000", - "code-1755178087044142000", - "code-1755178087045221000", - "code-1755178087049466000", - "code-1755178087051150000", - "code-1755178087051715000", - "code-1755178114034574000", - "code-1755178114035848000", - "code-1755178114037002000", - "code-1755178114037988000", - "code-1755178114042385000", - "code-1755178114044151000", - "code-1755178114044855000", - "code-1755178141542675000", - "code-1755178141544282000", - "code-1755178141545767000", - "code-1755178141546992000", - "code-1755178141552221000", - "code-1755178141554311000", - "code-1755178141554986000", - "code-1755178164110225000", - "code-1755178164113126000", - "code-1755178164114363000", - "code-1755178164115395000", - "code-1755178164123132000", - "code-1755178164125056000", - "code-1755178164125631000", - "code-1755179018603260000", - "code-1755179018604601000", - "code-1755179018605821000", - "code-1755179018607327000", - "code-1755179018612237000", - "code-1755179018614079000", - "code-1755179018614763000", - "code-1755179036655575000", - "code-1755179036656903000", - "code-1755179036658181000", - "code-1755179036659232000", - "code-1755179036665362000", - "code-1755179036668004000", - "code-1755179036668643000", - "code-1755179167096368000", - "code-1755179167098110000", - "code-1755179167099682000", - "code-1755179167101000000", - "code-1755179167106520000", - "code-1755179167108707000", - "code-1755179167109386000", - "code-1755179170105343000", - "code-1755179170107335000", - "code-1755179170108994000", - "code-1755179170110427000", - "code-1755179170116382000", - "code-1755179170118747000", - "code-1755179170119447000", - "code-1755179294581297000", - "code-1755179294582477000", - "code-1755179294583615000", - "code-1755179294584514000", - "code-1755179294588668000", - "code-1755179294590792000", - "code-1755179294591328000", - "code-1755179297568700000", - "code-1755179297570009000", - "code-1755179297571238000", - "code-1755179297572262000", - "code-1755179297577204000", - "code-1755179297579065000", - "code-1755179297579725000", - "code-1755179300598094000", - "code-1755179300599484000", - "code-1755179300600837000", - "code-1755179300601871000", - "code-1755179300606553000", - "code-1755179300608405000", - "code-1755179300608986000", - "code-1755179307581436000", - "code-1755179307582828000", - "code-1755179307584171000", - "code-1755179307585318000", - "code-1755179307589879000", - "code-1755179307591684000", - "code-1755179307592238000", - "code-1755179674567963000", - "code-1755179674569137000", - "code-1755179674570211000", - "code-1755179674571221000", - "code-1755179674575525000", - "code-1755179674577277000", - "code-1755179674577830000", - "code-1755179736575713000", - "code-1755179736577430000", - "code-1755179736578956000", - "code-1755179736580173000", - "code-1755179736585446000", - "code-1755179736587481000", - "code-1755179736588251000", - "code-1755179926747235000", - "code-1755179926748542000", - "code-1755179926749721000", - "code-1755179926750791000", - "code-1755179926755282000", - "code-1755179926757302000", - "code-1755179926757940000", - "code-1755179934652064000", - "code-1755179934655368000", - "code-1755179934658417000", - "code-1755179934660294000", - "code-1755179934667071000", - "code-1755179934668880000", - "code-1755179934669451000", - "code-1755179968158701000", - "code-1755179968159969000", - "code-1755179968161135000", - "code-1755179968162357000", - "code-1755179968167010000", - "code-1755179968168779000", - "code-1755179968169475000", - "code-1755180009146065000", - "code-1755180009147348000", - "code-1755180009148542000", - "code-1755180009149636000", - "code-1755180009154326000", - "code-1755180009156142000", - "code-1755180009156723000", - "code-1755180047140634000", - "code-1755180047142056000", - "code-1755180047143395000", - "code-1755180047144640000", - "code-1755180047149816000", - "code-1755180047151958000", - "code-1755180047152619000", - "code-1755180087759788000", - "code-1755180087763913000", - "code-1755180087765752000", - "code-1755180087766900000", - "code-1755180087776191000", - "code-1755180087781849000", - "code-1755180087783417000", - "code-1755180261139748000", - "code-1755180261141038000", - "code-1755180261142384000", - "code-1755180261143548000", - "code-1755180261148460000", - "code-1755180261150782000", - "code-1755180261151360000", - "code-1755180326642902000", - "code-1755180326644186000", - "code-1755180326645298000", - "code-1755180326646230000", - "code-1755180326650388000", - "code-1755180326652242000", - "code-1755180326652847000", - "code-1755180408130516000", - "code-1755180408132264000", - "code-1755180408133577000", - "code-1755180408136289000", - "code-1755180408143214000", - "code-1755180408145043000", - "code-1755180408145689000", - "code-1755180416140554000", - "code-1755180416141818000", - "code-1755180416142998000", - "code-1755180416143979000", - "code-1755180416148470000", - "code-1755180416150128000", - "code-1755180416150709000", - "code-1755180463663537000", - "code-1755180463665997000", - "code-1755180463667878000", - "code-1755180463670034000", - "code-1755180463675784000", - "code-1755180463679763000", - "code-1755180463680587000", - "code-1755180479162774000", - "code-1755180479164430000", - "code-1755180479165721000", - "code-1755180479166761000", - "code-1755180479172607000", - "code-1755180479174954000", - "code-1755180479175914000", - "code-1755180485634844000", - "code-1755180485636126000", - "code-1755180485637325000", - "code-1755180485638338000", - "code-1755180485642685000", - "code-1755180485644450000", - "code-1755180485645039000", - "code-1755180501636718000", - "code-1755180501638455000", - "code-1755180501639982000", - "code-1755180501641285000", - "code-1755180501646711000", - "code-1755180501648817000", - "code-1755180501649501000", - "code-1755180506720766000", - "code-1755180506722070000", - "code-1755180506723296000", - "code-1755180506724361000", - "code-1755180506728887000", - "code-1755180506730864000", - "code-1755180506731570000", - "code-1755182722237387000", - "code-1755182722238644000", - "code-1755182722239867000", - "code-1755182722240919000", - "code-1755182722245813000", - "code-1755182722247748000", - "code-1755182722248333000", - "collapse-0d0cece9160ef824a01d2821d406048f-1755130845288439000", - "collapse-0d0cece9160ef824a01d2821d406048f-1755130845288439000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1755130845139160000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1755130845139160000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1755130845139198000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1755130845139198000-body", + "code-1758990905824193000", + "code-1758990905825900000", + "code-1758990905826540000", + "code-1758990905827032000", + "code-1758990905828299000", + "code-1758990905828411000", + "code-1758990905829577000", + "code-1758990905831859000", + "code-1758990905832322000", + "code-1758990905833052000", + "code-1758990905833598000", + "code-1758990905834850000", + "code-1758990905835084000", + "code-1758990905835317000", + "code-1758990905835447000", + "code-1758990905835669000", + "code-1758990905835866000", + "code-1758990905836057000", + "code-1758990905836229000", + "code-1758990905836328000", + "code-1758990905836441000", + "code-1758990905836532000", + "code-1758990905836575000", + "code-1758990905836723000", + "code-1758990905836728000", + "code-1758990905836877000", + "code-1758990905837026000", + "code-1758990905837043000", + "code-1758990905837198000", + "code-1758990905837308000", + "code-1758990905837316000", + "code-1758990905837415000", + "code-1758990905837423000", + "code-1758990905837597000", + "code-1758990905837676000", + "code-1758990905837680000", + "code-1758990905837789000", + "code-1758990905837797000", + "code-1758990905837879000", + "code-1758990905837907000", + "code-1758990905837994000", + "code-1758990905838027000", + "code-1758990905839392000", + "code-1758990905840525000", + "code-1758990905841674000", + "code-1758990905841796000", + "code-1758990905841982000", + "code-1758990905842688000", + "code-1758990905843549000", + "code-1758990905853864000", + "code-1758990905854043000", + "code-1758990905854854000", + "code-1758990905856393000", + "code-1758990905856554000", + "code-1758990905856746000", + "code-1758990905860604000", + "code-1758990905860771000", + "code-1758990905863455000", + "code-1758990905869222000", + "code-1758990905993327000", + "code-1758990906040164000", + "code-1758990906040923000", + "code-1758990906041720000", + "code-1758990906042211000", + "code-1758990906053961000", + "code-1758990906054467000", + "code-1758990906054892000", + "code-1758990906060302000", + "code-1758990906060785000", + "code-1758990906061135000", + "code-1758990906061489000", + "code-1758990906061940000", + "code-1758990906062246000", + "code-1758990906063102000", + "code-1758990906063137000", + "code-1758990906064673000", + "code-1758990906083409000", + "code-1758990906084676000", + "code-1758990906095544000", + "code-1758990906095682000", + "code-1758990906095775000", + "code-1758990906095884000", + "code-1758990906096164000", + "code-1758990906096418000", + "code-1758990906096773000", + "code-1758990906097319000", + "code-1758990906266558000", + "code-1758990906266726000", + "code-1758990906266955000", + "code-1758990906267041000", + "code-1758990906267181000", + "code-1758990906267251000", + "code-1758990906267388000", + "code-1758990906267644000", + "code-1758990906267769000", + "code-1758990906267920000", + "code-1758990906267964000", + "code-1758990906268284000", + "code-1758990906268711000", + "code-1758990906268999000", + "code-1758990906269153000", + "code-1758990906269416000", + "code-1758990906269786000", + "code-1758990906270112000", + "code-1758990906270354000", + "code-1758990906332602000", + "code-1758990906334471000", + "code-1758990906334570000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758990906269721000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758990906269721000-content", + "collapse-0d0cece9160ef824a01d2821d406048f-1758990906269721000-header", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854327000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854327000-content", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854327000-header", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854399000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854399000-content", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854399000-header", "collapsehtml-examples", "collapsehtml-how-it-works", "collapsehtml-source-code", - "common-issues", "common-shortcodes", - "complete-step-disabled-reason", - "components", "comprehensive-testing", - "conclusion", "configuration", "configuration-examples", "configure", @@ -1577,7 +654,6 @@ "configure-theme-variant-and-mode", "configure-update-feature-settings", "configure-update-organization-and-product-details", - "container-resource-usage", "content", "content-authoring-writers-author-tips", "content-authoring-writers-common-shortcodes", @@ -1587,27 +663,16 @@ "content-authoring-writers-section-landing-pages", "content-authoring-writers-tiles-and-child-links", "create-a-page", - "create-application-manifest", "create-default-layouts", - "create-dockerignore", "create-jsonjson-partial", - "create-packagejson", "create-searchjs-file", - "create-servicemonitor", - "create-tests", - "create-the-application-structure", - "create-the-server-application", - "creating-custom-prompts", "css-custom-properties", "csvhtml-examples", "csvhtml-full-table-with-default-delimiter", "csvhtml-full-table-with-excluded-column", "csvhtml-how-it-works", "csvhtml-source-code", - "curl-example", "custom-configurations", - "customize-chartyaml", - "d", "dark-mode", "darkModeToggle", "debug-information", @@ -1622,14 +687,6 @@ "demo-package.DemoClass.demo_method", "demo-package.demo_function", "demo-package.demo_submodule_function", - "deploy-to-development", - "deploy-to-production", - "deployment", - "deployment-input-attributes", - "deployment-managed-attributes", - "deployment-template", - "deploymentstatedetails", - "deploymentstatedetails-attributes", "development--debug-features-advanced-features", "development--debug-features-available-variants", "development--debug-features-body-attributes", @@ -1668,9 +725,6 @@ "development-commands", "development-setup-scenarios", "development-workflow", - "dialogue-generation-pipeline", - "dockerfile-optimization", - "e", "elevation-and-interactions", "enable-algolia-search-add-algolia-search-lite-script", "enable-algolia-search-before-you-start", @@ -1694,28 +748,9 @@ "enable-rst-before-you-start", "enable-rst-how-to-enable-rst-markup", "enabling-debug-mode", - "endpoint-groups", - "endpoints", "enterprise-environment", - "entity-classification", - "entries-container", "environment-intelligence-system", - "environment-setup-common-issues", - "environment-setup-for-linux", - "environment-setup-for-macos", - "environment-setup-for-windows", - "environment-setup-helm-package-manager", - "environment-setup-k9s-optional-but-recommended", - "environment-setup-kubectl-if-not-included-with-docker-desktop", "environment-setup-overview", - "environment-setup-step-1-install-docker-desktop", - "environment-setup-step-2-enable-kubernetes-in-docker-desktop", - "environment-setup-step-3-verify-your-installation", - "environment-setup-step-4-install-additional-development-tools", - "environment-setup-step-5-configure-your-development-environment", - "environment-setup-troubleshooting", - "environment-setup-verification-checklist", - "environment-setup-whats-next", "environment-specific-builds", "environment-specific-features", "environment-vs-variant-separation", @@ -1724,57 +759,12 @@ "examples", "expandChat", "expected-results", - "exploring-the-math-question-generation-pipeline", - "f", - "featuresdevelopment-debug-card-summary", - "featuresglossaryapple-card-summary", - "featuresglossarybanana-card-summary", - "featuresglossarychocolate-card-summary", - "featuresglossarydates-card-summary", - "featuresglossaryeggs-card-summary", - "featuresmakefile-card-summary", - "featuresshortcodesascii-card-summary", - "featuresshortcodescollapse-card-summary", - "featuresshortcodescsv-card-summary", - "featuresshortcodesinclude-card-summary", - "featuresshortcodesnotice-card-summary", - "featuresshortcodespdoc-card-summary", - "featuresshortcodesprod-card-summary", - "featuresshortcodesrst-card-summary", - "featuresshortcodestabs-card-summary", - "featuresshortcodesversion-card-summary", "footer", - "for-linux", - "for-macos", - "for-windows", "full-table-with-default-delimiter", "full-table-with-excluded-column", - "g", - "generating-a-math-problem", - "generating-n-macro-topics", - "generating-n-subtopics", - "generationMessage", - "get-started-before-you-start", - "get-started-why-hugo", - "get-started-why-this-theme", - "get-startedconfigure-card-summary", - "get-startedinstall-card-summary", - "get-startedquickstart-card-summary", - "getting-started-with-synthetic-data-generation-powered-by-nemo-curator", "global-version", - "go-example", - "guideslayout-and-blocks-card-summary", - "guidesmarkupsascii-card-summary", - "guidesmarkupsrst-card-summary", - "guidesthemestailwind-card-summary", - "guidesthemestest-showcase-card-summary", - "guidestheming-and-tokens-card-summary", - "guideswriterscontent-authoring-card-summary", - "h", "header-classes", "header-functions", - "health-check-commands", - "helm-package-manager", "homejson", "how-it-works", "how-it-works-simplified", @@ -1788,10 +778,8 @@ "how-to-enable-asciidoc-markup", "how-to-enable-rst-markup", "how-to-locally-test-your-theme", - "hpa-template", "hugo-environment", "hugo-environment-json", - "i", "images-and-assets", "includehtml-examples", "includehtml-how-it-works", @@ -1799,7 +787,6 @@ "includehtml-source-code", "includehtml-this-file", "index", - "initialize-helm-chart", "install", "install-1-install-hugo", "install-2-create-a-new-site", @@ -1807,13 +794,7 @@ "install-4-add-theme-to-config", "install-5-init-repo", "install-6-deploy-locally", - "install-argocd", - "install-dependencies", - "install-prometheus-and-grafana", - "installing-nemo-curator-dependencies", - "j", "javascript-environment-detection", - "js-example", "json-objects-before-you-start", "json-objects-create-default-layouts", "json-objects-create-jsonjson-partial", @@ -1824,10 +805,6 @@ "json-objects-singlejson", "json-objects-test", "json-objects-update-hugo-configuration", - "k", - "k9s-optional-but-recommended", - "kubectl-if-not-included-with-docker-desktop", - "l", "layout-at-a-glance", "layout-blocks-and-tokens-blocks-you-can-override", "layout-blocks-and-tokens-layout-at-a-glance", @@ -1838,12 +815,10 @@ "layout-blocks-and-tokens-utilities-partials", "links-and-metadata", "listjson", - "load-testing", "local-version", - "m", "macos", + "main-content", "main-css", - "mainContent", "make-search-script-available", "makefile-commands", "makefile-reference-api-documentation", @@ -1869,67 +844,38 @@ "makefile-reference-version-management", "makefile-reference-workflow-integration", "manual-test-instructions", - "math-question-generation-pipeline", - "milo-theme-docs-a-note-on-ignore_conversion_failuretrue", - "milo-theme-docs-async-openai-client-usage", - "milo-theme-docs-built-in-sdg-pipelines", - "milo-theme-docs-chat-model-usage", - "milo-theme-docs-classify-math-entity", - "milo-theme-docs-classify-python-entity", - "milo-theme-docs-closed-question-pipeline", - "milo-theme-docs-creating-custom-prompts", - "milo-theme-docs-dialogue-generation-pipeline", - "milo-theme-docs-entity-classification", - "milo-theme-docs-exploring-the-math-question-generation-pipeline", - "milo-theme-docs-generating-a-math-problem", - "milo-theme-docs-generating-n-macro-topics", - "milo-theme-docs-generating-n-subtopics", - "milo-theme-docs-getting-started-with-synthetic-data-generation-powered-by-nemo-curator", - "milo-theme-docs-installing-nemo-curator-dependencies", - "milo-theme-docs-math-question-generation-pipeline", - "milo-theme-docs-model-selection-and-configs", - "milo-theme-docs-modifying-the-prompts", - "milo-theme-docs-open-question-pipeline", - "milo-theme-docs-prompt-modification-at-pipeline-level", - "milo-theme-docs-python-question-generation-pipeline", - "milo-theme-docs-reward-model-usage", - "milo-theme-docs-two-turn-prompt-generation-pipeline", - "milo-theme-docs-using-alternative-prompts", - "milo-theme-docs-using-the-nemo-curator-openai-client", - "milo-theme-docs-using-the-nemotrongenerator", - "milo-theme-docs-welcome-to-nvidia-developer-docs-theme", - "milo-theme-docs-writing-task-generation-pipeline", - "model-selection-and-configs", - "modifying-the-prompts", - "monitoring-dashboards", + "milo-theme-docs-welcome-to-example-product-theme", "moon", - "n", + "nav-section-api", + "nav-section-apipets-api", + "nav-section-apipets-apipets", + "nav-section-features", + "nav-section-featuresglossary", + "nav-section-featuresnotebooks", + "nav-section-featuresshortcodes", + "nav-section-featurestutorial", + "nav-section-get-started", + "nav-section-guides", + "nav-section-guideshelpers", + "nav-section-guidesmarkups", + "nav-section-guidesthemes", + "nav-section-guidesthemesoutput-formats", + "nav-section-guidesthemessearch", "netlify", - "next-steps", "notebook-components-test--notebook-component-split-test", "notebook-components-test-expected-results", "notebook-components-test-manual-test-instructions", "notebook-components-test-test-markdown-cell", "notebook-components-test-test-notebook", - "notebook-metadata", "noticehtml-examples", "noticehtml-how-it-works", "noticehtml-source-code", "nvidia-environment", - "o", "offline-documentation", - "open-question-pipeline", "open-source-environment", "openapi-integration", - "openapi-metadata", - "operational-checklist", "overriding-tokens", "overview", - "p", - "packagedmodel", - "packagedmodel-input-attributes", - "packagedmodel-managed-attributes", - "pageContainer", "patterns", "pdoc", "pdoc-2", @@ -1939,117 +885,40 @@ "pdochtml-pdoc-2", "pdochtml-source-code", "per-page-or-per-section-overrides-front-matter", - "performance-optimization", - "performance-testing", + "primary-navigation", "prodhtml-examples", "prodhtml-how-it-works", "prodhtml-source-code", "production-commands", - "production-deployment-with-helm-conclusion", - "production-deployment-with-helm-create-application-manifest", - "production-deployment-with-helm-create-servicemonitor", - "production-deployment-with-helm-customize-chartyaml", - "production-deployment-with-helm-deploy-to-development", - "production-deployment-with-helm-deploy-to-production", - "production-deployment-with-helm-deployment-template", - "production-deployment-with-helm-health-check-commands", - "production-deployment-with-helm-hpa-template", - "production-deployment-with-helm-initialize-helm-chart", - "production-deployment-with-helm-install-argocd", - "production-deployment-with-helm-install-dependencies", - "production-deployment-with-helm-install-prometheus-and-grafana", - "production-deployment-with-helm-load-testing", - "production-deployment-with-helm-monitoring-dashboards", - "production-deployment-with-helm-next-steps", - "production-deployment-with-helm-operational-checklist", "production-deployment-with-helm-overview", - "production-deployment-with-helm-performance-optimization", - "production-deployment-with-helm-resources", - "production-deployment-with-helm-security-checklist", - "production-deployment-with-helm-service-template", - "production-deployment-with-helm-step-1-create-helm-chart-structure", - "production-deployment-with-helm-step-2-configure-application-values", - "production-deployment-with-helm-step-3-create-kubernetes-manifests", - "production-deployment-with-helm-step-4-deploy-to-kubernetes", - "production-deployment-with-helm-step-5-set-up-monitoring-and-observability", - "production-deployment-with-helm-step-6-implement-gitops-with-argocd", - "production-deployment-with-helm-step-7-production-verification", - "production-deployment-with-helm-step-8-production-best-practices", "production-testing", - "prompt-modification-at-pipeline-level", - "python-example", "python-file-with-comments", - "python-question-generation-pipeline", - "q", "question", "quick-reference", "quickstart-macos", - "r", "recommended-development-flow", "recommended-setup", - "registry", - "registry-input-attributes", - "registry-managed-attributes", + "related-content-container", "related-documentation", "release-management", - "release-notes001-card-summary", - "release-notes002-card-summary", "requirements", - "resources", - "response-200", - "response-default", "returns", - "reward-model-usage", "rsthtml-before-you-start", "rsthtml-how-it-works", "rsthtml-source-code", "rsthtml-table", - "s", - "scan-for-vulnerabilities", - "schema-error", - "schema-error-details", - "schema-pet", - "schema-pet-details", - "schema-pets", - "schema-pets-details", "section-intro", "section-landing-pages", "sectionjson", - "security-best-practices", - "security-checklist", "sendButton", - "service-template", - "sharedreadfile-card-summary", - "sharedrstadmonitions-card-summary", - "sharedrsttable-card-summary", "sidebar", - "sidebar-left", - "sidebar-right", "singlejson", "site-wide-defaults-config", "source-code", "starting-development-servers", - "step-1-create-a-sample-web-application", - "step-1-create-helm-chart-structure", - "step-1-install-docker-desktop", - "step-2-configure-application-values", - "step-2-create-an-optimized-dockerfile", - "step-2-enable-kubernetes-in-docker-desktop", - "step-3-build-and-test-your-container", - "step-3-create-kubernetes-manifests", - "step-3-verify-your-installation", - "step-4-deploy-to-kubernetes", - "step-4-install-additional-development-tools", - "step-4-optimize-your-images", - "step-5-configure-your-development-environment", - "step-5-container-security-best-practices", - "step-5-set-up-monitoring-and-observability", - "step-6-create-docker-compose-for-development", - "step-6-implement-gitops-with-argocd", - "step-7-production-verification", - "step-8-production-best-practices", "sun", - "t", + "tab-launch-method-cli", + "tab-launch-method-console", "table", "tabshtml-example", "tabshtml-how-it-works-simplified", @@ -2064,10 +933,7 @@ "test--showcase-your-hugo-theme-netlify", "test-markdown-cell", "test-notebook", - "test-the-container-locally", - "test-with-docker-compose", "testing--quality-assurance", - "testing-and-validation", "theme-variant", "theme-variant-testing", "theme-variants", @@ -2079,23 +945,14 @@ "this-file", "this-is-an-embedded-section", "tiles-and-child-links", - "tocContainer", "topNav", "troubleshooting", - "two-turn-prompt-generation-pipeline", - "u", "update-feature-settings", "update-hugo-configuration", "update-organization-and-product-details", - "use-docker-buildx-for-advanced-builds", - "using-alternative-prompts", - "using-the-nemo-curator-openai-client", - "using-the-nemotrongenerator", "utilities-partials", - "v", "vale-before-you-start", "vale-how-to-add-vale-to-your-documentation-repository", - "verification-checklist", "version-management", "versionhtml-examples", "versionhtml-global-version", @@ -2104,18 +961,10 @@ "versionhtml-source-code", "vs-code-integration", "vs-code-links-not-working", - "w", - "welcome-to-nvidia-developer-docs-theme", + "welcome-to-example-product-theme", "what-it-provides", - "whats-next", "where-tokens-live", - "why-hugo", - "why-this-theme", - "workflow-integration", - "writing-task-generation-pipeline", - "x", - "y", - "z" + "workflow-integration" ] } } diff --git a/exampleSite/package.json b/exampleSite/package.json index f38fda77..6b31bb3f 100644 --- a/exampleSite/package.json +++ b/exampleSite/package.json @@ -1,18 +1,21 @@ { - "name": "example-site", + "name": "milo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "hugo server", "test": "echo \"Error: no test specified\" && exit 1", - "build-tw": "pnpm tailwindcss -i ./themes/milodocs/assets/css/src/input.css -o ./themes/milodocs/assets/css/main.css", - "watch-tw": "pnpm tailwindcss -i ./themes/milodocs/assets/css/src/input.css -o ./themes/milodocs/assets/css/main.css -w --minify" + "build-tw": "pnpm postcss ./assets/css/src/input.css -o ./assets/css/main.css", + "watch-tw": "pnpm postcss ./assets/css/src/input.css -o ./assets/css/main.css --watch" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { - "tailwindcss": "^3.3.5" + "autoprefixer": "^10.4.21", + "postcss": "^8.5.6", + "postcss-cli": "^11.0.1", + "postcss-import": "^16.1.1" } } diff --git a/exampleSite/postcss.config.js b/exampleSite/postcss.config.js new file mode 100644 index 00000000..8dd0d146 --- /dev/null +++ b/exampleSite/postcss.config.js @@ -0,0 +1,8 @@ +module.exports = { + plugins: [ + require('postcss-import')({ + path: ['themes/milodocs/assets/css'] + }), // postcss-import processes @import statements + require('autoprefixer') // Add vendor prefixes for browser compatibility + ] +} \ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.content b/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.content new file mode 100644 index 00000000..8eba8b3c --- /dev/null +++ b/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.content @@ -0,0 +1,18725 @@ +/* =============================================== + MiloDocs CSS - Pure, Modern, Semantic + =============================================== */ + +/* CSS Architecture: Import Foundation First */ + +/* 🎯 Universal Animation System - Single Source of Truth + * ===================================================== + * + * This file establishes consistent timing, easing, and animation patterns + * across the entire theme to eliminate timing chaos and performance issues. + */ + +:root { + /* ✨ TIMING TOKENS - Only these 4 speeds allowed site-wide */ + --timing-instant: 0.1s; /* Micro-interactions (hover, focus) */ + --timing-fast: 0.2s; /* Standard interactions (buttons, links) */ + --timing-medium: 0.3s; /* Complex interactions (collapse, expand) */ + --timing-slow: 0.5s; /* Dramatic reveals (page transitions) */ + + /* ✨ EASING TOKENS - Only these 3 curves allowed site-wide */ + --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Default - smooth start/end */ + --easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* Dramatic - bouncy feel */ + --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Gentle - soft motion */ + + /* 🎯 COLLAPSE TOKENS - Universal collapse/expand behavior */ + --collapse-timing: var(--timing-medium); + --collapse-easing: var(--easing-standard); + --collapse-height-collapsed: 0; + --collapse-height-expanded: 2000px; /* Never use 'none' or 'auto' - breaks animation */ + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + + /* 🎨 TRANSFORM TOKENS - 3D acceleration friendly */ + --transform-scale-down: scale(0.95); + --transform-scale-up: scale(1.05); + --transform-scale-normal: scale(1); + --transform-translate-up: translateY(-4px); + --transform-translate-down: translateY(4px); + --transform-translate-none: translateY(0); + + /* 🌟 OPACITY TOKENS - Visibility states */ + --opacity-hidden: 0; + --opacity-faded: 0.6; + --opacity-visible: 1; + + /* 🎨 COMPONENT-SPECIFIC TOKENS - From design-tokens.css merge */ + + /* Card & Tile Tokens */ + --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.1); + --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.15); + --card-shadow-active: 0 8px 25px rgba(0,0,0,0.15); + --card-transform-hover: translateY(-2px); + --card-transform-active: translateY(-1px) scale(0.98); + --card-border-radius: 0.5rem; + + /* ✨ ADDITIONAL TRANSFORM PATTERNS - From component analysis */ + --transform-lift-subtle: translateY(-1px); /* Buttons, small elements */ + --transform-lift-medium: translateY(-2px); /* Cards, medium elements */ + --transform-lift-dramatic: translateY(-4px); /* Hero elements */ + --transform-slide-in-up: translateY(20px); /* Entry animations */ + --transform-slide-in-down: translateY(-20px); /* Dropdown animations */ + --transform-scale-hover: scale(1.02); /* Hover scale up */ + --transform-scale-active: scale(0.98); /* Active scale down */ + --transform-scale-entrance: scale(0.95); /* Entry scale */ + + /* ✨ COMBINED TRANSFORMS - Common combinations */ + --transform-lift-and-scale: translateY(-2px) scale(1.02); + --transform-press-down: translateY(1px) scale(0.98); + --transform-bounce-in: translateY(10px) scale(0.95); + --transform-slide-up-fade: translateY(15px); + + /* Interaction Tokens */ + --hover-scale: 1.02; + --active-scale: 0.98; + --focus-ring-width: 2px; + --focus-ring-offset: 2px; + --focus-ring-color: rgba(var(--color-brand-rgb), 0.2); + + /* Loading State Tokens */ + --loading-opacity: 0.6; + --loading-blur: blur(1px); + --loading-skeleton-bg: linear-gradient(90deg, + rgba(var(--color-brand-rgb), 0.1) 25%, + rgba(var(--color-brand-rgb), 0.2) 50%, + rgba(var(--color-brand-rgb), 0.1) 75%); + --loading-skeleton-size: 200% 100%; + + /* Feedback Tokens */ + --feedback-success: #10b981; + --feedback-warning: #f59e0b; + --feedback-error: #ef4444; + --feedback-info: #3b82f6; + --feedback-slide-in: translateY(-10px); + --feedback-slide-out: translateY(-20px); + + /* Progressive Reveal Tokens */ + --reveal-stagger-delay: 0.05s; + --reveal-batch-delay: 0.15s; + --reveal-slide-distance: 20px; +} + +/* 🌙 DARK MODE ENHANCEMENTS */ + +.dark { + --focus-ring-color: rgba(var(--color-brand-rgb), 0.3); + + /* Enhanced loading states for dark mode */ + --loading-skeleton-bg: linear-gradient(90deg, + rgba(255, 255, 255, 0.05) 25%, + rgba(255, 255, 255, 0.1) 50%, + rgba(255, 255, 255, 0.05) 75%); + + /* Enhanced shadows for dark mode */ + --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.3); + --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4); + --card-shadow-active: 0 8px 25px rgba(0,0,0,0.5); +} + +/* 🚨 ACCESSIBILITY - Respect user preferences */ + +@media (prefers-reduced-motion: reduce) { + :root { + --timing-instant: 0.01s; + --timing-fast: 0.01s; + --timing-medium: 0.01s; + --timing-slow: 0.01s; + } + + * { + animation-duration: 0.01s !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01s !important; + } +} + +/* ✅ UNIVERSAL COLLAPSE COMPONENT + * ================================ + * Use these classes on any collapsible content for consistent behavior + */ + +/* Base collapsible container */ + +.collapse-container { + position: relative; + overflow: hidden; +} + +/* Collapsible content body */ + +.collapse-body { + max-height: var(--collapse-height-collapsed); + opacity: var(--collapse-opacity-collapsed); + overflow: hidden; + transition: + max-height var(--collapse-timing) var(--collapse-easing), + opacity var(--collapse-timing) var(--collapse-easing); +} + +/* Expanded state */ + +.collapse-body.expanded { + max-height: var(--collapse-height-expanded); + opacity: var(--collapse-opacity-expanded); +} + +/* Duplicated component/data state rules moved to architecture/component-states.css */ + +/* Keeping this section intentionally empty to avoid divergence. */ + +/* ✅ PERFORMANCE-OPTIMIZED HOVER STATES + * ====================================== + * Use specific property transitions instead of "transition: all" + */ + +.interactive-element { + transition: + transform var(--timing-fast) var(--easing-standard), + opacity var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard); +} + +.interactive-element:hover { + transform: var(--transform-translate-up); + opacity: var(--opacity-visible); +} + +.interactive-element:active { + transform: var(--transform-scale-down); + transition-duration: var(--timing-instant); /* Instant feedback */ +} + +/* ✅ COMPONENT-SPECIFIC CUSTOMIZATION + * ==================================== + * Override tokens for specific component needs + */ + +/* OpenAPI components need larger heights for complex content */ + +.openapi-response { + --collapse-height-expanded: 3000px; + --collapse-timing: var(--timing-medium); +} + +/* Notebook cells should be snappier */ + +.notebook-cell { + --collapse-height-expanded: 2000px; + --collapse-timing: var(--timing-fast); +} + +/* Tutorial sections can be more dramatic */ + +.tutorial-section { + --collapse-height-expanded: 2500px; + --collapse-timing: var(--timing-slow); + --collapse-easing: var(--easing-emphasized); +} + +/* Tabs need instant switching for good UX */ + +.tab-content { + --collapse-height-expanded: 1500px; + --collapse-timing: var(--timing-fast); +} + +/* ✅ SIDEBAR NAVIGATION TREE - Optimized for hierarchical content */ + +.nested-content { + --collapse-height-expanded: 2000px; + --collapse-timing: var(--timing-medium); + --collapse-easing: var(--easing-standard); + + /* Performance optimization for tree navigation */ + will-change: max-height, opacity; + transform: translateZ(0); /* Force hardware acceleration */ +} + +/* ✅ UTILITY CLASSES + * =================== + * Common animation patterns as reusable classes + */ + +.fade-in { + opacity: var(--opacity-hidden); + animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; +} + +.fade-out { + opacity: var(--opacity-visible); + animation: fadeOut var(--timing-medium) var(--easing-standard) forwards; +} + +.slide-up { + transform: var(--transform-translate-down); + animation: slideUp var(--timing-medium) var(--easing-standard) forwards; +} + +.slide-in-up { + transform: var(--transform-slide-in-up); + opacity: var(--opacity-hidden); + animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; +} + +.slide-in-down { + transform: var(--transform-slide-in-down); + opacity: var(--opacity-hidden); + animation: slideInDown var(--timing-medium) var(--easing-standard) forwards; +} + +.scale-in { + transform: var(--transform-scale-down); + opacity: var(--opacity-hidden); + animation: scaleIn var(--timing-medium) var(--easing-emphasized) forwards; +} + +.bounce-in { + transform: var(--transform-bounce-in); + opacity: var(--opacity-hidden); + animation: bounceIn var(--timing-slow) var(--easing-emphasized) forwards; +} + +.lift-on-hover { + transition: transform var(--timing-fast) var(--easing-standard); +} + +.lift-on-hover:hover { + transform: var(--transform-lift-medium); +} + +/* ✅ KEYFRAME ANIMATIONS + * ======================= + * Standard animations used across components + */ + +@keyframes fadeIn { + to { + opacity: var(--opacity-visible); + } +} + +@keyframes fadeOut { + to { + opacity: var(--opacity-hidden); + } +} + +@keyframes slideUp { + to { + transform: var(--transform-translate-none); + } +} + +@keyframes slideInUp { + to { + transform: var(--transform-translate-none); + opacity: var(--opacity-visible); + } +} + +@keyframes slideInDown { + to { + transform: var(--transform-translate-none); + opacity: var(--opacity-visible); + } +} + +@keyframes scaleIn { + to { + transform: var(--transform-scale-normal); + opacity: var(--opacity-visible); + } +} + +@keyframes bounceIn { + 0% { + transform: var(--transform-bounce-in); + opacity: var(--opacity-hidden); + } + 50% { + transform: translateY(-5px) scale(1.02); + opacity: var(--opacity-faded); + } + 100% { + transform: var(--transform-translate-none); + opacity: var(--opacity-visible); + } +} + +/* ✅ STAGGER ANIMATIONS + * ====================== + * For animating groups of elements with delays + */ + +.stagger-children > * { + animation-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); +} + +.stagger-fade-in > * { + opacity: var(--opacity-hidden); + animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; +} + +.stagger-slide-up > * { + transform: var(--transform-slide-in-up); + opacity: var(--opacity-hidden); + animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; +} + +/* ✅ DEBUG MODE + * ============== + * Uncomment to visualize animation timing (development only) + */ + +/* +.collapse-body { + border: 2px dashed red !important; +} + +.collapse-body.expanded { + border-color: green !important; +} + +[data-collapse-state] { + outline: 2px solid blue !important; +} +*/ + +/* 🎯 Universal Component State Management System + * ============================================== + * + * This file establishes consistent state management patterns across all + * interactive components, replacing inconsistent class-based approaches + * with data-attribute driven state management. + */ + +/* ✅ COLLAPSE STATE MANAGEMENT + * ============================= + * Universal collapse/expand states using data attributes + */ + +/* Base collapsed state - applies to any element with data-collapse-state */ + +[data-collapse-state="collapsed"] { + max-height: var(--collapse-height-collapsed, 0); + opacity: var(--collapse-opacity-collapsed, 0); + overflow: hidden; + transition: + max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); +} + +/* Transitioning state - shows element is mid-animation */ + +[data-collapse-state="transitioning"] { + overflow: hidden; /* Ensure no content spillage during animation */ + pointer-events: none; /* Prevent interaction during transition */ +} + +/* Expanded state - fully visible and interactive */ + +[data-collapse-state="expanded"] { + max-height: var(--collapse-height-expanded, 2000px); + opacity: var(--collapse-opacity-expanded, 1); + overflow: visible; /* Allow content to be fully visible when expanded */ + transition: + max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); +} + +/* ✅ COMPONENT LIFECYCLE STATES + * ============================== + * Standard states for component initialization and interaction + */ + +/* Loading state - component is being initialized */ + +[data-component-state="loading"] { + opacity: var(--opacity-faded, 0.6); + pointer-events: none; + cursor: wait; + transition: opacity var(--timing-fast) var(--easing-standard); +} + +/* Ready state - component is initialized and interactive */ + +[data-component-state="ready"] { + opacity: var(--opacity-visible, 1); + pointer-events: auto; + transition: opacity var(--timing-fast) var(--easing-standard); +} + +/* Disabled state - component is non-interactive */ + +[data-component-state="disabled"] { + opacity: var(--opacity-faded, 0.6); + pointer-events: none; + cursor: not-allowed; + filter: grayscale(50%); + transition: + opacity var(--timing-fast) var(--easing-standard), + filter var(--timing-fast) var(--easing-standard); +} + +/* Error state - component has encountered an error */ + +[data-component-state="error"] { + opacity: var(--opacity-visible, 1); + border-color: var(--color-danger, #ef4444); + background-color: rgba(239, 68, 68, 0.05); + transition: + border-color var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard); +} + +/* ✅ LEGACY CLASS SUPPORT (Backward Compatibility) + * ================================================= + * Bridge classes for existing components that use class-based states + */ + +/* Support for existing .expanded classes */ + +.expanded { + max-height: var(--collapse-height-expanded, 2000px) !important; + opacity: var(--collapse-opacity-expanded, 1) !important; + overflow: visible !important; + transition: + max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); +} + +/* Support for existing .collapsed classes */ + +.collapsed { + max-height: var(--collapse-height-collapsed, 0) !important; + opacity: var(--collapse-opacity-collapsed, 0) !important; + overflow: hidden !important; + transition: + max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); +} + +/* ✅ INTERACTIVE STATES + * ===================== + * Consistent hover, focus, and active states + */ + +/* Interactive elements with hover states */ + +[data-interactive="true"]:hover, +.interactive:hover { + transform: var(--transform-translate-up, translateY(-2px)); + transition: transform var(--timing-fast) var(--easing-standard); +} + +/* Interactive elements with focus states */ + +[data-interactive="true"]:focus-visible, +.interactive:focus-visible { + outline: 2px solid var(--color-brand, #3b82f6); + outline-offset: 2px; + border-radius: 0.25rem; +} + +/* Interactive elements with active states */ + +[data-interactive="true"]:active, +.interactive:active { + transform: var(--transform-scale-down, scale(0.98)); + transition: transform var(--timing-instant) var(--easing-standard); +} + +/* ✅ COMPONENT-SPECIFIC STATE OVERRIDES + * ====================================== + * Customization for specific component types + */ + +/* OpenAPI Components */ + +.openapi-response[data-collapse-state], +.openapi-endpoint[data-collapse-state], +.openapi-parameter[data-collapse-state] { + --collapse-height-expanded: 3000px; /* Complex API content needs more space */ + --collapse-timing: var(--timing-medium); + --collapse-easing: var(--easing-standard); +} + +/* Notebook Components */ + +.notebook-cell[data-collapse-state], +.notebook-output[data-collapse-state] { + --collapse-height-expanded: 2000px; /* Code and output content */ + --collapse-timing: var(--timing-fast); /* Snappier interaction */ + --collapse-easing: var(--easing-standard); +} + +/* Tutorial Components */ + +.tutorial-section[data-collapse-state], +.section-content[data-collapse-state] { + --collapse-height-expanded: 2500px; /* Text-heavy content */ + --collapse-timing: var(--timing-slow); /* More dramatic for educational content */ + --collapse-easing: var(--easing-emphasized); +} + +/* Tab Components */ + +.tab-content[data-collapse-state], +[data-tabcontent][data-collapse-state] { + --collapse-height-expanded: 1500px; /* Tab content usually more compact */ + --collapse-timing: var(--timing-fast); /* Quick switching expected */ + --collapse-easing: var(--easing-standard); +} + +/* ✅ UTILITY CLASSES + * =================== + * Quick state application classes + */ + +/* Force immediate state without animation */ + +.state-immediate { + transition: none !important; +} + +/* Force slow animation timing */ + +.state-slow { + --collapse-timing: var(--timing-slow); + --collapse-easing: var(--easing-smooth); +} + +/* Force fast animation timing */ + +.state-fast { + --collapse-timing: var(--timing-fast); + --collapse-easing: var(--easing-standard); +} + +/* Emphasized dramatic animation */ + +.state-dramatic { + --collapse-timing: var(--timing-slow); + --collapse-easing: var(--easing-emphasized); +} + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * Enhanced states for screen readers and assistive technology + */ + +/* ✅ REMOVED: Enhanced focus indicators causing ancestry tree echoing + * The :focus-within pseudo-class was applying styling to ALL ancestor elements + * with data-collapse-state attributes, creating the visual "echo" effect. + * Focus should be handled by individual interactive elements instead. + */ + +/* Screen reader friendly state announcements */ + +[data-collapse-state="collapsed"][aria-label]::before { + content: "Collapsed: "; + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + overflow: hidden; +} + +[data-collapse-state="expanded"][aria-label]::before { + content: "Expanded: "; + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + overflow: hidden; +} + +/* ✅ MOTION REDUCTION SUPPORT + * ============================ + * Respect user motion preferences + */ + +@media (prefers-reduced-motion: reduce) { + [data-collapse-state], + [data-component-state], + .expanded, + .collapsed, + [data-interactive] { + transition: none !important; + animation: none !important; + transform: none !important; + } +} + +/* ✅ HIGH CONTRAST MODE SUPPORT + * ============================== + * Enhanced visibility for high contrast users + */ + +@media (prefers-contrast: high) { + [data-component-state="error"] { + border-width: 2px; + border-style: solid; + } + + /* ✅ REMOVED: focus-within outline for high contrast mode + * This was also contributing to the ancestry tree echo effect + */ +} + +[data-interactive="true"]:focus-visible { + outline-width: 3px; + outline-style: solid; +} + +/* ✅ DEBUG MODE (Development Only) + * ================================= + * Uncomment to visualize state management in development + */ + +/* +[data-collapse-state] { + position: relative; +} + +[data-collapse-state]::before { + content: "State: " attr(data-collapse-state); + position: absolute; + top: -1.5rem; + left: 0; + background: #000; + color: #fff; + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + border-radius: 0.25rem; + z-index: 1000; + pointer-events: none; +} + +[data-component-state]::after { + content: "Component: " attr(data-component-state); + position: absolute; + top: -3rem; + left: 0; + background: #3b82f6; + color: #fff; + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + border-radius: 0.25rem; + z-index: 1000; + pointer-events: none; +} +*/ + +/* 🎯 Universal Layout Foundations System + * ======================================= + * + * This file centralizes common spacing, positioning, and layout patterns + * to ensure consistent spatial relationships across all components. + */ + +:root { + /* ✨ SPACING SCALE (based on 0.25rem = 4px base) */ + --space-0: 0; + --space-px: 1px; + --space-0-5: 0.125rem; /* 2px */ + --space-1: 0.25rem; /* 4px */ + --space-1-5: 0.375rem; /* 6px */ + --space-2: 0.5rem; /* 8px */ + --space-2-5: 0.625rem; /* 10px */ + --space-3: 0.75rem; /* 12px */ + --space-3-5: 0.875rem; /* 14px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.25rem; /* 20px */ + --space-6: 1.5rem; /* 24px */ + --space-7: 1.75rem; /* 28px */ + --space-8: 2rem; /* 32px */ + --space-9: 2.25rem; /* 36px */ + --space-10: 2.5rem; /* 40px */ + --space-11: 2.75rem; /* 44px */ + --space-12: 3rem; /* 48px */ + --space-14: 3.5rem; /* 56px */ + --space-16: 4rem; /* 64px */ + --space-20: 5rem; /* 80px */ + --space-24: 6rem; /* 96px */ + --space-28: 7rem; /* 112px */ + --space-32: 8rem; /* 128px */ + --space-36: 9rem; /* 144px */ + --space-40: 10rem; /* 160px */ + --space-44: 11rem; /* 176px */ + --space-48: 12rem; /* 192px */ + --space-52: 13rem; /* 208px */ + --space-56: 14rem; /* 224px */ + --space-60: 15rem; /* 240px */ + --space-64: 16rem; /* 256px */ + --space-72: 18rem; /* 288px */ + --space-80: 20rem; /* 320px */ + --space-96: 24rem; /* 384px */ + + /* ✨ SEMANTIC SPACING TOKENS */ + --space-xs: var(--space-1); /* 4px - Minimal spacing */ + --space-sm: var(--space-2); /* 8px - Small spacing */ + --space-md: var(--space-4); /* 16px - Medium spacing */ + --space-lg: var(--space-6); /* 24px - Large spacing */ + --space-xl: var(--space-8); /* 32px - Extra large spacing */ + --space-2xl: var(--space-12); /* 48px - Double extra large */ + --space-3xl: var(--space-16); /* 64px - Triple extra large */ + + /* ✨ CONTENT SPACING TOKENS */ + --content-gap-tight: var(--space-2); /* 8px - Tight content */ + --content-gap-normal: var(--space-4); /* 16px - Normal content */ + --content-gap-relaxed: var(--space-6); /* 24px - Relaxed content */ + --content-gap-loose: var(--space-8); /* 32px - Loose content */ + + /* ✨ COMPONENT SPACING TOKENS */ + --component-padding-sm: var(--space-3); /* 12px - Small components */ + --component-padding-md: var(--space-4); /* 16px - Medium components */ + --component-padding-lg: var(--space-6); /* 24px - Large components */ + --component-padding-xl: var(--space-8); /* 32px - Extra large components */ + + /* ✨ BORDER RADIUS SCALE */ + --radius-none: 0; + --radius-sm: 0.125rem; /* 2px */ + --radius-base: 0.25rem; /* 4px */ + --radius-md: 0.375rem; /* 6px */ + --radius-lg: 0.5rem; /* 8px */ + --radius-xl: 0.75rem; /* 12px */ + --radius-2xl: 1rem; /* 16px */ + --radius-3xl: 1.5rem; /* 24px */ + --radius-full: 9999px; /* Full radius */ + + /* ✨ SEMANTIC BORDER RADIUS TOKENS */ + --radius-button: var(--radius-md); /* Button border radius */ + --radius-card: var(--radius-lg); /* Card border radius */ + --radius-modal: var(--radius-xl); /* Modal border radius */ + --radius-input: var(--radius-base); /* Input border radius */ + + /* ✨ Z-INDEX SCALE */ + --z-behind: -1; + --z-base: 0; + --z-low: 10; + --z-medium: 100; + --z-high: 1000; + --z-overlay: 10000; + --z-modal: 100000; + --z-popover: 1000000; + --z-tooltip: 10000000; + --z-top: 999999999; + + /* ✨ SEMANTIC Z-INDEX TOKENS */ + --z-dropdown: var(--z-overlay); + --z-sticky-header: var(--z-high); + --z-sidebar: var(--z-medium); + --z-loading-overlay: var(--z-modal); + --z-toast: var(--z-overlay); + + /* ✨ MAX WIDTH SCALE */ + --max-width-xs: 20rem; /* 320px */ + --max-width-sm: 24rem; /* 384px */ + --max-width-md: 28rem; /* 448px */ + --max-width-lg: 32rem; /* 512px */ + --max-width-xl: 36rem; /* 576px */ + --max-width-2xl: 42rem; /* 672px */ + --max-width-3xl: 48rem; /* 768px */ + --max-width-4xl: 56rem; /* 896px */ + --max-width-5xl: 64rem; /* 1024px */ + --max-width-6xl: 72rem; /* 1152px */ + --max-width-7xl: 80rem; /* 1280px */ + --max-width-full: 100%; + --max-width-prose: 65ch; /* Optimal reading width */ + --max-width-screen-sm: 640px; + --max-width-screen-md: 768px; + --max-width-screen-lg: 1024px; + --max-width-screen-xl: 1280px; + --max-width-screen-2xl: 1536px; + + /* ✨ SEMANTIC MAX WIDTH TOKENS */ + --max-width-content: var(--max-width-4xl); /* Main content area */ + --max-width-sidebar: var(--max-width-xs); /* Sidebar width */ + --max-width-modal: var(--max-width-2xl); /* Modal dialogs */ + --max-width-form: var(--max-width-lg); /* Form containers */ + + /* ✨ LAYOUT SHELL TOKENS (moved from input.css) */ + --left-rail-width: 18rem; /* xl left rail */ + --right-rail-width: 22rem; /* xl right rail */ + --layout-gap-xl: var(--space-8);/* xl gap */ + --left-rail-width-2xl: 20rem; /* 2xl left rail */ + --right-rail-width-2xl: 28rem; /* 2xl right rail */ + --layout-gap-2xl: var(--space-16); /* 2xl gap */ + + /* ✨ GRID/TILE TOKENS (moved from input.css) */ + --grid-card-min: 280px; /* minimum card width for auto-fit grids */ + --tile-glass-blur: 12px; /* tile glass blur amount */ + --tile-glass-saturate: 140%; /* tile glass saturation */ + + /* ✨ GLASSMORPHISM TOKENS (unified) */ + --glass-blur: 8px; + --glass-saturate: 1.15; + --glass-bg: rgba(255, 255, 255, 0.45); + --glass-border-color: rgba(255, 255, 255, 0.22); + --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); +} + +/* Dark mode glass adjustments */ + +.dark { + --glass-bg: rgba(17, 17, 17, 0.5); + --glass-border-color: rgba(255, 255, 255, 0.10); + --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + +/* Right-rail presence attribute hook */ + +main.layout-shell[data-has-right-rail="false"] { + /* Slightly increase center column breathing room when right rail is hidden */ + --layout-gap-xl: var(--space-8); + --layout-gap-2xl: var(--space-12); + --max-width-content: var(--max-width-5xl); +} + +/* Density presets + Apply by adding a class on or
, or via future param-driven mapping */ + +.layout-density--compact { + --grid-card-min: 320px; /* wider cards to reduce row count */ + --layout-gap-xl: var(--space-6); /* slightly tighter gap */ + --layout-gap-2xl: var(--space-10); +} + +.layout-density--comfortable { + --grid-card-min: 280px; + --layout-gap-xl: var(--space-8); + --layout-gap-2xl: var(--space-16); +} + +/* ✅ SPACING UTILITY CLASSES + * =========================== + * Consistent spacing patterns for common use cases + */ + +/* Margin utilities */ + +.m-auto { margin: auto; } + +.mx-auto { margin-left: auto; margin-right: auto; } + +.my-auto { margin-top: auto; margin-bottom: auto; } + +/* Padding utilities */ + +.p-0 { padding: var(--space-0); } + +.p-1 { padding: var(--space-1); } + +.p-2 { padding: var(--space-2); } + +.p-3 { padding: var(--space-3); } + +.p-4 { padding: var(--space-4); } + +.p-6 { padding: var(--space-6); } + +.p-8 { padding: var(--space-8); } + +/* Semantic spacing classes */ + +.gap-tight { gap: var(--content-gap-tight); } + +.gap-normal { gap: var(--content-gap-normal); } + +.gap-relaxed { gap: var(--content-gap-relaxed); } + +.gap-loose { gap: var(--content-gap-loose); } + +/* Component padding classes */ + +.padding-sm { padding: var(--component-padding-sm); } + +.padding-md { padding: var(--component-padding-md); } + +.padding-lg { padding: var(--component-padding-lg); } + +.padding-xl { padding: var(--component-padding-xl); } + +/* ✅ LAYOUT PATTERN CLASSES + * ========================== + * Common layout patterns as reusable classes + */ + +/* Container patterns */ + +/* Base .container now handled by TailwindCSS v4 @utility directive in main.css */ + +/* Container variants now handled by TailwindCSS v4 @utility directives in main.css */ + +/* Content sections */ + +.section { + padding-top: var(--space-12); + padding-bottom: var(--space-12); +} + +.section-sm { + padding-top: var(--space-8); + padding-bottom: var(--space-8); +} + +.section-lg { + padding-top: var(--space-16); + padding-bottom: var(--space-16); +} + +/* Stack layouts (vertical spacing) */ + +.stack > * + * { + margin-top: var(--content-gap-normal); +} + +.stack-tight > * + * { + margin-top: var(--content-gap-tight); +} + +.stack-relaxed > * + * { + margin-top: var(--content-gap-relaxed); +} + +.stack-loose > * + * { + margin-top: var(--content-gap-loose); +} + +/* Cluster layouts (horizontal spacing) */ + +.cluster { + display: flex; + flex-wrap: wrap; + gap: var(--content-gap-normal); + align-items: center; +} + +.cluster-tight { + gap: var(--content-gap-tight); +} + +.cluster-relaxed { + gap: var(--content-gap-relaxed); +} + +/* Grid patterns */ + +.grid-auto { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--content-gap-normal); +} + +.grid-auto-sm { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} + +.grid-auto-lg { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + +/* Flexbox patterns */ + +.flex-between { + display: flex; + justify-content: space-between; + align-items: center; +} + +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} + +.flex-start { + display: flex; + justify-content: flex-start; + align-items: center; +} + +.flex-end { + display: flex; + justify-content: flex-end; + align-items: center; +} + +/* ✅ POSITIONING UTILITIES + * ========================= + * Common positioning patterns + */ + +.relative { position: relative; } + +.absolute { position: absolute; } + +.fixed { position: fixed; } + +.sticky { position: sticky; } + +/* Absolute positioning helpers */ + +.absolute-center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.absolute-top-left { + position: absolute; + top: var(--space-2); + left: var(--space-2); +} + +.absolute-top-right { + position: absolute; + top: var(--space-2); + right: var(--space-2); +} + +.absolute-bottom-left { + position: absolute; + bottom: var(--space-2); + left: var(--space-2); +} + +.absolute-bottom-right { + position: absolute; + bottom: var(--space-2); + right: var(--space-2); +} + +/* Z-index utilities */ + +.z-behind { z-index: var(--z-behind); } + +.z-base { z-index: var(--z-base); } + +.z-low { z-index: var(--z-low); } + +.z-medium { z-index: var(--z-medium); } + +.z-high { z-index: var(--z-high); } + +.z-overlay { z-index: var(--z-overlay); } + +.z-modal { z-index: var(--z-modal); } + +.z-top { z-index: var(--z-top); } + +/* ✅ BORDER RADIUS UTILITIES + * =========================== + * Consistent border radius patterns + */ + +.rounded-none { border-radius: var(--radius-none); } + +.rounded-sm { border-radius: var(--radius-sm); } + +.rounded { border-radius: var(--radius-base); } + +.rounded-md { border-radius: var(--radius-md); } + +.rounded-lg { border-radius: var(--radius-lg); } + +.rounded-xl { border-radius: var(--radius-xl); } + +.rounded-2xl { border-radius: var(--radius-2xl); } + +.rounded-3xl { border-radius: var(--radius-3xl); } + +.rounded-full { border-radius: var(--radius-full); } + +/* Semantic border radius */ + +.rounded-button { border-radius: var(--radius-button); } + +.rounded-card { border-radius: var(--radius-card); } + +.rounded-modal { border-radius: var(--radius-modal); } + +.rounded-input { border-radius: var(--radius-input); } + +/* ✅ MAX WIDTH UTILITIES + * ======================= + * Consistent content width constraints + */ + +.max-w-xs { max-width: var(--max-width-xs); } + +.max-w-sm { max-width: var(--max-width-sm); } + +.max-w-md { max-width: var(--max-width-md); } + +.max-w-lg { max-width: var(--max-width-lg); } + +.max-w-xl { max-width: var(--max-width-xl); } + +.max-w-2xl { max-width: var(--max-width-2xl); } + +.max-w-3xl { max-width: var(--max-width-3xl); } + +.max-w-4xl { max-width: var(--max-width-4xl); } + +.max-w-5xl { max-width: var(--max-width-5xl); } + +.max-w-6xl { max-width: var(--max-width-6xl); } + +.max-w-7xl { max-width: var(--max-width-7xl); } + +.max-w-full { max-width: var(--max-width-full); } + +.max-w-prose { max-width: var(--max-width-prose); } + +/* Semantic max width */ + +.max-w-content { max-width: var(--max-width-content); } + +.max-w-sidebar { max-width: var(--max-width-sidebar); } + +.max-w-modal { max-width: var(--max-width-modal); } + +.max-w-form { max-width: var(--max-width-form); } + +/* ✅ RESPONSIVE PATTERNS + * ======================= + * Mobile-first responsive design patterns + */ + +@media (min-width: 640px) { + .sm\:container { + max-width: var(--max-width-screen-sm); + } + + .sm\:section { + padding-top: var(--space-16); + padding-bottom: var(--space-16); + } + + .sm\:padding-lg { + padding: var(--component-padding-lg); + } +} + +@media (min-width: 768px) { + .md\:container { + max-width: var(--max-width-screen-md); + } + + .md\:section { + padding-top: var(--space-20); + padding-bottom: var(--space-20); + } + + .md\:padding-xl { + padding: var(--component-padding-xl); + } + + .md\:grid-2 { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .lg\:container { + max-width: var(--max-width-screen-lg); + } + + .lg\:section { + padding-top: var(--space-24); + padding-bottom: var(--space-24); + } + + .lg\:grid-3 { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (min-width: 1280px) { + .xl\:container { + max-width: var(--max-width-screen-xl); + } + + .xl\:grid-4 { + grid-template-columns: repeat(4, 1fr); + } +} + +@media (min-width: 1536px) { + .\32xl\:container { + max-width: var(--max-width-screen-2xl); + } +} + +/* ✅ CONTENT FLOW PATTERNS + * ========================= + * Typography and content spacing patterns + */ + +/* Prose content */ + +.prose { + max-width: var(--max-width-prose); + line-height: 1.7; +} + +.prose > * + * { + margin-top: var(--space-4); +} + +.prose h1, +.prose h2, +.prose h3, +.prose h4, +.prose h5, +.prose h6 { + margin-top: var(--space-8); + margin-bottom: var(--space-4); +} + +.prose h1:first-child, +.prose h2:first-child, +.prose h3:first-child, +.prose h4:first-child, +.prose h5:first-child, +.prose h6:first-child { + margin-top: 0; +} + +.prose p + h1, +.prose p + h2, +.prose p + h3 { + margin-top: var(--space-12); +} + +.prose p + h4, +.prose p + h5, +.prose p + h6 { + margin-top: var(--space-8); +} + +/* List spacing */ + +.prose ul, +.prose ol { + padding-left: var(--space-6); +} + +.prose li + li { + margin-top: var(--space-2); +} + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * Spacing and layout for accessibility + */ + +/* Focus spacing */ + +.focus-spacing:focus-visible { + outline-offset: var(--space-1); +} + +/* Touch target sizing */ + +.touch-target { + min-height: 44px; + min-width: 44px; + padding: var(--space-2); +} + +/* Screen reader spacing */ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* ✅ PRINT OPTIMIZATIONS + * ======================= + * Layout adjustments for print media + */ + +@media print { + .section { + padding-top: var(--space-6); + padding-bottom: var(--space-6); + } + + .container { + padding-left: 0; + padding-right: 0; + } + + .stack > * + * { + margin-top: var(--space-3); + } +} + +/* ✅ PAGE LAYOUT PATTERNS + * ======================== + * Core page structure patterns for Hugo layouts + */ + +/* Layout Shell - Main page container for Hugo's layout structure */ + +.layout-shell { + display: grid; + grid-template-columns: + var(--left-rail-width, 0px) + 1fr + var(--right-rail-width, 0px); + min-height: 100vh; + gap: var(--layout-gap-base, var(--space-4)); +} + +@media (min-width: 1280px) { + .layout-shell { + gap: var(--layout-gap-xl, var(--space-6)); + } +} + +@media (min-width: 1536px) { + .layout-shell { + gap: var(--layout-gap-2xl, var(--space-8)); + } +} + +/* Page Container - Main content area */ + +.page-container { + padding: var(--space-4); + width: 100%; + min-width: 0; + margin: 0 auto; + max-width: var(--max-width-content, 80rem); +} + +@media (min-width: 768px) { + .page-container { + flex: 1; + } +} + +@media (min-width: 1280px) { + .page-container { + padding-left: var(--space-8); + padding-right: var(--space-8); + } +} + +@media (min-width: 1536px) { + .page-container { + padding-left: var(--space-12); + padding-right: var(--space-12); + } +} + +/* Layout Body - Base body styling */ + +.layout-body { + background-color: var(--color-bg-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: var(--font-family-base); + color: var(--color-text-primary); +} + +/* ✅ SEMANTIC CONTENT LAYOUT PATTERNS + * ==================================== + * Semantic layout patterns for different content types + */ + +/* Article Layout Components */ + +.article-breadcrumbs, +.article-main { + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-3xl); +} + +@media (min-width: 1280px) { + .article-breadcrumbs, + .article-main { + max-width: var(--max-width-4xl); + } +} + +@media (min-width: 1536px) { + .article-breadcrumbs, + .article-main { + max-width: var(--max-width-5xl); + } +} + +.article-breadcrumbs { + margin-bottom: var(--space-4); +} + +.article-header { + margin-bottom: var(--space-6); +} + +.article-title { + font-size: var(--font-size-3xl); + font-weight: 700; + margin-bottom: var(--space-3); + color: var(--color-text-primary); + line-height: 1.1; +} + +/* List Layout Components */ + +.list-breadcrumbs { + margin: var(--space-4) 0; +} + +.list-header { + margin-bottom: var(--space-6); + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-3xl); +} + +@media (min-width: 1280px) { + .list-header { + max-width: var(--max-width-4xl); + } +} + +@media (min-width: 1536px) { + .list-header { + max-width: var(--max-width-5xl); + } +} + +.list-title { + font-size: var(--font-size-3xl); + font-weight: 700; + color: var(--color-text-primary); + margin-bottom: var(--space-4); +} + +.list-content { + max-width: var(--max-width-3xl); +} + +@media (min-width: 1280px) { + .list-content { + max-width: var(--max-width-4xl); + } +} + +@media (min-width: 1536px) { + .list-content { + max-width: var(--max-width-5xl); + } +} + +.list-section { + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-6xl); +} + +@media (min-width: 1536px) { + .list-section { + max-width: var(--max-width-7xl); + } +} + +/* Home Layout Components */ + +.home-content { + color: var(--color-text-primary); + padding: var(--space-4); + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-6xl); +} + +@media (min-width: 1536px) { + .home-content { + max-width: var(--max-width-7xl); + } +} + +.home-tiles { + padding: var(--space-4); + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-6xl); +} + +@media (min-width: 1536px) { + .home-tiles { + max-width: var(--max-width-7xl); + } +} + +/* Section Layout Components */ + +.section-title { + color: var(--color-text-primary); + padding: var(--space-4); + font-size: var(--font-size-3xl); + font-weight: 700; + margin: 0; +} + +.section-content { + padding: var(--space-4); + color: var(--color-text-primary); +} + +.section-footer { + padding: var(--space-4); +} + +/* Typography System - Base type scales and article text + Centralizes type sizing tokens and base rules. */ + +/* Global Headings */ + +h1 { + font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* 24px–28px */ + line-height: 1.2; + font-weight: 900; + letter-spacing: -0.025em; + word-wrap: break-word; +} + +h2 { + font-size: clamp(1.25rem, 3vw, 1.375rem); /* 20px–22px */ + line-height: 1.33; + font-weight: 700; + letter-spacing: -0.025em; + word-wrap: break-word; +} + +h3 { + font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* 17px–19px */ + line-height: 1.4; + font-weight: 700; + letter-spacing: -0.015em; + word-wrap: break-word; +} + +h4 { letter-spacing: -0.01em; } + +/* Body */ + +body { + font-size: clamp(1rem, 2vw, 1.0625rem); /* 16px–17px */ + line-height: 1.6; + letter-spacing: 0.01em; +} + +/* Brand font on main */ + +main { font-family: var(--font-family-brand, inherit); } + +/* Article Content Typography */ + +.article-content { + color: var(--color-text-primary); + font-size: 1rem; /* mobile-first */ + line-height: 1.65; /* mobile-first */ + letter-spacing: 0.01em; +} + +@media (min-width: 768px) { + .article-content { + font-size: 1.0625rem; /* 17px */ + line-height: 1.6; + } +} + +/* 🎯 Universal Elevation System + * ============================== + * + * This file centralizes all box-shadow patterns to create a consistent + * elevation system across the theme. Based on Material Design principles + * but adapted for our brand aesthetic. + */ + +:root { + /* ✨ ELEVATION LEVELS (0-24dp equivalent) */ + --elevation-0: none; + /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.1); */ + --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06); + /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1); */ + --elevation-2: 0 1px 3px rgba(0, 0, 0, 0.08); + /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.1); */ + --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.08); + /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.1); */ + --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.1); + /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.1); */ + --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.12); + /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.1); */ + --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.12); + /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.1); */ + --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.14); + /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.1); */ + --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.14); + /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.15); */ + --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.16); + + /* ✨ INTERACTIVE ELEVATION (hover states) */ + /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.15); */ + --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.12); + /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.15); */ + --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.14); + /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.15); */ + --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.14); + /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.15); */ + --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.16); + /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.15); */ + --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.18); + /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.2); */ + --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.2); + + /* ✨ BRAND-COLORED ELEVATIONS */ + --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); + --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); + --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.2); + --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); + --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); + + /* ✨ SPECIALIZED ELEVATIONS */ + --elevation-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1); + --elevation-inset-deep: inset 0 2px 6px rgba(0, 0, 0, 0.15); + --elevation-outline: 0 0 0 1px rgba(0, 0, 0, 0.1); + --elevation-outline-brand: 0 0 0 1px var(--color-brand); + + /* ✨ ERROR/WARNING/SUCCESS ELEVATIONS */ + --elevation-error: 0 4px 12px rgba(239, 68, 68, 0.2); + --elevation-warning: 0 4px 12px rgba(245, 158, 11, 0.2); + --elevation-success: 0 4px 12px rgba(16, 185, 129, 0.2); + --elevation-info: 0 4px 12px rgba(59, 130, 246, 0.2); + + /* ✨ OVERLAYS AND MODALS */ + --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.3); + --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.4); + --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15); + --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +/* 🌙 DARK MODE ELEVATION ADJUSTMENTS */ + +.dark { + /* Stronger shadows for dark mode */ + /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); */ + --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.25); + /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); */ + --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.28); + /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.4); */ + --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.34); + /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); */ + --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.36); + /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); */ + --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.4); + /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.5); */ + --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.48); + /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.5); */ + --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.5); + /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.6); */ + --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.56); + /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.7); */ + --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.6); + + /* Enhanced hover states for dark mode */ + /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.5); */ + --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.44); + /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.5); */ + --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.48); + /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.6); */ + --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.5); + /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.6); */ + --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.54); + /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.7); */ + --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.58); + /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.8); */ + --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.62); + + /* Enhanced brand elevations for dark mode */ + --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.15); + --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.2); + --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.25); + --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); + --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); + + /* Enhanced overlay elevations for dark mode */ + --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.8); + --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.9); + --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6); + --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.7); +} + +/* ✅ ELEVATION UTILITY CLASSES + * ============================= + * Apply these classes for consistent elevation + */ + +.elevation-0 { box-shadow: var(--elevation-0); } + +.elevation-1 { box-shadow: var(--elevation-1); } + +.elevation-2 { box-shadow: var(--elevation-2); } + +.elevation-3 { box-shadow: var(--elevation-3); } + +.elevation-4 { box-shadow: var(--elevation-4); } + +.elevation-6 { box-shadow: var(--elevation-6); } + +.elevation-8 { box-shadow: var(--elevation-8); } + +.elevation-12 { box-shadow: var(--elevation-12); } + +.elevation-16 { box-shadow: var(--elevation-16); } + +.elevation-24 { box-shadow: var(--elevation-24); } + +/* Hover elevation classes */ + +.elevation-hover-1:hover { box-shadow: var(--elevation-hover-1); } + +.elevation-hover-2:hover { box-shadow: var(--elevation-hover-2); } + +.elevation-hover-3:hover { box-shadow: var(--elevation-hover-3); } + +.elevation-hover-4:hover { box-shadow: var(--elevation-hover-4); } + +.elevation-hover-6:hover { box-shadow: var(--elevation-hover-6); } + +.elevation-hover-8:hover { box-shadow: var(--elevation-hover-8); } + +/* Brand elevation classes */ + +.elevation-brand-subtle { box-shadow: var(--elevation-brand-subtle); } + +.elevation-brand-medium { box-shadow: var(--elevation-brand-medium); } + +.elevation-brand-strong { box-shadow: var(--elevation-brand-strong); } + +.elevation-brand-glow { box-shadow: var(--elevation-brand-glow); } + +/* Focus elevation */ + +.elevation-focus:focus-visible { + box-shadow: var(--elevation-brand-focus); + outline: none; +} + +/* ✅ COMPONENT-SPECIFIC ELEVATION MAPPINGS + * ========================================= + * Semantic elevation assignments for common components + */ + +/* Surface elements */ + +.surface { + box-shadow: var(--elevation-0); +} + +.surface-raised { + box-shadow: var(--elevation-1); +} + +/* Cards */ + +.card-flat { + box-shadow: var(--elevation-1); +} + +.card-raised { + box-shadow: var(--elevation-2); +} + +.card-elevated { + box-shadow: var(--elevation-4); +} + +.card-floating { + box-shadow: var(--elevation-8); +} + +/* Interactive cards with hover */ + +.card-interactive { + box-shadow: var(--elevation-2); + transition: box-shadow var(--timing-medium) var(--easing-standard); +} + +.card-interactive:hover { + box-shadow: var(--elevation-hover-4); +} + +/* Buttons */ + +.btn-flat { + box-shadow: var(--elevation-0); +} + +.btn-raised { + box-shadow: var(--elevation-1); +} + +.btn-floating { + box-shadow: var(--elevation-6); +} + +.btn-raised:hover, +.btn-floating:hover { + box-shadow: var(--elevation-hover-2); +} + +/* Navigation */ + +.nav-bar { + box-shadow: var(--elevation-2); +} + +.nav-drawer { + box-shadow: var(--elevation-16); +} + +.nav-tabs { + box-shadow: var(--elevation-1); +} + +/* Overlays */ + +.dropdown-menu { + box-shadow: var(--elevation-dropdown); +} + +.modal-content { + box-shadow: var(--elevation-modal); +} + +.tooltip { + box-shadow: var(--elevation-tooltip); +} + +.popover { + box-shadow: var(--elevation-8); +} + +/* Content sections */ + +.content-section { + box-shadow: var(--elevation-1); +} + +.featured-content { + box-shadow: var(--elevation-4); +} + +.hero-section { + box-shadow: var(--elevation-8); +} + +/* ✅ STATE-BASED ELEVATIONS + * ========================== + * Elevation changes based on component state + */ + +/* Loading states get reduced elevation */ + +[data-component-state="loading"] { + box-shadow: var(--elevation-1) !important; + opacity: var(--opacity-faded); +} + +/* Error states get error elevation */ + +[data-component-state="error"] { + box-shadow: var(--elevation-error) !important; +} + +/* Focus states for accessibility */ + +[data-component-state="focused"] { + box-shadow: var(--elevation-brand-focus) !important; +} + +/* ✅ COMBINED ELEVATIONS + * ======================= + * Multiple shadows for complex effects + */ + +.elevation-layered { + box-shadow: + var(--elevation-2), + var(--elevation-brand-glow); +} + +.elevation-outlined { + box-shadow: + var(--elevation-4), + var(--elevation-outline); +} + +.elevation-brand-outlined { + box-shadow: + var(--elevation-4), + var(--elevation-outline-brand); +} + +/* ✅ PERFORMANCE OPTIMIZATIONS + * ============================= + * Enable hardware acceleration for elements with elevation changes + */ + +.elevation-animated { + will-change: box-shadow; + transform: translateZ(0); /* Force hardware acceleration */ +} + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * High contrast and reduced motion support + */ + +@media (prefers-contrast: high) { + /* Enhance shadows for better visibility */ + :root { + --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); + --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); + --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); + --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); + } +} + +@media (prefers-reduced-motion: reduce) { + /* Remove shadow transitions for reduced motion */ + .card-interactive, + .btn-raised, + .btn-floating, + .elevation-animated { + transition: none !important; + } +} + +/* ✅ PRINT STYLES + * ================ + * Remove shadows for print media + */ + +@media print { + * { + box-shadow: none !important; + } +} + +/* 🎯 Universal Interaction Patterns System + * ======================================== + * + * This file centralizes all hover, focus, active, and interactive patterns + * to eliminate the hundreds of scattered transform/transition definitions + * across component files. + */ + +:root { + /* ✨ INTERACTION TRANSFORM TOKENS */ + --hover-lift-subtle: translateY(-1px); /* Buttons, small elements */ + --hover-lift-medium: translateY(-2px); /* Cards, medium elements */ + --hover-lift-dramatic: translateY(-4px); /* Hero cards, dramatic elements */ + --hover-scale-up: scale(1.02); /* Slight growth on hover */ + --hover-scale-down: scale(0.98); /* Slight shrink on active */ + --hover-combined-lift: translateY(-2px) scale(1.02); /* Combined lift + scale */ + + /* ✨ SHADOW ELEVATION TOKENS */ + --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.1); + --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.1); + --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.15); + --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.12); + --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); + --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); + + /* ✨ TRANSITION SETS - Reusable combinations */ + --transition-interactive: + transform var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard); + + --transition-elevation: + transform var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard); + + --transition-button: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard); +} + +/* ✅ INTERACTION BEHAVIOR CLASSES + * ================================ + * Apply these classes for consistent interactive behavior + */ + +/* Subtle interactive elements (buttons, small cards) */ + +.interact-subtle { + transition: var(--transition-interactive); + cursor: pointer; +} + +.interact-subtle:hover { + transform: var(--hover-lift-subtle); + box-shadow: var(--shadow-hover-subtle); +} + +.interact-subtle:active { + transform: var(--hover-scale-down); + transition-duration: var(--timing-instant); +} + +/* Medium interactive elements (content cards, tiles) */ + +.interact-medium { + transition: var(--transition-elevation); + cursor: pointer; +} + +.interact-medium:hover { + transform: var(--hover-lift-medium); + box-shadow: var(--shadow-hover-medium); +} + +.interact-medium:active { + transform: var(--hover-scale-down); + transition-duration: var(--timing-instant); +} + +/* Dramatic interactive elements (hero cards, featured content) */ + +.interact-dramatic { + transition: var(--transition-elevation); + cursor: pointer; +} + +.interact-dramatic:hover { + transform: var(--hover-lift-dramatic); + box-shadow: var(--shadow-hover-dramatic); + border-color: var(--color-brand); +} + +.interact-dramatic:active { + transform: var(--hover-combined-lift); + transition-duration: var(--timing-instant); +} + +/* ✅ BUTTON INTERACTION PATTERNS + * =============================== + * Specialized patterns for button-like elements + */ + +.btn-interact { + transition: var(--transition-button); + position: relative; + overflow: hidden; +} + +.btn-interact:hover { + transform: var(--hover-lift-subtle); + box-shadow: var(--shadow-hover-medium); +} + +.btn-interact:active { + transform: var(--hover-scale-down); + transition-duration: var(--timing-instant); +} + +.btn-interact:focus-visible { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + box-shadow: var(--shadow-focus); +} + +/* ✅ BRAND-FOCUSED INTERACTIONS + * ============================== + * Elements that should emphasize brand colors + */ + +.interact-brand { + transition: var(--transition-elevation); + cursor: pointer; +} + +.interact-brand:hover { + transform: var(--hover-lift-medium); + box-shadow: + var(--shadow-hover-medium), + var(--shadow-brand-glow); + border-color: var(--color-brand); +} + +.interact-brand:hover h1, +.interact-brand:hover h2, +.interact-brand:hover h3, +.interact-brand:hover h4, +.interact-brand:hover h5, +.interact-brand:hover h6 { + color: var(--color-brand); + transition: color var(--timing-fast) var(--easing-standard); +} + +/* ✅ FOCUS MANAGEMENT + * ==================== + * Consistent focus indicators across all interactive elements + */ + +.focusable { + border-radius: 0.25rem; /* Ensure focus outline has proper shape */ +} + +.focusable:focus-visible { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + box-shadow: var(--shadow-focus); + transition: + outline-color var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard); +} + +/* ✅ DISABLED STATES + * =================== + * Consistent disabled behavior + */ + +.interact-disabled, +[data-interactive="false"], +.interact-subtle:disabled, +.interact-medium:disabled, +.interact-dramatic:disabled { + opacity: var(--opacity-faded); + cursor: not-allowed; + pointer-events: none; + filter: grayscale(50%); + transition: + opacity var(--timing-fast) var(--easing-standard), + filter var(--timing-fast) var(--easing-standard); +} + +/* ✅ LOADING STATES + * ================== + * Interactive elements in loading state + */ + +.interact-loading { + opacity: var(--loading-opacity); + cursor: wait; + pointer-events: none; + filter: var(--loading-blur); + transition: + opacity var(--timing-fast) var(--easing-standard), + filter var(--timing-fast) var(--easing-standard); +} + +/* ✅ NESTED INTERACTION INHERITANCE + * ================================== + * Child elements inherit parent interaction states + */ + +.interact-subtle:hover .nested-text, +.interact-medium:hover .nested-text, +.interact-dramatic:hover .nested-text { + color: var(--color-brand); + transition: color var(--timing-fast) var(--easing-standard); +} + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * Enhanced interaction patterns for accessibility + */ + +/* High contrast mode support */ + +@media (prefers-contrast: high) { + .focusable:focus-visible { + outline-width: 3px; + outline-style: solid; + } + + .interact-subtle:hover, + .interact-medium:hover, + .interact-dramatic:hover { + border-width: 2px; + border-style: solid; + border-color: var(--color-brand); + } +} + +/* Reduced motion support */ + +@media (prefers-reduced-motion: reduce) { + .interact-subtle, + .interact-medium, + .interact-dramatic, + .btn-interact, + .interact-brand { + transition: none !important; + transform: none !important; + } + + .interact-subtle:hover, + .interact-medium:hover, + .interact-dramatic:hover, + .btn-interact:hover, + .interact-brand:hover { + transform: none !important; + } +} + +/* ✅ TOUCH DEVICE OPTIMIZATIONS + * ============================== + * Better interactions for touch devices + */ + +@media (hover: none) and (pointer: coarse) { + /* Reduce hover effects on touch devices */ + .interact-subtle:hover, + .interact-medium:hover, + .interact-dramatic:hover { + transform: none; + box-shadow: var(--shadow-rest); + } + + /* Enhance active states for touch feedback */ + .interact-subtle:active, + .interact-medium:active, + .interact-dramatic:active { + transform: var(--hover-scale-down); + opacity: 0.8; + } +} + +/* ✅ DARK MODE ENHANCEMENTS + * ========================== + * Enhanced shadows and interactions for dark mode + */ + +.dark { + --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.3); + --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.3); + --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.4); + --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.5); + --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); + --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); +} + +/* ✅ COMPONENT-SPECIFIC OVERRIDES + * ================================ + * Allow components to customize interaction patterns + */ + +/* Cards and tiles can use larger transforms */ + +.card, +.tile { + /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ +} + +/* Buttons get subtle interactions by default */ + +.btn { + /* Use .btn-interact class instead of custom transforms */ +} + +/* Navigation items get subtle interactions */ + +.nav-item, +.sidebar__item { + /* Use .interact-subtle class instead of custom transforms */ +} + +/* 🎯 Universal Loading States System + * =================================== + * + * This file centralizes all loading patterns, skeletons, and async state + * management to ensure consistent loading experiences across components. + */ + +:root { + /* ✨ LOADING TIMING TOKENS */ + --loading-duration-fast: 1s; + --loading-duration-normal: 1.5s; + --loading-duration-slow: 2s; + --loading-pulse-duration: 2s; + --loading-shimmer-duration: 1.5s; + + /* ✨ LOADING VISUAL TOKENS */ + --loading-opacity: 0.6; + --loading-blur: blur(1px); + --loading-grayscale: grayscale(30%); + --loading-backdrop: rgba(255, 255, 255, 0.8); + --loading-spinner-size: 2rem; + --loading-spinner-border: 2px; + + /* ✨ SKELETON TOKENS */ + --skeleton-bg-base: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.1); + --skeleton-bg-shimmer: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.2); + --skeleton-border-radius: 0.25rem; + --skeleton-height-text: 1rem; + --skeleton-height-title: 1.5rem; + --skeleton-height-button: 2.5rem; + --skeleton-height-avatar: 3rem; + + /* ✨ SHIMMER GRADIENT */ + --shimmer-gradient: linear-gradient( + 90deg, + var(--skeleton-bg-base) 25%, + var(--skeleton-bg-shimmer) 50%, + var(--skeleton-bg-base) 75% + ); + + /* ✨ PULSE GRADIENT */ + --pulse-gradient: linear-gradient( + 45deg, + rgba(var(--color-brand-rgb), 0.1) 0%, + rgba(var(--color-brand-rgb), 0.3) 50%, + rgba(var(--color-brand-rgb), 0.1) 100% + ); +} + +/* 🌙 DARK MODE LOADING ADJUSTMENTS */ + +.dark { + --loading-backdrop: rgba(0, 0, 0, 0.8); + --skeleton-bg-base: rgba(255, 255, 255, 0.1); + --skeleton-bg-shimmer: rgba(255, 255, 255, 0.2); + + --shimmer-gradient: linear-gradient( + 90deg, + var(--skeleton-bg-base) 25%, + var(--skeleton-bg-shimmer) 50%, + var(--skeleton-bg-base) 75% + ); +} + +/* ✅ LOADING STATE CLASSES + * ========================= + * Apply these classes to show loading states + */ + +/* Basic loading state */ + +.loading { + opacity: var(--loading-opacity); + pointer-events: none; + cursor: wait; + transition: opacity var(--timing-fast) var(--easing-standard); +} + +/* Loading with blur effect */ + +.loading-blur { + opacity: var(--loading-opacity); + filter: var(--loading-blur); + pointer-events: none; + cursor: wait; + transition: + opacity var(--timing-fast) var(--easing-standard), + filter var(--timing-fast) var(--easing-standard); +} + +/* Loading with grayscale effect */ + +.loading-muted { + opacity: var(--loading-opacity); + filter: var(--loading-grayscale); + pointer-events: none; + cursor: wait; + transition: + opacity var(--timing-fast) var(--easing-standard), + filter var(--timing-fast) var(--easing-standard); +} + +/* Loading overlay */ + +.loading-overlay { + position: relative; +} + +.loading-overlay::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--loading-backdrop); + backdrop-filter: blur(2px); + z-index: var(--z-overlay); + opacity: 0; + pointer-events: none; + transition: opacity var(--timing-medium) var(--easing-standard); +} + +.loading-overlay.is-loading::before { + opacity: 1; + pointer-events: auto; +} + +/* ✅ SPINNER COMPONENTS + * ====================== + * Various spinner patterns + */ + +/* Basic spinner */ + +.spinner { + width: var(--loading-spinner-size); + height: var(--loading-spinner-size); + border: var(--loading-spinner-border) solid rgba(var(--color-brand-rgb), 0.2); + border-top: var(--loading-spinner-border) solid var(--color-brand); + border-radius: 50%; + animation: spin var(--loading-duration-fast) linear infinite; + display: inline-block; +} + +.spinner-sm { + --loading-spinner-size: 1rem; + --loading-spinner-border: 1px; +} + +.spinner-lg { + --loading-spinner-size: 3rem; + --loading-spinner-border: 3px; +} + +/* Dots spinner */ + +.spinner-dots { + display: inline-flex; + gap: 0.25rem; +} + +.spinner-dots::before, +.spinner-dots::after { + content: ''; + width: 0.5rem; + height: 0.5rem; + background: var(--color-brand); + border-radius: 50%; + animation: pulse var(--loading-pulse-duration) ease-in-out infinite; +} + +.spinner-dots::before { + animation-delay: 0s; +} + +.spinner-dots::after { + animation-delay: 0.5s; +} + +/* Pulse spinner */ + +.spinner-pulse { + width: var(--loading-spinner-size); + height: var(--loading-spinner-size); + background: var(--color-brand); + border-radius: 50%; + animation: pulse var(--loading-pulse-duration) ease-in-out infinite; +} + +/* ✅ SKELETON COMPONENTS + * ======================= + * Skeleton loading patterns for different content types + */ + +/* Base skeleton */ + +.skeleton { + background: var(--skeleton-bg-base); + border-radius: var(--skeleton-border-radius); + position: relative; + overflow: hidden; +} + +.skeleton::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: var(--shimmer-gradient); + animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; +} + +/* Skeleton variations */ + +.skeleton-text { + height: var(--skeleton-height-text); + width: 100%; +} + +.skeleton-text-short { + width: 75%; +} + +.skeleton-text-long { + width: 90%; +} + +.skeleton-title { + height: var(--skeleton-height-title); + width: 60%; + margin-bottom: var(--space-2); +} + +.skeleton-button { + height: var(--skeleton-height-button); + width: 120px; + border-radius: var(--radius-button); +} + +.skeleton-avatar { + width: var(--skeleton-height-avatar); + height: var(--skeleton-height-avatar); + border-radius: 50%; +} + +.skeleton-card { + height: 200px; + border-radius: var(--radius-card); +} + +.skeleton-image { + height: 150px; + width: 100%; + border-radius: var(--radius-base); +} + +/* ✅ SKELETON LAYOUTS + * ==================== + * Complete skeleton layouts for common components + */ + +/* Article skeleton */ + +.skeleton-article { + padding: var(--space-6); +} + +.skeleton-article .skeleton-title { + margin-bottom: var(--space-4); +} + +.skeleton-article .skeleton-text { + margin-bottom: var(--space-3); +} + +.skeleton-article .skeleton-text:last-child { + width: 65%; + margin-bottom: 0; +} + +/* Card skeleton */ + +.skeleton-card-content { + padding: var(--space-4); +} + +.skeleton-card-content .skeleton-image { + margin-bottom: var(--space-4); +} + +.skeleton-card-content .skeleton-title { + margin-bottom: var(--space-3); +} + +.skeleton-card-content .skeleton-text { + margin-bottom: var(--space-2); +} + +/* List item skeleton */ + +.skeleton-list-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3); +} + +.skeleton-list-item .skeleton-avatar { + shrink: 0; +} + +.skeleton-list-item .skeleton-content { + flex: 1; +} + +.skeleton-list-item .skeleton-text { + margin-bottom: var(--space-1); +} + +.skeleton-list-item .skeleton-text:last-child { + width: 40%; + margin-bottom: 0; +} + +/* ✅ PROGRESSIVE LOADING + * ======================= + * Progressive reveal patterns + */ + +.progressive-load { + opacity: 0; + transform: var(--transform-slide-in-up); + transition: + opacity var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard); +} + +.progressive-load.loaded { + opacity: 1; + transform: var(--transform-translate-none); +} + +/* Staggered progressive loading */ + +.progressive-load-stagger > * { + opacity: 0; + transform: var(--transform-slide-in-up); + transition: + opacity var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard); + transition-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); +} + +.progressive-load-stagger.loaded > * { + opacity: 1; + transform: var(--transform-translate-none); +} + +/* ✅ ASYNC OPERATION STATES + * ========================== + * Loading states for different async operations + */ + +/* Button loading states */ + +.btn-loading { + position: relative; + color: transparent !important; + cursor: wait; + pointer-events: none; +} + +.btn-loading::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 1rem; + height: 1rem; + border: 2px solid rgba(255, 255, 255, 0.3); + border-top: 2px solid currentColor; + border-radius: 50%; + animation: spin var(--loading-duration-fast) linear infinite; +} + +/* Form loading states */ + +.form-loading { + opacity: var(--loading-opacity); + pointer-events: none; +} + +.form-loading input, +.form-loading textarea, +.form-loading select { + cursor: wait; + background-color: var(--color-surface-muted); +} + +/* Content loading states */ + +.content-loading { + min-height: 200px; + display: flex; + align-items: center; + justify-content: center; +} + +/* ✅ ERROR AND RETRY STATES + * ========================== + * Loading error and retry patterns + */ + +.loading-error { + padding: var(--space-6); + text-align: center; + color: var(--color-text-secondary); +} + +.loading-error-icon { + width: 3rem; + height: 3rem; + margin: 0 auto var(--space-4); + opacity: 0.5; +} + +.retry-button { + margin-top: var(--space-4); +} + +/* ✅ KEYFRAME ANIMATIONS + * ======================= + * Loading-specific animations + */ + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 0.3; + transform: scale(1); + } + 50% { + opacity: 1; + transform: scale(1.1); + } +} + +@keyframes shimmer { + 0% { + left: -100%; + } + 100% { + left: 100%; + } +} + +@keyframes fade-pulse { + 0%, 100% { + opacity: 0.3; + } + 50% { + opacity: 0.7; + } +} + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * Loading states for screen readers and reduced motion + */ + +/* Screen reader announcements */ + +.sr-loading-text { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + overflow: hidden; +} + +/* Reduced motion support */ + +@media (prefers-reduced-motion: reduce) { + .spinner, + .spinner-pulse, + .skeleton::after { + animation: fade-pulse var(--loading-duration-slow) ease-in-out infinite; + } + + .progressive-load, + .progressive-load-stagger > * { + transition: opacity var(--timing-fast) ease; + transform: none !important; + } +} + +/* High contrast mode */ + +@media (prefers-contrast: high) { + .skeleton { + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(0, 0, 0, 0.3); + } + + .dark .skeleton { + background: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.3); + } +} + +/* ✅ COMPONENT INTEGRATION + * ========================= + * Integration with existing component systems + */ + +/* Loading states for data attributes */ + +[data-loading="true"] { + opacity: var(--loading-opacity); + pointer-events: none; + cursor: wait; +} + +[data-loading-type="skeleton"] { + background: var(--skeleton-bg-base); + border-radius: var(--skeleton-border-radius); + position: relative; + overflow: hidden; +} + +[data-loading-type="skeleton"]::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: var(--shimmer-gradient); + animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; +} + +/* Loading states for component states */ + +[data-component-state="loading"] { + opacity: var(--loading-opacity); + filter: var(--loading-blur); + pointer-events: none; + cursor: wait; +} + +/* ✅ PERFORMANCE OPTIMIZATIONS + * ============================= + * Hardware acceleration for loading animations + */ + +.spinner, +.skeleton::after, +.progressive-load { + will-change: transform, opacity; + transform: translateZ(0); /* Force hardware acceleration */ +} + +/* ✅ UTILITY CLASSES + * =================== + * Quick loading state utilities + */ + +.is-loading { opacity: var(--loading-opacity); pointer-events: none; } + +.is-skeleton { background: var(--skeleton-bg-base); } + +.has-shimmer { position: relative; overflow: hidden; } + +.has-shimmer::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: var(--shimmer-gradient); + animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; +} + +/* Component Imports: Flat Structure for Better Visibility */ + +/* Buttons Component - Enhanced button system with NVIDIA styling */ + +/* Enhanced Button System */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--space-2) var(--space-4); + font-weight: 500; + outline: none; + border-radius: var(--radius-button); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard); + min-height: 2.5rem; + text-decoration: none; + cursor: pointer; + position: relative; + overflow: hidden; +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.btn--primary { + background-color: var(--color-brand); + color: var(--color-text-inverse); + --tw-ring-color: var(--color-brand); +} + +.btn--primary:hover:not(:disabled) { + background-color: var(--color-brand-1); + transform: var(--transform-lift-subtle); + box-shadow: var(--elevation-hover-2); +} + +.btn--secondary { + background-color: var(--color-surface); + color: var(--color-text-primary); + border: 1px solid var(--color-border-primary); + --tw-ring-color: var(--color-brand); +} + +.btn--secondary:hover:not(:disabled) { + background-color: var(--color-surface-hover); + border-color: var(--color-brand); + transform: var(--transform-lift-subtle); +} + +.btn--ghost { + background-color: transparent; + color: var(--color-text-secondary); + --tw-ring-color: var(--color-brand); +} + +.btn--ghost:hover:not(:disabled) { + background-color: var(--color-surface-hover); + color: var(--color-text-primary); +} + +.btn--danger { + background-color: var(--color-brand-7); + color: var(--color-text-inverse); + --tw-ring-color: var(--color-brand-7); +} + +.btn--danger:hover:not(:disabled) { + /* background-color: #dc2626; */ + background-color: var(--feedback-error); + transform: var(--transform-lift-subtle); +} + +.btn--sm { + /* @apply px-3 py-1 text-sm; */ + font-size: var(--font-size-sm); + min-height: 2rem; + min-width: 2rem; + padding: 0.375rem 0.5rem; /* tighter, more square */ +} + +.btn--lg { + padding: var(--space-3) var(--space-6); + font-size: var(--font-size-lg); + min-height: 3rem; +} + +.btn__icon { + /* @apply w-4 h-4 mr-2; */ + width: 1rem; + height: 1rem; + margin-right: 0.375rem; + display: inline-block; + vertical-align: middle; +} + +/* Icon-only small buttons: remove right margin for centering */ + +.btn--sm .btn__icon:only-child { + margin-right: 0; +} + +.btn__icon--right { + width: 1rem; + height: 1rem; + margin-left: var(--space-2); + margin-right: 0; +} + +/* Enhanced loading state */ + +.btn--loading { + opacity: 0.75; + cursor: wait; +} + +.btn--loading::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 1rem; + height: 1rem; + margin: -0.5rem 0 0 -0.5rem; + border: 2px solid transparent; + border-top-color: currentColor; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +/* Topbar Button Component */ + +.topbar__button { + position: relative; + padding: 0.5rem; + border-radius: var(--radius-lg); + min-width: 2.25rem; + min-height: 2.25rem; + background-color: var(--color-surface); + border: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.topbar__button::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at center, rgba(var(--color-brand-rgb), 0.1) 0%, transparent 70%); + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); + pointer-events: none; +} + +.topbar__button:hover { + background-color: var(--color-surface-hover); + border-color: var(--color-brand); + color: var(--color-text-primary); + transform: var(--transform-lift-subtle); + /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--elevation-hover-2); +} + +.topbar__button:hover::before { + opacity: 1; +} + +.topbar__button:active { + transform: translateY(0); + /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--elevation-1); +} + +.topbar__button img { + width: 1.125rem; + height: 1.125rem; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + filter: brightness(0.8); + shrink: 0; +} + +.topbar__button:hover img { + filter: brightness(1); + transform: scale(1.1); +} + +/* Legacy toggle-btn support for backward compatibility */ + +.toggle-btn { + position: relative; + padding: 0.5rem; + border-radius: var(--radius-lg); + min-width: 2.25rem; + min-height: 2.25rem; + background-color: var(--color-surface); + border: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + --tw-ring-color: var(--color-brand); +} + +.toggle-btn:focus { + outline: 2px solid transparent; + outline-offset: 2px; + box-shadow: 0 0 0 2px var(--color-brand); +} + +.toggle-btn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient( + circle at center, + rgba(var(--color-brand-rgb), 0.1) 0%, + transparent 70% + ); + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); + pointer-events: none; +} + +.toggle-btn:hover { + background-color: var(--color-surface-hover); + border-color: var(--color-brand); + color: var(--color-text-primary); + transform: var(--transform-lift-subtle); + /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--elevation-hover-2); +} + +.toggle-btn:hover::before { + opacity: 1; +} + +.toggle-btn:active { + transform: translateY(0); + /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--elevation-1); +} + +.toggle-btn--active { + background-color: var(--color-brand); + color: var(--color-text-inverse); + border-color: var(--color-brand); +} + +.toggle-btn--active:hover { + background-color: var(--color-brand-1); + color: var(--color-text-inverse); +} + +.toggle-btn img { + width: 1.125rem !important; /* Properly sized icons */ + height: 1.125rem !important; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + filter: brightness(0.8); + shrink: 0; /* Prevent icon compression */ +} + +.toggle-btn:hover img { + filter: brightness(1); + transform: scale(1.1); +} + +.toggle-btn--active img { + filter: brightness(1) invert(1); +} + +/* Button Ripple Effects */ + +.ripple { + position: absolute !important; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + transform: scale(0); + /* ✅ FIXED: Use animation tokens for ripple effect */ + animation: ripple-animation var(--timing-slow) linear; + pointer-events: none; + z-index: 1; + /* Ensure it doesn't affect layout */ + top: 0; + left: 0; + width: 0; + height: 0; +} + +.dark .ripple { + background: rgba(255, 255, 255, 0.2); +} + +/* ✅ KEYFRAME: Ripple animation using animation tokens */ + +@keyframes ripple-animation { + to { + transform: scale(4); + opacity: var(--opacity-hidden); + } +} + +/* Ensure buttons have proper positioning for ripple containment */ + +button, .btn { + position: relative; + overflow: hidden; +} + +/* ========================================================================== + Copy Button States + ========================================================================== */ + +.copy-button--success { + background-color: var(--color-success, #16a34a) !important; + color: white !important; + border-color: var(--color-success, #16a34a) !important; +} + +.copy-button--error { + background-color: var(--color-danger, #dc2626) !important; + color: white !important; + border-color: var(--color-danger, #dc2626) !important; +} + +/* Tables Component - BEM, dense, and glass variants aligned to design tokens */ + +@layer components { + /* + * Replacement policy: retire global element styles in favor of a semantic component API. + * Old global table selectors are intentionally removed to avoid leakage across the site. + */ + + /* Bridge default Markdown tables to component rules until all markup adopts .table */ + :where(.table, .article-content table) { + width: 100%; + font-size: var(--font-size-sm); + border-collapse: separate; + border-spacing: 0; + color: var(--color-text-primary); + } + + /* Container (enables horizontal scroll when needed) */ + .table__container { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + overflow-y: hidden; /* avoid clipping rounded headers within container */ + } + /* Ensure rounded headers aren't visually clipped when inside a scroll container */ + .table__container--rounded { border-radius: 0.75rem; } + /* Progressive enhancement: auto-round container if it has a rounded/glass table */ + .table__container:has(> .table.table--rounded), + .table__container:has(> .table.table--glass) { border-radius: 0.75rem; } + + /* Head */ + :where(.table__head, .article-content table thead) th { + text-align: left; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: var(--font-size-xs); + background-color: var(--color-surface-active); + color: var(--color-text-primary); + } + + /* Rows */ + :where(.table__row, .article-content table tbody tr) { + vertical-align: top; + } + + /* Cells */ + :where(.table__cell, .article-content table th, .article-content table td) { + padding: var(--space-2) var(--space-3); + border-top: 1px solid var(--color-border-primary); + } + .table__cell--numeric { text-align: right; } + .table__cell--wrap { white-space: normal; } + .table__cell--nowrap { white-space: nowrap; } + + /* Density variants */ + .table--dense .table__cell { padding-top: var(--space-1); padding-bottom: var(--space-1); } + .table--compact .table__cell { padding-top: 0.125rem; padding-bottom: 0.125rem; } + + /* Row states */ + .table :where(.table__row:hover) { background-color: var(--color-surface-hover); } + :where(.article-content table tbody tr:hover) { background-color: var(--color-surface-hover); } + .table--zebra .table__body > .table__row:nth-child(even) { background-color: var(--color-surface); } + /* Ensure hover wins over zebra striping */ + .table--zebra .table__body > .table__row:nth-child(even):hover { background-color: var(--color-surface-hover); } + + /* Pinned header (opt-in) */ + .table--sticky thead th { position: sticky; top: 0; z-index: 1; } + + /* Glass morphism (opt-in) */ + .table--glass { + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + backdrop-filter: saturate(150%) blur(8px); + -webkit-backdrop-filter: saturate(150%) blur(8px); + /* Light: subtle translucent surface; Dark: stronger translucency */ + background-color: rgba(255, 255, 255, 0.6); + border: 1px solid var(--color-border-primary); + } + + /* Inspired header: match code/tabs glass header visuals */ + .table--header-glass .table__head, + .table--glass .table__head { + background: var(--glass-bg); + border-bottom: 1px solid var(--glass-border-color); + overflow: hidden; /* ensure rounded corners show */ + } + .table--header-glass .table__head th, + .table--glass .table__head th { + padding: var(--space-2) var(--space-3); + font-size: var(--font-size-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--glass-bg); + border-top: none; /* avoid double border at the top */ + } + /* Subtle separators between header cells (like tabs nav) */ + .table--header-glass .table__head th + th, + .table--glass .table__head th + th { + border-left: 1px solid var(--glass-border-color); + } + /* Light mode: strengthen dividers for visibility */ + @media (prefers-color-scheme: light) { + .table--header-glass .table__head, + .table--glass .table__head { border-bottom-color: var(--color-border-primary); } + .table--header-glass .table__head th + th, + .table--glass .table__head th + th { border-left-color: var(--color-border-primary); } + } + /* Rounded top corners when using glass/rounded variant */ + .table--rounded .table__head th:first-child, + .table--glass .table__head th:first-child { border-top-left-radius: 0.75rem; } + .table--rounded .table__head th:last-child, + .table--glass .table__head th:last-child { border-top-right-radius: 0.75rem; } + .table--rounded .table__head { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden; } +} + +/* Enhanced Notice Component */ + +/* Base Enhanced Notice Styles */ + +.notice { + position: relative; + margin-top: 1.5rem; + margin-bottom: 1.5rem; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-medium) var(--easing-standard), + opacity var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard); + border-radius: var(--radius-lg); + overflow: hidden; + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* ✅ FIXED: Use animation tokens */ + animation: notice-enter var(--timing-medium) var(--easing-standard); + animation-fill-mode: both; +} + +/* Removed legacy overrides that zeroed out spacing and styles */ + +/* Enhanced Notice Container */ + +.notice__container { + display: flex; + align-items: flex-start; + padding: 0.875rem 1rem; + position: relative; +} + +/* Enhanced Notice Icon */ + +.notice__icon-wrapper { + margin-right: 1rem; + shrink: 0; + position: relative; + margin-top: 0.125rem; +} + +.notice__icon { + height: 1.25rem; + width: 1.25rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.2s; + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); +} + +/* Enhanced Notice Content */ + +.notice__content { + min-width: 0; + flex: 1 1 0%; +} + +.notice__title { + margin-bottom: 0.25rem; + font-family: "NVIDIA", Arial, Helvetica, sans-serif; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 600; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.2s; + line-height: 1.3; +} + +.notice__text { + font-size: 0.875rem; + line-height: 1.25rem; + line-height: 1.625; + color: var(--color-text-primary); + font-family: var(--font-brand); +} + +.notice__text p { + margin-bottom: 0.5rem; +} + +.notice__text p:last-child { + margin-bottom: 0; +} + +.notice__text strong { + font-weight: 600; +} + +.notice__text code { + border-radius: var(--radius-base); + padding: 0.125rem 0.375rem; + font-size: 0.75rem; + line-height: 1rem; + background-color: rgba(0, 0, 0, 0.1); + font-family: var(--font-family-mono, monospace); +} + +/* Notice Type Variations */ + +/* Info Notice */ + +/* Old hex-based colors commented in favor of tokens */ + +/* .notice--info { ... } */ + +.notice--info { + background: linear-gradient( + 135deg, + rgba(var(--color-info-rgb), 0.1) 0%, + rgba(var(--color-info-rgb), 0.05) 100% + ) !important; + border: 1px solid rgba(var(--color-info-rgb), 0.2) !important; + box-shadow: + 0 4px 12px rgba(var(--color-info-rgb), 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; +} + +.notice--info .notice__title { color: var(--color-info); } + +.notice--info .notice__icon { + filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.3)); +} + +/* Note Notice */ + +.notice--note { + background: linear-gradient( + 135deg, + rgba(var(--color-note-rgb), 0.1) 0%, + rgba(var(--color-note-rgb), 0.05) 100% + ) !important; + border: 1px solid rgba(var(--color-note-rgb), 0.2) !important; + box-shadow: + 0 4px 12px rgba(var(--color-note-rgb), 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; +} + +.notice--note .notice__title { color: var(--color-note); } + +.notice--note .notice__icon { + filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.3)); +} + +/* Tip Notice */ + +.notice--tip { + background: linear-gradient( + 135deg, + rgba(var(--color-tip-rgb), 0.1) 0%, + rgba(var(--color-tip-rgb), 0.05) 100% + ) !important; + border: 1px solid rgba(var(--color-tip-rgb), 0.2) !important; + box-shadow: + 0 4px 12px rgba(var(--color-tip-rgb), 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; +} + +.notice--tip .notice__title { color: var(--color-tip); } + +.notice--tip .notice__icon { + filter: drop-shadow(0 1px 2px rgba(34, 197, 94, 0.3)); +} + +/* Warning Notice */ + +.notice--warning { + background: linear-gradient( + 135deg, + rgba(var(--color-warning-rgb), 0.1) 0%, + rgba(var(--color-warning-rgb), 0.05) 100% + ) !important; + border: 1px solid rgba(var(--color-warning-rgb), 0.2) !important; + box-shadow: + 0 4px 12px rgba(var(--color-warning-rgb), 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; +} + +.notice--warning .notice__title { color: var(--color-warning); } + +.notice--warning .notice__icon { + filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3)); +} + +/* Danger Notice */ + +.notice--danger { + background: linear-gradient( + 135deg, + rgba(var(--color-danger-rgb), 0.1) 0%, + rgba(var(--color-danger-rgb), 0.05) 100% + ) !important; + border: 1px solid rgba(var(--color-danger-rgb), 0.2) !important; + box-shadow: + 0 4px 12px rgba(var(--color-danger-rgb), 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; +} + +.notice--danger .notice__title { color: var(--color-danger); } + +.notice--danger .notice__icon { + filter: drop-shadow(0 1px 2px rgba(239, 68, 68, 0.3)); +} + +/* Security Notice */ + +.notice--security { + background: linear-gradient( + 135deg, + rgba(var(--color-security-rgb), 0.1) 0%, + rgba(var(--color-security-rgb), 0.05) 100% + ) !important; + border: 1px solid rgba(var(--color-security-rgb), 0.2) !important; + box-shadow: + 0 4px 12px rgba(var(--color-security-rgb), 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; +} + +.notice--security .notice__title { color: var(--color-security); } + +.notice--security .notice__icon { + filter: drop-shadow(0 1px 2px rgba(168, 85, 247, 0.3)); +} + +/* Snack Notice */ + +.notice--snack { + background: linear-gradient( + 135deg, + rgba(var(--color-snack-rgb), 0.1) 0%, + rgba(var(--color-snack-rgb), 0.05) 100% + ) !important; + border: 1px solid rgba(var(--color-snack-rgb), 0.2) !important; + box-shadow: + 0 4px 12px rgba(var(--color-snack-rgb), 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; +} + +.notice--snack .notice__title { color: var(--color-snack); } + +.notice--snack .notice__icon { + filter: drop-shadow(0 1px 2px rgba(236, 72, 153, 0.3)); +} + +/* Hover Effects */ + +/* Subtle hover only when interactive content is inside */ + +.notice:has(a:hover) .notice__icon { transform: scale(1.03); } + +/* Entrance Animation */ + +@keyframes notice-enter { + 0% { + opacity: 0; + transform: translateY(10px) scale(0.98); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Dark mode code styling */ + +@media (prefers-color-scheme: dark) { + .notice__text code { + background-color: rgba(255, 255, 255, 0.1); + } +} + +/* Remove heavy :has() spacing shifts; container layout handles alignment */ + +/* Navigation Component - Modular navigation system with NVIDIA styling */ + +/* Import all navigation components directly */ + +/* Navigation Base - Container queries and shared navigation foundations */ + +/* ======================================== + Container Query Context + ======================================== */ + +.sidebar-container, +.topbar, +.chat-toc-toggle { + container-type: inline-size; +} + +.sidebar-container { + container-name: sidebar; + container-type: inline-size; +} + +.topbar { + container-name: topbar; +} + +.chat-toc-toggle { + container-name: toggle; +} + +/* Base navigation link styling */ + +.nav-link { + position: relative; + padding: 0.5rem 0.75rem; + border-radius: var(--radius-md); + font-weight: 400; + font-size: 0.875rem; + line-height: 1.2; + min-height: 2.25rem; + color: var(--color-text-primary); + text-decoration: none; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard); + white-space: nowrap; + overflow: hidden; /* Essential for ripple containment */ + display: flex; + align-items: center; + cursor: pointer; +} + +/* Enhanced focus states for nav-links */ + +.nav-link:focus { + outline: 2px solid transparent; + outline-offset: 2px; + box-shadow: + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); /* Double focus ring */ +} + +.nav-link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.08) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.03) 100% + ); + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); + pointer-events: none; +} + +.nav-link:hover, +.nav-link:focus { + color: var(--color-brand); + /* Removed transform and background for cleaner minimal look */ +} + +.nav-link:hover::before, +.nav-link:focus::before { + opacity: 0.5; /* More subtle hover effect */ +} + +/* Base nested content styling - use new animation system */ + +.nested-content { + /* Use animation bridge collapse system instead of display:none */ + max-height: var(--collapse-height-collapsed); + opacity: var(--collapse-opacity-collapsed); + overflow: hidden; + transition: + max-height var(--collapse-timing) var(--collapse-easing), + opacity var(--collapse-timing) var(--collapse-easing); +} + +/* Enhanced hover states - use animation tokens for consistency */ + +.nested-content a:hover { + transform: translateX(4px); + transition: transform var(--timing-fast) var(--easing-standard); +} + +/* Expand toggle button - use animation tokens */ + +.expand-toggle { + padding: 0.25rem; + border-radius: var(--radius-base); + color: var(--color-text-secondary); + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard); +} + +.expand-toggle:hover { + background-color: var(--color-surface-hover); + color: var(--color-brand); +} + +.expand-toggle svg { + transition: transform var(--timing-fast) var(--easing-standard); +} + +/* Chat/TOC Toggle Component - Interactive toggle between chat and table of contents */ + +/* Chat/TOC Toggle Component */ + +.chat-toc-toggle { + display: flex; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.375rem; + overflow: hidden; + box-shadow: var(--elevation-4); + height: 2.25rem; + min-width: 72px; /* Ensure minimum visibility */ + + /* Prevent flash during initialization */ + opacity: 1; + transition: opacity var(--timing-instant) var(--easing-standard); + + /* Enhance visibility */ + position: relative; +} + +.chat-toc-toggle.initialized { + opacity: 1; + animation: none; /* Cancel fallback animation */ +} + +@keyframes fallback-show { + to { opacity: 1; } +} + +.chat-toc-toggle__option { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + min-width: 2.25rem; + min-height: 2.25rem; + border: none; + background: transparent; + color: var(--color-text-secondary); + cursor: pointer; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard); + overflow: hidden; +} + +.chat-toc-toggle__option:hover { + background: var(--color-surface-hover); + color: var(--color-text-primary); + transform: var(--transform-lift-subtle); + box-shadow: 0 4px 8px color-mix(in srgb, black 10%, transparent); +} + +.chat-toc-toggle__option--active { + background: var(--color-brand); + color: var(--color-text-inverse); +} + +.chat-toc-toggle__option--active:hover { + background: var(--color-brand-1); + transform: var(--transform-lift-subtle); +} + +.chat-toc-toggle__icon { + width: 1.125rem; + height: 1.125rem; + shrink: 0; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard); + filter: brightness(0.8); +} + +.chat-toc-toggle__option:hover .chat-toc-toggle__icon { + filter: brightness(1); + transform: scale(1.1); +} + +.chat-toc-toggle__option--active .chat-toc-toggle__icon { + filter: brightness(0) invert(1); +} + +.chat-toc-toggle__option--active:hover .chat-toc-toggle__icon { + filter: brightness(0) invert(1); + transform: scale(1.1); +} + +/* Focus states for accessibility */ + +.chat-toc-toggle__option:focus { + outline: 2px solid transparent; + outline-offset: 2px; + box-shadow: 0 0 0 2px var(--color-brand); + z-index: 1; +} + +/* Ripple effect on click */ + +.chat-toc-toggle__option::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient( + circle at center, + color-mix(in srgb, var(--color-brand) 10%, transparent) 0%, + transparent 70% + ); + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); + pointer-events: none; +} + +.chat-toc-toggle__option:hover::before { + opacity: 1; +} + +.chat-toc-toggle__option:active::before { + opacity: 1; +} + +.chat-toc-toggle__option:active { + transform: translateY(0); + box-shadow: 0 2px 4px color-mix(in srgb, black 10%, transparent); +} + +/* Sidebar Navigation - Main navigation sidebar with responsive behavior */ + +/* Sidebar Container Styling */ + +.sidebar, +.sidebar-container { + background-color: transparent; + color: var(--color-text-primary); + border-inline-end: none; + /* Enable named container for container queries in this file */ + container-type: inline-size; + container-name: sidebar; +} + +/* Desktop sidebar styling */ + +/* +@container sidebar (min-width: 768px) { + .sidebar, + .sidebar-container { + background-color: transparent; + border-inline-end: none; + transform: translateX(0) !important; + position: sticky !important; + display: flex !important; + } +} +*/ + +/* FALLBACK: Media query for desktop sidebar visibility */ + +/* +@media (min-width: 768px) { + .sidebar-container { + transform: translateX(0) !important; + position: sticky !important; + display: flex !important; + } +} +*/ + +/* Mobile sidebar styling */ + +@container sidebar (max-width: 767px) { + .sidebar-container { + /* Ensure it starts hidden on mobile */ + position: fixed; + z-index: 40; + width: 20rem; /* w-80 equivalent */ + height: 100vh; + top: 0; + left: 0; + transform: translateX(-100%); + /* ✅ FIXED: Use animation tokens */ + transition: transform var(--timing-medium) var(--easing-standard); + } + + .sidebar.translate-x-0, + .sidebar-container.translate-x-0 { + transform: translateX(0) !important; + } +} + +/* Mobile Header Styling - Force hide on desktop */ + +.sidebar-header { + border-bottom: none; + background-color: transparent; + color: var(--color-text-primary); + display: flex; +} + +/* Force hide sidebar header on desktop */ + +@container sidebar (min-width: 768px) { + .sidebar__header, + .sidebar-header { + display: none !important; + } +} + +/* Fallback: Hide mobile navigation elements on desktop */ + +@media (min-width: 768px) { + .sidebar__header, + .sidebar-header { + display: none !important; + } + + [data-component="navigation-mobile-toggle"] { + display: none !important; + } +} + +/* Ensure sidebar starts hidden on mobile */ + +@container sidebar (max-width: 767px) { + .sidebar:not(.translate-x-0), + .sidebar-container:not(.translate-x-0) { + transform: translateX(-100%) !important; + } +} + +.sidebar__close-button, +.sidebar-close-btn { + color: var(--color-text-secondary); + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard); + border: none; + background: transparent; + cursor: pointer; +} + +.sidebar__close-button:hover, +.sidebar-close-btn:hover { + background-color: var(--color-surface-hover); + color: var(--color-text-primary); + border-radius: var(--radius-lg); +} + +.sidebar__close-button:focus, +.sidebar-close-btn:focus { + outline: 2px solid var(--color-brand); + outline-offset: 2px; +} + +/* LinkTree Styling */ + +[data-link-tree], +#linkTree { + background-color: transparent; + color: var(--color-text-primary); + width: 100%; +} + +/* Desktop linkTree padding adjustment */ + +@container sidebar (min-width: 768px) { + [data-link-tree], + #linkTree { + padding-inline-start: 4px; /* Add space for focus ring to prevent clipping */ + padding-inline-end: 0; + } +} + +/* Mobile linkTree styling */ + +@container sidebar (max-width: 767px) { + [data-link-tree], + #linkTree { + padding: 1rem; + } +} + +/* Prevent layout shift during initialization */ + +/* +#linkTree:not(.initialized) { + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); +} +*/ + +[data-link-tree].initialized, +#linkTree.initialized { + opacity: 1; +} + +/* Robust expansion using :has() based on aria-expanded (fallback if JS state desyncs) */ + +li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="true"]) > .nested-content { + max-height: var(--collapse-height-expanded); + opacity: var(--collapse-opacity-expanded); + overflow: visible; +} + +li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested-content { + max-height: var(--collapse-height-collapsed); + opacity: var(--collapse-opacity-collapsed); + overflow: hidden; +} + +/* Allow interaction inside nested content while its parent is transitioning */ + +.nested-content[data-collapse-state="transitioning"] { + /* Override global pattern that disables all pointer events during transitions */ + pointer-events: auto; +} + +/* ✅ NEW ANIMATION SYSTEM - Use data attributes for consistent behavior */ + +/* Ensure animations only work after initialization */ + +[data-link-tree].initialized .nested-content[data-collapse-state="expanded"], +#linkTree.initialized .nested-content[data-collapse-state="expanded"] { + max-height: var(--collapse-height-expanded); + opacity: var(--collapse-opacity-expanded); + overflow: visible; /* Allow content to be fully visible */ +} + +[data-link-tree].initialized .nested-content[data-collapse-state="collapsed"], +#linkTree.initialized .nested-content[data-collapse-state="collapsed"] { + max-height: var(--collapse-height-collapsed); + opacity: var(--collapse-opacity-collapsed); + overflow: hidden; +} + +[data-link-tree].initialized .nested-content[data-collapse-state="transitioning"], +#linkTree.initialized .nested-content[data-collapse-state="transitioning"] { + overflow: hidden; /* Prevent content spillage during animation */ +} + +/* Sidebar Navigation Components - Cohesive Design */ + +.sidebar__item { + display: flex; + align-items: center; + border-radius: var(--radius-md); + transition: all var(--timing-fast) var(--easing-standard); + background-color: transparent; + margin: 1px 0; +} + +.sidebar__item:hover { + background-color: var(--color-surface-hover); +} + +.sidebar__link { + display: flex; + align-items: center; + flex-grow: 1; + padding: var(--space-2); + transition: all var(--timing-fast) var(--easing-standard); + outline: none; + border-radius: var(--radius-md) 0 0 var(--radius-md); + color: var(--color-text-primary); + text-decoration: none; + --tw-ring-color: var(--color-brand); + min-height: 2.5rem; /* Consistent touch target */ +} + +.sidebar__link:hover, +.sidebar__link:focus { + color: var(--color-brand); +} + +.sidebar__link--active { + color: var(--color-brand); + background-color: var(--color-hover); +} + +.sidebar__icon { + /* Reduced icon size for tighter look */ + /* @apply w-5 h-5 mr-3 shrink-0; */ + width: 1rem; + height: 1rem; + margin-right: var(--space-3); + flex-shrink: 0; +} + +.sidebar__text { + flex-grow: 1; +} + +.sidebar__expander { + padding: var(--space-2); + transition: all var(--timing-fast) var(--easing-standard); + outline: none; + border-radius: 0 var(--radius-md) var(--radius-md) 0; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-secondary); + min-width: 2.5rem; + min-height: 2.5rem; + --tw-ring-color: var(--color-brand); +} + +.sidebar__expander:hover, +.sidebar__expander:focus { + color: var(--color-brand); + background-color: var(--color-surface-active); +} + +.sidebar__chevron { + width: 1rem; + height: 1rem; + transition: transform var(--timing-fast) var(--easing-standard); +} + +/* Level-specific styling */ + +.sidebar__item--level-1 .sidebar__text { + /* Step down one size from text-lg and slightly reduce weight */ + /* @apply text-lg font-brand font-bold; */ + font-size: var(--font-size-base); + font-weight: 600; + font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; +} + +.sidebar__item--level-1 { + margin-bottom: var(--space-1); +} + +.sidebar__item--level-2 { + margin-left: var(--space-4); +} + +.sidebar__item--level-2 .sidebar__text { + /* Step down one size from text-base */ + /* @apply font-normal text-base; */ + font-weight: 400; + font-size: var(--font-size-sm); +} + +.sidebar__item--level-3 { + margin-left: var(--space-6); +} + +.sidebar__item--level-3 .sidebar__text { + /* Step down one size from text-sm */ + /* @apply font-light text-sm; */ + font-weight: 300; + font-size: var(--font-size-xs); +} + +.sidebar__item--level-4 { + margin-left: var(--space-8); +} + +.sidebar__item--level-4 .sidebar__text { + /* Step down one size from text-sm */ + /* @apply text-sm; */ + font-size: var(--font-size-xs); +} + +.sidebar__item--level-default { + margin-left: 2.5rem; +} + +.sidebar__item--level-default .sidebar__text { + font-size: var(--font-size-xs); +} + +/* Ensure text-brand utility works with sidebar items */ + +.sidebar__link.text-brand { + color: var(--color-brand) !important; +} + +/* Enhanced active state for the whole item */ + +.sidebar__item:has(.sidebar__link--active) { + background-color: var(--color-hover); + /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ + box-shadow: var(--elevation-brand-subtle); +} + +/* Performance hints for hover states (localize former global rules) */ + +.sidebar:has(.sidebar__item:hover), +.sidebar-container:has(.sidebar__item:hover) { + will-change: transform; + contain: layout; +} + +/* Right Sidebar Styling - Remove background in dark mode */ + +#sidebar-right { + background: transparent; +} + +.dark #sidebar-right { + background: transparent !important; + background-color: transparent !important; +} + +/* Remove chat controls background in dark mode */ + +.dark .chat-controls { + background: transparent !important; + background-color: transparent !important; + border: none !important; + box-shadow: none !important; +} + +/* Topbar Navigation - Main horizontal navigation bar with responsive grid layout */ + +/* Clean CSS Grid Topbar Layout */ + +.topbar { + position: sticky; + top: 0; + z-index: 50; + /* background-color: var(--color-bg-primary); */ + /* border-bottom: 1px solid var(--color-border-primary); */ + background: var(--glass-bg); + border-bottom: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard); + + /* CSS Grid Layout */ + display: grid; + grid-template-columns: auto 1fr auto auto; + grid-template-areas: "logo navigation search controls"; + align-items: center; + gap: 1rem; + /* padding: 0.75rem 1.5rem; */ + padding: 0.5rem 0.75rem; + /* min-height: 4rem; */ + min-height: 3rem; + box-shadow: var(--glass-shadow); +} + +/* Grid Areas */ + +.topbar__logo { + grid-area: logo; + display: flex; + align-items: center; + shrink: 0; +} + +.topbar__logo-link { + display: flex; + align-items: center; + text-decoration: none; + transition: opacity var(--timing-fast) var(--easing-standard); +} + +.topbar__logo-link:hover { + opacity: 0.8; +} + +.topbar__logo-image { + width: 1.25rem; + height: 1.25rem; + -o-object-fit: contain; + object-fit: contain; +} + +.topbar__navigation { + grid-area: navigation; + display: flex; + align-items: center; + gap: 0.75rem; + min-width: 0; /* Allow shrinking */ +} + +.topbar__search { + grid-area: search; + display: flex; + align-items: center; + justify-content: center; + min-width: 0; /* Allow shrinking */ +} + +.topbar__controls { + grid-area: controls; + display: flex; + align-items: center; + gap: 0.5rem; + shrink: 0; +} + +/* Responsive Grid Layout */ + +@container topbar (max-width: 1024px) { + .topbar { + grid-template-columns: auto auto 1fr auto; + grid-template-areas: "logo navigation search controls"; + gap: 0.75rem; + padding: 0.5rem 1rem; + } +} + +@container topbar (max-width: 768px) { + .topbar { + grid-template-columns: auto 1fr auto; + grid-template-areas: "logo search controls"; + gap: 0.5rem; + padding: 0.5rem 0.5rem; + min-height: 2.75rem; + } + + /* Hide navigation on mobile - it should be in a hamburger menu */ + .topbar__navigation { + display: none; + } +} + +/* Updated Navigation Links for Grid Layout */ + +.topbar__links { + display: flex; + align-items: center; + gap: 0.5rem; /* Tighter spacing for minimal look */ + font-family: var(--font-brand); + font-weight: 300; + font-size: 0.875rem; + color: var(--color-text-primary); +} + +/* Hide navigation links on mobile */ + +@container (max-width: 768px) { + .topbar__link { + display: none; /* Hidden on mobile, shown via hamburger menu */ + } +} + +/* Topbar links */ + +.topbar__link { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.25rem 0.5rem; + color: var(--color-text-primary); + text-decoration: none; + transition: color var(--timing-fast) var(--easing-standard); +} + +.topbar__link:hover, +.topbar__link:focus-visible { + color: var(--color-brand); + outline: none; +} + +/* Table of Contents (TOC) - Navigation within content and sidebar TOC */ + +/* Enhanced TOC Styling */ + +.toc { + border-radius: var(--radius-lg); + padding: var(--space-6); + margin-bottom: var(--space-8); + background: transparent; + border: none; + box-shadow: none; +} + +.toc-header { + display: flex; + align-items: center; + margin-bottom: var(--space-4); + padding-bottom: var(--space-3); + border: none; + color: var(--color-text-primary); +} + +.toc-content a { + display: inline-block; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-lg); + transition: all var(--timing-fast) var(--easing-standard); + color: var(--color-text-secondary); + text-decoration: none; +} + +.toc-content a:hover { + background-color: var(--color-surface-hover); + color: var(--color-brand); + transform: translateX(4px); +} + +/* Enhanced Right Sidebar TOC */ + +.toc { + padding: var(--space-6); + font-size: var(--font-size-sm); + background: transparent; + border-radius: var(--radius-xl); + color: var(--color-text-primary); +} + +.toc__nav { + position: relative; +} + +.toc__nav::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 100%; + background: linear-gradient( + to bottom, + var(--color-brand) 0%, + rgba(var(--color-brand-rgb), 0.3) 50%, + transparent 100% + ); + border-radius: 2px; +} + +.toc ul { + list-style: none; + padding-left: var(--space-4); + margin: 0; +} + +.toc ul ul { + padding-left: var(--space-4); + margin-top: var(--space-2); + border-left: 1px solid; + border-color: color-mix(in srgb, var(--color-border-primary) 20%, transparent); +} + +/* TOC Link Styling */ + +.toc-link { + display: block; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-lg); + transition: all var(--timing-fast) var(--easing-standard); + position: relative; + overflow: hidden; + color: var(--color-text-secondary); + text-decoration: none; + line-height: 1.4; + font-weight: 400; + cursor: pointer; /* Ensure ripple-ready */ +} + +.toc-link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 90deg, + rgba(var(--color-brand-rgb), 0.08) 0%, + transparent 100% + ); + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); + pointer-events: none; +} + +.toc-link:hover { + background-color: var(--color-surface-hover); + color: var(--color-brand); + transform: translateX(4px); + padding-inline-start: calc(0.75rem + 2px); + border-inline-start: 2px solid var(--color-brand); +} + +.toc-link:hover::before { + opacity: 1; +} + +.toc-link:focus { + outline: 2px solid transparent; + outline-offset: 2px; + color: var(--color-brand); + /* box-shadow: + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); */ /* Enhanced double focus ring */ + box-shadow: + var(--elevation-brand-focus), + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); +} + +/* Reading progress bar animation */ + +#progress-bar { + transition: width 0.3s ease-out; +} + +/* Heading Level Variations */ + +.toc-link--h1 { + font-weight: 600; + /* Slightly reduce H1 TOC size for a lighter hierarchy */ + /* font-size: 0.95em; */ + font-size: 0.9em; + color: var(--color-text-primary); +} + +.toc-link--h2 { + font-weight: 500; + color: var(--color-brand); + opacity: 0.9; +} + +.toc-link--h3 { + /* Slightly reduce H3 TOC size in tandem with sidebar tightening */ + /* font-size: 0.85em; */ + font-size: 0.8em; + color: var(--color-text-tertiary); + font-weight: 400; +} + +/* Active state styling */ + +.toc-link.active { + background-color: var(--color-brand); + color: var(--color-text-inverse); + font-weight: 500; + transform: translateX(2px); + /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); */ + box-shadow: var(--elevation-brand-subtle); +} + +.toc-link.active::before { + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.2) 0%, + transparent 100% + ); + opacity: 1; +} + +/* Smooth scrolling indicator */ + +.toc-progress { + position: absolute; + top: 0; + left: 0; + width: 2px; + height: 0%; + background-color: var(--color-brand); + transition: height var(--timing-medium) var(--easing-standard); + border-radius: 1px; +} + +/* Enhanced animations */ + +.toc { + /* ✅ FIXED: Use animation tokens */ + animation: toc-enter var(--timing-medium) var(--easing-standard); + animation-fill-mode: both; +} + +@keyframes toc-enter { + from { + opacity: 0; + transform: translateX(20px) scale(0.95); + } + to { + opacity: 1; + transform: translateX(0) scale(1); + } +} + +/* Responsive adjustments */ + +@container (max-width: 1024px) { + .toc { + padding: var(--space-4); + font-size: var(--font-size-xs); + } + + .toc-link { + padding: 0.375rem var(--space-2); + } +} + +/* Remove TOC sidebar background in dark mode */ + +.dark .toc { + background: transparent !important; +} + +/* Enhanced active state context */ + +.toc:has(.toc-link.active) .toc__nav::before { + opacity: 1; + transform: scaleY(1.1); + background: linear-gradient( + to bottom, + var(--color-brand) 0%, + rgba(var(--color-brand-rgb), 0.5) 50%, + transparent 100% + ); +} + +/* Localized performance hint for hover state */ + +.toc:has(.toc-link:hover) { + will-change: transform; + contain: layout; +} + +/* Dropdown Navigation - Dropdown menus for navigation links */ + +.topbar__dropdown { + position: absolute; + left: 0; + margin-top: var(--space-2); + width: 13rem; /* w-52 = 208px = 13rem */ + border-radius: var(--radius-xl); + overflow: hidden; + padding: var(--space-2); + transition: all var(--timing-medium) var(--easing-standard); + /* background-color: var(--color-surface); */ + background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + opacity: 0; + visibility: hidden; + transform: translateY(-10px) scale(0.95); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); +} + +.group:hover .topbar__dropdown { + display: block; + opacity: 1; + visibility: visible; + transform: translateY(0) scale(1); +} + +.topbar__dropdown::before { + content: ''; + position: absolute; + top: -6px; + left: 20px; + width: 12px; + height: 12px; + /* background-color: var(--color-surface); */ + background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + border-bottom: none; + border-right: none; + transform: rotate(45deg); + z-index: -1; +} + +.topbar__dropdown-link { + display: flex; + align-items: center; + padding: var(--space-3) var(--space-4); + font-size: var(--font-size-sm); + border-radius: var(--radius-lg); + transition: all var(--timing-fast) var(--easing-standard); + position: relative; + overflow: hidden; + color: var(--color-text-primary); + --tw-ring-color: var(--color-brand); + text-decoration: none; + margin: 2px 0; +} + +.topbar__dropdown-link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 90deg, + rgba(var(--color-brand-rgb), 0.08) 0%, + transparent 100% + ); + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); + pointer-events: none; +} + +.topbar__dropdown-link:hover, +.topbar__dropdown-link:focus { + background-color: var(--color-surface-hover); + color: var(--color-brand); + transform: translateX(4px); + border-inline-start: 3px solid var(--color-brand); + padding-inline-start: calc(1rem - 3px); +} + +.topbar__dropdown-link:hover::before, +.topbar__dropdown-link:focus::before { + opacity: 1; +} + +/* Language Switcher transitions migrated from page-enhancements.css */ + +.language-switcher .hidden { + opacity: 0; + transform: translateY(-8px); + transition: opacity 0.2s ease-out, transform 0.2s ease-out; +} + +.language-switcher .block { + opacity: 1; + transform: translateY(0); +} + +@media (max-width: 640px) { + .language-switcher { position: relative; } +} + +/* Navigation API Endpoint Styling */ + +/* Enhanced styling for API endpoints in the main navigation sidebar */ + +/* ========================================================================== + API Endpoint Items + ========================================================================== */ + +.api-endpoint-item { + display: flex; + align-items: center; + gap: 0.5rem; + width: 100%; +} + +/* ========================================================================== + HTTP Method Badges + ========================================================================== */ + +.http-method-badge { + display: inline-block; + padding: 0.125rem 0.375rem; + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + border-radius: 0.25rem; + min-width: 3rem; + text-align: center; + letter-spacing: 0.025em; + shrink: 0; +} + +/* GET - Green */ + +/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ + +/* .http-method-badge--get { background: #10b981; color: white; } */ + +.http-method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } + +/* POST - Blue */ + +/* .http-method-badge--post { background: #3b82f6; color: white; } */ + +.http-method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } + +/* PUT - Orange */ + +/* .http-method-badge--put { background: #f59e0b; color: white; } */ + +.http-method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } + +/* PATCH - Purple */ + +/* .http-method-badge--patch { background: #8b5cf6; color: white; } */ + +.http-method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } + +/* DELETE - Red */ + +/* .http-method-badge--delete { background: #ef4444; color: white; } */ + +.http-method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } + +/* HEAD, OPTIONS - Gray */ + +/* .http-method-badge--head, .http-method-badge--options { background: #6b7280; color: white; } */ + +.http-method-badge--head, +.http-method-badge--options { background: var(--http-head-bg); color: var(--http-head-text); } + +/* ========================================================================== + API Endpoint Path and Summary + ========================================================================== */ + +.api-endpoint-path { + font-weight: 500; + color: var(--color-text-primary); + font-size: 0.8125rem; + line-height: 1.3; + word-break: break-all; + flex: 1; +} + +.api-endpoint-summary { + display: block; + font-size: 0.75rem; + color: var(--color-text-tertiary); + line-height: 1.3; + margin-top: 0.25rem; + font-weight: 400; + font-style: italic; +} + +/* ========================================================================== + Enhanced Sidebar Item Styling for API Endpoints + ========================================================================== */ + +/* Make API endpoint links have more vertical space */ + +.sidebar__link:has(.api-endpoint-item) { + padding: 0.75rem; + align-items: flex-start; +} + +/* Ensure the text wrapper takes full width */ + +.sidebar__text:has(.api-endpoint-item) { + width: 100%; +} + +/* ========================================================================== + Hover and Active States + ========================================================================== */ + +/* Hover states are implicitly handled by dark-mode tokens; leaving hover overrides minimal */ + +.sidebar__link:hover .http-method-badge--get { background: var(--http-get-bg); } + +.sidebar__link:hover .http-method-badge--post { background: var(--http-post-bg); } + +.sidebar__link:hover .http-method-badge--put { background: var(--http-put-bg); } + +.sidebar__link:hover .http-method-badge--patch { background: var(--http-patch-bg); } + +.sidebar__link:hover .http-method-badge--delete { background: var(--http-delete-bg); } + +.sidebar__link:hover .http-method-badge--head, +.sidebar__link:hover .http-method-badge--options { background: var(--http-head-bg); } + +/* Active state enhancements */ + +.sidebar__link--active .api-endpoint-path { + color: var(--color-brand-primary); + font-weight: 600; +} + +.sidebar__link--active .api-endpoint-summary { + color: var(--color-text-secondary); +} + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 768px) { + .http-method-badge { + min-width: 2.5rem; + font-size: 0.625rem; + padding: 0.125rem 0.25rem; + } + + .api-endpoint-path { + font-size: 0.75rem; + } + + .api-endpoint-summary { + font-size: 0.6875rem; + } + + .sidebar__link:has(.api-endpoint-item) { + padding: 0.5rem; + } +} + +/* ========================================================================== + Dark Mode Support + ========================================================================== */ + +/* Dark mode handled via CSS variables in :root/.dark */ + +/* ========================================================================== + Focus States for Accessibility + ========================================================================== */ + +.sidebar__link:focus-visible:has(.api-endpoint-item) { + outline: 2px solid var(--color-brand-primary); + outline-offset: 2px; +} + +/* ========================================================================== + Animation and Transitions + ========================================================================== */ + +.http-method-badge { + transition: background-color 0.15s ease; +} + +.api-endpoint-path, +.api-endpoint-summary { + transition: color 0.15s ease; +} + +/* Breadcrumbs Navigation Component - Pure navigation styling */ + +.breadcrumb { + flex: 1; + min-width: 0; +} + +.breadcrumb__list { + display: flex; + flex-wrap: wrap; + align-items: center; + font-size: 0.875rem; + line-height: 1.25rem; + margin: 0; + padding: 0; + list-style: none; +} + +.breadcrumb__item { + display: flex; + align-items: center; +} + +.breadcrumb__link { + position: relative; + display: inline-flex; + align-items: center; + border-radius: var(--radius-lg); + /* padding: 0.5rem 0.75rem; */ + padding: 0.25rem 0.5rem; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + background-color: transparent; + color: var(--color-text-secondary); + text-decoration: none; + font-weight: 500; + overflow: hidden; +} + +.breadcrumb__link:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.08) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.03) 100% + ); + opacity: 0; + transition: opacity 0.2s ease; + pointer-events: none; +} + +.breadcrumb__link:hover { + color: var(--color-brand); + /* background-color: var(--color-surface-hover); */ + /* transform: var(--transform-lift-subtle); */ + /* box-shadow: var(--elevation-4); */ +} + +.breadcrumb__link:hover:before { + opacity: 1; +} + +.breadcrumb__link:focus { + outline: 2px solid transparent; + outline-offset: 2px; + color: var(--color-brand); + background-color: var(--color-surface-hover); + box-shadow: + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); /* Enhanced double focus ring */ +} + +.breadcrumb__separator { + margin-left: 0.75rem; + margin-right: 0.75rem; + font-size: 1.125rem; + line-height: 1.75rem; + color: var(--color-text-tertiary); + transition: + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + font-weight: 300; +} + +.breadcrumb:hover .breadcrumb__separator { + color: var(--color-brand); + transform: scale(1.1); +} + +.breadcrumb__current { + display: inline-flex; + align-items: center; + border-radius: var(--radius-lg); + /* padding: 0.5rem 0.75rem; */ + padding: 0.25rem 0.5rem; + font-weight: 600; + /* background-color: var(--color-brand); */ + /* color: var(--color-text-inverse); */ + background: var(--glass-bg); + color: var(--color-text-primary); + border: 1px solid var(--glass-border-color); + position: relative; + overflow: hidden; +} + +/* Clickable current breadcrumb for metadata toggle */ + +.breadcrumb__current--clickable { + cursor: pointer; + transition: color 0.2s ease, background-color 0.2s ease; + border: none; + gap: 0.5rem; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +.breadcrumb__current--clickable:hover { + background-color: var(--color-surface-hover); +} + +.breadcrumb__current--clickable:focus { + outline: 2px solid transparent; + outline-offset: 2px; + box-shadow: + 0 0 0 2px var(--color-text-inverse), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.5); +} + +.breadcrumb__current--clickable:active { + transform: translateY(0); +} + +.breadcrumb__metadata-icon { + width: 1rem; + height: 1rem; + opacity: 0.8; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.breadcrumb__current--clickable:hover .breadcrumb__metadata-icon { + opacity: 1; + transform: scale(1.1); +} + +.breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { + opacity: 1; + transform: rotate(180deg); +} + +.breadcrumb__current:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.2), + transparent 50%, + rgba(255, 255, 255, 0.1) + ); + pointer-events: none; +} + +/* Entrance Animation */ + +.breadcrumb__current, +.breadcrumb__link { + animation: breadcrumb-enter 0.3s ease-out; + animation-fill-mode: both; +} + +@keyframes breadcrumb-enter { + 0% { + opacity: 0; + transform: translateX(-10px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* Responsive Design */ + +@media (max-width: 768px) { + .breadcrumb__list { + font-size: 0.75rem; + line-height: 1rem; + } + + .breadcrumb__link, + .breadcrumb__current { + padding: 0.375rem 0.5rem; + } + + .breadcrumb__metadata-icon { + width: 0.875rem; + height: 0.875rem; + } + + .breadcrumb__separator { + margin-left: 0.5rem; + margin-right: 0.5rem; + font-size: 1rem; + } +} + +/* High contrast mode support */ + +@media (prefers-contrast: high) { + .breadcrumb__link { + border: 1px solid transparent; + } + + .breadcrumb__link:hover, + .breadcrumb__link:focus { + border-color: var(--color-brand); + } + + .breadcrumb__current { + border: 2px solid var(--color-brand); + } + + .breadcrumb__current--clickable:hover, + .breadcrumb__current--clickable:focus { + border: 2px solid var(--color-text-inverse); + } +} + +/* Reduced motion support */ + +@media (prefers-reduced-motion: reduce) { + .breadcrumb__link, + .breadcrumb__separator, + .breadcrumb__current--clickable, + .breadcrumb__metadata-icon { + transition: none; + } + + .breadcrumb__current, + .breadcrumb__link { + animation: none; + } + + .breadcrumb__link:hover, + .breadcrumb__current--clickable:hover { + transform: none; + } + + .breadcrumb:hover .breadcrumb__separator { + transform: none; + } + + .breadcrumb__current--clickable:hover .breadcrumb__metadata-icon, + .breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { + transform: none; + } +} + +/* ========================================================================== + :has() Breadcrumb Component Enhancements + ========================================================================== */ + +/* Breadcrumb container awareness of metadata panel state */ + +.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) { + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 100% + ); + border-radius: var(--radius-lg); + margin: -0.25rem; + padding: 0.25rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Enhanced separator styling when metadata is expanded */ + +.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__separator { + color: var(--color-brand); + transform: scale(1.2); +} + +/* Interactive breadcrumb links when metadata is open */ + +.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link { + background-color: rgba(var(--color-brand-rgb), 0.05); + border-radius: 0.375rem; +} + +.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link:hover { + background-color: rgba(var(--color-brand-rgb), 0.15); + transform: var(--transform-lift-medium); + box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.2); +} + +/* Hover context awareness */ + +.breadcrumb:has(.breadcrumb__link:hover) { + background: rgba(var(--color-surface), 0.5); + border-radius: var(--radius-lg); + transition: all 0.2s ease; +} + +.breadcrumb:has(.breadcrumb__link:hover) .breadcrumb__current { + transform: scale(1.02); + box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); +} + +/* Search Component - Sophisticated search interface with NVIDIA styling and complex grouping */ + +/* SOPHISTICATED SEARCH INPUT - Matching design system */ + +.search-input { + position: relative; + z-index: 10; + width: 100%; + max-width: 24rem; + padding: 0.625rem 0.75rem 0.625rem 2.25rem; + border-radius: var(--radius-lg); + border: 1px solid var(--color-border-primary); + font-size: 0.875rem; + font-weight: 500; + /* background: var(--color-surface); */ + background: var(--glass-bg); + color: var(--color-text-primary); + font-family: var(--font-family-brand, inherit); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard); + /* box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + /* box-shadow: var(--elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); + + /* Search icon using brand color */ + /* Use currentColor for icon stroke; color is set via CSS variable for themeability */ + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z'/%3e%3c/svg%3e"); + background-position: left 0.75rem center; + background-repeat: no-repeat; + background-size: 1.125rem 1.125rem; + color: var(--color-text-primary); +} + +.search-input:hover { + border-color: var(--color-brand); + background-color: var(--color-surface-hover); + transform: var(--transform-lift-subtle); + /* box-shadow: + 0 4px 8px rgba(0, 0, 0, 0.1), + 0 0 20px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); */ + /* box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ + box-shadow: var(--glass-shadow); +} + +.search-input:focus { + outline: 2px solid transparent; + outline-offset: 2px; + border-color: var(--color-brand); + background-color: var(--glass-bg); + transform: var(--transform-lift-subtle); + /* box-shadow: + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), + 0 4px 12px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.2); */ + /* box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--elevation-hover-2), inset 0 1px 0 rgba(255, 255, 255, 0.2); */ + box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--glass-shadow); +} + +.search-input::-moz-placeholder { + color: var(--color-text-tertiary); + font-style: italic; +} + +.search-input::placeholder { + color: var(--color-text-tertiary); + font-style: italic; +} + +/* SOPHISTICATED SEARCH CONTAINER - Matching design system */ + +.search-container { + position: relative; + border-radius: 0.875rem; + padding: 0.75rem; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); + /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ + transition: + background-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard); +} + +.search-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + opacity: 0; + /* transition: opacity 0.3s ease; */ + transition: opacity var(--timing-medium) var(--easing-standard); + pointer-events: none; + border-radius: 0.875rem; +} + +.search-container:hover, +.search-container:focus-within { + border-color: var(--color-brand); + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.1), + 0 0 20px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.search-container:hover::before, +.search-container:focus-within::before { + opacity: 1; +} + +/* SOPHISTICATED SEARCH RESULTS CONTAINER */ + +#searchResultsContainer { + position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: 0.875rem; + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); + /* animation: search-container-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ + animation: search-container-enter var(--timing-medium) var(--easing-standard); + animation-fill-mode: both; + overflow: hidden; +} + +#searchResultsContainer::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +#searchResultsContainer:hover::before { + opacity: 1; +} + +@keyframes search-container-enter { + from { + opacity: 0; + transform: translateY(20px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* SOPHISTICATED SEARCH HIT STYLING - Matching tiles and navigation patterns */ + +.search-hit { + position: relative; + display: block; + text-decoration: none; + color: inherit; + margin-bottom: 0.75rem; + overflow: hidden; +} + +.search-hit-content { + position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: 0.875rem; + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + padding: 1.25rem; + /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ + transition: + background-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); + overflow: hidden; +} + +.search-hit-content::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + opacity: 0; + /* transition: opacity 0.3s ease; */ + transition: opacity var(--timing-medium) var(--easing-standard); + pointer-events: none; +} + +.search-hit-content::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2)); + transform: scaleX(0); + /* transition: transform 0.3s ease; */ + transition: transform var(--timing-medium) var(--easing-standard); + transform-origin: left; +} + +.search-hit:hover .search-hit-content { + transform: var(--transform-lift-dramatic); + border-color: var(--color-brand); + /* box-shadow: + 0 12px 28px rgba(0, 0, 0, 0.12), + 0 0 20px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); */ + box-shadow: + var(--elevation-hover-2), + var(--elevation-brand-subtle), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.search-hit:hover .search-hit-content::before { + opacity: 1; +} + +.search-hit:hover .search-hit-content::after { + transform: scaleX(1); +} + +/* Focus states for accessibility */ + +.search-hit:focus-within .search-hit-content { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + transform: var(--transform-lift-medium); +} + +/* Search Hit Typography - Matching design system */ + +.search-hit-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 0.75rem; +} + +.search-hit-section { + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-brand); + margin-bottom: 0.25rem; + transition: all 0.2s ease; +} + +.search-hit:hover .search-hit-section { + transform: translateX(2px); + color: var(--color-brand-1); +} + +.search-hit-title { + font-size: 1.125rem; + font-weight: 600; + line-height: 1.375; + color: var(--color-text-primary); + font-family: var(--font-family-brand, inherit); + margin: 0; + /* transition: color 0.2s ease; */ + transition: color var(--timing-fast) var(--easing-standard); +} + +.search-hit:hover .search-hit-title { + color: var(--color-brand); +} + +.search-hit-description { + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text-secondary); + margin: 0.75rem 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.search-hit-metadata { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 0.75rem; + color: var(--color-text-tertiary); + margin-top: 0.75rem; + padding-top: 0.75rem; + border-top: 1px solid var(--color-border-secondary); +} + +.search-hit-score { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.25rem 0.5rem; + background: var(--color-brand); + color: var(--color-text-inverse); + border-radius: 0.375rem; + font-size: 0.75rem; + font-weight: 600; + min-width: 3rem; + text-align: center; + transition: all 0.2s ease; + opacity: 0.8; +} + +.search-hit:hover .search-hit-score { + transform: scale(1.05); + opacity: 1; + background: var(--color-brand-1); +} + +/* SOPHISTICATED SEARCH SECTIONS */ + +.search-section { + margin-bottom: 2rem; + border-radius: 0.875rem; + /* transition: all 0.3s ease; */ + transition: + background-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard); +} + +.search-section:hover { + transform: var(--transform-lift-medium); +} + +.search-section-header { + display: flex; + align-items: center; + margin-bottom: 1.5rem; + padding: 1rem; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: 0.75rem; + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); +} + +.search-section-badge { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 50%; + background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2)); + color: var(--color-text-inverse); + font-size: 0.875rem; + font-weight: 600; + margin-right: 0.75rem; + /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ + box-shadow: var(--elevation-brand-subtle); + transition: all 0.2s ease; +} + +.search-section:hover .search-section-badge { + transform: scale(1.1); + /* box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.3); */ + box-shadow: var(--elevation-brand-medium); +} + +.search-section-title { + font-size: 1.5rem; + font-weight: 700; + color: var(--color-text-primary); + font-family: var(--font-family-brand, inherit); + margin: 0; +} + +/* SOPHISTICATED PARENT GROUPS */ + +.search-parent-group { + position: relative; + margin-bottom: 1.5rem; +} + +.search-parent-group h3 { + position: sticky; + top: 0; + z-index: 10; + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-secondary); + font-family: var(--font-family-brand, inherit); + margin: 0 -1rem 1rem -1rem; + padding: 0.75rem 1rem; + /* background: var(--color-surface); */ + background: var(--glass-bg); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + border-bottom: 1px solid var(--color-border-secondary); + border-radius: 0.5rem 0.5rem 0 0; +} + +/* SEARCH RESULTS HEADER */ + +.search-results-header { + padding: 1.5rem; + margin-bottom: 1.5rem; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: 0.875rem; + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + border-left: 4px solid var(--color-brand); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* animation: slideInUp 0.6s ease-out; */ + animation: slideInUp var(--timing-slow) var(--easing-standard); +} + +.search-results-header h1 { + font-size: 1.25rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 0.25rem 0; +} + +.search-results-header p { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin: 0; +} + +.search-stats { + text-align: right; +} + +.search-stats div { + font-size: 0.75rem; + color: var(--color-text-tertiary); +} + +/* SOPHISTICATED ANIMATIONS - Matching design system */ + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.7; + } +} + +/* Animation Classes */ + +.animate-fadeIn { + /* animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ + animation: fadeIn var(--timing-fast) var(--easing-standard); +} + +.animate-slideInUp { + /* animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); */ + animation: slideInUp var(--timing-fast) var(--easing-standard); +} + +.animate-pulse { + /* animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; */ + animation: pulse var(--timing-slow) var(--easing-emphasized) infinite; +} + +/* Search Container Enhancements */ + +.search-results-container { + transition: all 0.3s ease; +} + +.search-results-header { + animation: slideInUp 0.6s ease-out; +} + +/* Search Section Styling */ + +.search-section { + border-radius: 12px; + transition: all 0.3s ease; +} + +.search-section:hover { + transform: var(--transform-lift-medium); +} + +/* Enhanced Search Hit Styling */ + +.search-hit { + position: relative; + overflow: hidden; +} + +.search-hit-content { + position: relative; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + border: 1px solid var(--color-border, #e0e0e0); +} + +.search-hit:hover .search-hit-content { + border-color: var(--color-brand); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.1), + 0 0 0 1px var(--color-brand-alpha, rgba(74, 144, 226, 0.1)); +} + +.search-hit-content::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-brand), var(--color-brand-secondary, var(--color-brand))); + transform: scaleX(0); + transition: transform 0.3s ease; + transform-origin: left; +} + +.search-hit:hover .search-hit-content::before { + transform: scaleX(1); +} + +/* Search Hit Typography */ + +.search-hit-title { + transition: color 0.2s ease; +} + +.search-hit:hover .search-hit-title { + color: var(--color-brand) !important; +} + +.search-hit-section { + transition: all 0.2s ease; +} + +.search-hit:hover .search-hit-section { + transform: translateX(2px); +} + +/* Search Score Badge */ + +.search-hit-score { + transition: all 0.2s ease; + min-width: 45px; + text-align: center; +} + +.search-hit:hover .search-hit-score { + transform: scale(1.05); + opacity: 1 !important; +} + +/* SOPHISTICATED FILTER STYLING - Matching navigation patterns */ + +#filterSelect { + position: relative; + /* background: var(--color-surface); */ + background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + border-radius: var(--radius-lg); + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-primary); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--glass-shadow); + cursor: pointer; +} + +#filterSelect:hover { + background: var(--color-surface-hover); + border-color: var(--color-brand); + transform: var(--transform-lift-subtle); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +#filterSelect:focus { + outline: 2px solid transparent; + outline-offset: 2px; + border-color: var(--color-brand); + box-shadow: + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); +} + +.filter-active { + background: var(--color-brand) !important; + color: var(--color-text-inverse) !important; + border-color: var(--color-brand) !important; + box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.25) !important; +} + +.filter-active:hover { + background: var(--color-brand-1) !important; + transform: var(--transform-lift-subtle); +} + +/* Filter container styling */ + +#filterContainer { + position: relative; +} + +#filterContainer label { + display: block; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-secondary); + margin-bottom: 0.5rem; +} + +/* UTILITY CLASSES */ + +.line-clamp-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.space-y-3 > * + * { + margin-top: 0.75rem; +} + +.space-x-4 > * + * { + margin-left: 1rem; +} + +.flex { + display: flex; +} + +.items-center { + align-items: center; +} + +.justify-between { + justify-content: space-between; +} + +.flex-1 { + flex: 1 1 0%; +} + +.font-medium { + font-weight: 500; +} + +/* SOPHISTICATED LOADING STATES */ + +.search-loading { + position: relative; + padding: 2rem; + text-align: center; +} + +.search-loading::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 20px; + height: 20px; + margin: -10px 0 0 -10px; + border: 2px solid var(--color-border-primary); + border-top-color: var(--color-brand); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.search-loading-text { + color: var(--color-text-secondary); + font-size: 0.875rem; + margin-top: 1rem; +} + +/* Focus Management */ + +.search-hit:focus-within .search-hit-content { + outline: 2px solid var(--color-brand); + outline-offset: 2px; +} + +/* RESPONSIVE DESIGN */ + +@media (max-width: 768px) { + .search-hit-content { + padding: 1rem; + } + + .search-hit-metadata { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .search-results-header { + padding: 1rem; + } + + .search-results-header .flex { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .search-section-header { + padding: 0.75rem; + } + + .search-section-badge { + width: 1.75rem; + height: 1.75rem; + font-size: 0.75rem; + } + + .search-section-title { + font-size: 1.25rem; + } + + .search-parent-group h3 { + font-size: 1rem; + padding: 0.5rem 0.75rem; + } +} + +/* PRINT STYLES */ + +@media print { + .search-hit-content { + -moz-column-break-inside: avoid; + break-inside: avoid; + box-shadow: none; + border: 1px solid #000; + background: white; + } + + .search-hit-score, + .animate-fadeIn, + .animate-slideInUp { + display: none; + } + + .search-section-badge { + background: #000; + color: white; + } +} + +/* NO RESULTS AND ERROR STATES - Matching design system */ + +.search-no-results, +.search-error { + text-align: center; + padding: 3rem 1.5rem; + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border-radius: 0.875rem; + border: 1px solid var(--color-border-primary); + animation: fadeIn 0.5s ease-out; +} + +.search-no-results .emoji, +.search-error .emoji { + font-size: 3rem; + margin-bottom: 1rem; + opacity: 0.6; + display: block; +} + +.search-no-results h2, +.search-error h2 { + font-size: 1.25rem; + font-weight: 600; + color: var(--color-text-secondary); + margin: 0 0 0.5rem 0; +} + +.search-no-results p, +.search-error p { + font-size: 0.875rem; + color: var(--color-text-tertiary); + margin: 0 0 1rem 0; +} + +.search-error button { + background: var(--color-brand); + color: var(--color-text-inverse); + border: none; + border-radius: var(--radius-lg); + padding: 0.5rem 1rem; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +.search-error button:hover { + background: var(--color-brand-1); + transform: var(--transform-lift-subtle); + box-shadow: 0 4px 8px rgba(var(--color-brand-rgb), 0.25); +} + +/* High Contrast Mode Support */ + +@media (prefers-contrast: high) { + .search-hit-content { + border-width: 2px; + } + + .search-hit:hover .search-hit-content { + border-width: 3px; + } +} + +/* ACCESSIBILITY AND REDUCED MOTION SUPPORT */ + +@media (prefers-reduced-motion: reduce) { + .search-hit-content, + .search-section, + .search-section-badge, + .animate-fadeIn, + .animate-slideInUp, + #searchResultsContainer { + animation: none; + transition: none; + } + + .search-hit:hover .search-hit-content, + .search-section:hover, + .search-section:hover .search-section-badge { + transform: none; + } +} + +/* HIGH CONTRAST MODE SUPPORT */ + +@media (prefers-contrast: high) { + .search-hit-content, + .search-section-header, + .search-results-header { + border-width: 2px; + } + + .search-hit:hover .search-hit-content { + border-width: 3px; + } + + .search-section-badge { + border: 2px solid var(--color-text-primary); + } +} + +/* DARK MODE SUPPORT - All styles automatically work via CSS custom properties */ + +/* The color system in colors.css handles dark mode via .dark class */ + +/* No additional dark mode styles needed as we use semantic color variables */ + +/* Chat Component - Enhanced chat interface with premium styling */ + +/* Chat Header */ + +.chat__header { + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + border-radius: 0.75rem 0.75rem 0 0; /* Top corners rounded to match design system */ +} + +/* Chat header icon styling for proper dark mode */ + +.chat__header-icon { + filter: brightness(0) saturate(100%) invert(42%) sepia(15%) saturate(566%) hue-rotate(202deg) brightness(96%) contrast(87%); +} + +.dark .chat__header-icon { + filter: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(593%) hue-rotate(202deg) brightness(91%) contrast(92%); +} + +/* Danger button variant for delete action */ + +.topbar__button--danger:hover { + background-color: rgba(239, 68, 68, 0.1) !important; + border-color: rgb(239, 68, 68) !important; + color: rgb(239, 68, 68) !important; +} + +.topbar__button--danger:hover img { + filter: brightness(0) saturate(100%) invert(35%) sepia(96%) saturate(2067%) hue-rotate(346deg) brightness(89%) contrast(94%) !important; +} + +/* Chat Container - Clean transparent design */ + +#chatContainer { + background: transparent; + border: none; + box-shadow: none; + border-radius: 0.75rem; /* Add consistent border radius */ + /* margin-right: 1.5rem; Align with page container padding */ + /* Replaced: remove right margin on wide screens to avoid pinching */ + margin-top: 1rem; /* Match the pageContainer's top padding to align with content start */ +} + +/* On xl+, let chat use full sidebar column width */ + +@screen xl { + #chatContainer { + margin-right: 0; + } +} + +/* Enhanced Chat Interface - Clean transparent design */ + +.chat__controls { + background: transparent; + border: none; + border-radius: 0 0 0.75rem 0.75rem; /* Bottom corners rounded to match container */ +} + +.chat__form { + width: 100%; +} + +.chat__input { + outline: none; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + border-color var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard); + font-family: var(--font-brand); + line-height: 1.4; +} + +.chat__input:hover { + border-color: var(--color-brand); + box-shadow: var(--elevation-4); +} + +.chat__input:focus { + border-color: var(--color-brand); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.1), + 0 0 0 3px rgba(var(--color-brand-rgb), 0.1); +} + +/* Old styling moved to enhanced section below */ + +/* Smooth transitions for chat container */ + +#chatContainer { + /* ✅ FIXED: Use animation tokens for consistent timing */ + /* transition (was medium for all) */ + transition: + width var(--timing-medium) var(--easing-smooth), + max-width var(--timing-medium) var(--easing-smooth), + /* slower transform and shadow for more graceful feel */ + box-shadow var(--timing-slow) var(--easing-smooth), + transform var(--timing-slow) var(--easing-smooth), + border-radius var(--timing-slow) var(--easing-standard), + /* include background/border transitions for softer state change */ + background-color var(--timing-medium) var(--easing-smooth), + border-color var(--timing-medium) var(--easing-smooth), + backdrop-filter var(--timing-medium) var(--easing-smooth); + transform-origin: top right; + will-change: width, transform, box-shadow; +} + +/* Expanded Chat State - Enhanced Liquid Glass */ + +.chat-expanded { + /* Lighter translucent surface */ + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + border: 1px solid var(--glass-border-color); + border-left-width: 3px; + /* box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08), 0 8px 28px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.18); */ + box-shadow: var(--glass-shadow); + transform: translateY(-2px); + overflow: visible; + display: flex; + flex-direction: column; +} + +/* Dark theme tuning: slightly lighter sheet */ + +.dark .chat-expanded { + background: var(--glass-bg); + border-color: var(--glass-border-color); +} + +/* Ensure messages area scrolls within viewport when expanded */ + +.chat-expanded #chat-messages { + flex: 1 1 auto; + min-height: 0; /* required for flex children to allow overflow */ + overflow-y: auto; + max-height: none; /* use container max-height instead */ +} + +/* Modal overlay for expanded chat */ + +.chat-overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.22); + opacity: 0; + transition: opacity var(--timing-medium) var(--easing-smooth); + z-index: 50; /* below chat container (which uses 60) */ +} + +.chat-overlay.visible { + opacity: 1; +} + +/* Enhanced input styling for expanded state */ + +.chat-expanded .chat__input { + font-size: var(--font-size-base); + font-size: 15px; /* Slightly larger for better UX */ + line-height: 1.5; +} + +/* Micro-interaction for expand button */ + +.chat__header button { + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard); +} + +.chat__header button:hover { + transform: scale(1.1); + background-color: var(--color-surface-hover); +} + +.chat__header button:active { + transform: scale(0.95); +} + +/* Enhanced focus states */ + +.chat-expanded .chat__input:focus { + box-shadow: + 0 0 0 3px rgba(var(--color-brand-rgb), 0.12), + 0 4px 20px rgba(0, 0, 0, 0.1); + border-color: var(--color-brand); +} + +/* Subtle animation for chat messages in expanded state */ + +.chat-expanded .chat__messages { + /* ✅ FIXED: Use animation tokens */ + animation: subtle-fade-in var(--timing-medium) var(--easing-standard) var(--reveal-stagger-delay) both; +} + +@keyframes subtle-fade-in { + from { + opacity: 0.8; + transform: translateY(4px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Liquid Glass Hover Effect */ + +#chatContainer:not(.chat-expanded):hover { + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + border-color: var(--glass-border-color); + /* transform: translateX(-1px); */ + box-shadow: var(--glass-shadow); +} + +/* Auto-resize textarea styling with liquid glass focus */ + +.chat-input { + overflow-y: hidden; + scrollbar-width: none; + -ms-overflow-style: none; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard); +} + +.chat-input::-webkit-scrollbar { + display: none; +} + +.chat-input:focus { + background: rgba(255, 255, 255, 0.08) !important; + /* backdrop-filter: blur(12px) !important; */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; + border-color: rgba(255, 255, 255, 0.15) !important; + box-shadow: + 0 0 0 2px rgba(var(--color-brand-rgb), 0.1), + 0 4px 12px rgba(0, 0, 0, 0.06); +} + +/* Enhanced send button styling */ + +#sendButton { + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard), + filter var(--timing-fast) var(--easing-standard); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +/* :has() Chat Interface Enhancements */ + +/* Chat container responds to input focus (no scale to avoid clipping) */ + +#chatContainer:has(.chat__input:focus) { + transform: translateY(-1px); + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.15), + 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + border-color: var(--color-brand); + overflow: visible; +} + +/* Match header with lighter sheet while expanded */ + +.chat-expanded .chat__header { + background: rgba(255, 255, 255, 0.08) !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.14); +} + +.dark .chat-expanded .chat__header { + background: rgba(255, 255, 255, 0.05) !important; + border-bottom-color: rgba(255, 255, 255, 0.12); +} + +/* Enhanced expanded state with input focus */ + +.chat-expanded:has(.chat__input:focus) { + border-left-width: 4px; + border-color: var(--color-brand); + background: rgba(255, 255, 255, 0.15); +} + +/* Chat form with content gets enhanced styling */ + +#chatContainer:has(.chat__input:not(:-moz-placeholder)) .chat__header { + background: linear-gradient(135deg, + rgba(var(--color-brand-rgb), 0.1) 0%, + rgba(var(--color-brand-rgb), 0.05) 100%); + border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.2); +} + +#chatContainer:has(.chat__input:not(:placeholder-shown)) .chat__header { + background: linear-gradient(135deg, + rgba(var(--color-brand-rgb), 0.1) 0%, + rgba(var(--color-brand-rgb), 0.05) 100%); + border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.2); +} + +/* Send button activation based on input content */ + +#chatContainer:has(.chat__input:not(:-moz-placeholder)) #sendButton { + background-color: var(--color-brand) !important; + color: var(--color-text-inverse) !important; + transform: scale(1.05); + box-shadow: + 0 4px 12px rgba(var(--color-brand-rgb), 0.3), + 0 2px 8px rgba(0, 0, 0, 0.1); +} + +#chatContainer:has(.chat__input:not(:placeholder-shown)) #sendButton { + background-color: var(--color-brand) !important; + color: var(--color-text-inverse) !important; + transform: scale(1.05); + box-shadow: + 0 4px 12px rgba(var(--color-brand-rgb), 0.3), + 0 2px 8px rgba(0, 0, 0, 0.1); +} + +#sendButton:not(:disabled) { + background-color: var(--color-brand) !important; + color: var(--color-text-inverse) !important; +} + +#sendButton:not(:disabled):hover { + transform: scale(1.1); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + filter: brightness(1.1); +} + +#sendButton:not(:disabled):active { + transform: scale(0.95); + filter: brightness(0.9); +} + +#sendButton:disabled { + background-color: var(--color-bg-secondary) !important; + color: var(--color-text-tertiary) !important; +} + +/* Chat input improvements */ + +.chat__input:focus { + box-shadow: + 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), + 0 4px 12px rgba(0, 0, 0, 0.1); + border-color: var(--color-brand) !important; +} + +.chat__input::-moz-placeholder { + color: var(--color-text-tertiary); +} + +.chat__input::placeholder { + color: var(--color-text-tertiary); +} + +/* Header button hover effects with enhanced micro-interactions */ + +.chat__header button:hover svg { + transform: scale(1.15) rotate(2deg); + transition: transform var(--timing-fast) var(--easing-standard); +} + +/* Smooth state transitions for expand button icon */ + +.chat__header button svg { + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: transform var(--timing-medium) var(--easing-standard); +} + +/* Chat bubble improvements - tighter spacing and better hierarchy */ + +.chat-bubble { + padding: var(--space-3); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); + position: relative; + max-width: none; /* Reduced padding from p-4 to p-3 */ + word-wrap: break-word; + word-break: break-word; + overflow-wrap: break-word; + hyphens: auto; + white-space: pre-wrap; + line-height: 1.5; /* Slightly tighter line height */ + font-family: var(--font-brand); + border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent rounded corners with tail */ +} + +.chat-bubble--user { + margin-left: var(--space-6); /* Reduced margin */ + background-color: var(--color-brand); + color: var(--color-text-inverse); + border-radius: 1rem 1rem 0.25rem 1rem; /* User tail on right */ + box-shadow: var(--elevation-4); +} + +.chat-bubble--bot { + margin-right: var(--space-6); /* Reduced margin */ + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border: 1px solid var(--color-border-primary); + color: var(--color-text-primary); + border-radius: 1rem 1rem 1rem 0.25rem; /* Bot tail on left */ + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +/* Enhanced Chat Messages */ + +#chat-messages { + display: flex; + flex-direction: column; + gap: var(--space-3); + padding: var(--space-4); /* Tighter spacing */ + max-height: calc(100vh - 12rem); + overflow-y: auto; + scroll-behavior: smooth; +} + +.chat-bubble--error { + margin-right: var(--space-6); /* Consistent with other bubbles */ + background: linear-gradient( + 135deg, + rgba(239, 68, 68, 0.1) 0%, + rgba(239, 68, 68, 0.05) 100% + ); + border: 1px solid rgba(239, 68, 68, 0.2); + color: var(--color-text-primary); + border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent tail */ +} + +/* Chat message formatting */ + +.chat-bubble p { + margin-bottom: var(--space-3); + word-wrap: break-word; + overflow-wrap: break-word; +} + +.chat-bubble code { + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + font-size: var(--font-size-sm); + background-color: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + word-break: break-all; +} + +.chat-bubble pre { + padding: var(--space-3); + border-radius: var(--radius-lg); + overflow-x: auto; + font-size: var(--font-size-sm); + margin: var(--space-3) 0; + background-color: var(--color-bg-tertiary); + border: 1px solid var(--color-border-primary); +} + +.chat-bubble pre code { + padding: 0; + background: none; + color: var(--color-text-primary); +} + +/* Chat message animations */ + +.chat-bubble { + /* ✅ FIXED: Use animation tokens */ + animation: chat-message-enter var(--timing-medium) var(--easing-standard); + animation-fill-mode: both; +} + +@keyframes chat-message-enter { + from { + opacity: 0; + transform: translateY(10px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Enhanced typing indicator */ + +.typing-indicator { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-4); + border-radius: var(--radius-xl); + margin-right: var(--space-8); + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border: 1px solid var(--color-border-primary); +} + +.typing-indicator::after { + content: ''; + display: inline-block; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: var(--color-text-secondary); + animation: typing-dot 1.4s infinite; +} + +.typing-indicator::before { + content: ''; + display: inline-block; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: var(--color-text-secondary); + /* ✅ FIXED: Use animation tokens for stagger */ + animation: typing-dot 1.4s infinite var(--reveal-batch-delay); + margin-right: 4px; +} + +@keyframes typing-dot { + 0%, 60%, 100% { + opacity: 0.3; + transform: scale(1); + } + 30% { + opacity: 1; + transform: scale(1.2); + } +} + +/* Chat pair container - tighter spacing */ + +.chat-pair { + gap: var(--space-3); /* Slightly increased for better breathing room */ + position: relative; + margin-bottom: 1rem; +} + +/* Improved delete button styling aligned with design system */ + +.chat-delete { + position: absolute; + top: -0.25rem; + right: -0.25rem; + width: 1.25rem; + height: 1.25rem; + border-radius: 9999px; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-xs); + opacity: 0; + outline: none; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + opacity var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard); + background-color: var(--color-surface); + border: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); + font-size: 0.75rem; + line-height: 1; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + /* backdrop-filter: blur(8px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); +} + +.chat-delete:hover { + background-color: rgba(239, 68, 68, 0.1); + border-color: rgb(239, 68, 68); + color: rgb(239, 68, 68); + transform: scale(1.1); + box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2); +} + +.chat-delete:active { + transform: scale(0.95); + /* ✅ FIXED: Use animation tokens */ + animation: delete-shake var(--timing-medium) var(--easing-standard); +} + +.chat-pair:hover .chat-delete { + opacity: 1; +} + +/* Delete shake animation */ + +@keyframes delete-shake { + 0%, 100% { transform: scale(0.95) rotate(0deg); } + 25% { transform: scale(0.95) rotate(-2deg); } + 75% { transform: scale(0.95) rotate(2deg); } +} + +/* Article Header Component - Parent container managing breadcrumbs and metadata */ + +.article-header { + position: relative; + margin-bottom: 1.5rem; +} + +/* Navigation container - holds breadcrumbs and toggle button */ + +.article-header__navigation { + display: flex; + align-items: center; + justify-content: space-between; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + border-radius: 0.75rem; + /* padding: 1rem 1.25rem; */ + padding: 0.5rem 0.75rem; + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + background: var(--glass-bg); + box-shadow: var(--glass-shadow); + transition: background-color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard); +} + +/* Reduced hover effect intentionally disabled to keep things airy */ + +/* Actions Container - holds copy page and metadata toggle */ + +.article-header__actions { + display: flex; + align-items: center; + gap: 0.75rem; +} + +/* Copy Page Component Styles */ + +.article-header__copy-page { + position: relative; +} + +.article-header__copy-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border-radius: 0.625rem; + background: var(--color-surface); + color: var(--color-text-primary); + border: 1px solid var(--color-border-primary); + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + font-family: var(--font-brand); +} + +.article-header__copy-toggle:hover { + background: var(--color-bg-secondary); + border-color: var(--color-brand); + color: var(--color-brand); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); +} + +.article-header__copy-toggle:focus { + outline: 2px solid rgba(var(--color-brand-rgb), 0.5); + outline-offset: 2px; +} + +/* Copy Page Dropdown Styles */ + +.article-header__copy-dropdown { + position: absolute; + right: 0; + margin-top: 0.5rem; + width: 14rem; + /* background: var(--color-surface); */ + background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + border-radius: 0.5rem; + /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */ + box-shadow: var(--glass-shadow); + z-index: 999; + overflow: hidden; + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.dark .article-header__copy-dropdown { + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); +} + +.article-header__copy-dropdown[data-state="hidden"] { + display: none; +} + +.article-header__copy-dropdown-content { + padding: 0.25rem; + /* Elevate glass on inner wrapper to ensure effect covers menu content */ + background: var(--glass-bg); + border: 1px solid var(--glass-border-color); + border-radius: 0.75rem; + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + box-shadow: var(--glass-shadow); +} + +/* Dropdown Menu Items */ + +.copy-page-menu-item { + width: 100%; + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-primary); + background: transparent; + border: none; + border-radius: 0.375rem; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; +} + +.copy-page-menu-item:hover { + background: var(--color-surface-hover); + color: var(--color-brand); +} + +.copy-page-menu-item:focus { + outline: 2px solid rgba(var(--color-brand-rgb), 0.5); + outline-offset: -2px; +} + +.copy-page-menu-item svg { + width: 1rem; + height: 1rem; + shrink: 0; + color: var(--color-text-secondary); + transition: color 0.2s ease; +} + +.copy-page-menu-item:hover svg { + color: var(--color-brand); +} + +/* Menu Separator */ + +.copy-page-separator { + margin: 0.25rem 0; + border: 0; + border-top: 1px solid var(--color-border-primary); +} + +/* Menu Section Header */ + +.copy-page-section-header { + padding: 0.25rem 0.75rem; + font-size: 0.75rem; + font-weight: 600; + color: var(--color-text-tertiary); + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--color-bg-tertiary); + margin: 0.25rem 0; +} + +/* Icon Styles */ + +.article-header__copy-icon, +.article-header__copy-arrow { + width: 1rem; + height: 1rem; + shrink: 0; + color: var(--color-text-secondary); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.article-header__copy-toggle:hover .article-header__copy-icon, +.article-header__copy-toggle:hover .article-header__copy-arrow { + color: var(--color-brand); +} + +/* Dropdown arrow rotation */ + +.article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { + transform: rotate(180deg); +} + +/* Copy feedback states */ + +.copy-page-menu-item.copying { + background: var(--color-brand); + color: var(--color-text-inverse); +} + +.copy-page-menu-item.copying svg { + color: var(--color-text-inverse); +} + +.copy-page-menu-item.success { + background: var(--color-brand-5); + color: var(--color-text-inverse); +} + +.copy-page-menu-item.success svg { + color: var(--color-text-inverse); +} + +.copy-page-menu-item.error { + background: var(--color-brand-7); + color: var(--color-text-inverse); +} + +.copy-page-menu-item.error svg { + color: var(--color-text-inverse); +} + +.article-header__copy-text { + white-space: nowrap; +} + +.article-header__copy-icon, +.article-header__copy-arrow { + width: 1rem; + height: 1rem; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { + transform: rotate(180deg); +} + +.article-header__copy-dropdown { + position: absolute; + right: 0; + top: 100%; + margin-top: 0.5rem; + width: 14rem; + /* background: var(--color-surface); */ + background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + border-radius: 0.75rem; + /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--glass-shadow); + z-index: 50; + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + overflow: hidden; +} + +.article-header__copy-dropdown .p-1 { + padding: 0.25rem; +} + +/* Stronger glassmorphism for dropdown readability over underlying text */ + +.article-header__copy-dropdown { + /* Locally override glass tokens for this component */ + --glass-blur: 14px; + --glass-saturate: 1.25; + --glass-bg: rgba(255, 255, 255, 0.72); + --glass-border-color: rgba(255, 255, 255, 0.32); + --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); + + /* Ensure it visually floats above overlapping content */ + z-index: 1000; + background-clip: padding-box; + /* Let inner content own the visual surface to avoid double borders */ + background: transparent; + border: none; +} + +.dark .article-header__copy-dropdown { + --glass-bg: rgba(17, 17, 17, 0.72); + --glass-border-color: rgba(255, 255, 255, 0.18); + --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); +} + +/* Responsive adjustments */ + +@media (max-width: 768px) { + .article-header__actions { + gap: 0.5rem; + } + + .article-header__copy-text { + display: none; + } + + .article-header__copy-dropdown { + width: 12rem; + right: -2rem; + } +} + +/* Metadata Toggle Button */ + +.article-header__metadata-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border-radius: 0.625rem; + background: var(--color-brand); + color: var(--color-text-inverse); + border: none; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), + transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); + font-family: var(--font-brand); +} + +.article-header__metadata-toggle:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.2) 0%, + transparent 50%, + rgba(255, 255, 255, 0.1) 100% + ); + opacity: 0; + transition: opacity 0.2s ease; + pointer-events: none; +} + +.article-header__metadata-toggle:hover { + background: var(--color-brand-1); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.4); +} + +.article-header__metadata-toggle:hover:before { + opacity: 1; +} + +.article-header__metadata-toggle:focus { + outline: 2px solid rgba(var(--color-brand-rgb), 0.5); + outline-offset: 2px; +} + +.article-header__metadata-toggle:active { + transform: translateY(0); +} + +.article-header__toggle-text { + white-space: nowrap; +} + +.article-header__toggle-icon { + width: 1rem; + height: 1rem; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Rotate icon when expanded */ + +.article-header__metadata-toggle[aria-expanded="true"] .article-header__toggle-icon { + transform: rotate(180deg); +} + +/* Metadata Panel */ + +.article-header__metadata-panel { + max-height: 0; + overflow: hidden; + margin-top: 1rem; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + opacity: 0; + transform: translateY(-10px); +} + +.article-header__metadata-panel[aria-hidden="false"] { + max-height: 200px; /* More reasonable max height for metadata */ + opacity: 1; + transform: translateY(0); +} + +/* Enhanced UX styles for horizontal metadata flow within article header */ + +.article-header__metadata-panel .metadata { + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: 0.75rem; + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); + margin-top: 0.75rem; +} + +.article-header__metadata-panel .metadata__flow { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.75rem; + padding: 1rem 1.25rem; +} + +.article-header__metadata-panel .metadata__item { + display: flex; + align-items: center; + gap: 0.5rem; + border-radius: 0.5rem; + padding: 0.5rem 0.75rem; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + color: var(--color-text-secondary); + position: relative; + overflow: hidden; + font-size: 0.875rem; + line-height: 1.4; + font-weight: 400; + white-space: nowrap; +} + +.article-header__metadata-panel .metadata__item:before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 90deg, + rgba(var(--color-brand-rgb), 0.08) 0%, + transparent 100% + ); + opacity: 0; + transition: opacity 0.2s ease; + pointer-events: none; +} + +.article-header__metadata-panel .metadata__item:hover { + background-color: var(--color-surface-hover); + color: var(--color-brand); + transform: translateX(4px); + padding-left: calc(0.75rem + 2px); + border-left: 2px solid var(--color-brand); +} + +.article-header__metadata-panel .metadata__item:hover:before { + opacity: 1; +} + +/* Secondary metadata items (like last modified) */ + +.article-header__metadata-panel .metadata__item--secondary { + color: var(--color-text-tertiary); + font-size: 0.8125rem; +} + +.article-header__metadata-panel .metadata__item--secondary:hover { + color: var(--color-text-secondary); +} + +/* Metadata separators removed - clean horizontal flow */ + +/* Override global SVG styles for metadata icons - very specific targeting */ + +.article-header__metadata-panel .metadata .metadata__icon, +.article-header__metadata-panel .metadata__icon, +.article-header__metadata-panel svg { + height: 1.25rem !important; + width: 1.25rem !important; + max-height: 1.25rem !important; + max-width: 1.25rem !important; + min-height: 1.25rem !important; + min-width: 1.25rem !important; + shrink: 0 !important; + display: inline-block !important; +} + +/* Mobile responsive styles */ + +@media (max-width: 768px) { + .article-header__metadata-panel .metadata__flow { + padding: 0.75rem 1rem; + gap: 0.5rem; + flex-direction: column; + align-items: flex-start; + } + + .article-header__metadata-panel .metadata__item { + font-size: 0.8125rem; + padding: 0.375rem 0.5rem; + width: 100%; + } + + /* Separators removed - no longer needed */ + + .article-header__metadata-panel .metadata .metadata__icon, + .article-header__metadata-panel .metadata__icon, + .article-header__metadata-panel svg { + height: 1rem !important; + width: 1rem !important; + max-height: 1rem !important; + max-width: 1rem !important; + min-height: 1rem !important; + min-width: 1rem !important; + } +} + +/* Additional responsive styles for navigation */ + +@media (max-width: 768px) { + .article-header__navigation { + flex-direction: column; + gap: 1rem; + align-items: stretch; + } + + .article-header__metadata-toggle { + justify-content: center; + width: 100%; + } +} + +/* Loading State */ + +.article-header.loading .article-header__metadata-toggle { + pointer-events: none; + opacity: 0.7; +} + +.article-header.loading .article-header__toggle-icon { + animation: spin 1s linear infinite; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* Focus states for accessibility */ + +.article-header__metadata-toggle:focus-within { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + border-radius: 0.625rem; +} + +/* High contrast mode support */ + +@media (prefers-contrast: high) { + .article-header__navigation { + border-width: 2px; + } + + .article-header__metadata-toggle { + border: 2px solid var(--color-brand); + } +} + +/* Reduced motion support */ + +@media (prefers-reduced-motion: reduce) { + .article-header__metadata-panel, + .article-header__toggle-icon { + transition: none; + } + + .article-header__navigation:hover { + transform: none; + } +} + +/* Fix stacking context issues when dropdown is open */ + +body:has(.article-header__copy-dropdown:not(.hidden)) h1[id] { + position: static; +} + +body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { + display: none; +} + +/* :has() Article Header Enhancements */ + +/* Breadcrumb navigation with interactive states */ + +.article-header:has(.breadcrumb__current[aria-expanded="true"]) .article-header__navigation { + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + var(--color-surface) 100% + ); + border-color: rgba(var(--color-brand-rgb), 0.2); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), + 0 0 0 1px rgba(var(--color-brand-rgb), 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +/* Enhanced metadata panel visibility */ + +.article-header:has(.article-header__metadata-panel[aria-hidden="false"]) { + margin-bottom: 2.5rem; +} + +/* Related Content component styles migrated from page-enhancements.css */ + +.related-content { + position: relative; + background: var(--glass-bg); + border-radius: 0.75rem; + border: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + padding: 1.25rem; + transition: background-color var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard); + box-shadow: var(--glass-shadow); +} + +.related-content__header { + border-bottom: 1px solid var(--glass-border-color); + padding-bottom: 0.75rem; + margin-bottom: 1rem; +} + +.related-content__header h2 { + margin: 0; + color: var(--color-text-primary); + font-weight: 600; +} + +/* View Toggle Buttons */ + +.related-content__view-toggle { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + border-radius: 0.5rem; + background-color: var(--color-surface); + color: var(--color-text-secondary); + border: 1px solid var(--color-border-primary); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + min-width: 2.25rem; + min-height: 2.25rem; +} + +.related-content__view-toggle:hover { + background-color: var(--color-surface-hover); + color: var(--color-text-primary); + border-color: var(--color-border-secondary); + transform: translateY(-1px); +} + +.related-content__view-toggle.active { + background-color: var(--color-brand); + color: var(--color-text-inverse); + border-color: var(--color-brand); + box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); +} + +.related-content__view-toggle:focus { + outline: 2px solid var(--color-brand); + outline-offset: 2px; +} + +.related-content__collapse-toggle { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + border-radius: 0.5rem; + background-color: var(--color-surface); + color: var(--color-text-secondary); + border: 1px solid var(--color-border-primary); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + min-width: 2.25rem; + min-height: 2.25rem; +} + +.related-content__collapse-toggle:hover { + background-color: var(--color-surface-hover); + color: var(--color-text-primary); + border-color: var(--color-border-secondary); + transform: translateY(-1px); +} + +.related-content__collapse-toggle[data-collapsed="true"] svg { + transform: rotate(180deg); +} + +.related-content__collapse-toggle:focus { + outline: 2px solid var(--color-brand); + outline-offset: 2px; +} + +.related-content__container[data-collapsed="true"] { + display: none; +} + +/* Compact View Styles */ + +.related-content__view--compact .related-content__item { + position: relative; + background: var(--glass-bg); + border: 1px solid var(--glass-border-color); + border-radius: 0.5rem; + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; + box-shadow: var(--glass-shadow); +} + +.related-content__view--compact .related-content__item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 90deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 100% + ); + opacity: 0; + transition: opacity 0.2s ease; + pointer-events: none; +} + +.related-content__view--compact .related-content__item:hover { + border-color: rgba(var(--color-brand-rgb), 0.45); + background: var(--color-surface-hover); + transform: translateY(-1px); + box-shadow: var(--elevation-2); +} + +.related-content__view--compact .related-content__item:hover::before { + opacity: 1; +} + +.related-content__view--compact .related-content__item a { + position: relative; + z-index: 1; + text-decoration: none; + color: inherit; +} + +.related-content__view--compact .related-content__item a:hover { + text-decoration: none; +} + +.related-content__view--compact .related-content__item .font-medium { + color: var(--color-text-primary); + transition: color 0.2s ease; +} + +.related-content__view--compact .related-content__item:hover .font-medium { + color: var(--color-brand); +} + +/* Enhanced Card View Styles */ + +.related-content__card { + position: relative; + background: var(--glass-bg); + border-radius: 0.75rem; + border: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; + box-shadow: var(--glass-shadow); +} + +.related-content__card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.08) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.03) 100% + ); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +.related-content__card:hover { + transform: translateY(-3px); + border-color: rgba(var(--color-brand-rgb), 0.45); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), var(--elevation-brand-subtle); +} + +.related-content__card:hover::before { + opacity: 1; +} + +.related-content__card:focus-within { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + transform: translateY(-2px); +} + +.related-content__card a { + position: relative; + z-index: 1; + text-decoration: none; + color: inherit; + display: block; +} + +.related-content__card a:hover { + text-decoration: none; +} + +.related-content__card .text-base { + color: var(--color-text-primary); + transition: color 0.2s ease; +} + +.related-content__card:hover .text-base { + color: var(--color-brand); +} + +.related-content__card .text-gray-600 { + color: var(--color-text-secondary); +} + +.related-content__card .text-gray-500 { + color: var(--color-text-tertiary); +} + +/* Dark mode enhancements */ + +.dark .related-content { + border-color: var(--color-border-secondary); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.dark .related-content__view-toggle, +.dark .related-content__collapse-toggle { + border-color: var(--color-border-secondary); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.dark .related-content__view-toggle:hover, +.dark .related-content__collapse-toggle:hover { + border-color: var(--color-border-primary); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.dark .compact-view .compact-item { + border-color: var(--color-border-secondary); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); +} + +.dark .compact-view .compact-item:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.dark .resource-card-compact { + border-color: var(--color-border-secondary); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.dark .resource-card-compact:hover { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--color-brand-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +/* Improved responsive behavior */ + +@media (max-width: 768px) { + .related-content { + padding: 1rem; + margin-top: 1.5rem; + } + + .related-header { + flex-direction: column; + gap: 0.75rem; + align-items: flex-start; + } + + .related-content__view--compact .related-content__item { + padding: 0.75rem; + } + + .related-content__view--compact .related-content__item time { + display: none; + } + + .related-content__card { + padding: 1rem; + } + + .related-content__view--cards .grid { + grid-template-columns: 1fr; + } + + .related-content__view--compact .related-content__item:hover, + .related-content__card:hover { + transform: translateY(-1px); + } +} + +/* High contrast mode support */ + +@media (prefers-contrast: high) { + .related-content { border-width: 2px; } + .related-content__view-toggle, .related-content__collapse-toggle { border-width: 2px; } + .related-content__view--compact .related-content__item { border-width: 2px; } + .related-content__card { border-width: 2px; } +} + +/* Animation for view transitions */ + +.related-content__view--compact, .related-content__view--cards { + animation: fadeIn 0.3s ease-in-out; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Print styles */ + +@media print { + .related-content { display: none; } +} + +/* Page Resources component minor rules */ + +/* Hide resources block in print to reduce clutter */ + +@media print { + [data-component="article-page-resources"] { display: none; } +} + +/* Tiles Component - Interactive content cards with enhanced UX */ + +/* Base Tile Styles */ + +.card--tile { + position: relative; + /* Use a CSS var for the base background so JS can layer gradients on hover */ + --tile-base-bg: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + background: var(--tile-base-bg); + border-radius: var(--radius-card); + border: 1px solid var(--color-border-primary); + /* backdrop-filter: blur(var(--tile-glass-blur)) saturate(var(--tile-glass-saturate)); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + transition: + transform var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard), + background var(--timing-medium) var(--easing-standard); + overflow: hidden; + /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); + will-change: transform, filter; + isolation: isolate; +} + +.card--tile::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +/* Subtle inner highlight for glass edge */ + +.card--tile::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + border-radius: inherit; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); +} + +.card--tile:hover::before { + opacity: 1; +} + +/* Focus states for accessibility */ + +.card--tile:focus-within { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + transform: var(--transform-lift-medium); +} + +/* Tile content spacing */ + +.card--tile .space-y-3 > * + * { + margin-top: 0.75rem; +} + +.card--tile .space-y-2 > * + * { + margin-top: 0.5rem; +} + +/* Tile links - ensure they take full space */ + +.card--tile a { + display: block; + color: inherit; + text-decoration: none; + position: relative; + z-index: 2; +} + +.card--tile a:hover { + color: inherit; +} + +/* Tile headers */ + +.card--tile h3 { + color: var(--color-text-primary); + font-weight: 600; + line-height: 1.3; + margin-bottom: 0.5rem; + transition: color 0.2s ease; +} + +.card--tile:hover h3 { + color: var(--color-brand); +} + +/* Tile descriptions */ + +.card--tile p { + color: var(--color-text-secondary); + line-height: 1.5; + font-size: 0.875rem; +} + +/* Tile icons */ + +.card--tile .icon { + width: 1.5rem; + height: 1.5rem; + shrink: 0; + transition: + filter var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + filter: brightness(0.8); +} + +.card--tile:hover .icon { + filter: brightness(1); + transform: scale(1.05); +} + +/* Tile tag/badge styles */ + +.card--tile .inline-block { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); + font-size: 0.75rem; + padding: 0.25rem 0.75rem; + border-radius: 9999px; + transition: + filter var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + display: inline-block; + text-decoration: none; +} + +.card--tile .inline-block:hover { + background-color: var(--color-brand); + border-color: var(--color-brand); + color: var(--color-text-inverse); + transform: var(--transform-lift-subtle); +} + +/* Responsive adjustments */ + +@media (max-width: 768px) { + .card--tile { + margin-bottom: 1rem; + } + + .card--tile:hover { + transform: var(--transform-lift-medium); + } +} + +/* Grid layout enhancements - simplified for child links component */ + +.grid .card--tile { + height: 100%; +} + +/* Dark mode enhancements */ + +.dark .card--tile { + border-color: var(--color-border-secondary); + /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); */ + box-shadow: var(--glass-shadow); +} + +.dark .card--tile:hover { box-shadow: var(--glass-shadow); } + +/* Animation improvements */ + +.card--tile { + animation: card-tile-enter 0.4s ease-out; + animation-fill-mode: both; +} + +@keyframes card-tile-enter { + from { + opacity: 0; + transform: translateY(20px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Stagger animation for grids */ + +.grid .card--tile:nth-child(1) { animation-delay: 0s; } + +.grid .card--tile:nth-child(2) { animation-delay: 0.1s; } + +.grid .card--tile:nth-child(3) { animation-delay: 0.2s; } + +.grid .card--tile:nth-child(4) { animation-delay: 0.3s; } + +.grid .card--tile:nth-child(5) { animation-delay: 0.4s; } + +.grid .card--tile:nth-child(6) { animation-delay: 0.5s; } + +/* ========================================================================== + Article Tiles Component - Responsive Grid Layout + ========================================================================== */ + +.article-tiles { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--space-4); +} + +@media (min-width: 768px) { + .article-tiles { + gap: var(--space-5); + } +} + +@media (min-width: 1536px) { + .article-tiles { + grid-template-columns: repeat(3, 1fr); + } +} + +.article-tile { + border-radius: var(--radius-lg); + padding: var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-3); + background-color: var(--color-surface); + border: 1px solid var(--color-border-primary); + transition: border-color var(--timing-fast) var(--easing-standard); +} + +.article-tile:hover { + border-color: var(--color-brand); +} + +.article-tile__link { + display: flex; + flex-direction: column; + gap: var(--space-3); + text-decoration: none; + color: inherit; +} + +.article-tile__header { + display: flex; + align-items: flex-start; + gap: var(--space-3); +} + +.article-tile__icon { + width: 1.5rem; + height: 1.5rem; + flex-shrink: 0; + margin-top: var(--space-1); +} + +.article-tile__title-wrapper { + flex-grow: 1; +} + +.article-tile__title { + font-size: var(--font-size-xl); + font-family: var(--font-brand); + font-weight: 600; + line-height: 1.25; + color: var(--color-text-primary); + margin: 0; +} + +.article-tile__description { + font-size: var(--font-size-sm); + line-height: 1.625; + color: var(--color-text-secondary); + margin: 0; +} + +/* ========================================================================== + Related Content Component + ========================================================================== */ + +.related-content { + margin-top: var(--space-6); +} + +/* Child Links Component - Flexbox layout approach */ + +.child-links-container { + /* Position directly beneath description with consistent spacing */ + margin-top: 0.75rem; + padding-top: 0; +} + +.child-links-list { + display: flex; + flex-wrap: wrap; + list-style: none; + padding: 0; + margin: 0; + gap: 0.5rem; + align-items: flex-start; +} + +.child-link-item { + margin: 0; + padding: 0; +} + +.child-link-pill { + display: inline-block; + font-size: 0.75rem; + padding: 0.25rem 0.75rem; + border-radius: 9999px; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + border: 1px solid var(--color-border-primary); + background-color: var(--color-bg-secondary); + color: var(--color-text-secondary); + text-decoration: none; + white-space: nowrap; + line-height: 1.4; +} + +.child-link-pill:hover { + color: var(--color-brand); + border-color: var(--color-brand); + background-color: var(--color-hover); + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.child-link-pill:focus { + outline: 2px solid var(--color-brand); + outline-offset: 2px; +} + +/* Simplest approach: Main link fills most space, child links follow naturally */ + +.grid .tile { + display: flex; + flex-direction: column; + position: relative; +} + +.grid .tile > a { + /* Main link fills available space for maximum clickability */ + flex: 1; + display: flex; + flex-direction: column; + margin-bottom: 0.75rem; /* Space for child links */ +} + +.grid .tile .space-y-3 { + display: flex; + flex-direction: column; + height: 100%; +} + +.grid .tile .space-y-3 > p { + /* Description takes only the space it needs */ + flex: 0 0 auto; +} + +/* Child links sit naturally after main content area */ + +.grid .tile .child-links-container { + flex: 0 0 auto; + margin-top: 0; + padding-top: 0; +} + +/* Dark mode support */ + +.dark .child-link-pill { + border-color: var(--color-border-secondary); + background-color: var(--color-surface); +} + +.dark .child-link-pill:hover { + background-color: var(--color-brand); + color: var(--color-text-inverse); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* Responsive adjustments */ + +@media (max-width: 768px) { + .child-links-container { + padding-top: 0.5rem; + } + + .child-link-pill { + font-size: 0.7rem; + padding: 0.2rem 0.6rem; + } +} + +/* Animation for child links appearance */ + +.child-link-item { + animation: child-link-appear 0.3s ease-out; + animation-fill-mode: both; +} + +.child-link-item:nth-child(1) { animation-delay: 0.1s; } + +.child-link-item:nth-child(2) { animation-delay: 0.15s; } + +.child-link-item:nth-child(3) { animation-delay: 0.2s; } + +.child-link-item:nth-child(4) { animation-delay: 0.25s; } + +.child-link-item:nth-child(5) { animation-delay: 0.3s; } + +.child-link-item:nth-child(6) { animation-delay: 0.35s; } + +.child-link-item:nth-child(7) { animation-delay: 0.4s; } + +@keyframes child-link-appear { + from { + opacity: 0; + transform: translateY(10px) scale(0.9); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Cards Component - Resource cards, content metadata, and generic card styles */ + +/* ========================================================================== + Link Card Pattern + ========================================================================== */ + +.link-card { + display: flex; + align-items: center; + padding: var(--space-4); + background-color: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-lg); + text-decoration: none; + transition: border-color var(--timing-fast) var(--easing-standard); +} + +.link-card:hover { + border-color: var(--color-brand); +} + +.link-card__icon { + width: 1.25rem; + height: 1.25rem; + margin-right: var(--space-3); + color: var(--color-text-secondary); + flex-shrink: 0; +} + +.link-card__content { + flex: 1; +} + +.link-card__title { + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 var(--space-1) 0; + font-size: var(--font-size-base); +} + +.link-card__description { + font-size: var(--font-size-sm); + color: var(--color-text-secondary); + margin: 0; +} + +/* Base Card Styles */ + +html:not(.no-transitions) .card { + position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: var(--radius-card); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard), + background-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard); + overflow: hidden; + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); +} + +.card { + position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: var(--radius-card); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + overflow: hidden; + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); +} + +.card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +/* Enhanced hover states - Use architectural classes instead */ + +.card { + /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ +} + +.card:hover::before { + opacity: 1; +} + +/* Resource Card Styles */ + +.card--resource { + position: relative; + background: var(--glass-bg); + border-radius: var(--radius-card); + border: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + overflow: hidden; + box-shadow: var(--glass-shadow); + /* padding: 1.5rem; */ + padding: 1rem; + margin-bottom: 1rem; +} + +.card--resource h3 { + color: var(--color-text-primary); + font-weight: 600; + font-size: 1.125rem; + line-height: 1.3; + margin-bottom: 0.75rem; + transition: color 0.2s ease; +} + +.card--resource:hover h3 { + color: var(--color-brand); +} + +.card--resource p { + color: var(--color-text-secondary); + line-height: 1.6; + font-size: 0.875rem; + margin-bottom: 1rem; +} + +.card--resource a { + color: var(--color-brand); + text-decoration: none; + font-weight: 500; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + position: relative; +} + +.card--resource a::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 2px; + background: var(--color-brand); + /* transition: width 0.3s ease; */ + transition: width var(--timing-medium) var(--easing-standard); +} + +.card--resource a:hover::after { + width: 100%; +} + +.card--resource .icon { + width: 1.5rem; + height: 1.5rem; + margin-bottom: 0.75rem; + filter: brightness(0.8); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); +} + +.card--resource:hover .icon { + filter: brightness(1); + transform: scale(1.05); +} + +/* Content Metadata Styles */ + +.content-metadata { + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: var(--radius-card); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + padding: 1rem 1.25rem; + font-size: 0.875rem; + color: var(--color-text-secondary); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; +} + +.content-metadata:hover { + border-color: var(--color-brand); + color: var(--color-text-primary); +} + +.content-metadata .icon { + width: 1rem; + height: 1rem; + shrink: 0; + opacity: 0.7; + transition: opacity 0.2s ease; +} + +.content-metadata:hover .icon { + opacity: 1; +} + +.content-metadata time, +.content-metadata span { + white-space: nowrap; +} + +/* Article Card Styles */ + +.article-card { + position: relative; + background: var(--glass-bg); + border-radius: var(--radius-card); + border: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + overflow: hidden; + box-shadow: var(--glass-shadow); + padding: 1.5rem; + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; + height: 100%; +} + +.article-card .card-header { + display: flex; + align-items: flex-start; + gap: 1rem; + margin-bottom: 1rem; +} + +.article-card .card-icon { + width: 2rem; + height: 2rem; + shrink: 0; + filter: brightness(0.8); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); +} + +.article-card:hover .card-icon { + filter: brightness(1); + transform: scale(1.05); +} + +.article-card .card-title { + color: var(--color-text-primary); + font-weight: 600; + font-size: 1.125rem; + line-height: 1.3; + margin: 0; + transition: color 0.2s ease; +} + +.article-card:hover .card-title { + color: var(--color-brand); +} + +.article-card .card-description { + color: var(--color-text-secondary); + line-height: 1.6; + font-size: 0.875rem; + margin-bottom: 1rem; + flex: 1; +} + +.article-card .card-meta { + color: var(--color-text-tertiary); + font-size: 0.75rem; + display: flex; + align-items: center; + gap: 0.5rem; + margin-top: auto; + padding-top: 1rem; + border-top: 1px solid var(--color-border-primary); +} + +/* Interactive Card States */ + +.card-interactive { + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.card-interactive:active { + transform: var(--transform-press-down); +} + +/* Focus states for accessibility */ + +.card:focus-within, +.resource-card:focus-within, +.article-card:focus-within { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + transform: var(--transform-lift-medium); +} + +/* Responsive adjustments */ + +@media (max-width: 768px) { + .resource-card, + .article-card { + padding: 1rem; + margin-bottom: 1rem; + } + + .card:hover, + .resource-card:hover, + .article-card:hover { + transform: var(--transform-lift-medium); + } + + .content-metadata { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } +} + +/* Dark mode enhancements */ + +.dark .card, +.dark .resource-card, +.dark .content-metadata, +.dark .article-card { + border-color: var(--color-border-secondary); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.dark .card:hover, +.dark .resource-card:hover, +.dark .article-card:hover { + box-shadow: + 0 12px 28px rgba(0, 0, 0, 0.4), + 0 0 20px rgba(var(--color-brand-rgb), 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +/* Animation improvements */ + +.card, +.resource-card, +.article-card { + animation: card-enter 0.4s ease-out; + animation-fill-mode: both; +} + +@keyframes card-enter { + from { + opacity: 0; + transform: translateY(20px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Card grid layouts */ + +.card-grid { + display: grid; + gap: 1.5rem; +} + +.card-grid .card, +.card-grid .resource-card, +.card-grid .article-card { + height: 100%; + display: flex; + flex-direction: column; +} + +/* Stagger animation for card grids */ + +.card-grid .card:nth-child(1), +.card-grid .resource-card:nth-child(1), +.card-grid .article-card:nth-child(1) { animation-delay: 0s; } + +.card-grid .card:nth-child(2), +.card-grid .resource-card:nth-child(2), +.card-grid .article-card:nth-child(2) { animation-delay: 0.1s; } + +.card-grid .card:nth-child(3), +.card-grid .resource-card:nth-child(3), +.card-grid .article-card:nth-child(3) { animation-delay: 0.2s; } + +.card-grid .card:nth-child(4), +.card-grid .resource-card:nth-child(4), +.card-grid .article-card:nth-child(4) { animation-delay: 0.3s; } + +/* :has() Content-Aware Card Layouts */ + +/* Cards with images get different padding */ + +.card:has(.card__image) { + padding-top: 0; +} + +.card:has(.card__image) .card__content { + padding-top: 1.5rem; +} + +/* Cards with icons get enhanced layout */ + +.card:has(.card__icon) .card__title { + margin-left: 3rem; + position: relative; +} + +.card:has(.card__icon) .card__content { + padding-left: 1rem; +} + +/* Resource cards with descriptions get enhanced spacing */ + +.card--resource:has(.card__description) { + min-height: 180px; +} + +.card--resource:has(.card__description) .card__footer { + margin-top: auto; + border-top: 1px solid var(--color-border-primary); + padding-top: 1rem; +} + +/* Cards with actions get enhanced bottom padding */ + +.card:has(.card__actions) { + padding-bottom: 1rem; +} + +.card:has(.card__actions) .card__content { + padding-bottom: 2rem; +} + +/* Interactive card states based on content */ + +.card:has(a:hover) { + transform: var(--transform-lift-and-scale); + /* box-shadow: + 0 12px 30px rgba(0, 0, 0, 0.12), + 0 4px 16px rgba(0, 0, 0, 0.08); */ + box-shadow: + var(--elevation-hover-2), + var(--elevation-brand-subtle); + border-color: rgba(var(--color-brand-rgb), 0.3); +} + +/* Glossary Component - Enhanced UX for glossary entries and navigation */ + +/* Base Glossary Entry Styles */ + +.glossary-entry { + position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: var(--radius-xl); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard); + overflow: hidden; + /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); + margin-bottom: 1rem; +} + +.glossary-entry::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +/* Enhanced hover states */ + +.glossary-entry:hover { + border-color: var(--color-brand); + /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ +} + +.glossary-entry:hover::before { + opacity: 1; +} + +/* Focus states for accessibility */ + +.glossary-entry:focus-within { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + transform: translateY(-2px); +} + +/* Glossary entry content */ + +.glossary-entry a { + display: block; + color: inherit; + text-decoration: none; + width: 100%; + position: relative; + z-index: 2; +} + +.glossary-entry h2 { + color: var(--color-text-primary); + font-weight: 700; + font-size: 1.25rem; + line-height: 1.3; + margin-bottom: 0.5rem; + transition: color 0.2s ease; + position: relative; +} + +.glossary-entry:hover h2 { + color: var(--color-brand); +} + +.glossary-entry h2::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 2px; + background: linear-gradient( + 90deg, + var(--color-brand) 0%, + rgba(var(--color-brand-rgb), 0.5) 100% + ); + transition: width 0.3s ease; +} + +.glossary-entry:hover h2::after { + width: 100%; +} + +/* Glossary entry descriptions */ + +.glossary-entry p { + color: var(--color-text-secondary); + line-height: 1.6; + font-size: 0.95rem; + margin: 0; + transition: color 0.2s ease; +} + +.glossary-entry:hover p { + color: var(--color-text-primary); +} + +/* Glossary letter headers */ + +.glossary-entry + h1 { + color: var(--color-text-primary); + font-size: 2rem; + font-weight: 800; + margin: 3rem 0 1.5rem 0; + padding-bottom: 0.5rem; + border-bottom: 3px solid var(--color-brand); + position: relative; +} + +.glossary-entry + h1 a { + color: inherit; + text-decoration: none; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); +} + +.glossary-entry + h1 a:hover { + color: var(--color-brand); + transform: translateX(4px); +} + +/* First letter styling for glossary headers */ + +h1[id] { + color: var(--color-text-primary); + font-size: 2rem; + font-weight: 800; + margin: 3rem 0 1.5rem 0; + padding-bottom: 0.5rem; + border-bottom: 3px solid var(--color-brand); + position: relative; + scroll-margin-top: var(--header-offset, 64px); +} + +h1[id] a { + color: inherit; + text-decoration: none; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + display: inline-block; +} + +h1[id] a:hover { + color: var(--color-brand); + transform: translateX(4px); +} + +h1[id]::before { + content: ''; + position: absolute; + bottom: -3px; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient( + 90deg, + var(--color-brand) 0%, + rgba(var(--color-brand-rgb), 0.3) 70%, + transparent 100% + ); +} + +/* Glossary container */ + +#enteries-container { + padding: 1rem 0; +} + +/* Responsive adjustments */ + +@media (max-width: 768px) { + .glossary-entry { + margin-bottom: 1rem; + padding: 1rem; + } + + .glossary-entry:hover { + transform: translateY(-2px); + } + + h1[id] { + font-size: 1.5rem; + margin: 2rem 0 1rem 0; + } +} + +/* Dark mode enhancements */ + +.dark .glossary-entry { + border-color: var(--color-border-secondary); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.dark .glossary-entry:hover { + box-shadow: + 0 12px 28px rgba(0, 0, 0, 0.4), + 0 0 20px rgba(var(--color-brand-rgb), 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +/* Animation improvements */ + +.glossary-entry { + animation: glossary-enter 0.4s ease-out; + animation-fill-mode: both; +} + +@keyframes glossary-enter { + from { + opacity: 0; + transform: translateY(20px) scale(0.98); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Stagger animation for multiple entries */ + +.glossary-entry:nth-child(odd) { animation-delay: 0s; } + +.glossary-entry:nth-child(even) { animation-delay: 0.1s; } + +/* Glossary navigation enhancements */ + +.glossary-nav { + position: sticky; + top: 2rem; + /* background: var(--color-surface); */ + background: var(--glass-bg); + border-radius: var(--radius-xl); + padding: 1rem; + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + margin-bottom: 2rem; +} + +.glossary-nav a { + display: inline-block; + padding: 0.5rem; + margin: 0.25rem; + border-radius: var(--radius-lg); + color: var(--color-text-secondary); + text-decoration: none; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + font-weight: 500; +} + +.glossary-nav a:hover { + background-color: var(--color-brand); + color: var(--color-text-inverse); + transform: translateY(-1px); +} + +/* Quicklinks Component - Enhanced UX for quickstart/feature tiles */ + +/* Base Quicklinks Container */ + +.quicklinks { + margin-bottom: 1.5rem; + position: relative; +} + +.quicklinks--home { + padding-bottom: 1rem; +} + +/* Quicklinks Grid */ + +.quicklinks__grid { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; + + /* Responsive grid */ + @media (min-width: 768px) { + grid-template-columns: repeat(2, 1fr); + gap: 1.75rem; + } + + @media (min-width: 1280px) { + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + } +} + +/* Quicklinks Item - Compact distinctive call-to-action card design */ + +.quicklinks__item { + position: relative; + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 0.75rem; + min-height: 160px; + + /* Distinctive card styling - not like regular tiles */ + background: linear-gradient( + 145deg, + var(--color-surface) 0%, + rgba(var(--color-brand-rgb), 0.03) 50%, + var(--color-bg-secondary) 100% + ); + border: 2px solid var(--color-border-primary); + border-radius: var(--radius-card); + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 1px 4px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: + var(--elevation-2), + var(--elevation-outline), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + + /* Accent border - distinctive feature */ + border-left: 3px solid var(--color-brand); + + /* Optimized transition for performance */ + transition: var(--transition-interactive); + overflow: hidden; /* Essential for ripple effects */ + cursor: pointer; +} + +.quicklinks__item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(var(--color-brand-rgb), 0.06); + opacity: 0; + /* transition: opacity 0.2s ease; */ + transition: opacity var(--timing-fast) var(--easing-standard); + pointer-events: none; +} + +.quicklinks__item:hover { + transform: translateY(-3px); + border-color: var(--color-brand); + border-left-color: var(--color-brand-2); + /* box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.12), + 0 4px 8px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); */ + box-shadow: + var(--elevation-hover-2), + var(--elevation-brand-subtle), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.quicklinks__item:hover::before { + opacity: 1; +} + +/* Quicklinks Header */ + +.quicklinks__header { + display: flex; + align-items: flex-start; + gap: 0.5rem; + margin-bottom: 0.25rem; +} + +/* Quicklinks Icon - Compact design */ + +.quicklinks__icon { + width: 1.5rem; + height: 1.5rem; + shrink: 0; + padding: 0.25rem; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.1) 0%, + rgba(var(--color-brand-rgb), 0.05) 100% + ); + border-radius: var(--radius-lg); + border: 1px solid rgba(var(--color-brand-rgb), 0.2); + filter: brightness(0.9); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard); + margin-top: 0; +} + +.quicklinks__item:hover .quicklinks__icon { + background: linear-gradient( + 135deg, + var(--color-brand) 0%, + var(--color-brand-2) 100% + ); + border-color: var(--color-brand); + filter: brightness(1) saturate(1.2); + transform: scale(1.05); +} + +/* Target the actual SVG/image inside the icon container */ + +.quicklinks__item:hover .quicklinks__icon img, +.quicklinks__item:hover .quicklinks__icon svg { + filter: brightness(0) invert(1); +} + +/* Quicklinks Title - Compact but prominent */ + +.quicklinks__title { + color: var(--color-text-primary); + font-size: 1.125rem; + font-weight: 700; + font-family: var(--font-brand); + line-height: 1.3; + margin: 0; + /* transition: color 0.2s ease; */ + transition: color var(--timing-fast) var(--easing-standard); + position: relative; + letter-spacing: -0.025em; +} + +.quicklinks__item:hover .quicklinks__title { + color: var(--color-brand); +} + +.quicklinks__title::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 2px; + background: var(--color-brand); + border-radius: 1px; + /* transition: width 0.2s ease; */ + transition: width var(--timing-fast) var(--easing-standard); +} + +.quicklinks__item:hover .quicklinks__title::after { + width: 100%; +} + +/* Quicklinks Description */ + +.quicklinks__description { + color: var(--color-text-secondary); + font-size: 0.8125rem; + line-height: 1.5; + margin: 0; + flex: 1; + /* transition: color 0.2s ease; */ + transition: color var(--timing-fast) var(--easing-standard); + font-family: var(--font-body); +} + +.quicklinks__item:hover .quicklinks__description { + color: var(--color-text-primary); +} + +/* Quicklinks Actions Container */ + +.quicklinks__actions { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: auto; + padding-top: 0.5rem; + border-top: 1px solid var(--color-border-primary); + /* transition: border-color 0.2s ease; */ + transition: border-color var(--timing-fast) var(--easing-standard); +} + +.quicklinks__item:hover .quicklinks__actions { + border-color: var(--color-brand); +} + +/* Quicklinks Action Links - Compact CTA buttons */ + +.quicklinks__link { + position: relative; + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.5rem 0.875rem; + background: var(--color-brand); + border: 1px solid var(--color-brand); + border-radius: var(--radius-lg); + color: var(--color-text-inverse); + text-decoration: none; + font-size: 0.75rem; + font-weight: 600; + font-family: var(--font-brand); + text-transform: uppercase; + letter-spacing: 0.25px; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard); + overflow: hidden; /* Enable ripple effects */ + cursor: pointer; + /* box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.25); */ + box-shadow: var(--elevation-brand-subtle); +} + +.quicklinks__link:hover { + background: var(--color-brand-2); + border-color: var(--color-brand-2); + transform: var(--transform-lift-subtle); + /* box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.35); */ + box-shadow: var(--elevation-brand-medium); +} + +.quicklinks__link:active { + transform: translateY(0); +} + +/* Enhanced focus states for accessibility */ + +.quicklinks__link:focus { + outline: 2px solid transparent; + outline-offset: 2px; + /* box-shadow: + 0 2px 6px rgba(var(--color-brand-rgb), 0.25), + 0 0 0 2px var(--color-surface), + 0 0 0 4px var(--color-brand); */ /* Inverted double focus ring */ + box-shadow: + var(--elevation-brand-subtle), + 0 0 0 2px var(--color-surface), + 0 0 0 4px var(--color-brand); +} + +/* Enhanced focus for quicklinks items */ + +.quicklinks__item:focus { + outline: 2px solid transparent; + outline-offset: 2px; + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 1px 4px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); */ /* Double focus ring */ + box-shadow: + var(--elevation-2), + var(--elevation-outline), + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); +} + +/* External link indicator */ + +.quicklinks__link[href^="http"]::after { + content: '↗'; + margin-left: 0.25rem; + font-size: 0.75em; + opacity: 0.7; + transition: opacity 0.2s ease; +} + +.quicklinks__link[href^="http"]:hover::after { + opacity: 1; +} + +/* Responsive adjustments */ + +@media (max-width: 768px) { + .quicklinks__grid { + gap: 1.25rem; + } + + .quicklinks__item { + padding: 1rem; + min-height: 140px; + } + + .quicklinks__item:hover { + transform: var(--transform-lift-medium); + } + + .quicklinks__icon { + width: 1.375rem; + height: 1.375rem; + padding: 0.25rem; + } + + .quicklinks__title { + font-size: 1rem; + font-weight: 700; + } + + .quicklinks__description { + font-size: 0.75rem; + } + + .quicklinks__actions { + flex-direction: column; + gap: 0.375rem; + padding-top: 0.375rem; + } + + .quicklinks__link { + justify-content: center; + text-align: center; + padding: 0.5rem 0.75rem; + font-size: 0.6875rem; + } +} + +@media (max-width: 480px) { + .quicklinks__item { + padding: 0.875rem; + min-height: 120px; + gap: 0.5rem; + } + + .quicklinks__header { + gap: 0.375rem; + margin-bottom: 0.125rem; + } + + .quicklinks__icon { + width: 1.25rem; + height: 1.25rem; + padding: 0.1875rem; + } + + .quicklinks__title { + font-size: 0.9375rem; + } +} + +/* Dark mode enhancements */ + +.dark .quicklinks__item { + background: linear-gradient( + 145deg, + rgba(var(--color-surface), 0.9) 0%, + rgba(var(--color-brand-rgb), 0.05) 50%, + rgba(var(--color-bg-secondary), 0.7) 100% + ); + border-color: var(--color-border-secondary); + /* box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.3), + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.05); */ + box-shadow: + var(--elevation-8), + var(--elevation-2), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.dark .quicklinks__item:hover { + border-color: var(--color-brand); + /* box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.4), + 0 8px 32px rgba(var(--color-brand-rgb), 0.3), + 0 0 40px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: + var(--elevation-hover-4), + var(--elevation-brand-medium), + var(--elevation-brand-glow), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.dark .quicklinks__icon { + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.15) 0%, + rgba(var(--color-brand-rgb), 0.08) 100% + ); + border-color: rgba(var(--color-brand-rgb), 0.3); +} + +.dark .quicklinks__item:hover .quicklinks__icon { + background: linear-gradient( + 135deg, + var(--color-brand) 0%, + var(--color-brand-2) 100% + ); + border-color: var(--color-brand); +} + +/* Target the actual SVG/image inside the icon container for dark mode */ + +.dark .quicklinks__item:hover .quicklinks__icon img, +.dark .quicklinks__item:hover .quicklinks__icon svg { + filter: brightness(0) invert(1); +} + +/* Animation improvements - simplified for performance */ + +.quicklinks__item { + animation: quicklinks-enter 0.3s ease-out; + animation-fill-mode: both; +} + +@keyframes quicklinks-enter { + from { + opacity: 0; + transform: translateY(15px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Stagger animation for multiple items */ + +.quicklinks__item:nth-child(1) { animation-delay: 0s; } + +.quicklinks__item:nth-child(2) { animation-delay: 0.1s; } + +.quicklinks__item:nth-child(3) { animation-delay: 0.2s; } + +.quicklinks__item:nth-child(4) { animation-delay: 0.3s; } + +/* Loading state placeholders */ + +.quicklinks--loading .quicklinks__item { + background: linear-gradient(90deg, + var(--color-surface) 25%, + var(--color-bg-secondary) 50%, + var(--color-surface) 75%); + background-size: 200% 100%; + animation: quicklinks-loading 2s infinite; +} + +@keyframes quicklinks-loading { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +/* Print styles */ + +@media print { + .quicklinks__item { + -moz-column-break-inside: avoid; + break-inside: avoid; + border: 1px solid #ccc; + margin-bottom: 1rem; + } + + .quicklinks__link { + color: #000 !important; + text-decoration: underline; + } +} + +/* Next-Prev Navigation Component - Enhanced UX for page navigation */ + +/* Base Navigation Container */ + +[data-component="article-next-prev"] { + margin-top: 2rem; + margin-bottom: 1rem; + position: relative; +} + +/* Next-Prev Navigation Link Base Styles - Scoped to avoid topbar conflicts */ + +[data-component="article-next-prev"] .article-next-prev__link { + position: relative; + display: flex; + align-items: center; + padding: 1.25rem; + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + color: var(--color-text-primary); + text-decoration: none; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard); + overflow: hidden; + min-height: 4rem; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +[data-component="article-next-prev"] .article-next-prev__link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(var(--color-brand-rgb), 0.04); + opacity: 0; + transition: opacity 0.2s ease; + pointer-events: none; +} + +/* Navigation Link Hover States */ + +[data-component="article-next-prev"] .article-next-prev__link:hover { + border-color: var(--color-brand); + transform: translateY(-2px); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.1), + 0 2px 8px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +[data-component="article-next-prev"] .article-next-prev__link:hover::before { + opacity: 1; +} + +[data-component="article-next-prev"] .article-next-prev__link:hover div > div[class*="font-medium"], +[data-component="article-next-prev"] .article-next-prev__link:hover .article-next-prev__title { + color: var(--color-brand) !important; +} + +[data-component="article-next-prev"] .article-next-prev__link:hover svg { + color: var(--color-brand); + transform: translateX(2px); +} + +/* Previous link - align icon to left, slide left on hover */ + +[data-component="article-next-prev"] .article-next-prev__link:hover:has(svg[class*="mr-"]) svg { + transform: translateX(-2px); +} + +/* Navigation Link Typography */ + +[data-component="article-next-prev"] .article-next-prev__link .text-xs { + color: var(--color-text-tertiary); + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 0.25rem; + transition: color 0.2s ease; +} + +/* Target the title content specifically, avoiding Tailwind utility classes */ + +[data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], +[data-component="article-next-prev"] .article-next-prev__title { + color: var(--color-text-primary) !important; + font-size: 0.9375rem !important; + font-weight: 600 !important; + line-height: 1.3 !important; + transition: color 0.2s ease !important; + font-family: var(--font-brand) !important; +} + +[data-component="article-next-prev"] .article-next-prev__link:hover .text-xs { + color: var(--color-text-secondary); +} + +/* SVG Icons */ + +[data-component="article-next-prev"] .article-next-prev__link svg { + color: var(--color-text-secondary); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard); + shrink: 0; +} + +/* Disabled Navigation Links */ + +[data-component="article-next-prev"] .article-next-prev__link--disabled { + background: linear-gradient( + 135deg, + var(--color-bg-secondary) 0%, + rgba(var(--color-surface), 0.5) 100% + ); + border-color: var(--color-border-secondary); + color: var(--color-text-tertiary); + cursor: not-allowed; + pointer-events: none; + opacity: 0.6; +} + +[data-component="article-next-prev"] .article-next-prev__link--disabled svg { + color: var(--color-text-tertiary); + opacity: 0.5; +} + +[data-component="article-next-prev"] .article-next-prev__link--disabled .text-xs, +[data-component="article-next-prev"] .article-next-prev__link--disabled div > div[class*="font-medium"] { + color: var(--color-text-tertiary) !important; +} + +/* Focus States for Accessibility */ + +[data-component="article-next-prev"] .article-next-prev__link:focus { + outline: 2px solid var(--color-brand); + outline-offset: 2px; +} + +[data-component="article-next-prev"] .article-next-prev__link:focus-visible { + outline: 2px solid var(--color-brand); + outline-offset: 2px; +} + +/* Enhanced Visual Hierarchy */ + +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { + border-left: 3px solid transparent; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + border-left-color var(--timing-fast) var(--easing-standard); +} + +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { + border-right: 3px solid transparent; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + border-right-color var(--timing-fast) var(--easing-standard); +} + +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"]:hover { + border-left-color: var(--color-brand); +} + +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"]:hover { + border-right-color: var(--color-brand); +} + +/* Responsive Adjustments */ + +@media (max-width: 768px) { + [data-component="article-next-prev"] { + margin-top: 1.5rem; + } + + [data-component="article-next-prev"] .article-next-prev__link { + padding: 1rem; + min-height: 3.5rem; + } + + [data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], + [data-component="article-next-prev"] .article-next-prev__title { + font-size: 0.875rem !important; + } + + [data-component="article-next-prev"] .article-next-prev__link .text-xs { + font-size: 0.6875rem; + } + + [data-component="article-next-prev"] .article-next-prev__link svg { + width: 1rem; + height: 1rem; + } +} + +@media (max-width: 480px) { + [data-component="article-next-prev"] { + flex-direction: column; + gap: 0.75rem; + } + + [data-component="article-next-prev"] .article-next-prev__link { + padding: 0.875rem; + min-height: 3rem; + flex: none; + } + + [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { + border-left: none; + border-top: 3px solid transparent; + } + + [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { + border-right: none; + border-bottom: 3px solid transparent; + } + + [data-component="article-next-prev"] .nav-link[aria-label*="Previous"]:hover { + border-left-color: transparent; + border-top-color: var(--color-brand); + } + + [data-component="article-next-prev"] .nav-link[aria-label*="Next"]:hover { + border-right-color: transparent; + border-bottom-color: var(--color-brand); + } +} + +/* Dark Mode Enhancements */ + +.dark [data-component="article-next-prev"] .article-next-prev__link { + background: linear-gradient( + 135deg, + rgba(var(--color-surface), 0.8) 0%, + rgba(var(--color-bg-secondary), 0.6) 100% + ); + border-color: var(--color-border-secondary); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.dark [data-component="article-next-prev"] .article-next-prev__link:hover { + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.3), + 0 2px 8px rgba(var(--color-brand-rgb), 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.dark [data-component="article-next-prev"] .article-next-prev__link--disabled { + background: linear-gradient( + 135deg, + rgba(var(--color-bg-secondary), 0.4) 0%, + rgba(var(--color-surface), 0.2) 100% + ); + border-color: rgba(var(--color-border-secondary), 0.5); +} + +/* Animation Enhancements */ + +[data-component="article-next-prev"] .article-next-prev__link { + animation: nav-link-enter 0.3s ease-out; + animation-fill-mode: both; +} + +@keyframes nav-link-enter { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Stagger animation for prev/next pair */ + +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { animation-delay: 0s; } + +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { animation-delay: 0.1s; } + +/* Loading state placeholders */ + +[data-component="article-next-prev"] .article-next-prev__link--loading { + background: linear-gradient(90deg, + var(--color-surface) 25%, + var(--color-bg-secondary) 50%, + var(--color-surface) 75%); + background-size: 200% 100%; + animation: nav-link-loading 2s infinite; +} + +@keyframes nav-link-loading { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +/* Print styles */ + +@media print { + [data-component="article-next-prev"] .article-next-prev__link { + border: 1px solid #ccc; + box-shadow: none; + background: white; + } + + [data-component="article-next-prev"] .nav-link svg { + display: none; + } +} + +/* Tutorial Component - Enhanced tutorial system with modern UX patterns */ + +/* ========================================================================== + Modern Tutorial Typography & Layout + ========================================================================== */ + +.tutorial-step__title { + font-size: var(--font-size-3xl); + font-weight: 700; + color: var(--color-text-primary); + margin-bottom: var(--space-4); + line-height: 1.1; +} + +.tutorial-section__title { + font-size: var(--font-size-4xl); + font-weight: 900; + color: var(--color-text-primary); + margin-bottom: var(--space-6); + line-height: 1; +} + +/* Responsive scaling for tutorial section titles */ + +@media (min-width: 1024px) { + .tutorial-section__title { + font-size: var(--font-size-5xl); + } +} + +.tutorial-step-wrapper { + margin-bottom: var(--space-8); +} + +.tutorial-links-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-4); +} + +.tutorial-step__header { + margin-bottom: var(--space-6); +} + +.tutorial-accent-bar { + width: 0.25rem; + height: 4rem; + border-radius: 9999px; + flex-shrink: 0; + background-color: var(--color-brand); + opacity: 0.3; +} + +.tutorial-description__content { + flex: 1; +} + +.tutorial-description__text { + font-size: var(--font-size-xl); + font-weight: 300; + line-height: 1.625; + color: var(--color-text-secondary); +} + +.tutorial-section__chevron { + width: 1.25rem; + height: 1.25rem; +} + +.tutorial-requirements-list { + list-style-type: disc; + list-style-position: inside; + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.tutorial-requirement { + color: var(--color-text-primary); +} + +@media (min-width: 768px) { + .tutorial-links-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.release-notes__title { + font-size: var(--font-size-3xl); + font-weight: 700; + color: var(--color-text-primary); + margin-bottom: var(--space-6); + line-height: 1.1; +} + +.release-notes-section { + max-width: 112rem; /* max-w-7xl */ + margin: 0 auto; + padding: var(--space-6); +} + +.release-notes__content { + margin-top: var(--space-4); + padding-left: var(--space-4); + color: var(--color-text-secondary); +} + +.release-notes__secondary { + display: flex; + flex-direction: row; + gap: var(--space-2); + margin-top: var(--space-4); +} + +/* ========================================================================== + Tutorial Overview Components + ========================================================================== */ + +.tutorial-overview { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 2rem; + margin: 2rem 0; + padding: 0 1rem; +} + +.tutorial-card { + position: relative; + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border-radius: 1rem; + border: 1px solid var(--color-border-primary); + padding: 2rem; + /* ✅ FIXED: Specific properties instead of transition: all */ + transition: + transform var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard); + overflow: hidden; + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.tutorial-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +.tutorial-card:hover { + transform: translateY(-8px); + border-color: var(--color-brand); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.15), + 0 0 20px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.tutorial-card:hover::before { + opacity: 1; +} + +.tutorial-card__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + flex-wrap: wrap; + gap: 0.5rem; +} + +.tutorial-card__badges { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.tutorial-card__title { + color: var(--color-text-primary); + font-size: 1.5rem; + font-weight: 700; + line-height: 1.3; + margin: 1rem 0 0.75rem 0; + transition: color 0.2s ease; +} + +.tutorial-card:hover .tutorial-card__title { + color: var(--color-brand); +} + +.tutorial-card__description { + color: var(--color-text-secondary); + line-height: 1.6; + margin-bottom: 1.5rem; + font-size: 0.95rem; +} + +.tutorial-card__metadata { + margin-top: auto; + padding-top: 1rem; + border-top: 1px solid var(--color-border-primary); +} + +/* Tutorial Badges */ + +.tutorial-badge { + display: inline-flex; + align-items: center; + padding: 0.375rem 0.875rem; + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); +} + +.tutorial-badge--difficulty { + background: linear-gradient(135deg, var(--color-brand-3) 0%, var(--color-brand-2) 100%); + color: var(--color-text-inverse); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.tutorial-badge--time { + background-color: var(--color-bg-tertiary); + color: var(--color-text-secondary); + border: 1px solid var(--color-border-secondary); +} + +.tutorial-badge--prerequisites { + background: linear-gradient(135deg, var(--color-brand-5) 0%, var(--color-brand-6) 100%); + color: var(--color-text-primary); +} + +/* Tutorial Progress Mini Display */ + +.tutorial-progress-mini { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.progress-bar-mini { + flex: 1; + height: 6px; + background-color: var(--color-border-secondary); + border-radius: 3px; + overflow: hidden; + position: relative; +} + +.progress-bar-mini__fill { + height: 100%; + background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); + border-radius: 3px; + transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; +} + +.progress-bar-mini__fill::after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 20px; + background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); + animation: progress-shine 2s infinite; +} + +@keyframes progress-shine { + 0% { transform: translateX(-20px); opacity: 0; } + 50% { opacity: 1; } + 100% { transform: translateX(20px); opacity: 0; } +} + +.progress-text { + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-secondary); + white-space: nowrap; +} + +/* Tutorial Actions */ + +.tutorial-actions { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + flex-wrap: wrap; +} + +.tutorial-actions__primary { + display: flex; + gap: 0.75rem; +} + +.tutorial-actions__secondary { + display: flex; + gap: 0.5rem; +} + +.bookmark-tutorial { + position: relative; + transition: transform var(--timing-fast) var(--easing-standard); +} + +.bookmark-tutorial:hover { + transform: scale(1.1); +} + +.bookmark-tutorial.bookmarked .bookmark-icon { + fill: var(--color-brand); + transform: scale(1.1); +} + +/* ========================================================================== + Compact Progress Components (Primary) + ========================================================================== */ + +.tutorial-progress-compact { + background: var(--color-surface); + border-radius: 0.75rem; + border: 1px solid var(--color-border-primary); + padding: 1rem; + margin: 1rem 0; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); +} + +.tutorial-compact-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 0.75rem; + gap: 1rem; +} + +.tutorial-compact-info { + flex: 1; + min-width: 0; +} + +.tutorial-compact-breadcrumb { + display: flex; + align-items: center; + gap: 0.375rem; + margin-bottom: 0.375rem; + font-size: 0.875rem; +} + +.tutorial-parent-link { + color: var(--color-text-secondary); + text-decoration: none; + font-weight: 500; + transition: color 0.2s ease; + white-space: nowrap; +} + +.tutorial-parent-link:hover { + color: var(--color-brand); +} + +.breadcrumb-separator { + color: var(--color-text-tertiary); + shrink: 0; + width: 1rem; + height: 1rem; +} + +.current-step-title { + color: var(--color-text-primary); + font-weight: 600; + font-size: 1rem; + line-height: 1.3; + margin: 0; +} + +.tutorial-compact-meta { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; + font-size: 0.875rem; +} + +.step-counter { + color: var(--color-text-secondary); + font-weight: 500; + white-space: nowrap; +} + +.progress-percentage { + color: var(--color-brand); + font-weight: 700; + white-space: nowrap; +} + +.time-estimate { + color: var(--color-text-secondary); + background: var(--color-bg-tertiary); + padding: 0.25rem 0.5rem; + border-radius: 0.375rem; + white-space: nowrap; + font-size: 0.8125rem; +} + +.tutorial-compact-actions { + display: flex; + gap: 0.375rem; + shrink: 0; +} + +.btn-compact { + display: flex; + align-items: center; + justify-content: center; + width: 1.75rem; + height: 1.75rem; + border-radius: 0.375rem; + border: 1px solid var(--color-border-primary); + background: var(--color-surface); + color: var(--color-text-secondary); + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard); + cursor: pointer; + shrink: 0; +} + +.btn-compact:hover { + background: var(--color-surface-hover); + border-color: var(--color-brand); + color: var(--color-text-primary); +} + +.btn-compact svg { + width: 0.875rem; + height: 0.875rem; +} + +/* Compact Progress Bar */ + +.tutorial-progress-bar { + position: relative; + margin-bottom: 0.75rem; +} + +.progress-track { + height: 3px; + background: var(--color-border-secondary); + border-radius: 2px; + overflow: hidden; + margin-bottom: 0.625rem; + position: relative; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); + border-radius: 2px; + transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; +} + +.progress-fill::after { + content: ''; + position: absolute; + top: 0; + right: -8px; + bottom: 0; + width: 8px; + background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); + animation: progress-shine 2s infinite; +} + +.step-dots { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; +} + +.step-dot { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + font-size: 0.6875rem; + font-weight: 600; + text-decoration: none; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + position: relative; + z-index: 2; +} + +.step-dot.completed { + background: var(--color-brand); + color: var(--color-text-inverse); + box-shadow: 0 2px 4px rgba(var(--color-brand-rgb), 0.2); +} + +.step-dot.current { + background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); + color: var(--color-text-inverse); + box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.3); + animation: pulse-gentle 2s infinite; +} + +.step-dot.pending { + background: var(--color-bg-tertiary); + color: var(--color-text-secondary); + border: 1px solid var(--color-border-secondary); +} + +.step-dot.pending:hover:not(.disabled) { + background: var(--color-surface-hover); + border-color: var(--color-brand); + transform: scale(1.1); +} + +.step-dot.disabled { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} + +.step-number { + font-size: 0.6875rem; + font-weight: 700; + line-height: 1; +} + +.step-dot svg { + width: 0.75rem; + height: 0.75rem; +} + +/* Expandable Progress Section */ + +.tutorial-progress-expanded { + border-top: 1px solid var(--color-border-primary); + padding-top: 1rem; + margin-top: 1rem; +} + +.tutorial-steps-list { + display: grid; + gap: 0.75rem; +} + +.tutorial-step-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem; + border-radius: 0.5rem; + transition: background-color 0.2s ease; +} + +.tutorial-step-item:hover { + background: var(--color-surface-hover); +} + +.tutorial-step-item.current { + background: var(--color-hover); +} + +.step-indicator-small { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + shrink: 0; +} + +.step-indicator-small .current-indicator, +.step-indicator-small .pending-indicator { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.625rem; + font-weight: 700; + border-radius: 50%; +} + +.step-indicator-small .current-indicator { + background: var(--color-brand); + color: var(--color-text-inverse); +} + +.step-indicator-small .pending-indicator { + background: var(--color-bg-tertiary); + color: var(--color-text-secondary); +} + +.step-info-small { + flex: 1; + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.step-link { + color: var(--color-text-primary); + text-decoration: none; + font-size: 0.875rem; + font-weight: 500; + transition: color 0.2s ease; +} + +.step-link:hover { + color: var(--color-brand); +} + +.step-title-disabled { + color: var(--color-text-tertiary); + font-size: 0.875rem; + font-weight: 500; +} + +.step-time-small { + color: var(--color-text-tertiary); + font-size: 0.75rem; + background: var(--color-bg-tertiary); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; +} + +/* Compact Navigation */ + +.tutorial-compact-nav { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.75rem; + border-top: 1px solid var(--color-border-primary); + padding-top: 0.75rem; + margin-top: 0.75rem; +} + +/* ========================================================================== + Enhanced Progress Navigation (Legacy) + ========================================================================== */ + +/* Legacy Progress Components (for backward compatibility) */ + +.tutorial-progress { + background: var(--color-surface); + border-radius: 1rem; + border: 1px solid var(--color-border-primary); + padding: 2rem; + margin: 2rem 0; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +.tutorial-progress__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 2rem; + flex-wrap: wrap; + gap: 1rem; +} + +.tutorial-title { + color: var(--color-text-primary); + font-size: 1.75rem; + font-weight: 700; + margin: 0; + line-height: 1.2; +} + +.tutorial-meta { + display: flex; + align-items: center; + gap: 1rem; + flex-wrap: wrap; +} + +.time-remaining { + font-size: 0.875rem; + color: var(--color-text-secondary); + background-color: var(--color-bg-tertiary); + padding: 0.5rem 1rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border-primary); +} + +/* Progress Track */ + +.tutorial-progress__track { + position: relative; + margin: 3rem 0; +} + +.progress-line { + position: absolute; + top: 3rem; + left: 3rem; + right: 3rem; + height: 3px; + background-color: var(--color-border-secondary); + border-radius: 2px; + z-index: 1; +} + +.progress-line::after { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); + border-radius: 2px; + width: var(--progress-width, 0%); + transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 0 10px rgba(var(--color-brand-rgb), 0.3); +} + +.tutorial-steps { + display: flex; + justify-content: space-between; + align-items: flex-start; + position: relative; + z-index: 2; + gap: 1rem; +} + +.tutorial-step { + display: flex; + flex-direction: column; + align-items: center; + max-width: 200px; + text-align: center; + flex: 1; + cursor: pointer; + transition: all 0.3s ease; +} + +.tutorial-step:hover { + transform: translateY(-2px); +} + +.tutorial-step.disabled { + cursor: not-allowed; + opacity: 0.6; +} + +.tutorial-step.disabled:hover { + transform: none; +} + +/* Step Indicators */ + +.step-indicator { + width: 4rem; + height: 4rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + position: relative; + transition: all 0.3s ease; + font-weight: 700; + font-size: 1.1rem; + border: 3px solid transparent; +} + +.step-icon--complete { + background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); + color: var(--color-text-inverse); + box-shadow: 0 4px 15px rgba(var(--color-brand-rgb), 0.3); +} + +/* Checkmark handled by SVG, no need for ::before content */ + +.step-icon--current { + background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); + color: var(--color-text-inverse); + animation: pulse-gentle 2s infinite; + box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4); + border-color: var(--color-brand); +} + +.step-icon--pending { + background-color: var(--color-bg-tertiary); + color: var(--color-text-secondary); + border-color: var(--color-border-secondary); +} + +.step-icon--pending:hover { + background-color: var(--color-surface-hover); + border-color: var(--color-brand); +} + +@keyframes pulse-gentle { + 0%, 100% { + transform: scale(1); + box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4), 0 0 0 0 rgba(var(--color-brand-rgb), 0.4); + } + 50% { + transform: scale(1.05); + box-shadow: 0 6px 25px rgba(var(--color-brand-rgb), 0.6), 0 0 0 15px rgba(var(--color-brand-rgb), 0); + } +} + +/* Step Content */ + +.step-content { + min-height: 80px; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.step-title { + color: var(--color-text-primary); + font-size: 1rem; + font-weight: 600; + margin: 0 0 0.5rem 0; + line-height: 1.3; +} + +.step-description { + color: var(--color-text-secondary); + font-size: 0.875rem; + line-height: 1.4; + margin: 0 0 0.5rem 0; +} + +.step-time { + color: var(--color-text-tertiary); + font-size: 0.75rem; + font-weight: 500; + background-color: var(--color-bg-tertiary); + padding: 0.25rem 0.5rem; + border-radius: 0.375rem; + display: inline-block; +} + +/* Progress Actions */ + +.tutorial-progress__actions { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; + padding-top: 1.5rem; + border-top: 1px solid var(--color-border-primary); + gap: 1rem; +} + +/* ========================================================================== + Interactive Content Components + ========================================================================== */ + +/* Enhanced Code Blocks - Now used by render-codeblock.html */ + +.code-block-enhanced { + background: var(--color-bg-tertiary); + border-radius: 0.75rem; + border: 1px solid var(--color-border-primary); + overflow: hidden; + margin: 1rem 0; + box-shadow: var(--glass-shadow); +} + +.code-content { + background: var(--color-bg-tertiary); +} + +.code-content pre { + margin: 0; + background: transparent; +} + +.code-content code { + background: transparent; + padding: 0.75rem; + display: block; + overflow-x: auto; +} + +/* Reduce default code font size; allow override via --code-font-size */ + +.code-content pre, +.code-content code { + font-size: var(--code-font-size, 0.875rem); + line-height: 1.55; +} + +.code-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0.75rem; + background: var(--color-surface); + border-bottom: 1px solid var(--color-border-primary); +} + +.code-language { + font-size: 0.75rem; + font-weight: 600; + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; + background-color: var(--color-bg-tertiary); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; +} + +.code-actions { + display: flex; + gap: 0.375rem; +} + +.copy-code { + position: relative; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); +} + +.copy-code.copied { + background-color: var(--color-brand); + border-color: var(--color-brand); + color: var(--color-text-inverse); +} + +/* Collapsible Sections */ + +.tutorial-section { + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + margin: 1.5rem 0; + overflow: hidden; + background: var(--color-surface); +} + +.section-header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.25rem 1.5rem; + background: none; + border: none; + cursor: pointer; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard); + text-align: left; +} + +.section-header:hover { + background-color: var(--color-surface-hover); +} + +.section-header[aria-expanded="true"] { + border-bottom: 1px solid var(--color-border-primary); +} + +.section-title { + color: var(--color-text-primary); + font-size: 1.125rem; + font-weight: 600; + margin: 0; + line-height: 1.3; +} + +.section-chevron { + width: 1.25rem; + height: 1.25rem; + color: var(--color-text-secondary); + transition: transform 0.3s ease; +} + +.section-header[aria-expanded="true"] .section-chevron { + transform: rotate(180deg); +} + +.section-content { + padding: 0 1.5rem; + max-height: 0; + opacity: 0; + overflow: hidden; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + max-height var(--timing-medium) var(--easing-standard), + opacity var(--timing-medium) var(--easing-standard), + padding var(--timing-medium) var(--easing-standard); + /* Tutorial-specific customization */ + --collapse-height-expanded: 2500px; + --collapse-timing: var(--timing-slow); + --collapse-easing: var(--easing-emphasized); +} + +.section-content.expanded { + max-height: var(--collapse-height-expanded, 2500px); + opacity: 1; + padding: 1.5rem; +} + +/* Step Validation */ + +.step-validation { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + padding: 1.5rem; + margin: 2rem 0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.validation-checklist h4 { + color: var(--color-text-primary); + font-size: 1.125rem; + font-weight: 600; + margin: 0 0 1rem 0; +} + +.validation-item { + display: flex; + align-items: center; + padding: 0.75rem 0; + cursor: pointer; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + padding var(--timing-fast) var(--easing-standard); + border-radius: 0.5rem; + margin-bottom: 0.5rem; +} + +.validation-item:hover { + background-color: var(--color-surface-hover); + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.validation-checkbox { + margin-right: 1rem; + width: 1.25rem; + height: 1.25rem; + accent-color: var(--color-brand); +} + +.validation-text { + color: var(--color-text-primary); + font-weight: 500; + line-height: 1.5; +} + +.validate-step { + margin-top: 1.5rem; + width: 100%; + transition: all 0.3s ease; +} + +.validate-step:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none; +} + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 1024px) { + .tutorial-overview { + grid-template-columns: 1fr; + gap: 1.5rem; + padding: 0 0.5rem; + } + + .tutorial-card { + padding: 1.5rem; + } + + .tutorial-progress { + padding: 1.5rem; + } + + .tutorial-steps { + gap: 0.75rem; + } + + .tutorial-step { + max-width: 150px; + } + + .step-indicator { + width: 3rem; + height: 3rem; + font-size: 1rem; + } +} + +@media (max-width: 768px) { + .tutorial-overview { + padding: 0; + } + + .tutorial-card { + border-radius: 0.75rem; + margin: 0 0.5rem; + } + + .tutorial-card__header { + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } + + /* Compact Progress Mobile */ + .tutorial-progress-compact { + margin: 0.75rem 0.5rem; + padding: 0.75rem; + border-radius: 0.5rem; + } + + .tutorial-compact-header { + flex-direction: column; + align-items: stretch; + gap: 0.75rem; + } + + .tutorial-compact-meta { + justify-content: space-between; + } + + .tutorial-compact-actions { + align-self: flex-end; + } + + .tutorial-compact-nav { + flex-direction: column; + gap: 0.75rem; + } + + .tutorial-compact-nav .btn { + width: 100%; + justify-content: center; + } + + .step-dots { + gap: 0.5rem; + overflow-x: auto; + padding: 0.25rem 0; + } + + .step-dot { + width: 1.5rem; + height: 1.5rem; + shrink: 0; + } + + /* Legacy tutorial progress mobile */ + .tutorial-progress { + margin: 1rem 0.5rem; + padding: 1rem; + border-radius: 0.75rem; + } + + .tutorial-progress__header { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .tutorial-title { + font-size: 1.5rem; + } + + .tutorial-meta { + width: 100%; + justify-content: space-between; + } + + /* Mobile Step Layout */ + .tutorial-steps { + flex-direction: column; + gap: 1.5rem; + align-items: stretch; + } + + .tutorial-step { + flex-direction: row; + max-width: none; + text-align: left; + align-items: center; + padding: 1rem; + background-color: var(--color-surface); + border-radius: 0.75rem; + border: 1px solid var(--color-border-primary); + } + + .step-indicator { + margin-bottom: 0; + margin-right: 1rem; + shrink: 0; + width: 3rem; + height: 3rem; + } + + .step-content { + min-height: auto; + flex: 1; + } + + .progress-line { + display: none; /* Hide connecting line on mobile */ + } + + .tutorial-progress__actions { + flex-direction: column; + gap: 1rem; + } + + .tutorial-progress__actions .btn { + width: 100%; + justify-content: center; + } + + /* Mobile Code Blocks */ + .code-header { + padding: 0.75rem 1rem; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } + + .code-actions { + width: 100%; + justify-content: flex-end; + } + + /* Mobile Sections */ + .section-header { + padding: 1rem 1.25rem; + } + + .section-content.expanded { + padding: 1rem 1.25rem 1.5rem; + } + + /* Mobile Validation */ + .step-validation { + margin: 1.5rem 0.5rem; + padding: 1.25rem; + } +} + +@media (max-width: 480px) { + .tutorial-card { + margin: 0 0.25rem; + padding: 1.25rem; + } + + .tutorial-progress { + margin: 1rem 0.25rem; + padding: 0.75rem; + } + + .tutorial-title { + font-size: 1.25rem; + } + + .tutorial-step { + padding: 0.75rem; + } + + .step-indicator { + width: 2.5rem; + height: 2.5rem; + font-size: 0.9rem; + } + + .step-title { + font-size: 0.9rem; + } + + .step-description { + font-size: 0.8rem; + } +} + +/* ========================================================================== + Dark Mode Adjustments + ========================================================================== */ + +.dark .tutorial-card { + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.dark .tutorial-card:hover { + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.4), + 0 0 20px rgba(var(--color-brand-rgb), 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.dark .tutorial-progress { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.dark .code-block-enhanced { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.dark .tutorial-section { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.dark .step-validation { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* ========================================================================== + Accessibility Enhancements + ========================================================================== */ + +.tutorial-step:focus-within { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + border-radius: 0.5rem; +} + +.section-header:focus { + outline: 2px solid var(--color-brand); + outline-offset: 2px; +} + +.validation-item:focus-within { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + border-radius: 0.5rem; +} + +/* Reduced motion preferences */ + +@media (prefers-reduced-motion: reduce) { + .tutorial-card, + .tutorial-step, + .step-indicator, + .progress-bar-mini__fill, + .progress-line::after { + transition: none; + } + + .step-icon--current { + animation: none; + } + + .progress-bar-mini__fill::after { + animation: none; + } +} + +/* High contrast mode support */ + +@media (prefers-contrast: high) { + .tutorial-card { + border-width: 2px; + } + + .tutorial-badge { + border: 1px solid currentColor; + } + + .step-indicator { + border-width: 2px; + } +} + +/* Toast Notification Component - Dedicated CSS */ + +/* Enhanced Toast Styles */ + +.toast-notification { + /* Enhanced backdrop blur for modern glass effect */ + /* backdrop-filter: blur(20px) saturate(180%); */ + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + + /* Smooth shadow that matches notice components */ + /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); + + /* Ensure proper font rendering */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Base positioning and sizing */ + position: fixed; + top: 1.5rem; + right: 1.5rem; + z-index: var(--z-toast, 9999); + max-width: 20rem; + width: 100%; + transform: translateX(100%); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-slow) var(--easing-emphasized), + opacity var(--timing-slow) var(--easing-emphasized); + border-radius: 0.75rem; + overflow: hidden; + border: 1px solid; +} + +/* Toast content */ + +.toast-notification__content { + display: flex; + align-items: flex-start; + padding: 1rem; + gap: 0.75rem; +} + +.toast-notification__icon { + shrink: 0; + margin-top: 0.125rem; + width: 1.25rem; + height: 1.25rem; +} + +.toast-notification__message { + flex: 1; + min-width: 0; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + font-family: "NVIDIA", Arial, Helvetica, sans-serif; +} + +.toast-notification__close { + shrink: 0; + margin-left: 1rem; + color: rgba(156, 163, 175, 1); + transition: color 0.2s ease; + background: none; + border: none; + cursor: pointer; + padding: 0; + width: 1rem; + height: 1rem; +} + +.toast-notification__close:hover { + color: rgba(107, 114, 128, 1); +} + +/* Dark mode close button */ + +.dark .toast-notification__close:hover { + color: rgba(209, 213, 219, 1); +} + +/* Type-specific styling */ + +/* Old hex-based colors commented in favor of tokens */ + +/* .toast-notification--success { ... } */ + +.toast-notification--success { + background: linear-gradient( + 135deg, + rgba(var(--color-success-rgb), 0.1) 0%, + rgba(var(--color-success-rgb), 0.05) 100% + ); + border-color: rgba(var(--color-success-rgb), 0.2); + color: rgb(20, 83, 45); +} + +.toast-notification--success .toast-notification__icon { color: var(--color-success); } + +.dark .toast-notification--success { + color: rgb(187, 247, 208); +} + +.toast-notification--error { + background: linear-gradient( + 135deg, + rgba(var(--color-danger-rgb), 0.1) 0%, + rgba(var(--color-danger-rgb), 0.05) 100% + ); + border-color: rgba(var(--color-danger-rgb), 0.2); + color: rgb(127, 29, 29); +} + +.toast-notification--error .toast-notification__icon { color: var(--color-danger); } + +.dark .toast-notification--error { + color: rgb(254, 202, 202); +} + +.toast-notification--warning { + background: linear-gradient( + 135deg, + rgba(var(--color-warning-rgb), 0.1) 0%, + rgba(var(--color-warning-rgb), 0.05) 100% + ); + border-color: rgba(var(--color-warning-rgb), 0.2); + color: rgb(120, 53, 15); +} + +.toast-notification--warning .toast-notification__icon { color: var(--color-warning); } + +.dark .toast-notification--warning { + color: rgb(254, 215, 170); +} + +.toast-notification--info { + background: linear-gradient( + 135deg, + rgba(var(--color-info-rgb), 0.1) 0%, + rgba(var(--color-info-rgb), 0.05) 100% + ); + border-color: rgba(var(--color-info-rgb), 0.2); + color: rgb(30, 58, 138); +} + +.toast-notification--info .toast-notification__icon { color: var(--color-info); } + +.dark .toast-notification--info { + color: rgb(191, 219, 254); +} + +/* Animation states */ + +.toast-notification--visible { + transform: translateX(0); +} + +.toast-notification--hiding { + transform: translateX(100%); + opacity: 0; + scale: 0.95; +} + +/* Enhanced animations */ + +@keyframes toast-slide-in { + 0% { + transform: translateX(100%) scale(0.95); + opacity: 0; + } + 100% { + transform: translateX(0) scale(1); + opacity: 1; + } +} + +.toast-notification--entering { + animation: toast-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} + +/* Dark mode enhancements */ + +.dark .toast-notification { + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, 0.4), + 0 10px 10px -5px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +/* Mobile responsiveness */ + +@media (max-width: 640px) { + .toast-notification { + left: 1rem; + right: 1rem; + max-width: none; + transform: translateY(-100%); + } + + .toast-notification--visible { + transform: translateY(0); + } + + .toast-notification--hiding { + transform: translateY(-100%); + } + + @keyframes toast-slide-in { + 0% { + transform: translateY(-100%) scale(0.95); + opacity: 0; + } + 100% { + transform: translateY(0) scale(1); + opacity: 1; + } + } +} + +/* Stacking for multiple toasts */ + +.toast-notification:nth-child(1) { z-index: 9999; } + +.toast-notification:nth-child(2) { z-index: 9998; top: 5.5rem; } + +.toast-notification:nth-child(3) { z-index: 9997; top: 9.5rem; } + +.toast-notification:nth-child(4) { z-index: 9996; top: 13.5rem; } + +/** + * Notebook Component Styles + * Modern, accessible styling for Jupyter notebook rendering + * Aligned with site-wide design system for consistency + * + * Features: + * - Unified code block styling with article content + * - Consistent button components across the site + * - Aligned typography and spacing patterns + * - Semantic color system integration + * - Performance optimizations for theme switching + * - Simplified container structure (reduced nesting) + * - Container queries for true responsive behavior + * - CSS logical properties for internationalization + */ + +/* ======================================== + Container Query Context + ======================================== */ + +.notebook { + container-type: inline-size; + container-name: notebook; +} + +/* ======================================== + Core Notebook Container (consolidated into .notebook__cells) + ======================================== */ + +/* ======================================== + Progressive Cell Visibility + ======================================== */ + +/* Notebook cell wrapper functionality merged into .notebook-cell */ + +.notebook-cell.notebook-cell-wrapper { + /* CSS containment for performance isolation */ + contain: layout style paint; + /* No transitions on wrapper to avoid layout issues */ +} + +.notebook-cell--hidden { + /* ✅ FIXED: Use animation tokens instead of display: none */ + max-height: 0; + opacity: 0; + overflow: hidden; + transition: + max-height var(--timing-medium) var(--easing-standard), + opacity var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard); + transform: translateY(20px); +} + +.notebook-cell--revealing { + /* ✅ FIXED: Use animation tokens for smooth transitions */ + max-height: var(--collapse-height-expanded, 2000px); + opacity: 1; + transform: translateY(0); + transition: + max-height var(--timing-medium) var(--easing-standard), + opacity var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard); +} + +@keyframes revealCell { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ======================================== + Notebook Header + ======================================== */ + +.notebook__header { + padding: 1.5rem 2rem; + border-bottom: 1px solid var(--color-border-primary); + background: var(--color-surface); + margin-bottom: 1rem; +} + +/* Hide header if it's empty */ + +.notebook__header:empty { + display: none; +} + +.notebook__title { + font-size: 1.875rem; + font-weight: 700; + color: var(--color-text-primary); + margin: 0 0 0.5rem 0; + line-height: 1.2; +} + +.notebook__description { + color: var(--color-text-secondary); + font-size: 1.125rem; + margin: 0; + line-height: 1.5; +} + +.notebook__metadata { + display: flex; + gap: 1rem; + margin-top: 1rem; + flex-wrap: wrap; +} + +.notebook__metadata-item { + /* Align with site button/badge patterns */ + display: flex; + align-items: center; + gap: 0.25rem; + padding: 0.25rem 0.5rem; + background: var(--color-surface); + color: var(--color-text-secondary); + border-radius: 0.375rem; /* Match site border radius */ + border: 1px solid var(--color-border-primary); + font-size: 0.875rem; + font-weight: 500; +} + +/* ======================================== + Notebook Cells Container + ======================================== */ + +.notebook__cells { + /* Simplified container - no shadow since cells have their own */ + max-width: 100%; + margin: 0 auto; + padding: 0; + + /* Layout for cells */ + display: flex; + flex-direction: column; + gap: 0.75rem; + + /* Performance optimizations */ + contain: layout style; +} + +/* Density variants based on data-view attribute */ + +[data-view="compact"] .notebook__cells { + gap: 0.25rem; /* Much tighter cell spacing */ + padding: 0.25rem; /* Minimal container padding */ +} + +[data-view="comfortable"] .notebook__cells { + gap: 2rem; /* More spacious cell spacing */ + padding: 2rem; /* Generous container padding */ +} + +/* Reduce space for first cell */ + +.notebook__cells > .notebook-cell-wrapper:first-child .notebook-cell.collapse { + margin-top: 0; +} + +/* ======================================== + Individual Cell Styling (extends existing collapse) + ======================================== */ + +.notebook-cell.collapse { + /* Notebook-specific styling for cells */ + background: var(--glass-bg); + border: 1px solid var(--glass-border-color); + margin: 0 !important; + --collapse-padding-expanded: 0; +} + +/* ======================================== + Cell Headers (extends existing collapse headers) + ======================================== */ + +.notebook-cell__header.collapse__header { + /* Notebook-specific header styling: narrower, glassmorphism */ + padding: 0.5rem 0.75rem; + background: var(--glass-bg); + border-color: var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + box-shadow: var(--glass-shadow); +} + +/* Chevron/icon rotation synced to ARIA for notebook cells */ + +.notebook-cell .collapse__header .collapse__icon { + transform: rotate(0deg); +} + +.notebook-cell .collapse__header[aria-expanded="true"] .collapse__icon { + transform: rotate(90deg) !important; +} + +/* Compact cell headers */ + +[data-view="compact"] .notebook-cell__header.collapse__header { + padding: 0.375rem 0.75rem; /* Much more compact header padding */ +} + +[data-view="comfortable"] .notebook-cell__header.collapse__header { + padding: 1.5rem 2.5rem; /* More generous header padding */ +} + +.notebook-cell__type { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.notebook-cell__type-icon { + width: 1.25rem; + height: 1.25rem; + opacity: 0.8; + color: var(--color-brand); +} + +.notebook-cell__type-text { + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0; +} + +.notebook-cell__execution-indicator { + font-size: 0.875rem; + font-weight: 400; + color: var(--color-text-secondary); + font-family: theme('fontFamily.mono'); + margin-inline-start: 0.5rem; +} + +/* Cell numbering - Jupyter style */ + +.notebook-cell__number { + font-size: 0.75rem; + font-weight: 500; + color: var(--color-text-tertiary); + font-family: theme('fontFamily.mono'); + background: var(--color-bg-secondary); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + border: 1px solid var(--color-border-secondary); + min-width: 2rem; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.notebook-cell--code .notebook-cell__number { + background: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.1); + color: var(--color-brand-3); + border-color: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.2); +} + +.notebook-cell--markdown .notebook-cell__number { + background: color-mix(in srgb, rgb(134, 239, 172) 10%, transparent); + color: #059669; + border-color: color-mix(in srgb, rgb(134, 239, 172) 20%, transparent); +} + +/* Execution status indicators */ + +.notebook-cell__status { + font-size: 0.75rem; + font-weight: 500; + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + font-family: theme('fontFamily.mono'); +} + +.notebook-cell__status--executed { + background: color-mix(in srgb, rgb(34, 197, 94) 10%, transparent); + color: #059669; + border: 1px solid color-mix(in srgb, rgb(34, 197, 94) 20%, transparent); +} + +.notebook-cell__status--pending { + background: color-mix(in srgb, rgb(251, 191, 36) 10%, transparent); + color: #d97706; + border: 1px solid color-mix(in srgb, rgb(251, 191, 36) 20%, transparent); +} + +.notebook-cell__status--error { + background: color-mix(in srgb, rgb(239, 68, 68) 10%, transparent); + color: #dc2626; + border: 1px solid color-mix(in srgb, rgb(239, 68, 68) 20%, transparent); +} + +/* ======================================== + Cell Content (extends existing collapse body) + ======================================== */ + +.notebook-cell .collapse__body-content { + padding: 0; +} + +/* Notebook cell body: align borders/background with glass style and avoid brand/green accents */ + +.notebook-cell .collapse__body { + background: var(--glass-bg); + border-color: var(--glass-border-color); + /* Ensure body animates using data attributes on itself or parent */ + --collapse-padding-expanded: 0.75rem; +} + +.notebook-cell.collapse[data-collapse-state="expanded"] .collapse__body, +.notebook-cell.collapse.expanded .collapse__body { + border-color: var(--glass-border-color); +} + +/* Render Markdown cells as normal article content (less chrome) */ + +.notebook-cell--markdown.collapse { + background: transparent; + border: none; + box-shadow: none !important; + transform: none !important; +} + +.notebook-cell--markdown.collapse:hover { + box-shadow: none !important; + transform: none !important; +} + +.notebook-cell--markdown .notebook-cell__header { + display: none; +} + +.notebook-cell--markdown .collapse__body { + background: transparent; + border: none; +} + +.notebook-cell--markdown .collapse__body-content { + padding: 0; +} + +/* Compact cell content */ + +[data-view="compact"] .notebook-cell .collapse__body-content { + padding: 0.5rem; /* Much more compact cell content */ +} + +[data-view="comfortable"] .notebook-cell .collapse__body-content { + padding: 2.5rem; /* More generous cell content padding */ +} + +/* ======================================== + Markdown Cells + ======================================== */ + +.notebook-cell--markdown .notebook-cell__type-icon { + color: #059669; +} + +.notebook-cell__markdown-content { + line-height: 1.7; +} + +.notebook-cell__markdown-content h1, +.notebook-cell__markdown-content h2, +.notebook-cell__markdown-content h3, +.notebook-cell__markdown-content h4, +.notebook-cell__markdown-content h5, +.notebook-cell__markdown-content h6 { + /* Align with global heading styles from input.css */ + margin-top: 0; + margin-bottom: 1rem; + color: var(--color-text-primary); + font-weight: 700; + word-wrap: break-word; +} + +.notebook-cell__markdown-content h1 { font-size: 1.875rem; font-weight: 900; } + +.notebook-cell__markdown-content h2 { font-size: 1.5rem; } + +.notebook-cell__markdown-content h3 { font-size: 1.25rem; } + +.notebook-cell__markdown-content h4 { font-size: 1.125rem; } + +.notebook-cell__markdown-content h5 { font-size: 1rem; } + +.notebook-cell__markdown-content h6 { font-size: 0.875rem; } + +.notebook-cell__markdown-content p { + /* Match #articleContent spacing pattern */ + margin: 0.75rem 0; + color: var(--color-text-primary); +} + +.notebook-cell__markdown-content p:last-child { + margin-bottom: 0; +} + +.notebook-cell__markdown-content ul, +.notebook-cell__markdown-content ol { + /* Match #articleContent list patterns */ + margin: 0.75rem 0; + padding-inline-start: 1.5rem; +} + +.notebook-cell__markdown-content ul { + list-style-type: disc; + margin-inline-start: 1.5rem; +} + +.notebook-cell__markdown-content strong { + /* Match #articleContent strong styling */ + font-family: var(--font-family-brand); + font-weight: 600; +} + +.notebook-cell__markdown-content code { + /* Align with #articleContent code:not(pre code) styling */ + padding: 0.25rem; + border-radius: 0.25rem; + font-size: 0.75rem; + font-weight: 300; + background-color: var(--color-bg-secondary); + color: var(--color-brand-1); + font-family: var(--font-family-mono, RobotoMono, monospace); +} + +/* Dark mode support for inline code */ + +.dark .notebook-cell__markdown-content code { + color: var(--color-brand); +} + +/* ======================================== + Code Cells + ======================================== */ + +.notebook-cell--code .notebook-cell__type-icon { + color: var(--color-brand-3); /* Uses semantic color system */ +} + +/* Notebook code cells now use .code-block-enhanced with proper corner radius handling */ + +/* Fix border radius for code blocks with headers */ + +.code-block-enhanced .code-header { + border-radius: 0.75rem 0.75rem 0 0; /* Only top corners rounded */ +} + +.code-block-enhanced .code-content { + border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ +} + +/* Target the actual highlighted code element that has the background */ + +.code-block-enhanced .code-content .highlight { + border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ +} + +.code-block-enhanced .code-content .highlight pre { + border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ +} + +/* Copy button styling handled by .code-block-enhanced */ + +/* ======================================== + Cell Outputs + ======================================== */ + +.notebook-cell__outputs { + margin-top: 0.5rem; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +/* Compact output spacing */ + +[data-view="compact"] .notebook-cell__outputs { + margin-top: 0.5rem; + gap: 0.375rem; +} + +[data-view="comfortable"] .notebook-cell__outputs { + margin-top: 1.5rem; + gap: 1rem; +} + +.notebook-cell__output { + border-radius: theme('borderRadius.lg'); + overflow: hidden; + border: 1px solid var(--color-border-primary); + background: var(--color-surface); +} + +/* Stream Output */ + +.notebook-cell__output--stream { + background: var(--color-bg-secondary); + color: #4ade80; + padding: 1rem; + font-family: theme('fontFamily.mono'); + font-size: 0.875rem; + line-height: 1.5; +} + +.notebook-cell__output--stream pre { + margin: 0; + padding: 0; + background: transparent; + color: inherit; + white-space: pre-wrap; + word-break: break-word; +} + +/* Execute Result Output */ + +.notebook-cell__output--execute-result { + padding: 1rem; +} + +.notebook-cell__output--execute-result .html-output { + margin-bottom: 1rem; +} + +.notebook-cell__output--execute-result .html-output:last-child { + margin-bottom: 0; +} + +.notebook-cell__output--execute-result .text-output { + font-family: theme('fontFamily.mono'); + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text-primary); + margin: 0; + padding: 0; + background: transparent; + white-space: pre-wrap; + word-break: break-word; +} + +/* Display Data Output */ + +.notebook-cell__output--display-data { + padding: 1rem; +} + +.notebook-cell__output--display-data img { + max-width: 100%; + height: auto; + aspect-ratio: auto; /* Preserve natural ratio but allow override */ + -o-object-fit: contain; + object-fit: contain; + border-radius: theme('borderRadius.md'); + box-shadow: theme('boxShadow.sm'); +} + +/* For plots and charts, maintain square aspect ratio */ + +.notebook-cell__output--display-data img[alt*="plot"], +.notebook-cell__output--display-data img[alt*="chart"], +.notebook-cell__output--display-data img[alt*="graph"] { + aspect-ratio: 4 / 3; +} + +/* Error Output */ + +.notebook-cell__output--error { + background: #7f1d1d; + color: #fee2e2; + border-color: #b91c1c; + padding: 1rem; +} + +.notebook-cell__error-name { + font-weight: 700; + font-size: 1rem; + margin-bottom: 0.5rem; + color: #fca5a5; +} + +.notebook-cell__error-value { + margin-bottom: 1rem; + font-weight: 500; + line-height: 1.5; +} + +.notebook-cell__error-traceback { + font-family: theme('fontFamily.mono'); + font-size: 0.875rem; + line-height: 1.4; + opacity: 0.9; +} + +.notebook-cell__traceback-line { + padding: 0.125rem 0; + border-inline-start: 2px solid #ef4444; + padding-inline-start: 0.75rem; + margin: 0.25rem 0; +} + +/* Collapsible outputs for long content */ + +.notebook-cell__output--collapsible { + position: relative; +} + +.notebook-cell__output-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); + cursor: pointer; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-secondary); + transition: all 0.2s ease; +} + +.notebook-cell__output-toggle:hover { + background: var(--color-bg-tertiary); + color: var(--color-text-primary); +} + +.notebook-cell__output-toggle-icon { + width: 1rem; + height: 1rem; + transition: transform var(--timing-fast) var(--easing-standard); +} + +.notebook-cell__output--collapsed .notebook-cell__output-toggle-icon { + transform: rotate(-90deg); +} + +.notebook-cell__output-content { + transition: all 0.3s ease; +} + +.notebook-cell__output--collapsed .notebook-cell__output-content { + /* ✅ FIXED: Use height-based collapse for smooth animation */ + max-height: 0; + opacity: 0; + overflow: hidden; + transition: + max-height var(--timing-medium) var(--easing-standard), + opacity var(--timing-medium) var(--easing-standard); +} + +.notebook-cell__output-preview { + padding: 0.75rem 1rem; + background: var(--color-bg-secondary); + color: var(--color-text-secondary); + font-size: 0.875rem; + font-family: theme('fontFamily.mono'); + border-bottom: 1px solid var(--color-border-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Output size indicators */ + +.notebook-cell__output-size { + font-size: 0.75rem; + color: var(--color-text-tertiary); + margin-inline-start: auto; +} + +/* ======================================== + Raw Cells + ======================================== */ + +.notebook-cell--raw .notebook-cell__type-icon { + color: #9333ea; +} + +.notebook-cell__raw-content { + background: var(--color-bg-secondary); + border-radius: theme('borderRadius.md'); + padding: 1rem; + border: 1px solid var(--color-border-primary); +} + +.notebook-cell__raw-content pre { + margin: 0; + font-family: theme('fontFamily.mono'); + font-size: 0.875rem; + line-height: 1.5; + white-space: pre-wrap; + word-break: break-word; +} + +.notebook-cell__raw-content code { + background: transparent; + padding: 0; + color: var(--color-text-primary); +} + +/* ======================================== + Density Toggle and Navigation + ======================================== */ + +.notebook__toolbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1rem; + background: var(--color-surface); + border-bottom: 1px solid var(--color-border-primary); + gap: 1rem; + flex-wrap: wrap; +} + +.notebook__density-toggle { + display: flex; + align-items: center; + gap: 0.25rem; + background: var(--color-bg-secondary); + border-radius: 0.5rem; + padding: 0.25rem; + border: 1px solid var(--color-border-primary); +} + +.notebook__density-btn { + padding: 0.375rem 0.75rem; + font-size: 0.75rem; + font-weight: 500; + border: none; + background: transparent; + color: var(--color-text-secondary); + border-radius: 0.25rem; + cursor: pointer; + transition: all 0.2s ease; + min-width: 4rem; + text-align: center; +} + +.notebook__density-btn:hover { + background: var(--color-bg-tertiary); + color: var(--color-text-primary); +} + +.notebook__density-btn--active { + background: var(--color-brand); + color: white; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.notebook__cell-counter { + font-size: 0.875rem; + color: var(--color-text-secondary); + font-family: theme('fontFamily.mono'); +} + +.notebook__actions { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.notebook__nav-btn { + padding: 0.5rem; + border: 1px solid var(--color-border-primary); + background: var(--color-surface); + color: var(--color-text-secondary); + border-radius: 0.375rem; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.notebook__nav-btn:hover { + background: var(--color-bg-secondary); + color: var(--color-text-primary); + border-color: var(--color-border-secondary); +} + +.notebook__nav-btn svg { + width: 1rem; + height: 1rem; +} + +/* Cell outline/navigation */ + +.notebook__outline { + position: fixed; + top: 50%; + right: 1rem; + transform: translateY(-50%); + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + padding: 0.75rem; + box-shadow: var(--elevation-6); + max-height: 60vh; + overflow-y: auto; + width: 200px; + z-index: 50; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; +} + +.notebook__outline--visible { + opacity: 1; + visibility: visible; +} + +.notebook__outline-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.375rem 0.5rem; + font-size: 0.75rem; + color: var(--color-text-secondary); + cursor: pointer; + border-radius: 0.25rem; + transition: all 0.2s ease; + text-decoration: none; +} + +.notebook__outline-item:hover { + background: var(--color-bg-secondary); + color: var(--color-text-primary); +} + +.notebook__outline-item--active { + background: var(--color-brand); + color: white; +} + +.notebook__outline-icon { + width: 0.75rem; + height: 0.75rem; + shrink: 0; +} + +/* ======================================== + Loading States and Performance Indicators + ======================================== */ + +.notebook__performance-notice { + margin-bottom: 1.5rem; +} + +.notebook-cell-wrapper { + /* Wrapper for lazy-loaded cells */ + margin-bottom: 0; +} + +.notebook-cell--lazy { + /* Hidden cells waiting to be loaded */ + display: none; +} + +.notebook-load-trigger { + display: flex; + align-items: center; + justify-content: center; + padding: 2rem; + color: var(--color-text-secondary); + font-size: 0.875rem; + border-top: 1px solid var(--color-border-primary); + margin-top: 2rem; +} + +.loading-indicator { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.notebook-completion-indicator { + display: flex; + align-items: center; + justify-content: center; + padding: 1.5rem; + color: var(--color-text-secondary); + font-size: 0.875rem; + border-top: 1px solid var(--color-border-primary); + margin-top: 2rem; + background: var(--color-surface); + border-radius: theme('borderRadius.lg'); +} + +/* ======================================== + Light Mode Enhancements + ======================================== */ + +/* Light mode styles handled in .notebook__cells */ + +.notebook-cell.collapse { + /* Light mode cell styling */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); + /* Add theme transition only to cells that need it */ + transition: var(--transition-elevation); +} + +.notebook-cell.collapse:hover { + /* Enhanced light mode hover */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); + transform: translateY(-1px); +} + +/* Light mode styling handled by .code-block-enhanced */ + +.notebook-cell__output--stream { + /* Stream output styling with consistent colors */ + background: var(--color-bg-inverse); + color: var(--color-brand-2); +} + +.notebook-cell__output--error { + /* Error output styling with semantic colors */ + background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.1); + color: var(--color-brand-7); + border-color: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.3); +} + +.notebook-cell__output--error .notebook-cell__error-name { + color: var(--color-brand-7); + font-weight: 600; +} + +.notebook-cell__traceback-line { + border-inline-start-color: var(--color-brand-7); +} + +/* ======================================== + Dark Theme Support + ======================================== */ + +/* Dark mode handled by individual cell shadows */ + +.dark .notebook-cell.collapse { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); +} + +.dark .notebook-cell.collapse:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); +} + +/* Dark mode styling handled by .code-block-enhanced */ + +.dark .notebook-cell__output--error { + background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.2); + color: var(--color-text-primary); + border-color: var(--color-brand-7); +} + +.dark .notebook-cell__output--error .notebook-cell__error-name { + color: var(--color-brand-7); +} + +.dark .notebook-cell__traceback-line { + border-inline-start-color: var(--color-brand-7); +} + +/* ======================================== + Container Query Responsive Design + ======================================== */ + +@container notebook (max-width: 768px) { + .notebook__cells { + margin: 0; + padding: 0; + } + + .notebook__header { + padding: 1rem 1.5rem; + } + + .notebook__title { + font-size: 1.5rem; + } + + .notebook__description { + font-size: 1rem; + } + + .notebook__cells { + gap: 0; + } + + .notebook-cell .collapse__body-content { + padding: 0; + } + + /* Compact mode on mobile should be even more compact */ + [data-view="compact"] .notebook__cells { + padding: 0; + gap: 0; + } + + [data-view="compact"] .notebook-cell .collapse__body-content { + padding: 0; + } + + /* Mobile code block styling handled by .code-block-enhanced */ + + .notebook__performance-notice { + margin: 0 1rem 1.5rem; + } + + /* Hide outline on mobile */ + .notebook__outline { + display: none; + } + + /* Stack toolbar on mobile */ + .notebook__toolbar { + flex-direction: column; + align-items: stretch; + gap: 0.75rem; + } + + .notebook__actions { + justify-content: center; + } +} + +@container notebook (max-width: 480px) { + .notebook__metadata { + flex-direction: column; + gap: 0.5rem; + } + + .notebook-cell__header.collapse__header { + padding: 0.75rem 1rem; + } + + .notebook-cell .collapse__body-content { + padding: 0.75rem; + } + + /* Print code block styling handled by .code-block-enhanced */ + + .notebook-cell__type-text { + font-size: 0.875rem; + } + + .notebook__performance-notice { + margin: 0 0.75rem 1rem; + } +} + +/* ======================================== + Print Styles + ======================================== */ + +@media print { + .notebook__cells { + border: 1px solid #ccc; + -moz-column-break-inside: avoid; + break-inside: avoid; + margin: 0; + } + + .notebook-cell .copy-code, + .collapse__icon-wrapper, + .notebook__performance-notice, + .notebook-load-trigger, + .notebook-completion-indicator { + display: none !important; + } + + /* ✅ FIXED: Use standard collapse behavior with animation tokens */ + .notebook-cell .collapse__body { + max-height: var(--collapse-height-collapsed); + opacity: var(--collapse-opacity-collapsed); + overflow: hidden; + transition: + max-height var(--collapse-timing) var(--collapse-easing), + opacity var(--collapse-timing) var(--collapse-easing); + } + + .notebook-cell .collapse__body.expanded { + max-height: var(--collapse-height-expanded); + opacity: var(--collapse-opacity-expanded); + } + + .notebook-cell { + -moz-column-break-inside: avoid; + break-inside: avoid; + page-break-inside: avoid; + box-shadow: none; + border: 1px solid #ddd; + margin-bottom: 1rem; + } + + .notebook-cell__outputs { + -moz-column-break-inside: avoid; + break-inside: avoid; + } + + /* Print code styling handled by .code-block-enhanced */ + + .notebook-cell__output--stream { + background: #f0f0f0 !important; + color: #333 !important; + } +} + +/* ======================================== + Accessibility Enhancements + ======================================== */ + +@media (prefers-reduced-motion: reduce) { + .notebook-cell, + .notebook-cell__toggle, + .notebook-cell__copy-btn, + .notebook-cell__toggle-icon { + transition: none; + } +} + +@media (prefers-contrast: high) { + .notebook__cells { + --notebook-border: #111827; + --cell-border: #1f2937; + --cell-hover-border: #1d4ed8; + --cell-active-border: #2563eb; + } + + .dark .notebook__cells { + --notebook-border: #f3f4f6; + --cell-border: #d1d5db; + --cell-hover-border: #93c5fd; + --cell-active-border: #60a5fa; + } +} + +/* ======================================== + Animation Keyframes + ======================================== */ + +@keyframes notebook-cell-enter { + from { + opacity: 0; + transform: translateY(1rem); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes copy-success { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +@keyframes copy-error { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-0.25rem); } + 75% { transform: translateX(0.25rem); } +} + +/* ======================================== + Entry Animations + ======================================== */ + +.notebook-cell { + animation: notebook-cell-enter 0.4s ease-out; + animation-delay: calc(var(--cell-index, 0) * 0.1s); + animation-fill-mode: both; +} + +.notebook-cell__copy-btn--success { + animation: copy-success 0.3s ease-out; +} + +.notebook-cell__copy-btn--error { + animation: copy-error 0.3s ease-out; +} + +/* ======================================== + :has() Notebook Component Enhancements + ======================================== */ + +/* Notebook cells with error states get enhanced styling */ + +.notebook-cell:has(.notebook-cell__error-name) { + border-inline-start: 4px solid var(--color-danger); + background: linear-gradient( + 90deg, + color-mix(in srgb, rgb(239, 68, 68) 5%, transparent) 0%, + transparent 50% + ); + margin-inline-start: -1rem; + padding-inline-start: calc(1rem - 4px); +} + +.notebook-cell:has(.notebook-cell__error-name) .collapse__icon-wrapper { + background: var(--color-danger); + color: white; + border-radius: 50%; +} + +/* Cells with outputs get enhanced spacing */ + +.notebook-cell:has(.notebook-cell__outputs) { + margin-bottom: 2rem; + border-bottom: 1px solid var(--color-border-secondary); + padding-bottom: 1.5rem; +} + +.notebook-cell:has(.notebook-cell__outputs) .notebook-cell__outputs { + background: var(--color-surface); + border-radius: 0.5rem; + padding: 1rem; + margin-top: 1rem; +} + +/* Interactive notebook cells on hover */ + +.notebook-cell:has(.notebook-cell__copy-btn) { + transition: all 0.2s ease; +} + +.notebook-cell:has(.notebook-cell__copy-btn:hover) { + background: rgba(var(--color-brand-rgb), 0.02); + border-radius: 0.5rem; + margin: 0.5rem 0; + padding: 0.5rem; +} + +/* Notebook with metadata gets enhanced header */ + +.notebook:has(.notebook__metadata) .notebook__header { + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border-radius: 0.75rem 0.75rem 0 0; +} + +/* Enhanced notebook title when description is present */ + +.notebook__header:has(.notebook__description) .notebook__title { + margin-bottom: 1rem; + font-size: 2.25rem; +} + +/* ======================================== + Modern CSS Features Summary + ======================================== */ + +/* + * This notebook component showcases modern CSS techniques: + * + * ✅ Container Queries: + * - Responsive behavior based on container size, not viewport + * - @container notebook (max-width: 768px) replaces @media queries + * + * ✅ CSS Logical Properties: + * - margin-inline-start/end for better internationalization + * - border-inline-start for RTL language support + * - padding-inline-start for semantic spacing + * + * ✅ Modern Color Functions: + * - color-mix() for alpha blending instead of rgba() + * - More semantic and maintainable color mixing + * + * ✅ Aspect Ratio: + * - aspect-ratio property for consistent image display + * - object-fit: contain for proper image scaling + * + * ✅ Advanced Pseudo-classes: + * - :has() for parent selector functionality + * - :focus-visible for keyboard navigation + * - :focus-within for container focus states + * + * Browser Support: Modern features with graceful fallbacks + * Performance: CSS containment for layout isolation + */ + +/* Unified Tabs Component CSS + * - Enhanced tabs ([data-component="tabs"], .tabs__*) + */ + +/* ========================== + Enhanced Tabs (BEM + data) + ========================== */ + +[data-component="tabs"], +.tabs { + margin: 1.5rem 0; + border-radius: 1rem; + background: var(--glass-bg); + border: 1px solid var(--glass-border-color); + box-shadow: var(--glass-shadow); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + overflow: hidden; + position: relative; +} + +/* Light mode: strengthen overall container border for visibility */ + +@media (prefers-color-scheme: light) { + [data-component="tabs"], + .tabs { + border-color: var(--color-border-primary); + } +} + +/* Header-aligned visuals are now the default */ + +/* Tab buttons container */ + +[data-component="tabs"] [data-tab-id], +.tabs__nav { + background: var(--glass-bg); + border-bottom: 1px solid var(--glass-border-color); + padding: 0.5rem 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; +} + +/* Light mode: strengthen nav divider for visibility */ + +@media (prefers-color-scheme: light) { + [data-component="tabs"] [data-tab-id], + .tabs__nav { + border-bottom-color: var(--color-border-primary); + } +} + +/* Individual tab buttons */ + +[data-component="tabs"] button[data-tab-option], +.tabs__button { + position: relative; + border-radius: 0.625rem; + font-weight: 600; + transition: + background-color var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard); + border: 1px solid var(--glass-border-color); + cursor: pointer; + white-space: nowrap; + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + padding: 0.25rem 0.5rem; /* match breadcrumb */ +} + +/* Default (inactive) */ + +[data-component="tabs"] button[data-tab-option]:not(.bg-brand), +.tabs__button:not(.bg-brand) { + background: var(--glass-bg) !important; + color: var(--color-text-primary) !important; + border-color: var(--glass-border-color); +} + +/* Light mode: increase inactive button border contrast */ + +@media (prefers-color-scheme: light) { + [data-component="tabs"] button[data-tab-option]:not(.bg-brand), + .tabs__button:not(.bg-brand) { + border-color: var(--color-border-primary); + } +} + +/* Hover */ + +[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover, +.tabs__button:not(.bg-brand):hover { + background: var(--color-surface-hover) !important; + color: var(--color-brand) !important; + border-color: rgba(var(--color-brand-rgb), 0.35); + transform: translateY(-1px); + box-shadow: var(--elevation-2); +} + +/* Active */ + +[data-component="tabs"] button.bg-brand, +.tabs__button.bg-brand { + background: var(--color-brand) !important; + color: var(--color-text-inverse, #fff) !important; + border-color: var(--color-brand); + box-shadow: var(--elevation-brand-subtle); + transform: translateY(-1px); +} + +/* Subtle variant: revert to tinted-active style */ + +[data-component="tabs"].tabs--subtle button.bg-brand, +.tabs.tabs--subtle .tabs__button.bg-brand { + background: + linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.08) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.06) 100% + ), + var(--glass-bg) !important; + color: var(--color-text-primary) !important; + border-color: rgba(var(--color-brand-rgb), 0.45); + box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.18), var(--elevation-2); +} + +/* Dark mode: increase active contrast by default */ + +@media (prefers-color-scheme: dark) { + [data-component="tabs"] button.bg-brand, + .tabs__button.bg-brand { + background: var(--color-brand) !important; + color: var(--color-text-inverse, #fff) !important; + border-color: var(--color-brand); + box-shadow: var(--elevation-brand-medium); + } +} + +/* Focus */ + +[data-component="tabs"] button[data-tab-option]:focus-visible, +.tabs__button:focus-visible { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); +} + +/* Content container */ + +[data-component="tabs"] .w-full, +.tabs__content { + min-height: 200px; + position: relative; + overflow: hidden; + border-top: 1px solid var(--glass-border-color); + transition: height var(--timing-medium) var(--easing-standard); + isolation: isolate; /* prevent child blends from darkening surface */ +} + +/* Panels */ + +[data-component="tabs"] [data-tabcontent], +.tabs__panel { + padding: 1.25rem 1.5rem; + background: transparent; + position: absolute; + top: 0; + left: 0; + right: 0; + will-change: opacity, transform; + backface-visibility: hidden; + transform: var(--transform-slide-in-up); + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: + opacity var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard), + visibility 0s linear var(--timing-medium); +} + +/* Visible panel */ + +[data-component="tabs"] [data-tabcontent].is-active, +.tabs__panel.is-active { + opacity: 1; + transform: var(--transform-translate-none); + visibility: visible; + pointer-events: auto; + transition-delay: 0s, 0s, 0s; + animation: slideInUp var(--timing-medium) var(--easing-standard); +} + +/* Panel content spacing */ + +[data-component="tabs"] [data-tabcontent] > *:first-child, +.tabs__panel > *:first-child { margin-top: 0; } + +[data-component="tabs"] [data-tabcontent] > *:last-child, +.tabs__panel > *:last-child { margin-bottom: 0; } + +/* Smooth entrance */ + +[data-component="tabs"] [data-tabcontent] *, +.tabs__panel * { transition: none; } + +/* Compact density variant */ + +[data-component="tabs"].tabs--compact .tabs__nav, +.tabs.tabs--compact .tabs__nav { + padding: 0.25rem 0.25rem; + gap: 0.125rem; +} + +[data-component="tabs"].tabs--compact button[data-tab-option], +.tabs.tabs--compact .tabs__button { + padding: 0.375rem 0.5rem; + font-size: 0.875rem; +} + +/* Underline hover animation for inactive buttons */ + +[data-component="tabs"] button[data-tab-option]:not(.bg-brand)::after, +.tabs__button:not(.bg-brand)::after { + content: ""; + position: absolute; + left: 0.5rem; right: 0.5rem; bottom: 0.25rem; + height: 2px; + background: rgba(var(--color-brand-rgb), 0.35); + transform: scaleX(0); + transform-origin: left center; + transition: transform var(--timing-medium) var(--easing-standard); +} + +[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover::after, +.tabs__button:not(.bg-brand):hover::after { transform: scaleX(1); } + +/* Responsive */ + +@media (max-width: 640px) { + [data-component="tabs"] [data-tab-id], + .tabs__nav { flex-direction: column; align-items: stretch; } + [data-component="tabs"] button[data-tab-option], + .tabs__button { text-align: left; justify-content: flex-start; } + [data-component="tabs"] [data-tabcontent], + .tabs__panel { padding: 1.5rem; } +} + +/* Print */ + +@media print { + [data-component="tabs"] [data-tab-id], + .tabs__nav { display: none; } + [data-component="tabs"] [data-tabcontent], + .tabs__panel { position: static !important; display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; page-break-inside: avoid; } + [data-component="tabs"] [data-tabcontent]:not(:first-of-type), + .tabs__panel:not(:first-of-type) { margin-top: 2rem; border-top: 1px solid var(--color-border-primary); padding-top: 2rem; } + [data-component="tabs"] [data-tabcontent]::before, + .tabs__panel::before { content: "Tab: " attr(data-tabcontent); display: block; font-weight: bold; margin-bottom: 1rem; color: var(--color-text-secondary); font-size: 0.875rem; text-transform: capitalize; } +} + +@media (prefers-color-scheme: dark) { + [data-component="tabs"], .tabs { box-shadow: var(--elevation-4); } + [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { box-shadow: var(--elevation-brand-medium); } +} + +@media (prefers-color-scheme: dark) { + [data-component="tabs"]::after, + .tabs::after { + background: linear-gradient( + to bottom, + rgba(0,0,0,0) 0%, + rgba(0,0,0,0.18) 55%, + rgba(0,0,0,0.28) 100% + ); + } +} + +/* Code Blocks - align with header/tabs glass surface and tokens */ + +.code-block-enhanced { + background: var(--glass-bg); + border-radius: 0.75rem; + border: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + box-shadow: var(--glass-shadow); + overflow: hidden; +} + +/* Light mode: strengthen wrapper border for visibility */ + +@media (prefers-color-scheme: light) { + .code-block-enhanced { + border-color: var(--color-border-primary); + } +} + +.code-block-enhanced .code-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 0.75rem; + background: var(--glass-bg); + border-bottom: 1px solid var(--glass-border-color); +} + +/* Light mode: strengthen header divider similar to article header */ + +@media (prefers-color-scheme: light) { + .code-block-enhanced .code-header { + border-bottom-color: var(--color-border-primary); + } +} + +.code-block-enhanced .code-language { + color: var(--color-text-secondary); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + font-size: 0.75rem; +} + +.code-block-enhanced .code-actions .btn { + border-radius: 0.5rem; +} + +.code-block-enhanced .code-actions .btn.btn--ghost { + background: var(--glass-bg); + border: 1px solid var(--glass-border-color); +} + +.code-block-enhanced .code-actions .btn.btn--ghost:hover { + background: var(--color-surface-hover); + color: var(--color-brand); + border-color: rgba(var(--color-brand-rgb), 0.35); +} + +.code-block-enhanced .code-content { + background: transparent; +} + +.code-block-enhanced .code-content .highlight, +.code-block-enhanced .code-content .highlight pre, +.code-block-enhanced .code-content pre, +.code-block-enhanced .code-content code { + background: transparent; +} + +.code-block-enhanced .code-content pre { + margin: 0; + padding: 0.75rem 1rem; +} + +.code-block-enhanced .code-content code { + display: block; +} + +/* Dark mode glow tuning aligns with header action glow */ + +@media (prefers-color-scheme: dark) { + .code-block-enhanced { + box-shadow: var(--elevation-4); + } +} + +/* Copy button icon alignment and sizing + Ensure the single SVG icon in the copy button is visually centered and consistent */ + +.code-block-enhanced .code-actions .copy-code .btn__icon { + margin-right: 0; /* no trailing space for icon-only buttons */ + width: 1rem; /* enforce square icon */ + height: 1rem; + display: block; /* remove inline alignment quirks */ +} + +@layer components { + /* Object Model Component */ + [data-component="object-model"] { + /* Align nested option text with summary text start: px-3 + chevron(1rem) + gap(0.5rem) */ + --om-pad-x: 0rem; /* no outer horizontal padding on rows */ + --om-chevron: 1rem; /* h-4 w-4 */ + --om-gap: 0.5rem; /* gap-2 */ + --om-indent: calc(var(--om-pad-x) + var(--om-chevron) + var(--om-gap)); + } + .object-model__title, + .object-model__heading { + scroll-margin-top: var(--header-offset); + } + +/* Layout Container */ +.object-model-container { + max-width: 80rem; /* container equivalent */ + margin: 0 auto; + padding: var(--space-8) var(--space-4); +} + +/* Typography Styles */ +.object-model__title { + font-size: var(--font-size-3xl); + font-weight: 700; + color: var(--color-text-primary); + margin-bottom: var(--space-4); + line-height: 1.1; + } + + .object-model__heading { + font-size: var(--font-size-2xl); + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: var(--space-4); + line-height: 1.2; + } + +/* Layout Patterns */ +.object-model__intro { + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.object-model__section { + margin-top: var(--space-8); +} + +.object-model__header { + margin-bottom: var(--space-4); +} + +.object-model__summary { + margin-top: var(--space-2); +} + +.object-model__groups { + margin-left: var(--space-4); + display: grid; + grid-template-columns: 1fr; + gap: var(--space-6); +} + +.object-model__summary-row { + display: flex; + cursor: pointer; + align-items: flex-start; + gap: var(--space-2); +} + +.object-model__chevron { + margin-top: var(--space-1); + height: 1rem; + width: 1rem; + flex-shrink: 0; + transition: transform var(--timing-fast) var(--easing-standard); +} + +.object-model__description { + margin-left: var(--space-1); +} + +.object-model__options { + padding: var(--space-2) var(--space-4); +} + +.object-model__option-item { + padding: var(--space-1) 0; +} + +.object-model__row { + display: flex; + align-items: flex-start; + gap: var(--space-2); +} + +.object-model__dash { + margin-top: var(--space-1); + height: 1rem; + width: 1rem; + flex-shrink: 0; +} + + @media (min-width: 1024px) { + .object-model__groups { + grid-template-columns: repeat(2, 1fr); + } + } + + .object-model__heading, + .object-model__subheading { + color: var(--color-text-primary); + } + + /* Token-based badge for section headings (replaces hard-coded bg classes) */ + .object-model__heading-badge { + display: inline-block; + padding: 0.25rem 0.5rem; /* px-2 py-1 */ + border-radius: 0.5rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + color: var(--color-text-primary); + } + + .object-model__intro-text, + .object-model__summary { + color: var(--color-text-primary); + } + + .object-model__list { + /* Borderless, airy list; separation via spacing and summary hover */ + background: transparent; + border: 0; + box-shadow: none; + overflow: visible; + color: var(--color-text-primary); + list-style: none; + padding-left: 0; + } + + /* Ensure inner text inherits proper token-based colors */ + .object-model__item, + .object-model__field, + .object-model__options { + color: inherit; + } + + .object-model__details { + /* Remove default marker for consistent chevron */ + } + .object-model__details > summary::-webkit-details-marker { + display: none; + } + .object-model__details > summary { + list-style: none; + } + + /* Fine tune nested lists */ + .object-model__options { + /* Use only the explicit padding from markup; remove UA list padding/indent */ + list-style: none; + padding-inline-start: 0; + margin-left: 0.5em; + padding-left: var(--om-indent); + padding-top: 0.25rem; /* tighter attach under summary */ + } + + /* Override global article nested list indent for this component only */ + .article-content[data-component="object-model"] .object-model__list li, + .article-content[data-component="object-model"] .object-model__list li li { + margin-left: 0; + padding-left: 0; + } + + /* Ensure summary row has clear focus ring */ + .object-model__summary-row { + border-radius: var(--radius-md); + outline: none; + + /* TailwindCSS v4: focus-visible pseudo-selectors don't work well in @apply, use direct CSS */ + &:focus-visible { + ring: 2px solid theme(colors.indigo.500); + } + + .dark &:focus-visible { + ring: 2px solid theme(colors.indigo.400); + } + } + + .object-model__summary-row:hover { + background-color: rgba(var(--color-brand-rgb), 0.03); + } + + /* Ensure names/descriptions use token text colors automatically */ + .object-model__name { + color: var(--color-text-primary); + } + .object-model__description { + color: var(--color-text-primary); + } + + .object-model__chevron { + color: var(--color-text-secondary); + } + .object-model__dash { + color: var(--color-border-primary); + } + + /* Option items typography */ + /* Keys and values color tokens */ + .object-model__option-key code { + color: var(--color-text-primary); + font-weight: 600; /* add visual weight to keys */ + } + .object-model__option-value, + .object-model__option-value p, + .object-model__option-value a { + color: var(--color-text-primary); + } + .object-model__option-value { display: inline; margin-left: 0.375rem; } + .object-model__option-value p { display: inline; margin: 0; } + .object-model__option-value a:hover { color: var(--color-brand); } + + /* Option item in normal inline flow (avoid flex to prevent text splitting into multiple flex items) */ + .object-model__option-item { + display: block; + padding: 0.125rem 0; + font-size: 0.875rem; /* text-sm */ + line-height: 1.45; + } + .object-model__option-key { + color: var(--color-text-secondary); + white-space: nowrap; + } + .object-model__option-value { + color: var(--color-text-primary); + } + + /* Strong label variant (for legacy markup without key/value wrappers) */ + .object-model__option-item > strong { + margin-right: 0.375rem; + font-weight: 600; + } + .object-model__option-item code { + white-space: nowrap; + } + + /* Compact spacing for rows in dense lists */ + .object-model__row, + .object-model__summary-row { + padding-top: 0.375rem; + padding-bottom: 0.375rem; + } + + @media (min-width: 768px) { + .object-model__row, + .object-model__summary-row { + padding-top: var(--space-2); + padding-bottom: var(--space-2); + } + } + + .object-model__details:not([open]) .object-model__summary-row { box-shadow: none; } + .object-model__details[open] .object-model__summary-row { box-shadow: none; } + + /* Soft separation between items without borders */ + .object-model__item + .object-model__item { margin-top: 0.25rem; } +} + +/* Enhanced Collapse Component - Modern collapsible content with animations */ + +/* ========================================================================== + Base Collapse Component + ========================================================================== */ + +.collapse { + position: relative !important; + margin: 1.5rem 0 !important; + border-radius: 1rem !important; + overflow: hidden !important; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard) !important; + animation: collapse-enter var(--timing-medium) var(--easing-standard) !important; + animation-fill-mode: both !important; + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; + visibility: visible !important; + display: block !important; +} + +.collapse:hover { + transform: translateY(-2px) !important; + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.12), + 0 0 20px rgba(var(--color-brand-rgb), 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; +} + +/* ========================================================================== + Collapse Header (Trigger) + ========================================================================== */ + +.collapse__header { + position: relative; + cursor: pointer; + padding: 1.25rem 1.5rem; + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border: 1px solid var(--color-border-primary); + border-radius: 1rem; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + border-color var(--timing-medium) var(--easing-standard), + background var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard); + display: flex; + align-items: center; + gap: 1rem; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.collapse__header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + opacity: 0; + transition: opacity var(--timing-medium) var(--easing-standard); + pointer-events: none; + border-radius: inherit; +} + +.collapse__header:hover::before { + opacity: 1; +} + +.collapse__header:hover { + border-color: var(--color-brand); + background: linear-gradient( + 135deg, + var(--color-surface-hover) 0%, + var(--color-bg-tertiary) 100% + ); +} + +.collapse.expanded .collapse__header { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom-color: transparent; +} + +/* ========================================================================== + Collapse Icon + ========================================================================== */ + +.collapse__icon-wrapper { + shrink: 0; + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 0.5rem; + background: rgba(var(--color-brand-rgb), 0.1); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.collapse__header:hover .collapse__icon-wrapper { + background: rgba(var(--color-brand-rgb), 0.15); + transform: scale(1.05); +} + +.collapse__icon { + width: 1.25rem; + height: 1.25rem; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + stroke: var(--color-brand); + stroke-width: 2.5; + filter: drop-shadow(0 1px 2px rgba(var(--color-brand-rgb), 0.3)); +} + +.collapse.expanded .collapse__icon { + transform: rotate(90deg); +} + +/* ========================================================================== + Collapse Content + ========================================================================== */ + +.collapse__content-wrapper { + flex: 1; + min-width: 0; +} + +.collapse__title { + margin: 0 0 0.25rem 0; + font-family: var(--font-family-brand); + font-size: 1.125rem; + font-weight: 600; + line-height: 1.4; + color: var(--color-text-primary); + transition: all 0.2s ease; +} + +.collapse__header:hover .collapse__title { + color: var(--color-brand); + transform: translateX(2px); +} + +.collapse__description { + margin: 0; + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text-secondary); + transition: color 0.2s ease; +} + +.collapse__header:hover .collapse__description { + color: var(--color-text-primary); +} + +/* ========================================================================== + Collapse Body (Collapsible Content) + ========================================================================== */ + +.collapse__body { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-top: none; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + + /* Height-based collapse (consistent with all components) */ + max-height: 0; + opacity: 0; + overflow: hidden; + + /* Configure collapse behavior via CSS custom properties */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 2000px; + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 1.5rem; + /* ✅ FIXED: Use animation tokens */ + --collapse-timing: var(--timing-medium); + --collapse-easing: var(--easing-standard); +} + +/* ✅ MIGRATED: Class-based to data-attribute system */ + +.collapse[data-collapse-state="expanded"] .collapse__body, +.collapse.expanded .collapse__body { + border-color: var(--color-brand); +} + +.collapse__body-content { + /* ✅ FIXED: Use animation tokens */ + transition: transform var(--timing-medium) var(--easing-standard); + transform: translateY(-10px); +} + +/* ✅ MIGRATED: Support both class-based and data-attribute systems */ + +.collapse[data-collapse-state="expanded"] .collapse__body-content, +.collapse.expanded .collapse__body-content { + transform: translateY(0); +} + +/* Enhanced content styling */ + +.collapse__body-content > *:first-child { + margin-top: 0; +} + +.collapse__body-content > *:last-child { + margin-bottom: 0; +} + +.collapse__body-content p { + line-height: 1.6; + color: var(--color-text-primary); + margin-bottom: 1rem; +} + +.collapse__body-content code { + background: rgba(var(--color-brand-rgb), 0.1); + border-radius: 0.375rem; + padding: 0.125rem 0.375rem; + font-size: 0.875rem; + font-family: var(--font-family-mono); + color: var(--color-brand); +} + +.collapse__body-content pre { + background: var(--color-bg-tertiary); + border-radius: 0.5rem; + padding: 1rem; + margin: 1rem 0; + overflow-x: auto; + border: 1px solid var(--color-border-primary); +} + +/* ========================================================================== + Status Variants + ========================================================================== */ + +/* Info variant */ + +.collapse--info .collapse__header { + background: linear-gradient( + 135deg, + rgba(59, 130, 246, 0.05) 0%, + rgba(59, 130, 246, 0.02) 100% + ); + border-color: rgba(59, 130, 246, 0.2); +} + +.collapse--info .collapse__icon-wrapper { + background: rgba(59, 130, 246, 0.1); +} + +.collapse--info .collapse__icon { + stroke: #3b82f6; +} + +.collapse--info .collapse__header:hover .collapse__title { + color: #1d4ed8; +} + +/* Warning variant */ + +.collapse--warning .collapse__header { + background: linear-gradient( + 135deg, + rgba(245, 158, 11, 0.05) 0%, + rgba(245, 158, 11, 0.02) 100% + ); + border-color: rgba(245, 158, 11, 0.2); +} + +.collapse--warning .collapse__icon-wrapper { + background: rgba(245, 158, 11, 0.1); +} + +.collapse--warning .collapse__icon { + stroke: #f59e0b; +} + +.collapse--warning .collapse__header:hover .collapse__title { + color: #d97706; +} + +/* Danger variant */ + +.collapse--danger .collapse__header { + background: linear-gradient( + 135deg, + rgba(239, 68, 68, 0.05) 0%, + rgba(239, 68, 68, 0.02) 100% + ); + border-color: rgba(239, 68, 68, 0.2); +} + +.collapse--danger .collapse__icon-wrapper { + background: rgba(239, 68, 68, 0.1); +} + +.collapse--danger .collapse__icon { + stroke: #ef4444; +} + +.collapse--danger .collapse__header:hover .collapse__title { + color: #dc2626; +} + +/* Success variant */ + +.collapse--success .collapse__header { + background: linear-gradient( + 135deg, + rgba(34, 197, 94, 0.05) 0%, + rgba(34, 197, 94, 0.02) 100% + ); + border-color: rgba(34, 197, 94, 0.2); +} + +.collapse--success .collapse__icon-wrapper { + background: rgba(34, 197, 94, 0.1); +} + +.collapse--success .collapse__icon { + stroke: #22c55e; +} + +.collapse--success .collapse__header:hover .collapse__title { + color: #15803d; +} + +/* ========================================================================== + Animations + ========================================================================== */ + +@keyframes collapse-enter { + 0% { + opacity: 0; + transform: translateY(10px) scale(0.98); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 768px) { + .collapse { + margin: 1rem 0; + border-radius: 0.75rem; + } + + .collapse__header { + padding: 1rem; + border-radius: 0.75rem; + gap: 0.75rem; + } + + .collapse.expanded .collapse__body { + padding: 1rem; + } + + .collapse__title { + font-size: 1rem; + } + + .collapse__description { + font-size: 0.8125rem; + } + + .collapse__icon-wrapper { + width: 1.75rem; + height: 1.75rem; + } + + .collapse__icon { + width: 1rem; + height: 1rem; + } +} + +/* ========================================================================== + Dark Mode Support + ========================================================================== */ + +@media (prefers-color-scheme: dark) { + .collapse__body-content code { + background: rgba(255, 255, 255, 0.1); + } +} + +/* ✅ DATA-ATTRIBUTE INTEGRATION + * ======================================================================= + * Integration with the Universal Component State Management System + * This allows collapse components to work with both class-based legacy + * and modern data-attribute approaches + */ + +/* Data-attribute collapsed state */ + +.collapse[data-collapse-state="collapsed"] .collapse__body, +.collapse__body[data-collapse-state="collapsed"] { + max-height: var(--collapse-height-collapsed); + opacity: var(--collapse-opacity-collapsed); + overflow: hidden; + padding: var(--collapse-padding-collapsed); + transition: + max-height var(--collapse-timing) var(--collapse-easing), + opacity var(--collapse-timing) var(--collapse-easing), + padding var(--collapse-timing) var(--collapse-easing); +} + +/* Data-attribute transitioning state */ + +.collapse[data-collapse-state="transitioning"] .collapse__body { + overflow: hidden; /* Prevent content spillage during animation */ + pointer-events: none; /* Prevent interaction during transition */ +} + +/* Data-attribute expanded state */ + +.collapse[data-collapse-state="expanded"] .collapse__body, +.collapse__body[data-collapse-state="expanded"] { + max-height: var(--collapse-height-expanded); + opacity: var(--collapse-opacity-expanded); + overflow: var(--collapse-overflow-expanded); + padding: var(--collapse-padding-expanded); + transition: + max-height var(--collapse-timing) var(--collapse-easing), + opacity var(--collapse-timing) var(--collapse-easing), + padding var(--collapse-timing) var(--collapse-easing); +} + +/* Icon rotation for data-attribute system */ + +.collapse[data-collapse-state="expanded"] .collapse__icon { + transform: rotate(180deg); +} + +/* Enhanced accessibility for data-attribute system */ + +.collapse[data-collapse-state] .collapse__header { + /* Ensure proper ARIA attributes are communicated visually */ +} + +.collapse[data-collapse-state="expanded"] .collapse__header[aria-expanded="true"] { + /* Visual confirmation of expanded state */ + border-color: var(--color-brand); +} + +/* Migration helper - components can use either system */ + +.collapse:not([data-collapse-state]) { + /* Legacy class-based system continues to work */ +} + +/* Navigation Components */ + +/* OpenAPI Components */ + +/* OpenAPI Base Container & Section Headers */ + +/* ========================================================================== + OpenAPI Base Container + ========================================================================== */ + +.openapi-spec { + max-width: none; + margin: 0; + padding: 0; +} + +.openapi-content { + display: flex; + flex-direction: column; + gap: 3rem; +} + +/* ========================================================================== + Section Headers + ========================================================================== */ + +.section-header { + margin-bottom: 2rem; + text-align: center; +} + +.section-title { + font-family: var(--font-family-brand); + font-size: 2.5rem; + font-weight: 700; + color: var(--color-text-primary); + margin: 0 0 0.5rem 0; + background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.section-description { + font-size: 1.125rem; + color: var(--color-text-secondary); + margin: 0; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +/* OpenAPI Components */ + +/* ========================================================================== + Components Section + ========================================================================== */ + +.openapi-components { + padding: 2rem 0; +} + +.components-section { + margin-bottom: 3rem; +} + +.components-section:last-child { + margin-bottom: 0; +} + +.components-section-title { + font-size: 1.5rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 1.5rem 0; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--color-border-primary); +} + +.components-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.component-item { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + overflow: hidden; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; +} + +.component-item:hover { + border-color: var(--color-brand); + box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); +} + +.component-header { + padding: 1rem 1.5rem; + display: flex; + align-items: center; + gap: 1rem; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.component-header:hover { + background: var(--color-bg-secondary); +} + +.component-icon { + width: 1.5rem; + height: 1.5rem; + color: var(--color-brand); + shrink: 0; +} + +.component-name { + flex: 1; + min-width: 0; +} + +.component-name h4 { + margin: 0 0 0.25rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.component-type { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.component-toggle { + width: 1.5rem; + height: 1.5rem; + color: var(--color-text-secondary); + shrink: 0; +} + +.component-toggle .chevron { + width: 1rem; + height: 1rem; + transition: transform var(--timing-fast) var(--easing-standard); +} + +.component-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); +} + +.component-details { + border-top: 1px solid var(--color-border-primary); + + /* Height-based collapse (consistent with all components) */ + max-height: 0; + opacity: 0; + overflow: hidden; + padding: 0; + + /* Configure collapse behavior */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 3000px; /* Large for complex schemas */ + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 1.5rem; + --collapse-timing: 0.3s; + --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Remove old class-based approach - component-states.css handles this */ + +/* Legacy styles removed - component-states.css now handles all collapse behavior */ + +@keyframes schema-expand { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ========================================================================== + :has() Content-Aware Components Enhancements + ========================================================================== */ + +/* Components section adapts based on content type and count */ + +.openapi-components:has(.components-section[data-section-type="schemas"]) { + --primary-section: schemas; +} + +.openapi-components:has(.components-section[data-section-type="parameters"]) { + --secondary-section: parameters; +} + +/* Enhanced styling for sections with many items */ + +.components-section:has([data-item-count^="1"]) .components-section-title::after, +.components-section:has([data-item-count^="2"]) .components-section-title::after, +.components-section:has([data-item-count^="3"]) .components-section-title::after { + content: " (" attr(data-item-count) ")"; + color: var(--color-text-secondary); + font-size: 0.875rem; + font-weight: 400; +} + +/* ========================================================================== + Enhanced Schema Expansion States with :has() + ========================================================================== */ + +/* Component items with expanded content */ + +.component-item:has(.component-details.expanded) { + border-color: var(--color-brand); + box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); +} + +.component-item:has(.component-details.expanded) .component-header { + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.1); +} + +/* Enhanced chevron rotation for expanded state */ + +.component-item:has(.component-details.expanded) .chevron { + transform: rotate(90deg); + color: var(--color-brand); +} + +/* Schema-specific expanded state styling */ + +.component-item[data-component="component-schema"]:has(.component-details.expanded) { + border-left: 4px solid var(--color-brand); +} + +.component-item[data-component="component-schema"]:has(.component-details.expanded) .component-name h4 { + color: var(--color-brand); + font-weight: 700; +} + +/* Complex schemas (with many properties) get enhanced styling when expanded */ + +.component-item[data-property-count^="1"]:has(.component-details.expanded), +.component-item[data-property-count^="2"]:has(.component-details.expanded), +.component-item[data-property-count^="3"]:has(.component-details.expanded) { + border-left: 4px solid var(--color-accent); +} + +.component-item[data-property-count^="1"]:has(.component-details.expanded) .component-name h4, +.component-item[data-property-count^="2"]:has(.component-details.expanded) .component-name h4, +.component-item[data-property-count^="3"]:has(.component-details.expanded) .component-name h4 { + color: var(--color-accent); +} + +/* Required schemas get special highlighting when expanded */ + +.component-item[data-has-required="true"]:has(.component-details.expanded) .component-header { + background: linear-gradient( + 135deg, + rgba(var(--color-warning-rgb), 0.08) 0%, + rgba(var(--color-warning-rgb), 0.03) 100% + ); +} + +/* Different schema types get unique expanded styling */ + +.component-item[data-schema-type="array"]:has(.component-details.expanded) { + border-left-color: var(--color-success); +} + +.component-item[data-schema-type="object"]:has(.component-details.expanded) { + border-left-color: var(--color-brand); +} + +.component-item[data-schema-type="string"]:has(.component-details.expanded) { + border-left-color: var(--color-info); +} + +/* Schema-specific enhancements */ + +.component-item[data-component="component-schema"]:has([data-has-properties="true"]) { + border-left: 3px solid var(--color-brand); +} + +.component-item[data-component="component-schema"]:has([data-has-required="true"]) .component-header { + background: rgba(var(--color-accent-rgb), 0.05); +} + +.component-item[data-schema-type="object"]:has([data-property-count]) .component-name::after { + content: " (" attr(data-property-count) " properties)"; + color: var(--color-text-secondary); + font-size: 0.75rem; + font-weight: 400; +} + +.component-item[data-schema-type="array"] .component-header { + background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); +} + +.component-item[data-schema-type="string"] .component-icon { + color: var(--color-accent); +} + +/* Parameter-specific enhancements */ + +.component-item[data-component="component-parameter"][data-param-required="true"] { + border-left: 3px solid var(--color-accent); +} + +.component-item[data-component="component-parameter"][data-param-required="true"] .component-header { + background: rgba(var(--color-accent-rgb), 0.08); +} + +.component-item[data-param-in="path"] .component-header { + background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.05), rgba(var(--color-danger-rgb), 0.05)); +} + +.component-item[data-param-in="query"] .component-header { + background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-info-rgb), 0.05)); +} + +.component-item[data-param-in="header"] .component-header { + background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); +} + +/* Enhanced hover effects based on content */ + +.component-item:has([data-has-description="true"]):hover { + transform: translateY(-2px); + box-shadow: + 0 4px 12px rgba(var(--color-brand-rgb), 0.15), + 0 2px 4px rgba(0, 0, 0, 0.08); +} + +/* Responsive adaptations */ + +.components-section:has(.component-item:nth-child(n+10)) { + --large-section: true; +} + +.components-section:has(.component-item:nth-child(n+10)) .components-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1rem; +} + +/* Section with only one item gets special treatment */ + +.components-section:has(.component-item:only-child) .component-item { + max-width: 600px; + margin: 0 auto; +} + +/* Enhanced focus states for accessibility */ + +.component-item:has(.component-header:focus-visible) { + outline: 2px solid var(--color-brand); + outline-offset: 2px; +} + +/* OpenAPI Endpoints */ + +/* ========================================================================== + Endpoints Section + ========================================================================== */ + +.openapi-endpoints { + padding: 2rem 0; +} + +/* Endpoint Groups */ + +.endpoint-group { + margin-bottom: 2rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + overflow: hidden; +} + +.endpoint-group-header { + padding: 1rem 1.5rem; + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); + cursor: pointer; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + display: flex; + align-items: center; + justify-content: space-between; +} + +.endpoint-group-header:hover { + background: var(--color-bg-tertiary); +} + +.endpoint-group-title { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.endpoint-group-title h3 { + margin: 0; + font-size: 1.25rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.endpoint-count { + background: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.8rem; + font-weight: 500; +} + +.endpoint-group-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; +} + +.endpoint-group-toggle .chevron { + width: 1rem; + height: 1rem; + transition: transform var(--timing-fast) var(--easing-standard); +} + +.endpoint-group-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); +} + +.endpoint-group-content { + /* Use height-based collapse (consistent with response-details) */ + max-height: 0; + opacity: 0; + overflow: hidden; + padding: 0; + + /* Configure collapse behavior */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 3000px; /* Larger for endpoint lists */ + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 0; + --collapse-timing: 0.3s; + --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Remove old class-based approach - component-states.css handles this */ + +/* Endpoint Items within Groups */ + +.endpoint-item { + background: var(--color-surface); + border: none; + border-bottom: 1px solid var(--color-border-primary); + border-radius: 0; + margin-bottom: 0; + overflow: hidden; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); +} + +.endpoint-item:last-child { + border-bottom: none; +} + +.endpoint-item:hover { + background: var(--color-bg-secondary); +} + +/* Endpoint Header */ + +.endpoint-header { + padding: 0.75rem 1rem; + display: flex; + align-items: center; + gap: 0.75rem; + cursor: pointer; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); +} + +/* Keyboard focus visibility */ + +.endpoint-group-header:focus-visible, +.endpoint-header:focus-visible { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + border-radius: 0.5rem; +} + +.endpoint-header:hover { + background: var(--color-bg-secondary); +} + +.endpoint-header__method { + shrink: 0; +} + +.endpoint-header__path { + flex: 1; + min-width: 0; +} + +.endpoint-header__summary { + flex: 2; + min-width: 0; +} + +.endpoint-header__meta { + shrink: 0; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.endpoint-header__toggle { + shrink: 0; + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; +} + +.endpoint-path { + font-family: var(--font-family-mono); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.endpoint-summary { + font-size: 0.875rem; + color: var(--color-text-primary); + font-weight: 500; +} + +.endpoint-operation-id { + font-size: 0.75rem; + color: var(--color-text-secondary); +} + +.operation-id-label { + font-weight: 500; +} + +.endpoint-tags { + display: flex; + gap: 0.375rem; +} + +.endpoint-tag { + background: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); + padding: 0.125rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 500; +} + +/* HTTP Method Badges */ + +.http-method { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.375rem 0.75rem; + border-radius: 0.375rem; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + min-width: 4rem; +} + +/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ + +/* .http-method--get { background: #22c55e; color: white; } +.http-method--post { background: #3b82f6; color: white; } +.http-method--put { background: #f59e0b; color: white; } +.http-method--patch { background: #8b5cf6; color: white; } +.http-method--delete { background: #ef4444; color: white; } +.http-method--head { background: #6b7280; color: white; } +.http-method--options { background: #9333ea; color: white; } */ + +.http-method--get { background: var(--http-get-bg); color: var(--http-get-text); } + +.http-method--post { background: var(--http-post-bg); color: var(--http-post-text); } + +.http-method--put { background: var(--http-put-bg); color: var(--http-put-text); } + +.http-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } + +.http-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } + +.http-method--head { background: var(--http-head-bg); color: var(--http-head-text); } + +.http-method--options { background: var(--http-options-bg); color: var(--http-options-text); } + +/* Endpoint Details */ + +.endpoint-details { + display: none; + padding: 1.5rem; + background: var(--color-surface); + border-top: 1px solid var(--color-border-primary); +} + +.endpoint-details.expanded { + display: block; +} + +.endpoint-section { + margin-bottom: 2rem; +} + +.endpoint-section:last-child { + margin-bottom: 0; +} + +.endpoint-section h4 { + margin: 0 0 1rem 0; + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-primary); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.endpoint-description { + font-size: 1rem; + line-height: 1.6; + color: var(--color-text-primary); + margin-bottom: 1.5rem; +} + +/* Chevron Icon */ + +.chevron { + width: 1rem; + height: 1rem; + transition: transform var(--timing-fast) var(--easing-standard); +} + +.endpoint-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); +} + +/* ========================================================================== + :has() Content-Aware Endpoints Enhancements + ========================================================================== */ + +/* API endpoint viewer adapts based on content type */ + +.openapi-spec[data-viewer-type="endpoint"]:has([data-has-parameters="true"]) { + --has-params: true; +} + +.openapi-spec[data-viewer-type="endpoint"]:has([data-has-request-body="true"]) { + --has-body: true; +} + +.openapi-spec[data-viewer-type="endpoint"]:has([data-has-responses="true"]) { + --has-responses: true; +} + +/* Method-specific styling enhancements */ + +.openapi-spec[data-method="GET"]:has([data-has-parameters="true"]) .api-endpoint-header { + border-left: 4px solid rgba(var(--color-info-rgb), 0.5); +} + +.openapi-spec[data-method="POST"]:has([data-has-request-body="true"]) .api-endpoint-header { + border-left: 4px solid rgba(var(--color-success-rgb), 0.5); +} + +.openapi-spec[data-method="PUT"]:has([data-has-request-body="true"]) .api-endpoint-header { + border-left: 4px solid rgba(var(--color-warning-rgb), 0.5); +} + +.openapi-spec[data-method="DELETE"]:has([data-has-responses="true"]) .api-endpoint-header { + border-left: 4px solid rgba(var(--color-danger-rgb), 0.5); +} + +/* Enhanced endpoint header based on content */ + +.api-endpoint-header:has([data-has-summary="true"]):has([data-has-description="true"]) { + padding: 2rem 1.5rem; + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); +} + +/* Endpoint item adapts based on available sections */ + +.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { + --sections: comprehensive; + border: 2px solid var(--color-border-primary); + border-radius: 1rem; + background: var(--color-surface); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +.endpoint-item:has([data-has-security="true"]) { + border-left: 3px solid var(--color-accent); +} + +.endpoint-item:has([data-has-examples="true"]) .endpoint-details { + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); +} + +/* Parameter count indicators */ + +.endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before { + content: attr(data-parameter-count) " params"; + position: absolute; + top: 0.5rem; + right: 0.5rem; + background: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 1rem; + font-weight: 500; +} + +/* Response count indicators */ + +.endpoint-item[data-response-count]:not([data-response-count="0"])::after { + content: attr(data-response-count) " responses"; + position: absolute; + top: 2.5rem; + right: 0.5rem; + background: rgba(var(--color-accent-rgb), 0.1); + color: var(--color-accent); + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 1rem; + font-weight: 500; +} + +/* Endpoint group with many endpoints gets grid layout */ + +.endpoint-group:has(.endpoint-item:nth-child(n+6)) .endpoint-group-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 1rem; +} + +/* Enhanced hover effects for content-rich endpoints */ + +.endpoint-item:has([data-has-examples="true"]):hover { + transform: translateY(-2px); + box-shadow: + var(--elevation-hover-2), + var(--elevation-brand-subtle); +} + +/* Responsive adaptations for endpoints */ + +@media (max-width: 768px) { + .endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { + border-radius: 0.5rem; + margin: 0.5rem 0; + } + + .endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before, + .endpoint-item[data-response-count]:not([data-response-count="0"])::after { + position: static; + display: inline-block; + margin: 0.25rem; + } +} + +/* Reduced motion: remove transitions for interactive rows/headers */ + +@media (prefers-reduced-motion: reduce) { + .endpoint-group-header, + .endpoint-item, + .endpoint-header { + transition: none !important; + } +} + +/* OpenAPI Header */ + +/* ========================================================================== + OpenAPI Header + ========================================================================== */ + +.openapi-header { + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border: 2px solid var(--color-border-primary); + border-radius: 1.5rem; + padding: 2rem; + margin-bottom: 2rem; + position: relative; + overflow: hidden; +} + +.openapi-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-accent-rgb), 0.05) 100% + ); + pointer-events: none; +} + +.openapi-header__meta { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; + position: relative; +} + +.openapi-header__badge { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.1); + border: 1px solid rgba(var(--color-brand-rgb, 59, 130, 246), 0.2); + border-radius: 2rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-brand, #3b82f6); + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; +} + +.openapi-header__badge:hover { + background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.15); + border-color: rgba(var(--color-brand-rgb, 59, 130, 246), 0.3); + transform: translateY(-1px); +} + +/* Version Badge */ + +.openapi-header__badge--version { + background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.1); + border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.2); + color: var(--color-accent, #8b5cf6); +} + +.openapi-header__badge--version:hover { + background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.15); + border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.3); +} + +/* API Type Badge */ + +.openapi-header__badge--type[data-api-type="REST"] { + background: rgba(var(--color-info-rgb), 0.1); + border-color: rgba(var(--color-info-rgb), 0.2); + color: var(--color-info); +} + +.openapi-header__badge--type[data-api-type="GraphQL"] { + background: rgba(var(--color-danger-rgb), 0.1); + border-color: rgba(var(--color-danger-rgb), 0.2); + color: var(--color-danger); +} + +/* Maturity Badge */ + +.openapi-header__badge--maturity[data-maturity="stable"] { + background: rgba(var(--color-success-rgb), 0.1); + border-color: rgba(var(--color-success-rgb), 0.2); + color: var(--color-success); +} + +.openapi-header__badge--maturity[data-maturity="beta"] { + background: rgba(var(--color-warning-rgb), 0.1); + border-color: rgba(var(--color-warning-rgb), 0.2); + color: var(--color-warning); +} + +.openapi-header__badge--maturity[data-maturity="alpha"] { + background: rgba(var(--color-danger-rgb), 0.1); + border-color: rgba(var(--color-danger-rgb), 0.2); + color: var(--color-danger); +} + +/* Stability Badge */ + +.openapi-header__badge--stability { + background: rgba(var(--color-security-rgb), 0.1); + border-color: rgba(var(--color-security-rgb), 0.2); + color: var(--color-security); +} + +.openapi-version { + font-family: var(--font-family-mono); +} + +.openapi-header__version { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + background: rgba(var(--color-accent-rgb), 0.1); + border: 1px solid rgba(var(--color-accent-rgb), 0.2); + border-radius: 2rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-accent); +} + +.api-version { + font-family: var(--font-family-mono); +} + +.openapi-header__version-stat { + min-width: auto; + flex: none; + min-height: auto; + padding: 0.5rem 1rem; +} + +.openapi-header__version-stat .overview-stat__value { + font-family: var(--font-family-mono); + font-size: 0.875rem; +} + +.openapi-header__title { + font-family: var(--font-family-brand); + font-size: 3rem; + font-weight: 800; + margin: 0 0 1rem 0; + color: var(--color-text-primary); + position: relative; +} + +.openapi-header__summary { + font-size: 1.25rem; + color: var(--color-text-secondary); + margin-bottom: 1rem; + position: relative; +} + +.openapi-header__description { + font-size: 1rem; + line-height: 1.6; + color: var(--color-text-primary); + margin-bottom: 1.5rem; + position: relative; +} + +.openapi-header__info { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + position: relative; +} + +.openapi-contact, +.openapi-license, +.openapi-terms { + background: rgba(255, 255, 255, 0.5); + padding: 1.5rem; + border-radius: 1rem; + border: 1px solid var(--color-border-primary); +} + +.openapi-contact h3, +.openapi-license h3, +.openapi-terms h3 { + margin: 0 0 1rem 0; + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.contact-name, +.contact-email, +.contact-url, +.license-name, +.terms-link { + margin-bottom: 0.5rem; +} + +.contact-email a, +.contact-url a, +.license-name a, +.terms-link a { + color: var(--color-brand); + text-decoration: none; + transition: color 0.2s ease; +} + +.contact-email a:hover, +.contact-url a:hover, +.license-name a:hover, +.terms-link a:hover { + color: var(--color-accent); + text-decoration: underline; +} + +/* ========================================================================== + :has() Content-Aware Header Enhancements + ========================================================================== */ + +/* Header with description gets enhanced layout */ + +.openapi-header:has(.openapi-header__description) { + padding-bottom: 2.5rem; +} + +.openapi-header:has(.openapi-header__description) .openapi-header__title { + margin-bottom: 1.25rem; +} + +/* Header without info section is more compact */ + +.openapi-header:not(:has(.openapi-header__info *)) .openapi-header__description { + margin-bottom: 0; +} + +/* Meta section adapts based on version presence */ + +.openapi-header__meta:has(.openapi-header__version-stat) { + gap: 1.5rem; + align-items: stretch; +} + +/* Info section adapts to number of sections */ + +.openapi-header__info:has(.openapi-contact:only-child) { + grid-template-columns: 1fr; + max-width: 400px; +} + +.openapi-header__info:has(.openapi-contact + .openapi-license:not(+ *)) { + grid-template-columns: repeat(2, 1fr); +} + +.openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); +} + +/* Enhanced contact styling based on available info */ + +.openapi-contact:has(.contact-email):has(.contact-url) { + background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); + border-color: rgba(var(--color-brand-rgb), 0.15); +} + +.openapi-contact:has(.contact-name) h3 { + color: var(--color-brand); +} + +/* License with URL gets enhanced styling */ + +.openapi-license:has(a) .license-name a { + color: var(--color-brand); + font-weight: 600; + text-decoration: none; + transition: all 0.2s ease; +} + +.openapi-license:has(a) .license-name a:hover { + color: var(--color-accent); + text-decoration: underline; +} + +/* Header with full info gets enhanced spacing */ + +.openapi-header:has(.openapi-contact):has(.openapi-license):has(.openapi-terms) { + padding: 2.5rem; +} + +/* Responsive adaptations using :has() */ + +@media (max-width: 768px) { + .openapi-header:has(.openapi-header__info) { + padding: 1.5rem; + } + + .openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { + grid-template-columns: 1fr; + gap: 1rem; + } + + .openapi-header__meta:has(.openapi-header__version-stat) { + flex-direction: column; + gap: 0.75rem; + align-items: flex-start; + } +} + +/* OpenAPI Navigation */ + +/* ========================================================================== + Endpoints Navigation + ========================================================================== */ + +.endpoints-nav { + margin-bottom: 2rem; + padding: 1.5rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 1rem; +} + +.endpoints-nav__section { + margin-bottom: 1.5rem; +} + +.endpoints-nav__section:last-child { + margin-bottom: 0; +} + +.endpoints-nav__header { + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: 1rem; +} + +.endpoints-nav__tags, +.endpoints-nav__methods { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.endpoints-nav__search { + position: relative; +} + +.endpoint-search { + width: 100%; + padding: 0.75rem 2rem 0.75rem 0.75rem; + font-size: 0.875rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border-primary); + background: var(--color-surface); + color: var(--color-text-primary); + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + box-shadow 0.2s ease; +} + +.endpoint-search:focus { + outline: none; + border-color: var(--color-brand); + box-shadow: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); +} + +.search-icon { + position: absolute; + right: 0.5rem; + top: 50%; + transform: translateY(-50%); + width: 1rem; + height: 1rem; + color: var(--color-text-secondary); +} + +.tag-filter, +.method-filter { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 2rem; + padding: 0.5rem 1rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-secondary); + cursor: pointer; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; +} + +.tag-filter:hover, +.tag-filter--active { + background: var(--color-brand); + border-color: var(--color-brand); + color: var(--color-text-inverse); +} + +.method-filter:hover, +.method-filter--active { + border-color: var(--color-brand); + color: var(--color-brand); +} + +/* Method-specific colors */ + +/* Old hex-based method filter colors commented out in favor of tokens per themes/milodocs/init */ + +/* .method-filter--get { border-color: #22c55e; color: #22c55e; } +.method-filter--post { border-color: #3b82f6; color: #3b82f6; } +.method-filter--put { border-color: #f59e0b; color: #f59e0b; } +.method-filter--patch { border-color: #8b5cf6; color: #8b5cf6; } +.method-filter--delete { border-color: #ef4444; color: #ef4444; } */ + +.method-filter--get { border-color: var(--http-get-bg); color: var(--http-get-bg); } + +.method-filter--post { border-color: var(--http-post-bg); color: var(--http-post-bg); } + +.method-filter--put { border-color: var(--http-put-bg); color: var(--http-put-bg); } + +.method-filter--patch { border-color: var(--http-patch-bg); color: var(--http-patch-bg); } + +.method-filter--delete { border-color: var(--http-delete-bg); color: var(--http-delete-bg); } + +/* .method-filter--get.method-filter--active { background: #22c55e; border-color: #22c55e; color: white; } */ + +.method-filter--get.method-filter--active { background: var(--http-get-bg); border-color: var(--http-get-bg); color: var(--http-get-text); } + +/* .method-filter--post.method-filter--active { background: #3b82f6; border-color: #3b82f6; color: white; } */ + +.method-filter--post.method-filter--active { background: var(--http-post-bg); border-color: var(--http-post-bg); color: var(--http-post-text); } + +/* .method-filter--put.method-filter--active { background: #f59e0b; border-color: #f59e0b; color: white; } */ + +.method-filter--put.method-filter--active { background: var(--http-put-bg); border-color: var(--http-put-bg); color: var(--http-put-text); } + +/* .method-filter--patch.method-filter--active { background: #8b5cf6; border-color: #8b5cf6; color: white; } */ + +.method-filter--patch.method-filter--active { background: var(--http-patch-bg); border-color: var(--http-patch-bg); color: var(--http-patch-text); } + +/* .method-filter--delete.method-filter--active { background: #ef4444; border-color: #ef4444; color: white; } */ + +.method-filter--delete.method-filter--active { background: var(--http-delete-bg); border-color: var(--http-delete-bg); color: var(--http-delete-text); } + +/* OpenAPI Overview - Modern Info-Dense Layout */ + +/* ========================================================================== + Overview Section + ========================================================================== */ + +.openapi-overview { + padding: 1.5rem 0; + margin-bottom: 1rem; +} + +/* Header */ + +.overview-header { + margin-bottom: 1.5rem; + text-align: left; +} + +.overview-title { + font-family: var(--font-family-brand); + font-size: 1.75rem; + font-weight: 700; + color: var(--color-text-primary); + margin: 0 0 0.25rem 0; +} + +/* Enhanced gradient text with fallback */ + +@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) { + .overview-title { + background: linear-gradient(135deg, var(--color-brand, #3b82f6), var(--color-accent, #8b5cf6)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; + } +} + +.overview-subtitle { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin: 0; + opacity: 0.8; +} + +/* Content Container */ + +.overview-content { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +/* ========================================================================== + Stats Bar - Horizontal info-dense layout + ========================================================================== */ + +.overview-stats { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-items: stretch; +} + +.overview-stat { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + transition: + background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), + border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), + color 0.2s cubic-bezier(0.4, 0, 0.2, 1), + transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), + box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); + min-height: 60px; + position: relative; + overflow: hidden; + flex: 1; + min-width: 140px; +} + +.overview-stat::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(var(--color-brand-rgb), 0.03); + opacity: 0; + transition: opacity 0.2s ease; +} + +.overview-stat:hover { + transform: translateY(-2px); + border-color: var(--color-brand); + box-shadow: var(--elevation-hover-2); +} + +.overview-stat:hover::before { + opacity: 1; +} + +/* Stat Icon - Container-based sizing following theme patterns */ + +.overview-stat__icon { + width: 1.25rem; + height: 1.25rem; + color: var(--color-text-secondary); + shrink: 0; + transition: color 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +/* SVG naturally fills container */ + +.overview-stat__icon svg { + width: 100%; + height: 100%; + display: block; +} + +.overview-stat:hover .overview-stat__icon { + color: var(--color-brand); +} + +/* Stat Content */ + +.overview-stat__content { + display: flex; + flex-direction: column; + gap: 0.125rem; + min-width: 0; + flex: 1; +} + +.overview-stat__label { + font-size: 0.75rem; + font-weight: 500; + color: var(--color-text-tertiary); + text-transform: uppercase; + letter-spacing: 0.025em; + line-height: 1; +} + +.overview-stat__value { + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + line-height: 1.2; + word-break: break-word; +} + +/* Stat Variants */ + +.overview-stat--primary { + background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); + color: var(--color-text-inverse); + border-color: transparent; +} + +.overview-stat--primary .overview-stat__icon, +.overview-stat--primary .overview-stat__label, +.overview-stat--primary .overview-stat__value { + color: currentColor; +} + +.overview-stat--primary .overview-stat__label { + opacity: 0.8; +} + +.overview-stat--primary:hover { + transform: translateY(-3px); + box-shadow: + 0 8px 20px rgba(var(--color-brand-rgb), 0.25), + 0 4px 8px rgba(0, 0, 0, 0.1); +} + +/* ========================================================================== + Description Section + ========================================================================== */ + +.overview-description { + padding: 1rem 1.25rem; + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + border-left: 3px solid var(--color-brand); +} + +.overview-description p { + margin: 0; + color: var(--color-text-secondary); + line-height: 1.6; + font-size: 0.875rem; +} + +/* ========================================================================== + Documentation Links + ========================================================================== */ + +.overview-documentation { + margin-top: 0.5rem; +} + +.overview-documentation__title { + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 1rem 0; +} + +.overview-documentation__grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 0.75rem; + margin-top: 1.5rem; +} + +.overview-doc-link { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.875rem 1rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + text-decoration: none; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; + position: relative; + overflow: hidden; +} + +.overview-doc-link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(var(--color-brand-rgb), 0.03); + opacity: 0; + transition: opacity 0.2s ease; +} + +.overview-doc-link:hover { + transform: translateY(-2px); + border-color: var(--color-brand); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); +} + +.overview-doc-link:hover::before { + opacity: 1; +} + +.overview-doc-link__icon { + width: 1.125rem; + height: 1.125rem; + color: var(--color-text-secondary); + shrink: 0; + transition: color 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +/* SVG naturally fills container */ + +.overview-doc-link__icon svg { + width: 100%; + height: 100%; + display: block; +} + +.overview-doc-link:hover .overview-doc-link__icon { + color: var(--color-brand); +} + +.overview-doc-link__content { + display: flex; + flex-direction: column; + gap: 0.125rem; + flex: 1; + min-width: 0; +} + +.overview-doc-link__title { + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-primary); + line-height: 1.3; + transition: color 0.2s ease; +} + +.overview-doc-link:hover .overview-doc-link__title { + color: var(--color-brand); +} + +.overview-doc-link__description { + font-size: 0.75rem; + color: var(--color-text-tertiary); + line-height: 1.4; +} + +.overview-doc-link__arrow { + width: 1rem; + height: 1rem; + color: var(--color-text-tertiary); + shrink: 0; + transition: + color 0.2s ease, + transform 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +/* SVG naturally fills container */ + +.overview-doc-link__arrow svg { + width: 100%; + height: 100%; + display: block; +} + +.overview-doc-link:hover .overview-doc-link__arrow { + color: var(--color-brand); + transform: translateX(2px) translateY(-2px); +} + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 768px) { + .overview-stats { flex-direction: column; gap: 0.5rem; } + + .overview-stat { min-width: unset; } + + .overview-documentation__grid { grid-template-columns: 1fr; } + + .overview-title { font-size: 1.5rem; } +} + +@media (max-width: 480px) { + .overview-stat { + gap: 0.5rem; + padding: 0.625rem 0.75rem; + min-height: 50px; + } + + .overview-stat__icon { + width: 1rem; + height: 1rem; + } + + .overview-doc-link { + gap: 0.5rem; + padding: 0.75rem; + } +} + +/* ========================================================================== + :has() Content-Aware Overview Enhancements + ========================================================================== */ + +/* Overview with documentation gets enhanced layout */ + +.openapi-overview:has(.overview-documentation) { + padding-bottom: 2rem; +} + +.openapi-overview:has(.overview-documentation) .overview-stats { + margin-bottom: 2rem; +} + +/* Stats container adapts based on number of stats */ + +.overview-stats:has(.overview-stat:nth-child(4)) { + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); +} + +.overview-stats:has(.overview-stat:nth-child(3)) { + grid-template-columns: repeat(3, 1fr); +} + +.overview-stats:has(.overview-stat:nth-child(2)) { + grid-template-columns: repeat(2, 1fr); +} + +/* Enhanced hover effects for overview with documentation */ + +.openapi-overview:has(.overview-documentation) .overview-stat:hover { + transform: translateY(-3px); + box-shadow: var(--elevation-hover-4); +} + +/* Documentation section gets enhanced styling when stats are present */ + +.openapi-overview:has(.overview-stats) .overview-documentation { + border-top: 1px solid var(--color-border-primary); + padding-top: 1.5rem; + margin-top: 1.5rem; +} + +/* Single stat gets special treatment */ + +.overview-stats:has(.overview-stat:only-child) .overview-stat { + max-width: 300px; + margin: 0 auto; +} + +/* API type specific enhancements */ + +[data-api-type="REST"] .overview-stat--secondary { + background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.1), rgba(var(--color-security-rgb), 0.1)); + border-color: rgba(var(--color-info-rgb), 0.2); +} + +[data-api-type="GraphQL"] .overview-stat--secondary { + background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); + border-color: rgba(var(--color-danger-rgb), 0.2); +} + +/* Maturity-based styling */ + +[data-maturity="stable"] .overview-stat--accent { + background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.1), rgba(var(--color-success-rgb), 0.1)); + border-color: rgba(var(--color-success-rgb), 0.2); +} + +[data-maturity="beta"] .overview-stat--accent { + background: linear-gradient(135deg, rgba(var(--color-warning-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); + border-color: rgba(var(--color-warning-rgb), 0.2); +} + +[data-maturity="alpha"] .overview-stat--warning { + background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-danger-rgb), 0.1)); + border-color: rgba(var(--color-danger-rgb), 0.2); +} + +/* OpenAPI Generated Pages Styles */ + +/* Styling for API overview, tag, and endpoint pages generated by content adapter */ + +/* ========================================================================== + API Overview Page + ========================================================================== */ + +.api-overview .api-endpoint-groups { + margin: 2rem 0; +} + +.endpoint-groups-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1.5rem; + margin-top: 1.5rem; +} + +.card--endpoint-group { + padding: 1.5rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; +} + +.card--endpoint-group:hover { + border-color: var(--color-brand-primary); + box-shadow: var(--elevation-hover-2); +} + +.card--endpoint-group h3 { + margin: 0 0 0.5rem 0; + font-size: 1.125rem; + font-weight: 600; +} + +.card--endpoint-group h3 a { + color: var(--color-text-primary); + text-decoration: none; +} + +.card--endpoint-group h3 a:hover { + color: var(--color-brand-primary); +} + +.card--endpoint-group p { + margin: 0 0 1rem 0; + color: var(--color-text-secondary); + font-size: 0.875rem; + line-height: 1.5; +} + +.endpoint-count { + font-size: 0.75rem; + color: var(--color-text-tertiary); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* ========================================================================== + API Tag Page + ========================================================================== */ + +.api-tag-header { + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--color-border-light); +} + +.api-tag-breadcrumb { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin-bottom: 0.5rem; +} + +.api-tag-breadcrumb a { + color: var(--color-brand-primary); + text-decoration: none; +} + +.api-tag-breadcrumb a:hover { + text-decoration: underline; +} + +.api-tag-header h1 { + margin: 0 0 0.5rem 0; + font-size: 2rem; + font-weight: 700; + color: var(--color-text-primary); +} + +.api-tag-description { + margin: 0; + color: var(--color-text-secondary); + font-size: 1rem; + line-height: 1.6; +} + +.card--endpoint-summary { + padding: 1.25rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + margin-bottom: 1rem; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; +} + +.card--endpoint-summary:hover { + border-color: var(--color-brand-border); + box-shadow: var(--elevation-hover-1); +} + +.endpoint-summary-header { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.endpoint-summary-info { + flex: 1; +} + +.endpoint-summary-info h3 { + margin: 0 0 0.5rem 0; + font-size: 1rem; + font-weight: 600; +} + +.endpoint-summary-info h3 a { + color: var(--color-text-primary); + text-decoration: none; + font-family: var(--font-mono, monospace); +} + +.endpoint-summary-info h3 a:hover { + color: var(--color-brand-primary); +} + +.endpoint-summary-description { + margin: 0; + color: var(--color-text-secondary); + font-size: 0.875rem; + line-height: 1.5; +} + +/* ========================================================================== + API Endpoint Page + ========================================================================== */ + +.api-endpoint-header { + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--color-border-light); +} + +.api-endpoint-breadcrumb { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin-bottom: 1rem; +} + +.api-endpoint-breadcrumb a { + color: var(--color-brand-primary); + text-decoration: none; +} + +.api-endpoint-breadcrumb a:hover { + text-decoration: underline; +} + +.endpoint-title-section { + margin-top: 1rem; +} + +.endpoint-method-path { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; +} + +.endpoint-path { + font-family: var(--font-mono, monospace); + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-primary); + background: var(--color-surface-alt); + padding: 0.375rem 0.75rem; + border-radius: 0.375rem; + border: 1px solid var(--color-border-primary); +} + +.api-endpoint-header h1 { + margin: 0 0 0.75rem 0; + font-size: 1.875rem; + font-weight: 700; + color: var(--color-text-primary); + line-height: 1.3; +} + +.endpoint-description { + margin: 0; + color: var(--color-text-secondary); + font-size: 1rem; + line-height: 1.6; +} + +/* ========================================================================== + Method Badges (Enhanced) + ========================================================================== */ + +.method-badge { + display: inline-block; + padding: 0.25rem 0.75rem; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + border-radius: 0.375rem; + letter-spacing: 0.025em; + shrink: 0; + min-width: 4rem; + text-align: center; +} + +/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ + +/* .method-badge--get { background: #10b981; color: white; } */ + +.method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } + +/* .method-badge--post { background: #3b82f6; color: white; } */ + +.method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } + +/* .method-badge--put { background: #f59e0b; color: white; } */ + +.method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } + +/* .method-badge--patch { background: #8b5cf6; color: white; } */ + +.method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } + +/* .method-badge--delete { background: #ef4444; color: white; } */ + +.method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } + +/* .method-badge--head, .method-badge--options { background: #6b7280; color: white; } */ + +.method-badge--head, +.method-badge--options { + background: var(--http-head-bg); + color: var(--http-head-text); +} + +/* ========================================================================== + Page Content Integration + ========================================================================== */ + +.page-content { + margin-top: 2rem; + padding-top: 2rem; + border-top: 1px solid var(--color-border-light); +} + +.page-content h2:first-child { + margin-top: 0; +} + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 768px) { + .endpoint-groups-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .endpoint-group-card { + padding: 1rem; + } + + .endpoint-summary-header { + flex-direction: column; + gap: 0.75rem; + } + + .endpoint-method-path { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .endpoint-path { + font-size: 1rem; + word-break: break-all; + } + + .api-endpoint-header h1 { + font-size: 1.5rem; + } +} + +/* ========================================================================== + Dark Mode Adjustments + ========================================================================== */ + +/* Dark mode handled via CSS variables in :root/.dark */ + +/* OpenAPI Parameters */ + +/* ========================================================================== + Parameters + ========================================================================== */ + +.parameters-container { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.parameters-section { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + overflow: hidden; +} + +.parameters-section-header { + padding: 1rem 1.5rem; + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); +} + +.parameters-section-title { + margin: 0; + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-primary); +} + +/* Parameter Group Headers */ + +.parameter-group-header { + padding: 0.75rem 1rem; + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); + cursor: pointer; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + display: flex; + align-items: center; + justify-content: space-between; +} + +.parameter-group-header:hover { + background: var(--color-bg-tertiary); +} + +.parameter-group-title { + margin: 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.parameter-count { + background: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); + padding: 0.125rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 500; +} + +.parameter-group-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; +} + +.parameter-group-toggle .chevron { + width: 0.875rem; + height: 0.875rem; + transition: transform var(--timing-fast) var(--easing-standard); +} + +.parameter-group-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); +} + +.parameter-list { + /* Height-based collapse (consistent with all components) */ + max-height: 0; + opacity: 0; + overflow: hidden; + padding: 0; + + /* Configure collapse behavior */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 1500px; /* Good for parameter lists */ + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 1rem; + --collapse-timing: 0.3s; + --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Remove old class-based approach - component-states.css handles this */ + +.parameters-list { + padding: 0; +} + +.parameter-item { + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--color-border-primary); + transition: background-color 0.2s ease; +} + +.parameter-item:last-child { + border-bottom: none; +} + +.parameter-item:hover { + background: var(--color-bg-secondary); +} + +.parameter-item--required { + border-left: 4px solid var(--color-brand); +} + +.parameter-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 0.75rem; +} + +.parameter-name { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.parameter-name code { + font-family: var(--font-family-mono); + font-weight: 600; + color: var(--color-brand); + background: rgba(var(--color-brand-rgb), 0.1); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.875rem; +} + +.parameter-required { + background: rgba(var(--color-danger-rgb), 0.1); + color: var(--color-danger); + padding: 0.125rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 600; +} + +.parameter-type { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.parameter-description { + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text-secondary); + margin-bottom: 0.75rem; +} + +.parameter-constraints { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.constraint-item { + background: var(--color-bg-tertiary); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.75rem; + color: var(--color-text-secondary); +} + +.constraint-label { + font-weight: 600; +} + +.constraint-value { + font-family: var(--font-family-mono); + color: var(--color-brand); +} + +/* OpenAPI Responses */ + +/* ========================================================================== + Response Sections + ========================================================================== */ + +.responses-container { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.response-item { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + overflow: hidden; +} + +.response-header { + padding: 0.75rem 1rem; + background: var(--color-bg-secondary); + cursor: pointer; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + display: flex; + align-items: center; + justify-content: space-between; +} + +.response-header:hover { + background: var(--color-bg-tertiary); +} + +.response-status { + display: flex; + align-items: center; + gap: 0.75rem; + flex: 1; +} + +.response-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; +} + +.response-toggle .chevron { + width: 0.875rem; + height: 0.875rem; + transition: transform var(--timing-fast) var(--easing-standard); +} + +.response-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); +} + +.response-details { + border-top: 1px solid var(--color-border-primary); + + /* Use height-based collapse (not display-based) for smooth animations */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 2000px; + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 1rem; + --collapse-timing: 0.3s; + --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); + + /* Start collapsed */ + max-height: 0; + opacity: 0; + overflow: hidden; + padding: 0; +} + +.response-description { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin: 0; +} + +/* Status Code Badges */ + +.status-code { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.25rem 0.75rem; + border-radius: 0.375rem; + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + min-width: 3rem; +} + +/* Old hex-based status colors commented out in favor of tokens per themes/milodocs/init */ + +/* .status-code--2xx { background: #22c55e; color: white; } +.status-code--3xx { background: #3b82f6; color: white; } +.status-code--4xx { background: #f59e0b; color: white; } +.status-code--5xx { background: #ef4444; color: white; } +.status-code--dxx { background: #6b7280; color: white; } */ + +.status-code--2xx { background: var(--status-2xx-bg); color: var(--status-2xx-text); } + +.status-code--3xx { background: var(--status-3xx-bg); color: var(--status-3xx-text); } + +.status-code--4xx { background: var(--status-4xx-bg); color: var(--status-4xx-text); } + +.status-code--5xx { background: var(--status-5xx-bg); color: var(--status-5xx-text); } + +.status-code--dxx { background: var(--status-dxx-bg); color: var(--status-dxx-text); } + +/* Response Content */ + +.response-content { + margin-top: 1rem; +} + +.response-content h6 { + margin: 0 0 0.75rem 0; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.response-media-type { + margin-bottom: 1rem; + padding: 0.75rem; + background: var(--color-bg-tertiary); + border-radius: 0.375rem; + border: 1px solid var(--color-border-primary); +} + +.media-type-label { + font-family: var(--font-family-mono); + font-size: 0.8rem; + font-weight: 600; + color: var(--color-brand); + margin-bottom: 0.5rem; +} + +.response-schema { + margin-top: 0.75rem; +} + +/* Response Headers */ + +.response-headers { + margin-bottom: 1rem; +} + +.response-headers h6 { + margin: 0 0 0.75rem 0; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.headers-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.header-item { + padding: 0.5rem 0.75rem; + background: var(--color-bg-tertiary); + border-radius: 0.25rem; + border: 1px solid var(--color-border-primary); +} + +.header-name { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.25rem; +} + +.header-name code { + font-family: var(--font-family-mono); + font-size: 0.8rem; + font-weight: 600; + color: var(--color-brand); +} + +.header-required { + background: rgba(var(--color-danger-rgb), 0.1); + color: var(--color-danger); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; +} + +.header-description { + font-size: 0.8rem; + color: var(--color-text-secondary); + margin-bottom: 0.25rem; +} + +.header-type { + display: flex; + align-items: center; + gap: 0.25rem; +} + +/* OpenAPI Responsive Styles */ + +/* ========================================================================== + Responsive & Mobile + ========================================================================== */ + +@media (max-width: 768px) { + .openapi-header { + padding: 2rem 1.5rem; + } + + .openapi-header__title { + font-size: 2rem; + } + + .openapi-header__info { + grid-template-columns: 1fr; + gap: 1rem; + } + + .section-title { + font-size: 2rem; + } + + .overview-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .endpoints-nav { + padding: 1rem; + } + + .endpoints-nav__tags, + .endpoints-nav__methods { + gap: 0.375rem; + } + + .tag-filter, + .method-filter { + padding: 0.375rem 0.75rem; + font-size: 0.8rem; + } + + .endpoint-header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + padding: 1rem; + } + + .endpoint-header__method { + align-self: flex-start; + } + + .endpoint-header__toggle { + position: absolute; + top: 1rem; + right: 1rem; + } + + .endpoint-details { + padding: 1rem; + } + + .property-item { + grid-template-columns: 1fr; + gap: 0.5rem; + } + + .code-tabs-nav { + flex-wrap: wrap; + } + + .code-tab { + padding: 0.75rem 1rem; + font-size: 0.8rem; + } + + .code-example-header { + padding: 0.75rem 1rem; + } + + .parameters-section-header, + .parameter-item { + padding: 0.75rem 1rem; + } +} + +@media (max-width: 480px) { + .openapi-header { + padding: 1.5rem 1rem; + } + + .openapi-header__title { + font-size: 1.75rem; + } + + .section-title { + font-size: 1.75rem; + } + + .overview-stat { + gap: 0.5rem; + padding: 0.625rem 0.75rem; + min-height: 50px; + } + + .overview-stat__icon { + width: 1rem; + height: 1rem; + } + + .overview-doc-link { + gap: 0.5rem; + padding: 0.75rem; + } + + .endpoint-header { + padding: 0.75rem; + } + + .endpoint-details { + padding: 0.75rem; + } +} + +/* ========================================================================== + Print Styles + ========================================================================== */ + +@media print { + .openapi-spec { + background: white !important; + color: black !important; + } + + .endpoint-details { + display: block !important; + } + + .code-tab-panel { + display: block !important; + } + + .endpoints-nav, + .copy-button, + .endpoint-header__toggle { + display: none !important; + } +} + +/* OpenAPI Schemas */ + +/* ========================================================================== + Schemas + ========================================================================== */ + +.schema-container { + background: transparent; + border: none; + border-left: 2px solid var(--color-border-primary); + border-radius: 0; + padding: 0.5rem 0 0.5rem 0.75rem; + margin: 0.5rem 0; +} + +.schema-container[data-level="0"] { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 0.375rem; + padding: 0.75rem; + border-left: none; +} + +.schema-container[data-level="1"] { + margin-left: 1rem; + border-left: 3px solid var(--color-brand); +} + +.schema-container[data-level="2"] { + margin-left: 2rem; + border-left: 3px solid var(--color-accent); +} + +.schema-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.5rem; +} + +.schema-title { + margin: 0; + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.schema-type-info { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.type-nullable, +.type-readonly, +.type-writeonly { + background: rgba(var(--color-text-secondary-rgb, 107, 114, 128), 0.1); + color: var(--color-text-secondary); + padding: 0.125rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 500; +} + +.schema-description { + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text-secondary); + margin-bottom: 1rem; +} + +.schema-constraints { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 1.5rem; + padding: 1rem; + background: var(--color-bg-tertiary); + border-radius: 0.5rem; + border: 1px solid var(--color-border-secondary); +} + +.schema-properties { + margin-bottom: 1.5rem; +} + +.schema-properties h6 { + margin: 0 0 1rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + padding: 0.5rem 0; + border-bottom: 1px solid var(--color-border-primary); +} + +.properties-list { + display: flex; + flex-direction: column; + gap: 0; + border: 1px solid var(--color-border-primary); + border-radius: 0.375rem; + overflow: hidden; +} + +.property-item { + background: var(--color-surface); + border: none; + border-bottom: 1px solid var(--color-border-primary); + border-radius: 0; + padding: 1rem 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + position: relative; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; +} + +.property-item:last-child { + border-bottom: none; +} + +.property-item:hover { + background: var(--color-bg-secondary); + transform: translateX(2px); +} + +.property-item--required { + border-left: 3px solid var(--color-brand); +} + +.property-header { + margin-bottom: 0; + display: flex; + align-items: center; + gap: 0.375rem; +} + +.property-name { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.property-name code { + font-family: var(--font-family-mono); + font-weight: 600; + color: var(--color-brand); + background: rgba(var(--color-brand-rgb), 0.1); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.875rem; +} + +.property-required { + background: rgba(var(--color-danger-rgb), 0.1); + color: var(--color-danger); + padding: 0.125rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 600; +} + +.property-schema { + margin-left: 0; +} + +/* Enhanced property information layout */ + +.property-meta { + display: flex; + align-items: center; + gap: 0.75rem; + margin-top: 0.25rem; +} + +.property-type { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.property-type .type-badge { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.025em; +} + +.property-format { + font-size: 0.75rem; + color: var(--color-text-secondary); + background: var(--color-bg-secondary); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; +} + +.property-description { + margin-top: 0.5rem; + font-size: 0.875rem; + color: var(--color-text-secondary); + line-height: 1.4; +} + +.property-constraints { + margin-top: 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.property-constraint { + font-size: 0.75rem; + color: var(--color-text-secondary); + background: var(--color-bg-secondary); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + border: 1px solid var(--color-border-secondary); +} + +/* Enhanced constraint styling */ + +.constraint-modifier { + font-size: 0.7rem; + color: var(--color-warning); + font-style: italic; + margin-left: 0.25rem; +} + +/* Array schema styling */ + +.schema-array-info { + margin-bottom: 1.5rem; +} + +.schema-array-info h6 { + margin: 0 0 1rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + padding: 0.5rem 0; + border-bottom: 1px solid var(--color-border-primary); +} + +.array-constraints { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.array-constraints .constraint { + display: flex; + align-items: center; + gap: 0.25rem; + font-size: 0.875rem; + background: var(--color-bg-secondary); + padding: 0.5rem 0.75rem; + border-radius: 0.375rem; + border: 1px solid var(--color-border-secondary); +} + +.array-item-schema { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + padding: 1rem; + margin-top: 0.5rem; +} + +/* Enhanced schema composition styling */ + +.schema-composition { + margin-bottom: 1.5rem; +} + +.schema-composition h6 { + margin: 0 0 1rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + padding: 0.5rem 0; + border-bottom: 1px solid var(--color-border-primary); +} + +.composition-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.composition-item { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + padding: 1rem; + position: relative; +} + +.composition-index { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-brand); + margin-bottom: 0.5rem; + text-transform: uppercase; + letter-spacing: 0.025em; +} + +/* ========================================================================== + :has() Content-Aware Schema Enhancements + ========================================================================== */ + +/* Schema containers adapt based on content type and complexity */ + +.schema-container:has(.schema-properties) { + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + rgba(var(--color-brand-rgb), 0.01) 100% + ); + border-left: 3px solid rgba(var(--color-brand-rgb), 0.3); +} + +.schema-container:has(.schema-array-info) { + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + rgba(var(--color-success-rgb), 0.01) 100% + ); + border-left: 3px solid rgba(var(--color-success-rgb), 0.3); +} + +.schema-container:has(.schema-composition) { + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + rgba(var(--color-accent-rgb), 0.01) 100% + ); + border-left: 3px solid rgba(var(--color-accent-rgb), 0.3); +} + +/* Schema properties section enhances based on property count */ + +.schema-properties:has(.properties-list .property-item:nth-child(n+5)) { + border: 2px solid rgba(var(--color-brand-rgb), 0.1); + border-radius: 0.5rem; + padding: 1rem; + background: rgba(var(--color-brand-rgb), 0.02); +} + +.schema-properties:has(.properties-list .property-item:nth-child(n+10)) { + border-color: rgba(var(--color-accent-rgb), 0.2); + background: rgba(var(--color-accent-rgb), 0.03); +} + +/* Properties adapt to required field density */ + +.properties-list:has(.property-item--required:nth-child(n+3)) { + border-left: 4px solid var(--color-warning); + padding-left: 0.5rem; +} + +/* Individual property items enhance based on content */ + +.property-item:has(.property-constraints) { + border-left: 2px solid rgba(var(--color-info-rgb), 0.4); + background: rgba(var(--color-info-rgb), 0.02); +} + +.property-item:has(.property-meta .property-format) { + border-left-color: rgba(var(--color-accent-rgb), 0.4); + background: rgba(var(--color-accent-rgb), 0.02); +} + +/* Schema constraints section adapts to constraint complexity */ + +.schema-constraints:has(.constraint:nth-child(n+3)) { + background: rgba(var(--color-bg-secondary-rgb), 0.5); + border: 1px solid var(--color-border-secondary); + border-radius: 0.5rem; + padding: 1rem; +} + +.schema-constraints:has(.constraint-modifier) { + border-left: 3px solid var(--color-warning); +} + +/* Array info enhances based on constraints */ + +.schema-array-info:has(.array-constraints .constraint:nth-child(n+2)) { + border: 1px solid rgba(var(--color-success-rgb), 0.2); + border-radius: 0.5rem; + padding: 1rem; + background: rgba(var(--color-success-rgb), 0.02); +} + +/* Schema composition gets enhanced styling */ + +.schema-composition:has(.composition-item:nth-child(n+3)) { + border: 2px solid rgba(var(--color-accent-rgb), 0.2); + border-radius: 0.75rem; + padding: 1.5rem; + background: rgba(var(--color-accent-rgb), 0.02); +} + +/* Nested schema containers get reduced visual weight */ + +.schema-container[data-level="1"]:has(.schema-properties) { + background: rgba(var(--color-bg-secondary-rgb), 0.3); + border-left-width: 2px; +} + +.schema-container[data-level="2"]:has(.schema-properties) { + background: rgba(var(--color-bg-secondary-rgb), 0.2); + border-left-width: 1px; +} + +/* Type-specific enhancements */ + +.schema-header:has(.type-badge--object) + .schema-constraints, +.schema-header:has(.type-badge--object) + * .schema-constraints { + border-top: 2px solid rgba(var(--color-brand-rgb), 0.1); +} + +.schema-header:has(.type-badge--array) + .schema-array-info { + border-top: 2px solid rgba(var(--color-success-rgb), 0.1); +} + +.schema-header:has(.type-badge--string) + .schema-constraints { + border-top: 2px solid rgba(var(--color-info-rgb), 0.1); +} + +/* Reference schemas get special styling */ + +.schema-container:has(.schema-ref) { + background: linear-gradient( + 135deg, + rgba(var(--color-accent-rgb), 0.05) 0%, + var(--color-surface) 100% + ); + border: 1px dashed rgba(var(--color-accent-rgb), 0.3); +} + +/* Error and debug styling adaptations */ + +.schema-container:has(.schema-ref-error) { + background: rgba(var(--color-danger-rgb), 0.05); + border: 1px solid rgba(var(--color-danger-rgb), 0.2); +} + +/* Schema References */ + +.schema-ref { + margin: 0.5rem 0; + padding: 0.5rem; + background: rgba(var(--color-brand-rgb), 0.05); + border-left: 3px solid var(--color-brand); + border-radius: 0 0.25rem 0.25rem 0; +} + +.ref-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +.ref-label { + font-size: 0.75rem; + font-weight: 600; + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.ref-name { + font-family: var(--font-family-mono); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-brand); +} + +.schema-ref-error { + padding: 0.75rem; + background: rgba(239, 68, 68, 0.05); + border: 1px solid rgba(239, 68, 68, 0.2); + border-radius: 0.375rem; + margin: 0.5rem 0; +} + +.schema-ref-error .error-message { + color: var(--color-danger); + font-weight: 500; + margin-bottom: 0.5rem; +} + +.debug-info { + font-size: 0.75rem; + color: var(--color-text-secondary); + background: var(--color-bg-tertiary); + padding: 0.5rem; + border-radius: 0.25rem; + margin-top: 0.5rem; +} + +.debug-info p { + margin: 0.25rem 0; +} + +.debug-info code { + font-family: var(--font-family-mono); + background: rgba(0, 0, 0, 0.1); + padding: 0.125rem 0.25rem; + border-radius: 0.125rem; +} + +/* Array and Object Indicators */ + +.schema-array-items, +.schema-object-properties { + margin-top: 0.75rem; +} + +.schema-array-items h6, +.schema-object-properties h6 { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-secondary); + margin-bottom: 0.5rem; +} + +/* Type Badges */ + +.type-badge { + display: inline-block; + padding: 0.125rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: lowercase; +} + +/* Old hex-based type colors commented out in favor of tokens per themes/milodocs/init */ + +/* .type-badge--string { background: rgba(34, 197, 94, 0.1); color: #059669; } +.type-badge--number, +.type-badge--integer { background: rgba(59, 130, 246, 0.1); color: #2563eb; } +.type-badge--boolean { background: rgba(168, 85, 247, 0.1); color: #7c3aed; } +.type-badge--array { background: rgba(245, 158, 11, 0.1); color: #d97706; } +.type-badge--object { background: rgba(239, 68, 68, 0.1); color: #dc2626; } +.type-badge--null { background: rgba(107, 114, 128, 0.1); color: #4b5563; } */ + +.type-badge--string { background: var(--type-string-bg); color: var(--type-string-text); } + +.type-badge--number { background: var(--type-number-bg); color: var(--type-number-text); } + +.type-badge--integer { background: var(--type-integer-bg); color: var(--type-integer-text); } + +.type-badge--boolean { background: var(--type-boolean-bg); color: var(--type-boolean-text); } + +.type-badge--array { background: var(--type-array-bg); color: var(--type-array-text); } + +.type-badge--object { background: var(--type-object-bg); color: var(--type-object-text); } + +.type-badge--null { background: var(--type-null-bg); color: var(--type-null-text); } + +.type-format { + font-size: 0.75rem; + color: var(--color-text-secondary); + font-style: italic; + margin-left: 0.25rem; +} + +/* OpenAPI Security */ + +/* ========================================================================== + Security Section + ========================================================================== */ + +.openapi-security { + padding: 2rem 0; +} + +.security-requirements { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.security-requirement { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + padding: 1.5rem; +} + +.security-scheme { + display: flex; + align-items: flex-start; + gap: 1rem; + margin-bottom: 1rem; +} + +.security-scheme:last-child { + margin-bottom: 0; +} + +.security-icon { + width: 2rem; + height: 2rem; + background: rgba(var(--color-brand-rgb), 0.1); + border-radius: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-brand); + shrink: 0; +} + +.security-info { + flex: 1; + min-width: 0; +} + +.security-name { + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 0.5rem 0; +} + +.security-type { + display: inline-block; + background: rgba(var(--color-accent-rgb), 0.1); + color: var(--color-accent); + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 0.75rem; +} + +.security-description { + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text-secondary); + margin-bottom: 1rem; +} + +.security-scopes { + margin-top: 1rem; +} + +.security-scopes h5 { + margin: 0 0 0.5rem 0; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.scopes-list { + display: flex; + flex-wrap: wrap; + gap: 0.375rem; +} + +.scope-item { + background: var(--color-bg-secondary); + color: var(--color-text-primary); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.75rem; + font-weight: 500; + border: 1px solid var(--color-border-primary); +} + +.security-details { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--color-border-primary); +} + +.security-detail { + font-size: 0.875rem; +} + +.security-detail strong { + color: var(--color-text-primary); + display: block; + margin-bottom: 0.25rem; +} + +.security-detail code { + font-family: var(--font-family-mono); + background: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); + padding: 0.125rem 0.25rem; + border-radius: 0.125rem; + font-size: 0.8rem; +} + +/* OpenAPI Servers */ + +/* ========================================================================== + Servers Section + ========================================================================== */ + +.openapi-servers { + padding: 2rem 0; +} + +.servers-list { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.server-item { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 1rem; + padding: 2rem; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; +} + +.server-item:hover { + border-color: var(--color-brand); + box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.1); +} + +.server-url { + font-family: var(--font-family-mono); + font-size: 1.125rem; + font-weight: 600; + color: var(--color-brand); + margin-bottom: 1rem; + word-break: break-all; +} + +.server-description { + font-size: 1rem; + line-height: 1.6; + color: var(--color-text-secondary); + margin-bottom: 1.5rem; +} + +.server-variables { + margin-top: 1.5rem; +} + +.server-variables h4 { + margin: 0 0 1rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.variables-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.variable-item { + background: var(--color-bg-secondary); + padding: 1rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border-primary); +} + +.variable-name { + font-family: var(--font-family-mono); + font-weight: 600; + color: var(--color-brand); + margin-bottom: 0.5rem; +} + +.variable-description { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin-bottom: 0.5rem; +} + +.variable-default { + font-size: 0.875rem; + color: var(--color-text-primary); +} + +.variable-default strong { + color: var(--color-text-primary); +} + +.variable-default code { + font-family: var(--font-family-mono); + background: rgba(var(--color-brand-rgb), 0.1); + padding: 0.125rem 0.25rem; + border-radius: 0.125rem; + color: var(--color-brand); +} + +/* OpenAPI Sidebar Styles */ + +/* Inspired by Mintlify's clean, hierarchical design */ + +/* ========================================================================== + OpenAPI Sidebar Base + ========================================================================== */ + +.openapi-sidebar-section { + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--color-border-light); +} + +.openapi-sidebar-section:last-child { + border-bottom: none; +} + +.openapi-sidebar-header { + margin-bottom: 1rem; +} + +.openapi-sidebar-title { + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 0.25rem 0; + line-height: 1.4; +} + +.openapi-sidebar-version { + display: inline-block; + padding: 0.125rem 0.5rem; + background: var(--color-brand-primary); + color: white; + font-size: 0.75rem; + font-weight: 500; + border-radius: 0.375rem; + margin-left: 0.5rem; +} + +.openapi-sidebar-description { + font-size: 0.875rem; + color: var(--color-text-secondary); + line-height: 1.5; + margin: 0.5rem 0 0 0; +} + +/* ========================================================================== + Navigation Links + ========================================================================== */ + +.openapi-sidebar-nav { + list-style: none; + margin: 0; + padding: 0; +} + +.openapi-sidebar-nav-item { + margin-bottom: 0.25rem; +} + +.openapi-sidebar-link { + display: flex; + align-items: center; + padding: 0.5rem 0.75rem; + color: var(--color-text-secondary); + text-decoration: none; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + transition: + background-color 0.15s ease, + border-color 0.15s ease, + color 0.15s ease, + transform 0.15s ease, + box-shadow 0.15s ease; + border: 1px solid transparent; +} + +.openapi-sidebar-link:hover { + color: var(--color-text-primary); + background: var(--color-surface-hover); +} + +.openapi-sidebar-link--active { + color: var(--color-brand-primary); + background: var(--color-brand-background); + border-color: var(--color-brand-border); + font-weight: 600; +} + +.openapi-sidebar-link-text { + flex: 1; +} + +/* ========================================================================== + Section Headers + ========================================================================== */ + +.openapi-sidebar-section-header { + margin-bottom: 1rem; +} + +.openapi-sidebar-section-header h4 { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* ========================================================================== + Tag Groups + ========================================================================== */ + +.openapi-sidebar-endpoints { + list-style: none; + margin: 0; + padding: 0; +} + +.openapi-sidebar-tag-group { + margin-bottom: 1rem; +} + +.openapi-sidebar-tag-header { + display: flex; + align-items: center; + margin-bottom: 0.5rem; +} + +.openapi-sidebar-tag-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + padding: 0; + margin-right: 0.5rem; + background: none; + border: none; + color: var(--color-text-secondary); + cursor: pointer; + border-radius: 0.25rem; + transition: + background-color 0.15s ease, + color 0.15s ease, + transform 0.15s ease; +} + +.openapi-sidebar-tag-toggle:hover { + color: var(--color-text-primary); + background: var(--color-surface-hover); +} + +.openapi-sidebar-chevron { + width: 0.875rem; + height: 0.875rem; + transition: transform 0.15s ease; +} + +.openapi-sidebar-tag-toggle--expanded .openapi-sidebar-chevron { + transform: rotate(90deg); +} + +.openapi-sidebar-tag-name { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); + text-transform: capitalize; +} + +/* ========================================================================== + Endpoints List + ========================================================================== */ + +.openapi-sidebar-endpoints-list { + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; + transition: max-height 0.15s ease, opacity 0.15s ease; +} + +.openapi-sidebar-endpoints-list--expanded { + /* Animation handled by display property changes in JS */ +} + +.openapi-sidebar-endpoint { + margin-bottom: 0.125rem; +} + +.openapi-sidebar-endpoint-link { + display: flex; + align-items: flex-start; + padding: 0.5rem 0.75rem; + color: var(--color-text-secondary); + text-decoration: none; + border-radius: 0.375rem; + font-size: 0.8125rem; + transition: + background-color 0.15s ease, + border-color 0.15s ease, + color 0.15s ease, + transform 0.15s ease; + border: 1px solid transparent; + margin-left: 1.75rem; /* Indent under tag */ + gap: 0.5rem; +} + +.openapi-sidebar-endpoint-link:hover { + color: var(--color-text-primary); + background: var(--color-surface-hover); +} + +.openapi-sidebar-endpoint-link--active { + color: var(--color-brand-primary); + background: var(--color-brand-background); + border-color: var(--color-brand-border); + font-weight: 500; +} + +/* ========================================================================== + HTTP Method Badges + ========================================================================== */ + +.openapi-sidebar-method { + display: inline-block; + padding: 0.125rem 0.375rem; + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + border-radius: 0.25rem; + min-width: 3rem; + text-align: center; + shrink: 0; + letter-spacing: 0.025em; +} + +.openapi-sidebar-method--get { background: var(--http-get-bg); color: var(--http-get-text); } + +.openapi-sidebar-method--post { background: var(--http-post-bg); color: var(--http-post-text); } + +.openapi-sidebar-method--put { background: var(--http-put-bg); color: var(--http-put-text); } + +.openapi-sidebar-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } + +.openapi-sidebar-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } + +.openapi-sidebar-method--head, +.openapi-sidebar-method--options { background: var(--http-head-bg); color: var(--http-head-text); } + +/* ========================================================================== + Endpoint Details + ========================================================================== */ + +.openapi-sidebar-endpoint-path { + flex: 1; + font-weight: 500; + color: var(--color-text-primary); + line-height: 1.3; + word-break: break-all; +} + +.openapi-sidebar-endpoint-summary { + display: block; + font-size: 0.75rem; + color: var(--color-text-tertiary); + line-height: 1.3; + margin-top: 0.125rem; + font-weight: 400; +} + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 768px) { + .openapi-sidebar-section { + margin-bottom: 1.5rem; + padding-bottom: 1rem; + } + + .openapi-sidebar-title { + font-size: 1rem; + } + + .openapi-sidebar-endpoint-link { + margin-left: 1.5rem; + padding: 0.375rem 0.5rem; + } + + .openapi-sidebar-method { + min-width: 2.5rem; + font-size: 0.625rem; + } +} + +/* ========================================================================== + Dark Mode Support + ========================================================================== */ + +@media (prefers-color-scheme: dark) { + .openapi-sidebar-version { background: var(--color-brand-primary-dark, var(--color-brand-primary)); } +} + +/* ========================================================================== + Focus States + ========================================================================== */ + +.openapi-sidebar-link:focus-visible, +.openapi-sidebar-endpoint-link:focus-visible, +.openapi-sidebar-tag-toggle:focus-visible { + outline: 2px solid var(--color-brand-primary); + outline-offset: 2px; +} + +/* ========================================================================== + Smooth Scrolling Enhancement + ========================================================================== */ + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + .openapi-sidebar-chevron, + .openapi-sidebar-endpoints-list { + transition: none; + } +} + +/* + * OpenAPI Single Endpoint Page Styles + * Content-aware styling using :has() selectors + */ + +/* ============================================================================= + Base Single Page Layout + ============================================================================= */ + +.api-endpoint { + /* Content-aware layout adjustments */ + container-type: inline-size; + container-name: endpoint-page; +} + +/* Override the hidden default - single pages should show endpoint details */ + +.api-endpoint .endpoint-details { + display: block; +} + +/* ============================================================================= + Header Enhancements with :has() + ============================================================================= */ + +/* Enhanced header when endpoint has both summary and description */ + +.api-endpoint-header:has(.endpoint-description) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-brand-rgb), 0.02) 100%); + border-left: 4px solid rgba(var(--color-brand-rgb), 0.3); + padding: 2rem; + border-radius: 0.75rem; + margin-bottom: 2rem; +} + +/* Method-specific header styling */ + +.api-endpoint-header:has(.method-badge--get) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(34, 197, 94, 0.02) 100%); + border-left-color: rgba(34, 197, 94, 0.3); +} + +.api-endpoint-header:has(.method-badge--post) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(59, 130, 246, 0.02) 100%); + border-left-color: rgba(59, 130, 246, 0.3); +} + +.api-endpoint-header:has(.method-badge--put) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(245, 158, 11, 0.02) 100%); + border-left-color: rgba(245, 158, 11, 0.3); +} + +.api-endpoint-header:has(.method-badge--delete) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(239, 68, 68, 0.02) 100%); + border-left-color: rgba(239, 68, 68, 0.3); +} + +.api-endpoint-header:has(.method-badge--patch) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(168, 85, 247, 0.02) 100%); + border-left-color: rgba(168, 85, 247, 0.3); +} + +/* ============================================================================= + Breadcrumb Enhancements + ============================================================================= */ + +.api-endpoint-breadcrumb { + margin-bottom: 1.5rem; + font-size: 0.875rem; + color: var(--color-text-muted); +} + +.api-endpoint-breadcrumb a { + color: var(--color-brand); + text-decoration: none; + transition: color 0.2s ease; +} + +.api-endpoint-breadcrumb a:hover { + color: var(--color-brand-dark); + text-decoration: underline; +} + +/* ============================================================================= + Content Area Enhancements with :has() + ============================================================================= */ + +/* Enhanced spacing for endpoints with multiple sections */ + +.api-endpoint-content:has(.endpoint-section:nth-child(n+3)) { + display: grid; + gap: 2rem; +} + +/* Special layout for complex endpoints */ + +.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { + container-type: inline-size; +} + +.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) .endpoint-details { + display: grid; + gap: 2.5rem; +} + +/* Enhanced visual hierarchy for parameter-heavy endpoints */ + +.endpoint-item:has([data-parameter-count]) { + /* Parameters count specific styling */ +} + +.endpoint-item:has([data-parameter-count="0"]) .endpoint-details { + /* Simplified layout for parameter-less endpoints */ + gap: 1.5rem; +} + +.endpoint-item:has([data-parameter-count^="1"]) .endpoint-section, +.endpoint-item:has([data-parameter-count^="2"]) .endpoint-section, +.endpoint-item:has([data-parameter-count^="3"]) .endpoint-section { + /* Enhanced styling for endpoints with 10+ parameters */ + border: 1px solid rgba(var(--color-border-rgb), 0.5); + border-radius: 0.5rem; + padding: 1.5rem; + background: rgba(var(--color-surface-rgb), 0.5); +} + +/* ============================================================================= + Section-Specific :has() Patterns + ============================================================================= */ + +/* Parameters Section */ + +.endpoint-details:has(.endpoint-parameters) { + /* Enhanced layout when parameters are present */ +} + +.endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { + /* Special handling for parameter-heavy endpoints */ + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +@container endpoint-page (max-width: 768px) { + .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { + grid-template-columns: 1fr; + } +} + +/* Request Body Section */ + +.endpoint-details:has(.endpoint-request-body) .endpoint-section { + border-left: 3px solid rgba(var(--color-brand-rgb), 0.2); + padding-left: 1rem; +} + +/* Responses Section */ + +.endpoint-details:has(.endpoint-responses) { + /* Enhanced styling when responses are present */ +} + +.endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { + /* Special handling for endpoints with many response types */ + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-success-rgb), 0.01) 100%); + border-radius: 0.75rem; + padding: 1.5rem; +} + +/* Security Section */ + +.endpoint-details:has(.endpoint-security) { + /* Enhanced styling when security requirements are present */ + border-top: 1px solid rgba(var(--color-border-rgb), 0.3); + padding-top: 2rem; +} + +/* Code Examples Section */ + +.endpoint-details:has(.endpoint-examples) { + /* Enhanced styling when code examples are present */ +} + +.endpoint-details:has(.endpoint-examples .example-tabs .tab-button:nth-child(n+4)) { + /* Special styling for endpoints with many code examples */ + background: rgba(var(--color-accent-rgb), 0.02); + border-radius: 0.5rem; + padding: 1rem; +} + +/* ============================================================================= + Method-Specific Page Styling + ============================================================================= */ + +/* GET endpoints - Success/data focused */ + +.api-endpoint[data-method="GET"] { + --endpoint-accent: rgba(34, 197, 94, 0.1); +} + +.api-endpoint[data-method="GET"]:has([data-has-responses="true"]) { + background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); +} + +/* POST endpoints - Creation focused */ + +.api-endpoint[data-method="POST"] { + --endpoint-accent: rgba(59, 130, 246, 0.1); +} + +.api-endpoint[data-method="POST"]:has([data-has-request-body="true"]) { + background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); +} + +/* PUT/PATCH endpoints - Update focused */ + +.api-endpoint[data-method="PUT"], +.api-endpoint[data-method="PATCH"] { + --endpoint-accent: rgba(245, 158, 11, 0.1); +} + +.api-endpoint[data-method="PUT"]:has([data-has-request-body="true"]):has([data-has-responses="true"]), +.api-endpoint[data-method="PATCH"]:has([data-has-request-body="true"]):has([data-has-responses="true"]) { + background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); +} + +/* DELETE endpoints - Deletion focused */ + +.api-endpoint[data-method="DELETE"] { + --endpoint-accent: rgba(239, 68, 68, 0.1); +} + +.api-endpoint[data-method="DELETE"]:has([data-has-responses="true"]) { + background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); +} + +/* ============================================================================= + Complexity-Based Styling + ============================================================================= */ + +/* Simple endpoints (no parameters, no request body) */ + +.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] { + /* Simplified, clean layout */ +} + +.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] .endpoint-details { + gap: 1rem; +} + +/* Complex endpoints (has parameters, request body, and multiple responses) */ + +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]), +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]), +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) { + /* Enhanced organization for complex endpoints */ +} + +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { + border: 1px solid rgba(var(--color-border-rgb), 0.2); + border-radius: 1rem; + padding: 2rem; + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-accent-rgb), 0.01) 100%); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +/* ============================================================================= + Responsive Enhancements + ============================================================================= */ + +@container endpoint-page (max-width: 768px) { + .api-endpoint-header:has(.endpoint-description) { + padding: 1.5rem; + margin-bottom: 1.5rem; + } + + .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+3)) { + grid-template-columns: 1fr; + } + + .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, + .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, + .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { + padding: 1rem; + } +} + +/* ============================================================================= + Accessibility Enhancements + ============================================================================= */ + +/* Enhanced focus styles for interactive elements */ + +.api-endpoint:has(:focus-visible) { + /* Container styling when child elements have focus */ +} + +/* Reduced motion preferences */ + +@media (prefers-reduced-motion: reduce) { + .api-endpoint-header:has(.endpoint-description), + .endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { + background: var(--color-surface); + transition: none; + } +} + +/* OpenAPI Code Examples */ + +/* ========================================================================== + Code Examples + ========================================================================== */ + +.code-examples { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 1rem; + overflow: hidden; +} + +.code-tabs-nav { + display: flex; + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); +} + +.code-tab { + background: transparent; + border: none; + padding: 0.75rem 1rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-secondary); + cursor: pointer; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; + border-bottom: 3px solid transparent; +} + +.code-tab:hover, +.code-tab--active { + color: var(--color-brand); + background: rgba(var(--color-brand-rgb), 0.05); + border-bottom-color: var(--color-brand); +} + +.code-tabs-content { + position: relative; +} + +.code-tab-panel { + display: none; +} + +.code-tab-panel--active { + display: block; +} + +.code-example { + position: relative; +} + +.code-example-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.625rem 1rem; + background: var(--color-bg-tertiary); + border-bottom: 1px solid var(--color-border-primary); +} + +.code-example-title { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.copy-button { + display: flex; + align-items: center; + justify-content: center; + width: 1.75rem; + height: 1.75rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.375rem; + color: var(--color-text-secondary); + cursor: pointer; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; +} + +.copy-button:hover { + background: var(--color-brand); + border-color: var(--color-brand); + color: var(--color-text-inverse); +} + +.copy-button svg { + width: 0.95rem; + height: 0.95rem; +} + +.code-example pre { + margin: 0; + padding: 0.875rem 1rem; + background: var(--color-bg-code); + overflow-x: auto; +} + +.code-example code { + font-family: var(--font-family-mono); + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text-code); +} + +/* =============================================== + Modern CSS Utilities - Native, No Framework + =============================================== */ + +/* Container Queries for Responsive Components */ + +.container { + container-type: inline-size; + max-width: var(--max-width-content); + margin-inline: auto; + padding-inline: var(--space-4); +} + +/* Modern Flexbox Utilities */ + +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +.flex-between { + display: flex; + align-items: center; + justify-content: space-between; +} + +.flex-start { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +/* Grid Utilities */ + +.grid-auto { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--space-4); +} + +.grid-2 { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-4); +} + +.grid-3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-4); +} + +/* Responsive Grid with Container Queries */ + +@container (max-width: 600px) { + .grid-2, .grid-3 { + grid-template-columns: 1fr; + } +} + +/* Visual Utilities */ + +.visually-hidden { + 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; +} + +.focus-ring { + outline: 2px solid var(--color-border-focus); + outline-offset: 2px; +} + +/* Modern CSS Features */ + +.smooth-scroll { + scroll-behavior: smooth; +} + +.text-balance { + text-wrap: balance; +} + +/* =============================================== + Theme-Aware Utilities + =============================================== */ + +/* Background Colors */ + +.bg-primary { background-color: var(--color-bg-primary); } + +.bg-secondary { background-color: var(--color-bg-secondary); } + +.bg-tertiary { background-color: var(--color-bg-tertiary); } + +.bg-surface { background-color: var(--color-surface); } + +/* Text Colors */ + +.text-primary { color: var(--color-text-primary); } + +.text-secondary { color: var(--color-text-secondary); } + +.text-tertiary { color: var(--color-text-tertiary); } + +/* Border Colors */ + +.border-primary { border-color: var(--color-border-primary); } + +.border-secondary { border-color: var(--color-border-secondary); } + +/* Interactive States */ + +.hover\:bg-surface-hover:hover { + background-color: var(--color-surface-hover); +} + +.hover\:bg-surface-active:active { + background-color: var(--color-surface-active); +} + +/* =============================================== + Typography Scale + =============================================== */ + +.text-xs { font-size: var(--font-size-xs); } + +.text-sm { font-size: var(--font-size-sm); } + +.text-base { font-size: var(--font-size-base); } + +.text-lg { font-size: var(--font-size-lg); } + +.text-xl { font-size: var(--font-size-xl); } + +.text-2xl { font-size: var(--font-size-2xl); } + +.text-3xl { font-size: var(--font-size-3xl); } + +/* =============================================== + Spacing Utilities + =============================================== */ + +.p-0 { padding: 0; } + +.p-1 { padding: var(--space-1); } + +.p-2 { padding: var(--space-2); } + +.p-3 { padding: var(--space-3); } + +.p-4 { padding: var(--space-4); } + +.p-6 { padding: var(--space-6); } + +.p-8 { padding: var(--space-8); } + +.m-0 { margin: 0; } + +.m-1 { margin: var(--space-1); } + +.m-2 { margin: var(--space-2); } + +.m-3 { margin: var(--space-3); } + +.m-4 { margin: var(--space-4); } + +.m-6 { margin: var(--space-6); } + +.m-8 { margin: var(--space-8); } + +/* Auto margins for centering */ + +.mx-auto { margin-left: auto; margin-right: auto; } + +.my-auto { margin-top: auto; margin-bottom: auto; } + +/* =============================================== + Generic Layout Patterns + =============================================== */ + +/* Article Header Patterns */ + +.article-header { + display: flex; + flex-direction: column; + gap: var(--space-4); + margin-bottom: var(--space-6); +} + +.article-description { + display: flex; + align-items: center; + gap: var(--space-4); + margin-bottom: var(--space-6); +} + +.step-validation { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-md); + padding: var(--space-4); + margin: var(--space-4) 0; +} + +/* =============================================== + Typography Enhancements + =============================================== */ + +/* Font Weight Utilities */ + +.font-light { font-weight: 300; } + +.font-normal { font-weight: 400; } + +.font-medium { font-weight: 500; } + +.font-semibold { font-weight: 600; } + +.font-bold { font-weight: 700; } + +.font-black { font-weight: 900; } + +/* Text Opacity Utilities */ + +.text-opacity-80 { opacity: 0.8; } + +.text-opacity-70 { opacity: 0.7; } + +.text-opacity-60 { opacity: 0.6; } + +/* List Styles */ + +.list-disc { list-style-type: disc; } + +.list-inside { list-style-position: inside; } + +/* =============================================== + Advanced Layout Utilities + =============================================== */ + +/* Flexible Sizing */ + +.flex-1 { flex: 1; } + +.flex-shrink-0 { flex-shrink: 0; } + +.w-full { width: 100%; } + +.h-full { height: 100%; } + +/* Specific Sizing (commonly used) */ + +.w-1 { width: 0.25rem; } + +.w-5 { width: 1.25rem; } + +.h-5 { height: 1.25rem; } + +.h-16 { height: 4rem; } + +/* Gap Utilities */ + +.gap-2 { gap: var(--space-2); } + +.gap-3 { gap: var(--space-3); } + +.gap-4 { gap: var(--space-4); } + +.gap-6 { gap: var(--space-6); } + +/* Space Between (for flex/grid children) */ + +.space-y-2 > * + * { margin-top: var(--space-2); } + +.space-y-4 > * + * { margin-top: var(--space-4); } + +/* =============================================== + Interactive Utilities + =============================================== */ + +/* Transition Utilities */ + +.transition-colors { + transition: color var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard); +} + +.duration-200 { transition-duration: 0.2s; } + +/* Border Radius */ + +.rounded { border-radius: var(--radius-sm); } + +.rounded-md { border-radius: var(--radius-md); } + +.rounded-lg { border-radius: var(--radius-lg); } + +.rounded-full { border-radius: 9999px; } + +/* =============================================== + Responsive Typography Scale + =============================================== */ + +/* Large heading scale for hero sections */ + +.text-4xl { + font-size: var(--font-size-4xl, 2.25rem); + line-height: 1.1; +} + +.text-5xl { + font-size: var(--font-size-5xl, 3rem); + line-height: 1; +} + +/* Responsive scaling */ + +@media (min-width: 1024px) { + .lg\:text-5xl { + font-size: var(--font-size-5xl, 3rem); + line-height: 1; + } +} + +@media (min-width: 768px) { + .md\:grid-cols-2 { + grid-template-columns: repeat(2, 1fr); + } +} + +/* =============================================== + Modern CSS Features - Beyond TailwindCSS + =============================================== */ + +/* Container Queries for Truly Responsive Components */ + +.responsive-grid { + display: grid; + gap: var(--space-4); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + +@container (max-width: 500px) { + .responsive-grid { + grid-template-columns: 1fr; + } +} + +/* CSS Subgrid for Perfect Alignment */ + +.subgrid-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-4); +} + +.subgrid-item { + display: grid; + grid-template-rows: subgrid; + grid-row: span 3; +} + +/* Advanced Typography with text-wrap */ + +.balanced-text { + text-wrap: balance; + max-width: 60ch; +} + +.no-wrap { + text-wrap: nowrap; +} + +/* CSS Scroll-driven Animations */ + +.fade-in-on-scroll { + animation: fade-in linear; + animation-timeline: view(); + animation-range: entry 0% cover 20%; +} + +@keyframes fade-in { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +/* CSS Anchor Positioning (Future) */ + +.tooltip { + position: absolute; + anchor-name: --tooltip; + inset-area: top; + margin-bottom: 5px; +} + +/* Logical Properties for International Support */ + +.content-block { + margin-block: var(--space-4); + padding-inline: var(--space-4); + border-inline-start: 3px solid var(--color-brand); +} + +/* =============================================== + Accessibility Enhancements + =============================================== */ + +/* Reduced Motion Support */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .fade-in-on-scroll { + animation: none; + } +} + +/* High Contrast Support */ + +@media (prefers-contrast: high) { + .link-card { + border-width: 2px; + } + + .alert-warning { + border-width: 2px; + } +} + +/* Focus Management */ + +.skip-link { + position: absolute; + top: -40px; + left: 6px; + background: var(--color-bg-primary); + color: var(--color-text-primary); + padding: 8px; + z-index: 1000; + text-decoration: none; + border-radius: var(--radius-sm); +} + +.skip-link:focus { + top: 6px; +} \ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.json b/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.json new file mode 100644 index 00000000..99133716 --- /dev/null +++ b/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.json @@ -0,0 +1 @@ +{"Target":"/css/main.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/exampleSite/tailwind.config.js b/exampleSite/tailwind.config.js deleted file mode 100644 index 91d5bf95..00000000 --- a/exampleSite/tailwind.config.js +++ /dev/null @@ -1,24 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ["content/**/*.md", "layouts/**/*.html", "assets/js/**/*.js", "themes/milodocs/**"], - theme: { - extend: { - colors: { - brand: "var(--color-brand)", - "brand-1": "var(--color-brand-1)", - "brand-2": "var(--color-brand-2)", - "brand-3": "var(--color-brand-3)", - "brand-4": "var(--color-brand-4)", - "brand-5": "var(--color-brand-5)", - "brand-6": "var(--color-brand-6)", - "brand-7": "var(--color-brand-7)", - }, - fontFamily: { - "brand": ["Rubik", "sans-serif"], - "brand-italic": ["Rubik", "sans-serif", "italic"], - }, - }, - }, - plugins: [], -}; - diff --git a/exampleSite/themes/milodocs b/exampleSite/themes/milodocs new file mode 120000 index 00000000..c25bddb6 --- /dev/null +++ b/exampleSite/themes/milodocs @@ -0,0 +1 @@ +../.. \ No newline at end of file diff --git a/html_master_plan.md b/html_master_plan.md new file mode 100644 index 00000000..57fc3442 --- /dev/null +++ b/html_master_plan.md @@ -0,0 +1,186 @@ +# HTML Master Plan - MiloDocs Enterprise Theme + +## Executive Summary + +**Goal**: Clean, semantic HTML for 143 template files supporting enterprise technical documentation +**Strategy**: Consolidate redundant templates, establish patterns, build incrementally +**Priority**: Core functionality first, specialized content types second + +## Template Consolidation Strategy + +### ✅ COMPLETED (4 files) +- `_default/baseof.html` - Master template foundation +- `_default/single.html` - Technical articles +- `_default/list.html` - Section/listing pages +- `_default/home.html` - Homepage + +### 🔥 PHASE 1: Core Navigation & Layout (8 files) +**Priority**: Critical - Site unusable without these + +1. **`partials/header.html`** - Site header with branding +2. **`partials/footer.html`** - Site footer with links +3. **`partials/navigation/sidebar-left.html`** - Primary navigation ✨ Clean up existing +4. **`partials/navigation/sidebar-right.html`** - TOC/metadata ✨ Clean up existing +5. **`partials/navigation/topbar/main.html`** - Top navigation bar ✨ Clean up existing +6. **`partials/navigation/breadcrumbs.html`** - Breadcrumb navigation ✨ Clean up existing +7. **`partials/head.html`** - HTML head with meta ✨ Clean up existing +8. **`404.html`** - Error page + +### 📄 PHASE 2: Article Components (12 files) +**Priority**: High - Core content functionality + +1. **`partials/article/header.html`** - Article headers with metadata +2. **`partials/article/toc.html`** - Table of contents +3. **`partials/article/next-prev.html`** - Page navigation +4. **`partials/article/metadata.html`** - Article metadata display +5. **`partials/article/status-warnings.html`** - Content status alerts +6. **`partials/article/page-resources.html`** - Related downloads/links +7. **`partials/article/related-content.html`** - Related articles +8. **`partials/article/tiles.html`** - Content cards for home/sections +9. **`partials/article/table-of-contents.html`** - Inline TOC +10. **`partials/article/toc-items.html`** - TOC list items (consolidate into main TOC) +11. **`partials/article/child-links.html`** - Child page links +12. **`partials/article/copy-page.html`** - Copy page functionality + +### 🔧 PHASE 3: Specialized Layouts (8 files - Consolidate from 18) +**Priority**: Medium - Content type support + +#### API Documentation (4 files - from 35 files) +1. **`openapi/single.html`** - API documentation pages +2. **`partials/openapi/overview.html`** - API overview section +3. **`partials/openapi/endpoints.html`** - Endpoint listings +4. **`partials/openapi/schemas.html`** - Schema documentation + +**❌ REMOVE**: Most openapi partials (35→4) - Too granular, consolidate into main templates + +#### Specialized Content (4 files) +1. **`notebook/single.html`** - Jupyter notebook display +2. **`_default/glossary.html`** - Glossary/reference pages +3. **`_default/api.html`** - API landing pages (merge with openapi/single.html) +4. **`object-model/single.html`** - Object model documentation + +**❌ REMOVE**: +- `tutorial/single.html`, `tutorial/section.html` (use default layouts) +- `release-notes/section.html` (use default list layout) +- `api-landing.html` (consolidate with api.html) + +### 🎛️ PHASE 4: Essential Shortcodes (12 files - from 27) +**Priority**: Medium - Content enhancement + +#### Keep & Clean (12 files) +1. **`shortcodes/notice.html`** - Alert/callout boxes +2. **`shortcodes/collapse.html`** - Collapsible content +3. **`shortcodes/tab.html`** - Tabbed content +4. **`shortcodes/video.html`** - Video embeds +5. **`shortcodes/mermaid.html`** - Diagrams +6. **`shortcodes/asciinema.html`** - Terminal recordings +7. **`shortcodes/csv.html`** - CSV table display +8. **`shortcodes/quicklinks.html`** - Link collections +9. **`shortcodes/include.html`** - File includes +10. **`shortcodes/readfile.html`** - File content display +11. **`shortcodes/sphinx.html`** - Sphinx documentation +12. **`shortcodes/rst.html`** - reStructuredText support + +#### Remove (15 files) - Minimal value +**❌ REMOVE**: +- Simple text replacements: `productName.html`, `orgName.html`, `prod.html`, `ascii.html`, `shared.html` +- Version helpers: `version.html`, `release/*` (4 files) +- Doc generators: `pdoc.html`, `pdoc-2.html`, `helm.html` +- Simple embeds: `logo.html`, `linkref.html` + +### 🔧 PHASE 5: Utility Partials (8 files - from 20) +**Priority**: Low - Helper functions + +#### Keep & Clean (8 files) +1. **`partials/head/css.html`** - CSS loading ✅ Already clean +2. **`partials/head/js.html`** - JavaScript loading +3. **`partials/utils/meta.html`** - SEO metadata +4. **`partials/utils/layout-config.html`** - Layout configuration +5. **`partials/utils/title-guard.html`** - Title display logic +6. **`partials/utils/page-kind.html`** - Page type detection +7. **`partials/logo.html`** - Site logo component +8. **`partials/welcome.html`** - Empty state message + +#### Remove (12 files) - Overly specific +**❌ REMOVE**: +- Debugging: `css/stats-analyzer.html`, `css/purge-analyzer.html` +- Unused: `searchResultsContainer.html`, `terms.html` +- Consolidate: `utils/breadcrumbs-data.html`, `utils/right-rail.html` (merge into main components) +- Notebook partials (6 files) - consolidate into single notebook template +- API partials (8 files) - too granular + +## Implementation Order + +### Week 1: Core Foundation +- [x] Core layouts (baseof, single, list, home) +- [ ] Navigation partials (header, footer, sidebars, breadcrumbs) +- [ ] 404 page + +### Week 2: Content System +- [ ] Article partials (header, TOC, metadata, navigation) +- [ ] Head/meta partials cleanup + +### Week 3: Specialized Content +- [ ] API documentation templates +- [ ] Notebook display templates +- [ ] Glossary and reference layouts + +### Week 4: Content Enhancement +- [ ] Essential shortcodes cleanup +- [ ] Utility partials consolidation + +### Week 5: Final Cleanup +- [ ] Remove redundant files +- [ ] Test all content types +- [ ] Documentation + +## HTML Quality Standards + +### Semantic Structure +```html + +
+
+

Title

+
+ +
+
+
+ Content... +
+
+``` + +### Data Attributes for JavaScript +```html + + +``` + +### Accessibility Requirements +- All interactive elements have proper ARIA labels +- Semantic HTML elements used correctly +- Focus management for dynamic content +- Screen reader support via live regions +- Keyboard navigation support + +## File Reduction Summary + +- **Before**: 143 HTML files +- **After**: ~50 essential files +- **Reduction**: 65% fewer files to maintain +- **Focus**: Core functionality, better maintainability + +## Next Steps + +1. Execute phases in order +2. Test each phase thoroughly +3. Remove redundant files after replacement +4. Document new patterns for team use + +This consolidation will create a more maintainable, focused codebase while preserving all essential functionality for enterprise technical documentation. diff --git a/html_quality_analysis.md b/html_quality_analysis.md new file mode 100644 index 00000000..c0db9009 --- /dev/null +++ b/html_quality_analysis.md @@ -0,0 +1,158 @@ +# HTML Quality Analysis - MiloDocs + +## Current State Assessment + +### Issues Identified + +1. **Mixed CSS Approach** - Templates contain both Tailwind classes AND CSS custom properties (inline styles) +2. **Inconsistent Semantic Structure** - Some good practices mixed with divitis +3. **Class Dependencies** - Many CSS classes that no longer exist, causing visual breaks +4. **Accessibility Gaps** - Missing ARIA labels, focus management issues +5. **Inline Styles** - Using CSS custom properties in style attributes instead of clean semantic classes + +### Examples of Problems + +#### baseof.html +```html + + + +
+``` + +#### single.html +```html + +

{{ .Title }}

+
+ +``` + +#### sidebar-left.html +```html + +
+ + {{/* Search suggestion */}} +
+

What you can do:

+
    +
  • Check the URL for typos
    • +
  • Use the search function to find what you're looking for
    • +
  • Browse our main sections below
    • +
  • Contact us if you think this is an error
    • +
+
+ + {{/* Helpful links */}} + {{ if .Site.Sections }} + + {{ end }} + + + + +{{ end }} \ No newline at end of file diff --git a/layouts/_default/api.html b/layouts/_default/api.html index d8e0354b..bcc760c6 100644 --- a/layouts/_default/api.html +++ b/layouts/_default/api.html @@ -1,25 +1,151 @@ -{{- define "main" }} -{{- $reference := .Page.Params.reference -}} +{{- define "main" -}} +{{ $reference := .Page.Params.reference }} -{{- range $data, $spec := .Site.Data -}} -{{- if eq $data $reference -}} -{{- with $spec -}} - -
-
- -
-

{{ .info.title }}

-

{{ $.Page.RenderString .info.description }}

-

Version: {{ .info.version }}

-
- - {{- partial "api/paths.html" $spec.paths -}} - - {{- partial "api/components.html" $spec.components -}} +
+ +
+
+ {{ partial "navigation/breadcrumbs.html" . }}
-
-{{- end -}} -{{- end -}} -{{- end -}} -{{- end -}} + + + {{ range $data, $spec := .Site.Data }} + {{ if eq $data $reference }} + {{ with $spec }} + +
+ + {{/* API Information */}} +
+
+

{{ .info.title }}

+ +
+
+ +
+
Version
+
+ {{ .info.version }} +
+
+ + {{ with .info.contact }} +
+
Contact
+
+ {{ if .url }} + + {{ .name | default .url }} + + {{ else }} + {{ .name }} + {{ end }} + {{ with .email }} + {{ . }} + {{ end }} +
+
+ {{ end }} + + {{ with .info.license }} +
+
License
+
+ {{ if .url }} + + {{ .name }} + + {{ else }} + {{ .name }} + {{ end }} +
+
+ {{ end }} + +
+
+
+ + {{ with .info.description }} +
+ {{ $.Page.RenderString . }} +
+ {{ end }} + + {{ with .servers }} +
+

Base URLs

+
    + {{ range . }} +
  • + {{ .url }} + {{ with .description }} + {{ . }} + {{ end }} +
    • + {{ end }} +
+
+ {{ end }} + +
+ + {{/* API Endpoints */}} + {{ with .paths }} +
+

API Endpoints

+ {{ partial "api/paths.html" . }} +
+ {{ end }} + + {{/* API Components */}} + {{ with .components }} +
+

API Components

+ {{ partial "api/components.html" . }} +
+ {{ end }} + + {{/* API Security */}} + {{ with .security }} +
+

Authentication

+ {{ partial "api/security.html" . }} +
+ {{ end }} + + {{/* API Tags */}} + {{ with .tags }} +
+

API Categories

+
+ {{ range . }} +
+

{{ .name }}

+ {{ with .description }} +

{{ . }}

+ {{ end }} +
+ {{ end }} +
+
+ {{ end }} + +
+ + {{ end }} + {{ end }} + {{ end }} + + +{{- end -}} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 32b6e64f..1bd79ddf 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,91 +1,105 @@ - + + + + + + {{/* SEO and meta information */}} {{ partial "head.html" . }} {{ block "head-extra" . }}{{ end }} - -
- {{- partial "header.html" . -}} + + + {{/* Skip link for accessibility */}} + + + {{/* Site header */}} + - {{- block "top-bar" . -}}{{- end -}} - - {{/* Unified layout config via util partial */}} - {{- $cfg := partial "utils/layout-config.html" (dict "site" .Site "page" .) -}} - {{- $rightRail := eq (partial "utils/right-rail.html" (dict "site" .Site "page" .)) "true" -}} - {{- $leftRailWidth := $cfg.leftRailWidth | default "" -}} - {{- $rightRailWidth := $cfg.rightRailWidth | default "" -}} - {{- $densityClass := cond (eq $cfg.density "compact") "layout-density--compact" "layout-density--comfortable" -}} - - {{/* Compose style vars for layout-shell */}} - {{- $styleVars := slice -}} - {{- if not $rightRail -}} - {{- $styleVars = $styleVars | append "--right-rail-width:0" | append "--right-rail-width-2xl:0" -}} - {{- end -}} - {{- with $leftRailWidth -}} - {{- $styleVars = $styleVars | append (printf "--left-rail-width:%s" .) | append (printf "--left-rail-width-2xl:%s" .) -}} - {{- end -}} - {{- with $rightRailWidth -}} - {{- $styleVars = $styleVars | append (printf "--right-rail-width:%s" .) | append (printf "--right-rail-width-2xl:%s" .) -}} - {{- end -}} - - {{/*
*/}} -
- - {{- block "sidebar-left" . -}}{{- end -}} - {{/*
*/}} -
- - {{ block "loading-skeleton" . }} - {{- $lc := partial "utils/layout-config.html" (dict "site" .Site "page" .) -}} - {{- if $lc.skeleton -}} -
-
-
-
-
-
-
-
-
- {{- end -}} + + {{/* Top navigation bar */}} + {{ block "site-navigation" . }} + {{ partial "navigation/topbar/main.html" . }} + {{ end }} + + {{/* Main content area */}} +
+
+ + {{/* Breadcrumb navigation */}} + {{ block "breadcrumbs" . }} + {{ if not .IsHome }} + + {{ end }} {{ end }} - -
- {{- block "page-header" . -}}{{- end -}} - {{- block "pre-content" . -}}{{- end -}} - {{- if .IsHome -}} - {{- block "home" . -}}{{- end -}} - {{- else if or (eq .Kind "section") (eq .Kind "taxonomy") (eq .Kind "term") -}} - {{- block "list" . -}}{{- end -}} - {{- else -}} - {{- if eq .Kind "page" -}}{{- partial "article/summarization.html" . -}}{{- end -}} - {{- block "breadcrumbs" . -}}{{- end -}} - {{- block "content" . -}}{{- end -}} - {{- end -}} - {{- block "post-content" . -}}{{- end -}} - {{- block "innerFooter" . -}}{{- end -}} + {{/* Content layout */}} +
+ + {{/* Left sidebar - Primary navigation */}} + + + {{/* Primary content area */}} +
+ {{/* Page-specific header */}} + {{ block "page-header" . }}{{ end }} + + {{/* Main content blocks */}} + {{- if .IsHome -}} + {{ block "home-content" . }}{{ end }} + {{- else if or (eq .Kind "section") (eq .Kind "taxonomy") (eq .Kind "term") -}} + {{ block "list-content" . }}{{ end }} + {{- else -}} + {{ block "single-content" . }}{{ end }} + {{- end -}} + + {{/* Page footer actions */}} + {{ block "page-footer" . }}{{ end }} +
+ + {{/* Right sidebar - Table of contents, metadata */}} + +
- {{- partial "searchResultsContainer.html" . -}} - - {{- if $rightRail -}} - - {{- end -}}
-
- {{- partial "footer.html" . -}} + + {{/* Site footer */}} +
+ {{ block "site-footer" . }} + {{ partial "footer.html" . }} + {{ end }}
- {{ block "scripts" . }}{{ end }} - + {{/* JavaScript and analytics */}} + {{ block "scripts" . }} + {{ partial "head/js.html" . }} + {{ end }} + - + \ No newline at end of file diff --git a/layouts/_default/glossary.html b/layouts/_default/glossary.html index e0e944bd..0fbb005e 100644 --- a/layouts/_default/glossary.html +++ b/layouts/_default/glossary.html @@ -1,38 +1,175 @@ {{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} + {{ partial "navigation/topbar/main.html" . }} {{- end -}} {{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} + {{ partial "navigation/sidebar-left.html" . }} {{- end -}} {{- define "breadcrumbs" -}} -
- {{partial "navigation/breadcrumbs.html" . }} +
+ {{ partial "navigation/breadcrumbs.html" . }}
{{- end -}} {{- define "list" -}} -
-{{- partial "navigation/glossary.html" . -}} -
- {{- partial "glossary/entries.html" . -}} -
+
+ + {{/* Glossary Navigation */}} + + + {{/* Glossary Content */}} +
+ +
+

{{ .Title }}

+ {{ with .Content }} +
+ {{ . }} +
+ {{ end }} + + {{/* Search and filters */}} +
+
+ + + +
+ +
+ + +
+
+
+ + {{/* Glossary Entries */}} +
+ {{ partial "glossary/entries.html" . }} +
+ +
+
{{- end -}} {{- define "content" -}} -
-{{- partial "navigation/glossary.html" . -}} -
- {{- partial "glossary/entries.html" . -}} -
+
+ + {{/* Glossary Navigation */}} + + + {{/* Single Glossary Term */}} +
+ +
+ +
+

{{ .Title }}

+ + {{/* Term metadata */}} +
+ {{ with .Params.category }} + {{ . }} + {{ end }} + + {{ with .Params.acronym }} + + {{ . }} + + {{ end }} + + {{ with .Params.aliases }} +
+ Also known as: + {{ range . }} + {{ . }} + {{ end }} +
+ {{ end }} +
+
+ + {{/* Term definition */}} +
+ {{ .Content }} +
+ + {{/* Related terms */}} + {{ with .Params.related_terms }} +
+

Related Terms

+
    + {{ range . }} + {{ with site.GetPage (printf "/glossary/%s" .) }} +
  • + + {{ .Title }} + + {{ with .Params.short_description }} + {{ . }} + {{ end }} +
    • + {{ end }} + {{ end }} +
+
+ {{ end }} + + {{/* External references */}} + {{ with .Params.external_references }} +
+

External References

+
    + {{ range . }} +
  • + + {{ .title }} + + {{ with .description }} + {{ . }} + {{ end }} +
    • + {{ end }} +
+
+ {{ end }} + +
+ +
+
{{- end -}} -{{- define "innerFooter" -}} -{{- end -}} - {{- define "sidebar-right" -}} - {{- partial "navigation/sidebar-right.html" . -}} + {{ partial "navigation/sidebar-right.html" . }} {{- end -}} \ No newline at end of file diff --git a/layouts/_default/home.html b/layouts/_default/home.html index 5bd855b4..b85d1252 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -1,40 +1,164 @@ -{{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} -{{- end -}} +{{/* Homepage Layout */}} -{{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} -{{- end -}} - -{{- define "breadcrumbs" -}} - {{/*
- {{partial "navigation/breadcrumbs.html" . }} -
*/}} -{{- end -}} - -{{ define "content" }} -
- {{if lt (len .Site.Sections) 1}} - {{- partial "welcome.html" -}} - {{- else -}} - {{ .Content }} - {{- end -}} -
-
- {{- partial "article/tiles.html" . -}} +{{ define "home-content" }} +
+ + {{/* Hero section */}} +
+
+

{{ .Title }}

+ + {{ with .Content }} +
+ {{ . }} +
+ {{ end }} + + {{ with .Params.hero }} + {{ with .cta_text }} +
+ + {{ . }} + +
+ {{ end }} + {{ end }}
-{{ end }} - -{{ define "home" }} - {{- template "content" . -}} -{{ end }} - -{{- define "innerFooter" -}} - {{/*
- {{partial "article/next-prev.html" . }} -
*/}} -{{- end -}} - -{{- define "sidebar-right" -}} - {{- partial "navigation/sidebar-right.html" . -}} -{{- end -}} \ No newline at end of file +
+ + {{/* Quick links section */}} + {{ if .Params.quicklinks }} +
+

Get Started

+ +
+ {{ range .Params.quicklinks }} + + {{ with .icon }} + + {{ end }} +

{{ .title }}

+

{{ .description }}

+ + {{ end }} +
+
+ {{ end }} + + {{/* Featured sections */}} + {{ if .Site.Sections }} +
+

Documentation

+ +
+ {{ range .Site.Sections }} +
+ + {{/* Section icon or image */}} + {{ with .Params.icon }} + + {{ else }} + {{ with .Params.featured_image }} +
+ {{ $.Title }} +
+ {{ end }} + {{ end }} + + {{/* Section content */}} +
+

+ +

+ + {{ with .Params.description }} +

{{ . }}

+ {{ else }} + {{ with .Summary }} +

{{ . }}

+ {{ end }} + {{ end }} + + {{ if .Pages }} +

+ {{ len .Pages }} {{ if eq (len .Pages) 1 }}article{{ else }}articles{{ end }} +

+ {{ end }} +
+ + {{/* Recent articles preview */}} + {{ if .Pages }} +
+

Recent articles:

+ +
+ {{ end }} +
+ {{ end }} +
+
+ {{ else }} + {{/* Welcome message when no content exists */}} +
+ {{ partial "welcome.html" . }} +
+ {{ end }} + + {{/* Latest updates */}} + {{ $recentPages := where .Site.RegularPages "Section" "!=" "" }} + {{ $recentPages = first 6 $recentPages }} + {{ if $recentPages }} +
+

Latest Updates

+ +
+ {{ range $recentPages }} +
+ +
+ {{ .Section | title }} + +
+ +

+ +

+ + {{ with .Summary }} +

+ {{ . | truncate 100 }} +

+ {{ end }} +
+ {{ end }} +
+ +
+ View all updates +
+
+ {{ end }} + +
+{{ end }} \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 67b2e09a..31ba846c 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,116 +1,163 @@ -{{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} -{{- end -}} +{{/* Section/List Layout */}} -{{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} -{{- end -}} - -{{- define "breadcrumbs" -}} -
- {{partial "navigation/breadcrumbs.html" . }} -
-{{- end -}} - -{{- define "list" -}} -
-

{{ .Title }}

- {{- with .Content -}} -
+{{ define "list-content" }} +
+ + {{/* Section header */}} +
+

{{ .Title }}

+ + {{ with .Content }} +
{{ . }}
- {{- end -}} + {{ end }} + + {{ if .Pages }} +

+ {{ len .Pages }} {{ if eq (len .Pages) 1 }}article{{ else }}articles{{ end }} +

+ {{ end }}
- - {{- $pages := .Pages -}} - {{- if $pages -}} -
- {{/*
*/}} -
- {{- range $pages -}} -
- {{- with .Params.image -}} -
- {{ $.Title }} + + {{/* Page listings */}} + {{ if .Pages }} +
+

Articles in this section

+ +
+ {{ range .Pages }} +
+ + {{/* Article image */}} + {{ with .Params.featured_image }} +
+ {{ $.Title }}
- {{- end -}} + {{ end }} -
-

- + + {{/* Article metadata */}} +
+ {{ with .Params.category }} + {{ . }} + {{ end }} + + {{ with .Date }} + + {{ end }} + + {{ if .Params.reading_time }} + {{ .ReadingTime }} min read + {{ end }} +
+ + {{/* Article title */}} +

+ -

+

- {{- with .Summary -}} -
+ {{/* Article summary */}} + {{ with .Summary }} +

{{ . | truncate 150 }} +

+ {{ end }} + + {{/* Article tags */}} + {{ with .Params.tags }} +
+ {{ range first 3 . }} + {{ . }} + {{ end }} + {{ if gt (len .) 3 }} + +{{ sub (len .) 3 }} more + {{ end }}
- {{- end -}} + {{ end }} - {{/* Enhanced metadata for list items */}} -
- {{- with .Date -}} - - {{- end -}} - {{- with .Params.tags -}} - - - - - {{ delimit . ", " }} - - {{- end -}} -
- {{- end -}} + {{ end }}
{{/* Pagination */}} - {{- $paginator := .Paginate $pages -}} - {{- if gt $paginator.TotalPages 1 -}} -
-
- {{ range $index, $cell := $decodedNotebook.cells }} - {{/* Add hidden class to all cells except first few */}} - {{ $isInitiallyVisible := lt $index 5 }} -
- {{ if eq $cell.cell_type "markdown" }} - {{ partial "notebook/cell-markdown.html" (dict "cell" $cell "index" $index) }} - {{ else if eq $cell.cell_type "code" }} - {{ partial "notebook/cell-code.html" (dict "cell" $cell "index" $index) }} - {{ else if eq $cell.cell_type "raw" }} - {{ partial "notebook/cell-raw.html" (dict "cell" $cell "index" $index) }} - {{ else }} - {{/* Unknown cell type - render as raw */}} - {{ partial "notebook/cell-raw.html" (dict "cell" $cell "index" $index) }} - {{ end }} -
- {{ end }} + data-initial-visible="5"> + + {{ range $index, $cell := $decodedNotebook.cells }} + {{ $isInitiallyVisible := lt $index 5 }} + +
+ + {{ if eq $cell.cell_type "markdown" }} + {{ partial "notebook/cell-markdown.html" (dict "cell" $cell "index" $index) }} + {{ else if eq $cell.cell_type "code" }} + {{ partial "notebook/cell-code.html" (dict "cell" $cell "index" $index) }} + {{ else if eq $cell.cell_type "raw" }} + {{ partial "notebook/cell-raw.html" (dict "cell" $cell "index" $index) }} + {{ else }} + {{/* Unknown cell type - render as raw */}} +
+ +
+ {{ $cell.cell_type | title }} + [{{ $index }}] +
+ +
+ 
{{ delimit $cell.source "\n" }}
+
+ +
+ {{ end }} + +
+ {{ end }} + + {{/* Load more cells section */}} + +
- - - {{/* Enhanced metadata for JavaScript */}} + {{/* Notebook metadata for JavaScript */}} - {{- else -}} - {{- errorf "Failed to unmarshal notebook: %s" $notebookPath -}} - {{- end -}} - {{- else -}} - {{- errorf "Failed to get notebook resource: %s" $notebookPath -}} - {{- errorf "Current working directory: %s" (os.Getwd) -}} - {{- end -}} - - -{{/* Inline JS removed. Notebook cells use Collapse/Notebook components. */}} - - + + + {{ else }} + + {{ end }} +{{ else }} + +{{ end }} {{- end -}} {{- define "sidebar-right" -}} -{{- partial "navigation/sidebar-right.html" . -}} -{{- end -}} \ No newline at end of file + {{ partial "navigation/sidebar-right.html" . }} +{{- end -}} \ No newline at end of file diff --git a/layouts/object-model/single.html b/layouts/object-model/single.html index c8b4f0f1..1aa1a6ef 100644 --- a/layouts/object-model/single.html +++ b/layouts/object-model/single.html @@ -1,195 +1,332 @@ {{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} + {{ partial "navigation/topbar/main.html" . }} {{- end -}} {{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} + {{ partial "navigation/sidebar-left.html" . }} {{- end -}} {{- define "content" -}} -
- {{- $schemaPath := .Params.schema -}} - {{- $schema := index .Site.Data (replace $schemaPath ".yaml" "") -}} - {{- $objectModel := $schema.ObjectModel -}} +{{ $schemaPath := .Params.schema }} -
-

Object Model Reference

+{{ if not $schemaPath }} + + {{ return }} +{{ end }} + +{{ $schema := index .Site.Data (replace $schemaPath ".yaml" "") }} +{{ $objectModel := $schema.ObjectModel }} + +{{ if not $objectModel }} + + {{ return }} +{{ end }} + +
+ +
+

{{ .Title | default "Object Model Reference" }}

+ + {{ with .Content }} +
+ {{ . }} +
+ {{ end }} + {{ with $objectModel.Description }} -
{{ . | markdownify }}
+
+ {{ . | markdownify }} +
{{ end }} -
- - {{ range $modelName, $model := $objectModel.Objects }} -
-
-

- {{ $modelName }} -

- {{ with $model.Description }} -
{{ . | markdownify }}
+ + {{/* Quick navigation */}} +
- -
-
-

Input Attributes

-
    - {{ range $input := $model.Inputs }} -
  • - {{ if $input.options }} -
    - - -
    - {{ $input.name }} - {{ $input.description | markdownify }} -
    -     -
      - {{ range $mapNumber, $mapValue := $input.options }} - {{ range $key, $value := . }} -
    • - {{ $key }} -
      {{ $value | markdownify }}
      -
      • - {{ end }} + {{ with $objectModel.Components }} +
    • + Components + +
      • + {{ end }} +
    + +
+ +
+ + {{/* Objects section */}} + {{ if $objectModel.Objects }} +
+

Objects

+ + {{ range $modelName, $model := $objectModel.Objects }} +
+ +
+

+ {{ $modelName }} + + # + +

+ + {{ with $model.Description }} +
+ {{ . | markdownify }} +
+ {{ end }} +
+ +
+ + {{/* Input Attributes */}} + {{ if $model.Inputs }} +
+

+ Input Attributes +

+ +
+ {{ range $input := $model.Inputs }} +
+ + {{ if $input.options }} +
+ + +
+ {{ $input.name }} +
{{ $input.description | markdownify }}
+
+ + +
+
Options
+
+ {{ range $input.options }} + {{ range $key, $value := . }} +
+
+ {{ $key }} +
+
+ {{ $value | markdownify }} +
+
+ {{ end }} + {{ end }} +
+
+
+ {{ else }} +
+ +
+ {{ $input.name }} +
{{ $input.description | markdownify }}
+
+
+ {{ end }} + +
{{ end }} - - - {{ else }} -
- -
- {{ $input.name }} - {{ $input.description | markdownify }}
{{ end }} - - {{ end }} - -
- - {{ with $model.AioliManaged }} -
-

Managed Attributes

-
    - {{ range $managed := . }} -
  • - {{ if $managed.options }} -
    - - -
    - {{ $managed.name }} - {{ $managed.description | markdownify }} -
    -     -
      - {{ range $mapNumber, $mapValue := $managed.options }} - {{ range $key, $value := . }} -
    • - {{ $key }} -
      {{ $value | markdownify }}
      -
      • + + {{/* Managed Attributes */}} + {{ with $model.AioliManaged }} +
      +

      + Managed Attributes +

      + +
      + {{ range $managed := . }} +
      + + {{ if $managed.options }} +
      + + +
      + {{ $managed.name }} +
      {{ $managed.description | markdownify }}
      +
      +       + +
      +
      Options
      +
      + {{ range $managed.options }} + {{ range $key, $value := . }} +
      +
      + {{ $key }} +
      +
      + {{ $value | markdownify }} +
      +
      + {{ end }} + {{ end }} +
      +
      +
      + {{ else }} +
      + +
      + {{ $managed.name }} +
      {{ $managed.description | markdownify }}
      +
      +
      {{ end }} - {{ end }} -
    -
    - {{ else }} -
    - -
    - {{ $managed.name }} - {{ $managed.description | markdownify }} -
    + +
    + {{ end }}
- {{ end }} - - {{ end }} - -
+
+ {{ end }} + +
+ {{ end }} - - - {{ end }} - - {{ with $objectModel.Components }} -
- {{ range $componentName, $component := . }} -
-
-

- {{ $componentName }} -

- {{ with $component.Description }} -
{{ . | markdownify }}
- {{ end }} -
- -
-

Attributes

-
    - {{ range $attribute := $component.Attributes }} -
  • - {{ if $attribute.options }} -
    - - -
    - {{ $attribute.name }} - {{ $attribute.description | markdownify }} -
    -     -
      - {{ range $mapNumber, $mapValue := $attribute.options }} - {{ range $key, $value := . }} -
    • - {{ $key }} -
      {{ $value | markdownify }}
      -
      • - {{ end }} +
+ {{ end }} + + {{/* Components section */}} + {{ with $objectModel.Components }} +
+

Components

+ + {{ range $componentName, $component := . }} +
+ +
+

+ {{ $componentName }} + + # + +

+ + {{ with $component.Description }} +
+ {{ . | markdownify }} +
+ {{ end }} +
+ +
+
+

+ Attributes +

+ +
+ {{ range $attribute := $component.Attributes }} +
+ + {{ if $attribute.options }} +
+ + +
+ {{ $attribute.name }} +
{{ $attribute.description | markdownify }}
+
+ + +
+
Options
+
+ {{ range $attribute.options }} + {{ range $key, $value := . }} +
+
+ {{ $key }} +
+
+ {{ $value | markdownify }} +
+
+ {{ end }} + {{ end }} +
+
+
+ {{ else }} +
+ +
+ {{ $attribute.name }} +
{{ $attribute.description | markdownify }}
+
+
{{ end }} - - - {{ else }} -
- -
- {{ $attribute.name }} - {{ $attribute.description | markdownify }} +
-
- {{ end }} - - {{ end }} - -
+ {{ end }} +
+
+
+
+ {{ end }}
{{ end }} - {{ end }} - - {{/* page end */}} + + + {{- end -}} {{- define "sidebar-right" -}} -{{- partial "navigation/sidebar-right.html" . -}} + {{ partial "navigation/sidebar-right.html" . }} {{- end -}} \ No newline at end of file diff --git a/layouts/openapi/single.html b/layouts/openapi/single.html index 61874f37..b7290e38 100644 --- a/layouts/openapi/single.html +++ b/layouts/openapi/single.html @@ -1,83 +1,176 @@ {{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} + {{ partial "navigation/topbar/main.html" . }} {{- end -}} {{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} + {{ partial "navigation/sidebar-left.html" . }} {{- end -}} {{- define "content" -}} -{{- $apiData := .Params.api_data -}} -{{- $currentMethod := .Params.endpoint.method -}} -{{- $currentPath := .Params.endpoint.path -}} -{{- $currentTag := .Params.endpoint.tag -}} -{{- $operationId := .Params.endpoint.operationId -}} -{{- $operation := .Params.endpoint.operation -}} +{{ $apiData := .Params.api_data }} +{{ $currentMethod := .Params.endpoint.method }} +{{ $currentPath := .Params.endpoint.path }} +{{ $currentTag := .Params.endpoint.tag }} +{{ $operationId := .Params.endpoint.operationId }} +{{ $operation := .Params.endpoint.operation }} -{{- if not $apiData -}} -
-

API Data Not Found

-

Could not load API data from page front matter.

+{{ if not $apiData }} + {{ return }} -{{- end -}} - -{{/* Generate metadata and data attributes */}} -{{ $metadata := partial "openapi/single/metadata.html" (dict - "operation" $operation - "currentMethod" $currentMethod - "currentPath" $currentPath - "operationId" $operationId) }} +{{ end }} -
+
- - {{ partial "openapi/single/header.html" (dict - "operation" $operation - "currentMethod" $currentMethod - "currentPath" $currentPath - "currentTag" $currentTag - "apiData" $apiData - "page" .) }} - - -
-
+ {{/* Endpoint Header */}} +
+ + {{/* Method and Path */}} +
+ + {{ $currentMethod | upper }} + + +
+ + {{/* Title and Summary */}} +
+ {{ with $operation.summary }} +

{{ . }}

+ {{ end }} - {{ partial "openapi/single/content.html" (dict - "operation" $operation - "currentMethod" $currentMethod - "currentPath" $currentPath - "apiData" $apiData - "endpointId" $metadata.endpointId) }} + {{ with $operation.description }} +
+ {{ $.Page.RenderString . }} +
+ {{ end }} + + {{/* Tags and Categories */}} + {{ with $operation.tags }} +
+ Tags: + {{ range . }} + {{ . }} + {{ end }} +
+ {{ end }} + + {{/* Operation ID */}} + {{ with $operationId }} +
+ Operation ID: + {{ . }} +
+ {{ end }}
+ +
+ + {{/* Endpoint Content */}} +
+ + {{/* Parameters Section */}} + {{ with $operation.parameters }} +
+

Parameters

+ + {{ $pathParams := where . "in" "path" }} + {{ $queryParams := where . "in" "query" }} + {{ $headerParams := where . "in" "header" }} + + {{ if $pathParams }} +
+

Path Parameters

+ {{ partial "openapi/parameters-table.html" $pathParams }} +
+ {{ end }} + + {{ if $queryParams }} +
+

Query Parameters

+ {{ partial "openapi/parameters-table.html" $queryParams }} +
+ {{ end }} + + {{ if $headerParams }} +
+

Header Parameters

+ {{ partial "openapi/parameters-table.html" $headerParams }} +
+ {{ end }} + +
+ {{ end }} + + {{/* Request Body Section */}} + {{ with $operation.requestBody }} +
+

Request Body

+ {{ partial "openapi/request-body.html" . }} +
+ {{ end }} + + {{/* Responses Section */}} + {{ with $operation.responses }} +
+

Responses

+ {{ partial "openapi/responses.html" . }} +
+ {{ end }} + + {{/* Security Section */}} + {{ with $operation.security }} +
+

Authentication

+ {{ partial "openapi/security.html" . }} +
+ {{ end }} + + {{/* Examples Section */}} +
+

Try It Out

+
+
+ + + +
+ +
+
+

Click "Send Request" to test this endpoint

+
+
+
+
+
- +
{{- end -}} {{- define "sidebar-right" -}} - {{- partial "navigation/sidebar-right.html" . -}} + {{ partial "navigation/sidebar-right.html" . }} {{- end -}} \ No newline at end of file diff --git a/layouts/partials/article/header.html b/layouts/partials/article/header.html index 7777566a..8fa3cae1 100644 --- a/layouts/partials/article/header.html +++ b/layouts/partials/article/header.html @@ -1,25 +1,71 @@ -{{/* Article Header - Parent component managing breadcrumbs and metadata */}} -{{- $hasMetadata := or .Date .Params.author .ReadingTime .Lastmod .PublishDate .WordCount -}} - -
-
- {{/* Pure breadcrumbs navigation */}} - {{- partial "navigation/breadcrumbs.html" . -}} +{{/* Article Header Component */}} +
+ + {{/* Article navigation */}} +
\ No newline at end of file + + {{/* Article actions */}} +
+ + {{/* Copy page URL */}} + + + {{/* Edit page (if repository is configured) */}} + {{ if and site.Params.repository.url .File }} + + + Edit page + + {{ end }} + + {{/* Print page */}} + + +
+ + + + {{/* Article metadata panel (collapsible) */}} + {{ $hasMetadata := or .Date .Params.author .ReadingTime .Lastmod .PublishDate .WordCount }} + {{ if $hasMetadata }} +
+ + + Article details + + + +
+ {{ partial "article/metadata.html" . }} +
+ +
+ {{ end }} + + \ No newline at end of file diff --git a/layouts/partials/article/metadata.html b/layouts/partials/article/metadata.html index a7c3890f..be5fa0b4 100644 --- a/layouts/partials/article/metadata.html +++ b/layouts/partials/article/metadata.html @@ -1,58 +1,160 @@ -{{/* Article metadata component - horizontal flow with enhanced UX */}} -{{- if or .Date .Params.author .ReadingTime .Lastmod .PublishDate .WordCount -}} -
-
- {{/* Primary date - always show creation date first */}} - {{- with .Date -}} -
- - - -
-{{- end -}} \ No newline at end of file + {{ end }} + +
\ No newline at end of file diff --git a/layouts/partials/article/next-prev.html b/layouts/partials/article/next-prev.html index 37fed2ba..67f4ee34 100644 --- a/layouts/partials/article/next-prev.html +++ b/layouts/partials/article/next-prev.html @@ -1,72 +1,140 @@ -{{- if .Site.Params.article.nextPrev.display -}} -{{$trunc := .Site.Params.article.nextPrev.trunc}} -{{$current := .}} -{{$prev := false}} -{{$next := false}} -{{- with .CurrentSection -}} - {{- $sorted := .RegularPages.ByWeight -}} - {{- range $i, $p := $sorted -}} - {{- if eq $p.RelPermalink $current.RelPermalink -}} - {{- if gt $i 0 -}} - {{- $prev = index $sorted (sub $i 1) -}} - {{- end -}} - {{- if lt (add $i 1) (len $sorted) -}} - {{- $next = index $sorted (add $i 1) -}} - {{- end -}} - {{- end -}} - {{- end -}} -{{- end -}} - +{{ end }} \ No newline at end of file diff --git a/layouts/partials/article/page-resources.html b/layouts/partials/article/page-resources.html index a5ff6e2a..1a81b6be 100644 --- a/layouts/partials/article/page-resources.html +++ b/layouts/partials/article/page-resources.html @@ -1,160 +1,185 @@ -{{/* Page Resources - Display attached files, images, and downloads */}} -{{- with .Resources -}} - {{- $images := .ByType "image" -}} - {{- $videos := .ByType "video" -}} - {{- $documents := .ByType "application" -}} - {{- $others := complement (union $images $videos $documents) . -}} +{{/* Page Resources Component */}} +{{ with .Resources }} + {{ $images := .ByType "image" }} + {{ $videos := .ByType "video" }} + {{ $documents := .ByType "application" }} + {{ $others := complement (union $images $videos $documents) . }} - {{- if or $images $videos $documents $others -}} -