/* ============================================================================= * STARTER THEME - MAIN STYLESHEET * Scalable design system for WordPress themes * ============================================================================= */ /* ============================================================================= * TABLE OF CONTENTS * ============================================================================= * * 1. FOUNDATION * 1.1 CSS Variables * - Responsive Breakpoints Documentation * - Colors (Neutral, Semantic, Accent) * - Typography (Fonts, Sizes) * - Spacing & Layout * - Borders & Shadows * - Backdrop Filters * - Transitions * 1.2 Context Variables (--ctx-*) * - Text, Backgrounds, Surfaces * - Borders, Links, Interactive States * - Shadows, Inverted Colors * 1.3 Component Tokens * - FAQ, Card, Section, Button, Hero * - Form, Badge, Tooltip, Notice * - Icon System, Quiz, Chat Button * 1.4 Theme Contexts * - Dark Context * - Global Dark Mode * - Section-Level Forced Themes * * 2. BASE STYLES * 2.1 Reset & Base * 2.2 Typography * 2.3 Layout * * 3. HEADER & NAVIGATION * 3.1 Header * 3.2 Icons * 3.3 Breadcrumbs * 3.4 Navigation Advanced Variants * * 4. HERO SECTION * 4.1 Hero Section (Base) * 4.2 Hero Layout Variants * 4.3 Hero Alignment Modifiers * 4.4 Hero Size Modifiers * 4.5 Hero Background/Overlay Modifiers * 4.6 Hero Animation Modifiers * 4.7 Hero Title Style Modifiers * 4.8 Hero Pattern Modifiers * 4.9 Hero Shape Modifiers * 4.10 Hero Floating Mascot * 4.11 Hero Advanced Animation Variants * 4.12 Hero Gradient & Glow Variants * 4.13 Hero Texture Variants * 4.14 Hero Interactive Variants * 4.15 Enhanced Hero Section * * 5. BUTTONS * 5.1 Buttons (Base) * 5.2 Button Advanced Variants * 5.3 Button Variants (BEM) * 5.4 Button Shine Effect * 5.5 Magnetic Button Effect * * 6. CARDS * 6.1 Card Advanced Variants * 6.2 Category Cards * 6.3 Product Cards * 6.4 Highlight Card * 6.5 Enhanced Cards * 6.6 Additional Card Variants & Fixes * 6.7 Card Style Modifiers * 6.8 Card Hover Modifiers * 6.9 Card Size Modifiers * 6.10 Card Layout Modifiers * 6.11 Cards Grid Section * 6.12 Day Card / Example * 6.13 Lesson Card & Navigation * * 7. SECTIONS & LAYOUTS * 7.1 Section Advanced Variants * 7.2 Section Variants (BEM) * 7.3 Section Headers * 7.4 Featured Grid * 7.5 Feature Grid (BEM) * 7.6 Feature Grid Section * 7.7 Content Section * 7.8 CTA Section * 7.9 Block Layout * 7.10 Container Variants * * 8. GRIDS & FLEXBOX * 8.1 Grid Advanced Variants * 8.2 Grid Variants (BEM) * 8.3 Flex Variants * * 9. CONTENT COMPONENTS * 9.1 Content (Article) * 9.2 Article Content * 9.3 Article Header * 9.4 Prose (Article Content) * 9.5 Guide Content Styles * 9.6 Blog Layout * 9.7 Steps / Timeline * 9.8 Checklist * 9.9 CTA Box * 9.10 Disclaimer * 9.11 List Component * 9.12 Tags * * 10. INTERACTIVE COMPONENTS * 10.1 FAQ Component (Legacy) * 10.2 FAQ Component (Modern with Tokens) * 10.3 FAQ Advanced Variants * 10.4 FAQ Variants (BEM) * 10.5 Notice Box * 10.6 Notice/Alert Advanced Variants * 10.7 Testimonials (BEM) * 10.8 Testimonial Advanced Variants * 10.9 Stats Section (BEM) * 10.10 Stats Advanced Variants * 10.11 Comparison Table * 10.12 Comparison Table (Affiliate) * 10.13 Quick Picks (Affiliate) * 10.14 Product Card (Affiliate) * 10.15 Disclosure (Affiliate) * 10.16 Quiz System * 10.17 Tooltip * 10.18 Tooltip Variants * 10.19 Modal/Dialog Variants * 10.20 Progress/Step Indicators * 10.21 Step Navigation & Progress * 10.22 Pagination * 10.23 Pricing Table Variants * * 11. FORMS * 11.1 Forms (Base) * 11.2 Form/Input Advanced Variants * 11.3 Newsletter Form * 11.4 Newsletter Component (Complete) * * 12. BADGES & TAGS * 12.1 Badge/Tag Advanced Variants * 12.2 Badge Animations * * 13. SIDEBAR COMPONENTS * 13.1 Sidebar Box * 13.2 Sidebar Components * * 14. NAVIGATION & FILTERS * 14.1 Quick Links (Home) * 14.2 Quick Nav * 14.3 Filters * 14.4 Blog Filters * * 15. MEDIA & VISUALS * 15.1 Placeholder Image * 15.2 Video Embed * 15.3 Image Hover Effects * 15.4 Logo Cloud * * 16. SPECIALTY COMPONENTS * 16.1 Author Box * 16.2 Trust Bar * 16.3 Trust Badges * 16.4 Score/Rating Ring * 16.5 Charts (ApexCharts) * 16.6 Chat Button * 16.7 Course Sidebar * 16.8 Food Components * 16.9 Macro Components * 16.10 Meal Components * 16.11 Spec / Misc Components * * 17. FOOTER * 17.1 Footer (Base) * 17.2 Footer Advanced Variants * * 18. ANIMATIONS & EFFECTS * 18.1 Global Animation Utility Classes * 18.2 Text Animation Variants * 18.3 Premium Animations & Effects * 18.4 Animation Helper Classes (GSAP) * 18.5 Golden Glow Effects * 18.6 Gradient Text * 18.7 Glass Effect * 18.8 Premium Card Styles * 18.9 Shimmer Effect * 18.10 Pulse Animation * 18.11 Scroll Progress Indicator * 18.12 Enhanced Header * 18.13 Smooth Link Underlines * 18.14 Loading States * 18.15 Reveal Animations * 18.16 Counter Animation Helper * 18.17 Smooth Page Transition * * 19. UTILITY CLASSES * 19.1 Utility Spacing Classes * 19.2 Custom Scrollbar * 19.3 Selection Highlight * 19.4 Focus Styles (Accessibility) * * 20. RESPONSIVE * 20.1 Responsive Media Queries * * 21. PRINT & ACCESSIBILITY * 21.1 Print Styles * * 22. MISSING COMPONENTS (Full Coverage) * 22.1 Various missing component styles * 22.2 CSS-PHP Alignment Fixes * * ============================================================================= */ /* ----------------------------------------------------------------------------- * CSS Variables * Note: Brand colors (--primary, --secondary, etc.) are injected * from config.php via core/assets.php. DO NOT define them here. * -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Responsive Breakpoints * Standard breakpoints used throughout the stylesheet: * * sm: 640px - Small devices (landscape phones) * md: 768px - Medium devices (tablets) * lg: 1024px - Large devices (desktops) * xl: 1280px - Extra large devices (large desktops) * * Common patterns: * - @media (max-width: 639px) → Below sm (mobile portrait) * - @media (max-width: 767px) → Below md (mobile landscape) * - @media (max-width: 1023px) → Below lg (tablets) * - @media (max-width: 1279px) → Below xl (small desktops) * - @media (min-width: 640px) → sm and above * - @media (min-width: 768px) → md and above * - @media (min-width: 1024px) → lg and above * - @media (min-width: 1280px) → xl and above * -------------------------------------------------------------------------- */ :root { /* Neutral colors - generic scale used across all sites */ --black: #1a1a1a; --black-deep: #0a0a0f; /* Very dark, almost black - for dark mode backgrounds */ --black-soft: #151519; /* Softer dark - for dark mode alt backgrounds */ --black-light: #2d2d2d; --white: #ffffff; --cream: #f5f0e6; /* Warm off-white - for dark mode text */ --cream-muted: #b8b2a8; /* Muted cream - for dark mode secondary text */ --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #e5e5e5; --gray-300: #d4d4d4; --gray-400: #a3a3a3; --gray-500: #737373; --gray-600: #525252; --gray-700: #404040; --gray-800: #262626; --gray-900: #171717; /* Semantic Colors - dark variants for text on light backgrounds */ --success-dark: #15803d; --warning-dark: #b45309; --error-dark: #dc2626; --info-dark: #1d4ed8; /* Semantic Colors - light variants for backgrounds */ --success-light: #dcfce7; --warning-light: #fef3c7; --error-light: #fee2e2; --info-light: #dbeafe; /* Semantic Colors - main values (used throughout) */ --success: #22c55e; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; /* Accent Colors */ --purple: #8b5cf6; --purple-light: rgba(139, 92, 246, 0.1); --pink: #ec4899; --pink-light: rgba(236, 72, 153, 0.1); --bronze: #cd7f32; /* Text on colored backgrounds - Use config override or fallback */ --text-on-primary: var(--on-primary, var(--white)); --text-on-success: var(--on-success, var(--white)); /* Button contextual colors - adapt based on light/dark context */ --btn-primary-bg: var(--primary, #3b82f6); --btn-primary-color: var(--on-primary, var(--white)); --btn-primary-border: var(--primary, #3b82f6); --btn-primary-bg-hover: var(--primary-hover, #2563eb); --btn-primary-border-hover: var(--primary-hover, #2563eb); --btn-secondary-color: var(--ctx-text, var(--gray-900)); --btn-secondary-border: var(--ctx-border-strong, var(--gray-300)); --btn-secondary-border-hover: var(--primary, #3b82f6); /* Typography */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; /* Font Weight */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Height */ --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 1.75; --line-height-spacious: 2; /* Spacing */ --space-0: 0; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; /* Layout - Containers */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1400px; /* Layout - Breakpoints (for CSS reference - used in media queries) */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* Layout - Header dimensions */ --header-height: 72px; --header-height-mobile: 60px; --header-logo-height: 44px; --icon-button-size: 44px; /* Touch target minimum */ /* Layout Coordination - Dynamic values set by LayoutCoordinator JS * These enable header/announcement-bar/content to stay in sync * Note: --header-height above is the static design token (fallback) * LayoutCoordinator sets --header-height-dynamic with the measured value */ --announcement-bar-height: 0px; --header-height-dynamic: 0px; /* Measured header height (set by JS) */ --layout-top-offset: 0px; /* Header sticky offset (= announcement-bar-height when visible) */ --layout-sticky-offset: 0px; /* Content sticky offset (= announcement-bar + header height) */ /* Z-Index Scale - Stacking context architecture * Use these variables for consistent z-index values across components */ --z-base: 1; --z-sticky-content: 50; /* Sticky elements within page content */ --z-header: 100; /* Main site header */ --z-announcement: 101; /* Announcement bar (above header) */ --z-dropdown: 200; /* Dropdowns, menus, popovers */ --z-modal: 300; /* Modals, dialogs */ --z-toast: 400; /* Toast notifications */ --z-tooltip: 500; /* Tooltips (highest priority) */ /* Borders */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Shadows - Uses --dna-shadow-color for theme-aware shadows (neutral/brand/warm/cool) */ --shadow-none: none; --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 2px color-mix(in srgb, var(--dna-shadow-color, rgba(0, 0, 0, 0.1)) 50%, transparent); --shadow-md: 0 4px 6px color-mix(in srgb, var(--dna-shadow-color, rgba(0, 0, 0, 0.1)) 70%, transparent); --shadow-lg: 0 10px 15px var(--dna-shadow-color, rgba(0, 0, 0, 0.1)); --shadow-xl: 0 20px 25px var(--dna-shadow-color, rgba(0, 0, 0, 0.1)); --shadow-2xl: 0 25px 50px color-mix(in srgb, var(--dna-shadow-color, rgba(0, 0, 0, 0.1)) 150%, rgba(0, 0, 0, 0.15)); --shadow-3xl: 0 20px 60px color-mix(in srgb, var(--dna-shadow-color, rgba(0, 0, 0, 0.1)) 200%, rgba(0, 0, 0, 0.2)); --shadow-primary: 0 10px 40px rgba(var(--primary-rgb, 59, 130, 246), 0.2); --shadow-glow-sm: 0 0 20px rgba(var(--primary-rgb, 59, 130, 246), 0.3); --shadow-glow-md: 0 0 40px rgba(var(--primary-rgb, 59, 130, 246), 0.4); --shadow-glow-lg: 0 0 60px rgba(var(--primary-rgb, 59, 130, 246), 0.6); --shadow-elevated: 0 20px 60px rgba(var(--primary-rgb, 59, 130, 246), 0.2); --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.15); --shadow-card-dark: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-inset: 0 2px 5px rgba(0, 0, 0, 0.2); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --shadow-primary-sm: 0 4px 15px rgba(var(--primary-rgb, 59, 130, 246), 0.3); --shadow-primary-md: 0 4px 20px rgba(var(--primary-rgb, 59, 130, 246), 0.3); --shadow-primary-lg: 0 10px 30px rgba(var(--primary-rgb, 59, 130, 246), 0.3); /* Transitions - Combined duration + easing */ --transition-fast: 0.15s ease; --transition: 0.2s ease; --transition-slow: 0.3s ease; --transition-slower: 0.5s ease; --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Duration tokens - timing only */ --duration-fast: 0.15s; --duration-normal: 0.2s; --duration-slow: 0.3s; --duration-slower: 0.5s; /* Easing tokens */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ========================================================================= * CONTEXT VARIABLES (--ctx-*) * Inherited by children, redefined by dark/light contexts * Use these in components for automatic theme adaptation * ========================================================================= */ /* Text - Light mode defaults (M3 naming) */ --ctx-text: var(--on-surface, var(--gray-900)); --ctx-text-muted: var(--on-surface-variant, var(--gray-600)); --ctx-text-faint: var(--on-surface-variant, var(--gray-400)); --ctx-heading: var(--on-surface, var(--gray-900)); /* Backgrounds - Light mode defaults (M3 naming) * Hierarchy: surface-default → surface-container → surface-container-highest * Minimum 10% luminosity difference between levels for visibility */ --ctx-bg: var(--surface-default, var(--white)); --ctx-bg-section: var(--surface-container, var(--gray-100)); --ctx-bg-elevated: var(--surface-container-highest, var(--white)); /* Surfaces (cards, modals, dropdowns) - use elevated bg */ --ctx-surface: var(--ctx-bg-elevated); --ctx-surface-hover: var(--gray-50); /* Borders - M3 outline tokens (scheme-aware) */ --ctx-border: var(--outline-variant, var(--border-default, var(--gray-200))); --ctx-border-strong: var(--outline, var(--border-strong, var(--gray-300))); --ctx-border-subtle: var(--outline-variant, var(--border-subtle, var(--gray-100))); --ctx-border-hover: var(--outline, var(--border-hover, var(--gray-400))); /* Links (non-primary) */ --ctx-link: var(--on-surface-variant, var(--gray-600)); /* Focus Ring - Accessibility (contextual) */ --ctx-focus-ring-color: var(--primary, var(--primary)); --ctx-focus-ring-width: 2px; --ctx-focus-ring-offset: 2px; --ctx-focus-ring-style: solid; --ctx-focus-shadow: 0 0 0 4px rgba(var(--primary-rgb, 59, 130, 246), 0.3); /* Shadows - contextual (light theme = darker shadows) */ --ctx-shadow-color: 0, 0, 0; --ctx-shadow: 0 4px 6px rgba(var(--ctx-shadow-color), 0.07); --ctx-shadow-lg: 0 10px 15px rgba(var(--ctx-shadow-color), 0.1); --ctx-shadow-xl: 0 20px 25px rgba(var(--ctx-shadow-color), 0.15); /* Inverted (M3 inverse tokens - for snackbars, tooltips, opposite contrast) */ --ctx-inverted-text: var(--inverse-on-surface, var(--white)); --ctx-inverted-bg: var(--inverse-surface, var(--gray-900)); --ctx-inverted-primary: var(--inverse-primary, var(--primary-light, var(--primary))); /* Scrim (M3 - modal/dialog backdrop) */ --ctx-scrim: var(--scrim, var(--black)); /* M3 On-Surface tokens (text on surfaces) */ --ctx-on-surface: var(--on-surface, var(--gray-900)); --ctx-on-surface-variant: var(--on-surface-variant, var(--gray-600)); /* Semantic colors (contextual) */ --ctx-success: var(--success, #22c55e); --ctx-warning: var(--warning, #eab308); --ctx-error: var(--error, #ef4444); --ctx-info: var(--info, #3b82f6); /* Input tokens (form fields) */ --ctx-input-bg: var(--surface-container-low, var(--white)); --ctx-input-border: var(--ctx-border); --ctx-input-text: var(--ctx-on-surface); --ctx-input-placeholder: var(--ctx-on-surface-variant); /* Code blocks */ --ctx-code-bg: var(--surface-container, var(--gray-100)); --ctx-code-text: var(--on-surface, var(--gray-800)); /* ========================================================================= * COMPONENT TOKENS * Per-component design values - override in config for unique site looks * ========================================================================= */ /* FAQ Component */ --faq-max-width: var(--comp-faq-max-width, 800px); --faq-item-radius: var(--comp-faq-radius, var(--radius-lg)); --faq-item-gap: var(--comp-faq-gap, var(--space-3)); --faq-item-padding: var(--comp-faq-padding, var(--space-5)); --faq-item-border-width: var(--comp-faq-border-width, 1px); --faq-question-weight: var(--comp-faq-question-weight, 600); --faq-question-size: var(--comp-faq-question-size, var(--text-base)); --faq-answer-line-height: var(--comp-faq-answer-lh, 1.7); --faq-icon-size: var(--comp-faq-icon-size, 24px); --faq-shadow-open: var(--comp-faq-shadow, var(--shadow-md)); --faq-transition: var(--comp-faq-transition, var(--motion-duration-sm) var(--motion-ease-bounce)); /* Section Component */ --section-gap: var(--comp-section-gap, var(--space-12)); --section-title-size: var(--comp-section-title-size, var(--text-3xl)); --section-title-weight: var(--comp-section-title-weight, 700); --section-title-spacing: var(--comp-section-title-mb, var(--space-4)); /* Icon System (global) - only used icon sizes */ --icon-size-sm: var(--comp-icon-sm, 16px); /* Quiz Component */ --quiz-max-width: var(--comp-quiz-max-width, 800px); --quiz-progress-height: var(--comp-quiz-progress-height, 6px); --quiz-progress-radius: var(--comp-quiz-progress-radius, var(--radius-sm)); --quiz-question-padding: var(--comp-quiz-padding, var(--space-8)); --quiz-question-radius: var(--comp-quiz-radius, var(--radius-lg)); --quiz-question-shadow: var(--comp-quiz-shadow, 0 2px 8px rgba(0, 0, 0, 0.06)); --quiz-option-padding: var(--comp-quiz-option-padding, 1rem 1.25rem); --quiz-option-radius: var(--comp-quiz-option-radius, var(--radius-md)); --quiz-option-gap: var(--comp-quiz-option-gap, var(--space-3)); --quiz-results-padding: var(--comp-quiz-results-padding, var(--space-10)); --quiz-score-size: var(--comp-quiz-score-size, 4rem); --quiz-transition: var(--comp-quiz-transition, 0.3s ease); /* Chat Button Component */ --chat-btn-z-index: var(--comp-chat-z, 9998); --chat-btn-offset: var(--comp-chat-offset, var(--space-5)); --chat-btn-offset-mobile: var(--comp-chat-offset-mobile, var(--space-20)); --chat-btn-shadow: var(--comp-chat-shadow, 0 4px 12px rgba(0, 0, 0, 0.15)); } /* ----------------------------------------------------------------------------- * Dark Context - Redefines all --ctx-* variables * Uses M3 tokens (--surface-*, --on-surface-*, etc.) with fallbacks * Apply to: [data-theme="dark"], .section--dark, .footer, etc. * Note: .hero removed - uses data-theme attribute for context (set in hero.php) * -------------------------------------------------------------------------- */ .footer, .cta-section, .section--cta, .section--dark, [data-theme="dark"] { /* Text - use dark mode M3 tokens (light text on dark bg) */ --ctx-text: var(--on-surface-dark, var(--white)); --ctx-text-muted: var(--on-surface-dark-variant, var(--gray-400)); --ctx-text-faint: var(--on-surface-dark-variant, var(--gray-500)); --ctx-heading: var(--on-surface-dark, var(--white)); /* Backgrounds - use M3 dark surface tokens */ --ctx-bg: var(--surface-dark-default, var(--gray-900)); --ctx-bg-section: var(--surface-dark-container, var(--gray-800)); --ctx-bg-elevated: var(--surface-dark-container-highest, var(--gray-700)); /* Surfaces */ --ctx-surface: var(--ctx-bg-elevated); --ctx-surface-hover: var(--surface-dark-container-high, var(--gray-700)); /* Borders - M3 outline tokens (dark scheme) */ --ctx-border: var(--scheme-dark-outline-variant, var(--border-dark, var(--gray-700))); --ctx-border-strong: var(--scheme-dark-outline, var(--border-dark-strong, var(--gray-600))); --ctx-border-subtle: var(--scheme-dark-outline-variant, var(--border-dark-subtle, var(--gray-800))); --ctx-border-hover: var(--scheme-dark-outline, var(--gray-500)); /* Links */ --ctx-link: var(--on-surface-dark-variant, var(--gray-400)); /* Focus Ring - lighter color for dark background */ --ctx-focus-ring-color: var(--primary-80, var(--primary-light, #93c5fd)); --ctx-focus-shadow: 0 0 0 4px rgba(var(--primary-80-rgb, 147, 197, 253), 0.3); /* Shadows (lighter on dark bg for subtle glow effect) */ --ctx-shadow-color: 0, 0, 0; --ctx-shadow: 0 4px 6px rgba(var(--ctx-shadow-color), 0.25); --ctx-shadow-lg: 0 10px 15px rgba(var(--ctx-shadow-color), 0.3); --ctx-shadow-xl: 0 20px 25px rgba(var(--ctx-shadow-color), 0.35); /* Inverted (M3 inverse - light surfaces for dark context) */ --ctx-inverted-text: var(--scheme-dark-inverse-on-surface, var(--gray-900)); --ctx-inverted-bg: var(--scheme-dark-inverse-surface, var(--white)); --ctx-inverted-primary: var(--scheme-dark-inverse-primary, var(--primary)); /* M3 On-Surface tokens (dark mode) */ --ctx-on-surface: var(--on-surface-dark, var(--white)); --ctx-on-surface-variant: var(--on-surface-dark-variant, var(--gray-400)); /* Semantic colors remain consistent but with dark mode awareness */ --ctx-success: var(--success-light, #86efac); --ctx-warning: var(--warning-light, #fde047); --ctx-error: var(--error-light, #fca5a5); --ctx-info: var(--info-light, #93c5fd); /* Input tokens (dark mode) */ --ctx-input-bg: var(--surface-dark-container-low, var(--gray-800)); --ctx-input-border: var(--ctx-border); --ctx-input-text: var(--ctx-on-surface); --ctx-input-placeholder: var(--ctx-on-surface-variant); /* Code blocks (dark mode) */ --ctx-code-bg: var(--surface-dark-container, var(--gray-800)); --ctx-code-text: var(--on-surface-dark, var(--gray-200)); /* Buttons - adapt primary/secondary for dark contexts */ --btn-primary-bg: var(--white); --btn-primary-color: var(--primary, #3b82f6); --btn-primary-border: var(--white); --btn-primary-bg-hover: var(--gray-100); --btn-primary-border-hover: var(--gray-100); --btn-secondary-color: var(--white); --btn-secondary-border: color-mix(in srgb, var(--white) 30%, transparent); --btn-secondary-border-hover: var(--white); } /* ----------------------------------------------------------------------------- * GLOBAL DARK MODE (User Toggle) * Applied to html element - affects ALL sections that don't have forced theme * Lower specificity than section-level themes * -------------------------------------------------------------------------- */ html[data-theme="dark"] { color-scheme: dark; background: var(--surface-dark-default, var(--gray-900)); /* Text - M3 dark mode tokens */ --ctx-text: var(--on-surface-dark, var(--white)); --ctx-text-muted: var(--on-surface-dark-variant, var(--gray-400)); --ctx-text-faint: var(--on-surface-dark-variant, var(--gray-500)); --ctx-heading: var(--on-surface-dark, var(--white)); /* Backgrounds - M3 dark surface tokens */ --ctx-bg: var(--surface-dark-default, var(--gray-900)); --ctx-bg-section: var(--surface-dark-container, var(--gray-800)); --ctx-bg-elevated: var(--surface-dark-container-highest, var(--gray-700)); /* Surfaces */ --ctx-surface: var(--surface-dark-container-highest, var(--gray-800)); --ctx-surface-hover: var(--surface-dark-container-high, var(--gray-700)); /* Borders - M3 outline tokens (dark scheme) */ --ctx-border: var(--scheme-dark-outline-variant, var(--border-dark, var(--gray-700))); --ctx-border-strong: var(--scheme-dark-outline, var(--border-dark-strong, var(--gray-600))); --ctx-border-subtle: var(--scheme-dark-outline-variant, var(--border-dark-subtle, var(--gray-800))); /* Focus Ring - lighter color for dark background */ --ctx-focus-ring-color: var(--primary-80, var(--primary-light, #93c5fd)); --ctx-focus-shadow: 0 0 0 4px rgba(var(--primary-80-rgb, 147, 197, 253), 0.3); /* Buttons */ --btn-primary-bg: var(--primary, var(--primary)); --btn-primary-color: var(--on-primary, var(--white)); --btn-secondary-color: var(--on-surface-dark, var(--white)); --btn-secondary-border: color-mix(in srgb, var(--on-surface-dark, var(--white)) 30%, transparent); } html[data-theme="dark"] body { background: var(--surface-dark-default, var(--gray-900)); color: var(--on-surface-dark, var(--white)); } /* ----------------------------------------------------------------------------- * GLOBAL LIGHT MODE (User Toggle) * Applied to html element - for dark-base sites switching to light * Uses v3.0 scheme variables (--scheme-light-*) when available * -------------------------------------------------------------------------- */ html[data-theme="light"] { color-scheme: light; background: var(--scheme-light-surface, var(--surface-light-default, var(--white))); /* Text - M3 light mode tokens (v3.0 scheme or v2.0 fallback) */ --ctx-text: var(--scheme-light-on-surface, var(--on-surface-light, var(--gray-900))); --ctx-text-muted: var(--scheme-light-on-surface-variant, var(--on-surface-light-variant, var(--gray-600))); --ctx-text-faint: var(--scheme-light-on-surface-variant, var(--on-surface-light-variant, var(--gray-500))); --ctx-heading: var(--scheme-light-on-surface, var(--on-surface-light, var(--gray-900))); /* Backgrounds - M3 light surface tokens */ --ctx-bg: var(--scheme-light-surface, var(--surface-light-default, var(--white))); --ctx-bg-section: var(--scheme-light-surface-container, var(--surface-light-container, var(--gray-100))); --ctx-bg-elevated: var(--scheme-light-surface-container-high, var(--surface-light-container-highest, var(--white))); /* Surfaces */ --ctx-surface: var(--scheme-light-surface-container-high, var(--surface-light-container-highest, var(--white))); --ctx-surface-hover: var(--scheme-light-surface-container, var(--surface-light-container, var(--gray-50))); /* Borders - M3 outline tokens (light scheme) */ --ctx-border: var(--scheme-light-outline-variant, var(--border-light, var(--gray-200))); --ctx-border-strong: var(--scheme-light-outline, var(--border-light-strong, var(--gray-300))); --ctx-border-subtle: var(--scheme-light-outline-variant, var(--border-light, var(--gray-100))); /* Focus Ring - darker color for light background */ --ctx-focus-ring-color: var(--primary, #3b82f6); --ctx-focus-shadow: 0 0 0 4px rgba(var(--primary-rgb, 59, 130, 246), 0.2); /* Buttons */ --btn-primary-bg: var(--primary, var(--primary)); --btn-primary-color: var(--on-primary, var(--white)); --btn-secondary-color: var(--scheme-light-on-surface, var(--on-surface-light, var(--gray-900))); --btn-secondary-border: var(--scheme-light-border-strong, var(--border-strong, var(--gray-300))); } html[data-theme="light"] body { background: var(--scheme-light-surface, var(--surface-light-default, var(--white))); color: var(--scheme-light-on-surface, var(--on-surface-light, var(--gray-900))); } /* ----------------------------------------------------------------------------- * SECTION-LEVEL FORCED THEMES * These override global theme - use higher specificity selectors * Sections with explicit dark/light stay that way regardless of global toggle * -------------------------------------------------------------------------- */ /* SECTION-LEVEL FORCED DARK * High-specificity selectors that override html[data-theme="light"] * Note: .section--dark, .footer, etc. are already defined in Dark Context block above * These selectors specifically handle data-theme attribute on section elements */ .section[data-theme="dark"], section[data-theme="dark"], .hero[data-theme="dark"] { /* Text - M3 dark mode tokens */ --ctx-text: var(--on-surface-dark, var(--white)); --ctx-text-muted: var(--on-surface-dark-variant, var(--gray-400)); --ctx-heading: var(--on-surface-dark, var(--white)); /* Backgrounds - M3 dark surface tokens */ --ctx-bg: var(--surface-dark-default, var(--gray-900)); --ctx-bg-section: var(--surface-dark-container, var(--gray-800)); --ctx-bg-elevated: var(--surface-dark-container-highest, var(--gray-700)); /* Surfaces (for cards) */ --ctx-surface: var(--surface-dark-container-high, var(--gray-800)); --ctx-surface-hover: var(--surface-dark-container, var(--gray-700)); /* Borders - M3 outline tokens (dark scheme) */ --ctx-border: var(--scheme-dark-outline-variant, var(--border-dark, var(--gray-700))); --ctx-border-strong: var(--scheme-dark-outline, var(--border-dark-strong, var(--gray-600))); /* Buttons */ --btn-primary-bg: var(--on-surface-dark, var(--white)); --btn-primary-color: var(--primary, var(--primary)); --btn-primary-border: var(--on-surface-dark, var(--white)); --btn-secondary-color: var(--on-surface-dark, var(--white)); --btn-secondary-border: color-mix(in srgb, var(--on-surface-dark, var(--white)) 30%, transparent); } /* FORCED LIGHT - Elements that must stay light * Generic [data-theme="light"] enables inner_theme pattern for any component * Doubled selector [x][x] increases specificity to override parent dark context */ [data-theme="light"][data-theme="light"], .section[data-theme="light"], section[data-theme="light"], .hero[data-theme="light"], .section--light { /* Text - M3 light mode tokens */ --ctx-text: var(--on-surface, var(--gray-900)); --ctx-text-muted: var(--on-surface-variant, var(--gray-600)); --ctx-heading: var(--on-surface, var(--gray-900)); /* Backgrounds - M3 light surface tokens */ --ctx-bg: var(--surface-default, var(--white)); --ctx-bg-section: var(--surface-container, var(--gray-100)); --ctx-bg-elevated: var(--surface-container-highest, var(--white)); /* Surfaces */ --ctx-surface: var(--surface-container-highest, var(--white)); --ctx-surface-hover: var(--surface-container-low, var(--gray-50)); /* Borders - M3 outline tokens (light scheme) */ --ctx-border: var(--scheme-light-outline-variant, var(--outline-variant, var(--gray-200))); --ctx-border-strong: var(--scheme-light-outline, var(--outline, var(--gray-300))); /* Buttons - standard */ --btn-primary-bg: var(--primary, var(--primary)); --btn-primary-color: var(--on-primary, var(--white)); --btn-secondary-color: var(--on-surface, var(--gray-900)); --btn-secondary-border: var(--border-strong, var(--gray-300)); } /* ----------------------------------------------------------------------------- * Reset & Base * -------------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { /* scroll-behavior handled by Motion System (Lenis) or JS fallback */ /* Native CSS smooth scroll conflicts with Lenis interpolation */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent mobile browsers from auto-inflating text (we handle responsive typography) */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-height-normal); color: var(--ctx-text); background: var(--surface-default); } img { max-width: 100%; height: auto; display: block; } svg { overflow: hidden; /* Prevent stroke overflow causing visual artifacts */ } a { color: inherit; text-decoration: none; transition: color var(--motion-duration-sm); } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul, ol { list-style: none; } /* ============================================ REDUCED MOTION ACCESSIBILITY Global handling for users who prefer reduced motion. Component animations that bypass the Motion System. ============================================ */ @media (prefers-reduced-motion: reduce) { /* Animation utility classes (continuous animations only - reveals via Motion System) */ .animate-float, .animate-pulse, .animate-bounce, .animate-spin, .animate-ping { animation: none !important; } /* Button animations */ .btn--pulse, .btn--loading::after, .btn--glow, .btn__spinner-icon { animation: none !important; } /* Hero decorative animations */ .hero__scroll-indicator, .hero__badge, .hero__visual, .hero--gradient-animate, .hero--shapes-blob::before, .hero--aurora::before, .hero--cta-pulse .hero__actions .btn--primary, .hero--glow-center::before { animation: none !important; } /* Section decorative animations */ .section--aurora::before, .section--floating-shapes::before, .section--floating-shapes::after, .section--animated-border::before { animation: none !important; } /* Text animations */ .text-gradient-animated, .text-typewriter::after { animation: none !important; } /* Badge animations */ .badge--pulse::before, .badge-float { animation: none !important; } /* Component loading states */ .skeleton, .skeleton__text, .skeleton__circle, .skeleton__image, .skeleton--animated .skeleton__cell { animation: none !important; } /* Spinner components (all variants) */ .spinner, .spinner__icon, .spinner__dot, .spinner__ring, .spinner__bar, .autocomplete__spinner, .loading-spinner { animation: none !important; } /* Toast/notification animations */ .toast, .toast--entering, .toast--exiting { animation: none !important; } /* Progress bar animations */ .progress-bar--striped, .progress-bar--animated, .progress-bar--indeterminate .progress-bar__fill { animation: none !important; } /* Pulse/shimmer effects */ .shimmer, .pulse, .pulse-glow { animation: none !important; } /* Background effects */ .particle-bg::before { animation: none !important; } /* Marquee scrolling */ .marquee__track { animation: none !important; } /* Product/urgency indicators */ .product-card__urgency .icon { animation: none !important; } /* General transition reduction */ *, *::before, *::after { transition-duration: 0.01ms !important; } } /* ----------------------------------------------------------------------------- * Typography * -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--ctx-heading, var(--gray-900)); } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } /* Override deprecated UA styles for h1 in sectioning elements (H1UserAgentFontSizeInSection) * Browsers used to auto-shrink h1 inside section/article/nav/aside - this is being removed. * :where() keeps specificity at 0 so component styles can easily override. */ :where(article, aside, nav, section) h1 { font-size: var(--text-5xl); margin-block: 0.67em; } :where(article, aside, nav, section) :where(article, aside, nav, section) h1 { font-size: var(--text-5xl); margin-block: 0.67em; } p { margin-bottom: var(--space-4); } .text-muted { color: var(--ctx-text-muted, var(--gray-600)); } .text-white { color: var(--white); } /* ----------------------------------------------------------------------------- * Layout * -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); } .section { padding: calc(var(--space-12) * var(--dna-spacing-multiplier, 1)) 0; /* 48px mobile × DNA multiplier */ } /* Responsive section padding - desktop and above */ @media (min-width: 1024px) { .section { padding: calc(var(--space-20) * var(--dna-spacing-multiplier, 1)) 0; /* 80px desktop × DNA multiplier */ } } .section--sm { padding: calc(var(--space-8) * var(--dna-spacing-multiplier, 1)) 0; /* 32px mobile × DNA multiplier */ } @media (min-width: 1024px) { .section--sm { padding: calc(var(--space-12) * var(--dna-spacing-multiplier, 1)) 0; /* 48px desktop × DNA multiplier */ } } .section--lg { padding: calc(var(--space-16) * var(--dna-spacing-multiplier, 1)) 0; /* 64px mobile × DNA multiplier */ } @media (min-width: 1024px) { .section--lg { padding: calc(var(--space-24) * var(--dna-spacing-multiplier, 1)) 0; /* 96px desktop × DNA multiplier */ } } .section--xl { padding: calc(var(--space-20) * var(--dna-spacing-multiplier, 1)) 0; /* 80px mobile × DNA multiplier */ } @media (min-width: 1024px) { .section--xl { padding: calc(var(--space-32) * var(--dna-spacing-multiplier, 1)) 0; /* 128px desktop × DNA multiplier */ } } .section--none { padding: 0; } /* ----------------------------------------------------------------------------- * Section Padding Aliases (v4.0) * PHP generates section--padding-{size}, these alias to section--{size} * Keeps backward compat while enabling padding/height separation * -------------------------------------------------------------------------- */ .section--padding-none { padding: 0; } .section--padding-sm { padding: calc(var(--space-8) * var(--dna-spacing-multiplier, 1)) 0; } .section--padding-lg { padding: calc(var(--space-16) * var(--dna-spacing-multiplier, 1)) 0; } .section--padding-xl { padding: calc(var(--space-20) * var(--dna-spacing-multiplier, 1)) 0; } @media (min-width: 1024px) { .section--padding-sm { padding: calc(var(--space-12) * var(--dna-spacing-multiplier, 1)) 0; } .section--padding-lg { padding: calc(var(--space-24) * var(--dna-spacing-multiplier, 1)) 0; } .section--padding-xl { padding: calc(var(--space-32) * var(--dna-spacing-multiplier, 1)) 0; } } /* Compact section intrinsic height for lazy loading */ .section--padding-none:not(:first-of-type) { contain-intrinsic-size: 0 100px; } /* ----------------------------------------------------------------------------- * Section Height (v4.0) * Controls min-height independently from padding * Used for hero fullscreen, immersive sections, etc. * -------------------------------------------------------------------------- */ .section--height-sm { min-height: 30vh; } .section--height-md { min-height: 50vh; } .section--height-lg { min-height: 70vh; } .section--height-xl { min-height: 85vh; } .section--height-full, .section--height-screen { min-height: 100vh; } /* Height sections need flex for vertical alignment */ .section--height-sm, .section--height-md, .section--height-lg, .section--height-xl, .section--height-full, .section--height-screen { display: flex; flex-direction: column; } /* Vertical alignment modifiers (only with height) */ .section--align-center { justify-content: center; } .section--align-end { justify-content: flex-end; } /* Note: .section--gray and .section--alt are defined in Section Variants section */ /* ----------------------------------------------------------------------------- * Section Lazy Loading (CSS-001 Performance Optimization) * Uses content-visibility for render-on-demand of off-screen sections * Improves LCP and reduces initial paint time * -------------------------------------------------------------------------- */ .section:not(:first-of-type) { content-visibility: auto; contain-intrinsic-size: 0 500px; } /* Larger sections get more intrinsic height */ .section--lg:not(:first-of-type) { contain-intrinsic-size: 0 700px; } .section--xl:not(:first-of-type) { contain-intrinsic-size: 0 800px; } /* Compact sections get minimal intrinsic height */ .section--none:not(:first-of-type) { contain-intrinsic-size: 0 100px; } /* Hero sections should not be lazy loaded (above the fold) */ .hero, .section:first-of-type { content-visibility: visible; } .section--dark { background: var(--surface-dark-default, var(--gray-900)); color: var(--on-surface-dark, var(--white)); } /* Note: .section--dark h1/h2/h3 rule removed (was redundant) * Headings use color: var(--ctx-text) which inherits from context * .section--dark already sets --ctx-text via dark context block (line ~578) * This allows [data-theme="light"] children to override heading colors properly */ /* Grid */ .grid { display: grid; gap: var(--space-4); /* 16px mobile */ } /* Responsive grid gaps - tablet and above */ @media (min-width: 768px) { .grid { gap: var(--space-6); /* 24px tablet+ */ } } .grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Bento Grid (Asymmetric) * CRITICAL: grid-auto-rows is REQUIRED for grid-row: span N to work correctly. * Without it, rows have height: auto based on content, causing asymmetric items. * See CLAUDE.md "CSS Grid Spanning Requirements" and "Bento Grid Math Rule" for documentation. * * GRID MATH RULE: Total cells must be divisible by column count. * Span values: 1x1=1 cell, 2x1=2, 1x2=2, 2x2=4 * Example: 4 cols × 3 rows = 12 cells. Items summing to 11 = 1 hole! * Use layout="balanced" for auto-calculated spans that fill perfectly. */ .bento-grid { --bento-columns: 4; display: grid; grid-template-columns: repeat(var(--bento-columns), 1fr); grid-auto-rows: minmax(var(--bento-cell-height, 180px), 1fr); grid-auto-flow: dense; gap: var(--space-4); /* 16px mobile */ } /* Bento items stretch their content to fill grid cell */ .bento-grid__item { display: flex; flex-direction: column; } .bento-grid__item > * { flex: 1; min-height: 0; width: 100%; } /* Bento cards fill their cells by design */ .bento-grid__item > .card { height: 100%; } /* Bento: flex layout for standard cards (NOT overlay which uses position:absolute) */ .bento-grid__item > .card:not(.card--overlay) { display: flex; flex-direction: column; } /* Bento: image grows to fill available space */ .bento-grid__item > .card:not(.card--overlay) .card__image { flex: 1; min-height: 0; aspect-ratio: unset; } .bento-grid__item > .card:not(.card--overlay) .card__image img { height: 100%; width: 100%; object-fit: cover; } /* Bento: body stays compact, text clamped for consistent height */ .bento-grid__item > .card:not(.card--overlay) .card__body { flex-shrink: 0; } .bento-grid__item > .card .card__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Horizontal cards in bento: row direction */ .bento-grid__item > .card--horizontal { flex-direction: row; } .bento-grid__item > .card--horizontal .card__image { flex: 0 0 40%; height: auto; } .bento-grid__item > .card--horizontal .card__body { flex: 1; } /* Responsive bento grid gaps - tablet and above */ @media (min-width: 768px) { .bento-grid { gap: var(--space-6); /* 24px tablet+ */ } } /* Mobile: Stack all items (single column) */ @media (max-width: 767px) { .bento-grid { --bento-columns: 1; grid-template-columns: 1fr; } .bento-grid__item { grid-column: auto !important; grid-row: auto !important; } } /* Bento Grid Items - Span Variants */ .bento-grid__item--1x1 { grid-column: span 1; grid-row: span 1; } .bento-grid__item--2x1 { grid-column: span 2; grid-row: span 1; } .bento-grid__item--1x2 { grid-column: span 1; grid-row: span 2; } .bento-grid__item--2x2 { grid-column: span 2; grid-row: span 2; } /* Tablet: 2-column layout (constrains spans to fit) */ @media (min-width: 768px) and (max-width: 1023px) { .bento-grid { --bento-columns: 2; grid-template-columns: repeat(2, 1fr); } /* 2x1 and 2x2 span full width on tablet */ .bento-grid__item--2x1, .bento-grid__item--2x2 { grid-column: span 2; } .bento-grid__item--1x1, .bento-grid__item--1x2 { grid-column: span 1; } } /* Desktop: 4-column layout (default) */ @media (min-width: 1024px) { .bento-grid__item--2x1, .bento-grid__item--2x2 { grid-column: span 2; } } /* Bento Grid Gap Modifiers */ .bento-grid--gap-none { gap: 0; } .bento-grid--gap-xs { gap: var(--space-2); } .bento-grid--gap-sm { gap: var(--space-3); } .bento-grid--gap-lg { gap: var(--space-8); } .bento-grid--gap-xl { gap: var(--space-12); /* Aligned with margin scale (Wave 4 fix) */ } .bento-grid--gap-2xl { gap: var(--space-16); /* Aligned with margin scale (Wave 4 fix) */ } /* Bento Grid Layout Presets */ .bento-grid--featured .bento-grid__item:first-child { grid-column: span 2; grid-row: span 2; } .bento-grid--featured .bento-grid__item:nth-child(2) { grid-row: span 2; } /* Animation Support - Stagger items */ .bento-grid[data-motion="stagger"] .bento-grid__item, .bento-grid[data-stagger] .bento-grid__item { opacity: 0; transform: translateY(20px); animation: fadeUp 0.6s ease-out forwards; } .bento-grid[data-motion="stagger"] .bento-grid__item:nth-child(1), .bento-grid[data-stagger] .bento-grid__item:nth-child(1) { animation-delay: 0.1s; } .bento-grid[data-motion="stagger"] .bento-grid__item:nth-child(2), .bento-grid[data-stagger] .bento-grid__item:nth-child(2) { animation-delay: 0.2s; } .bento-grid[data-motion="stagger"] .bento-grid__item:nth-child(3), .bento-grid[data-stagger] .bento-grid__item:nth-child(3) { animation-delay: 0.3s; } .bento-grid[data-motion="stagger"] .bento-grid__item:nth-child(4), .bento-grid[data-stagger] .bento-grid__item:nth-child(4) { animation-delay: 0.4s; } .bento-grid[data-motion="stagger"] .bento-grid__item:nth-child(5), .bento-grid[data-stagger] .bento-grid__item:nth-child(5) { animation-delay: 0.5s; } .bento-grid[data-motion="stagger"] .bento-grid__item:nth-child(6), .bento-grid[data-stagger] .bento-grid__item:nth-child(6) { animation-delay: 0.6s; } /* Flex */ .flex { display: flex; } .flex--center { align-items: center; justify-content: center; } .flex--between { align-items: center; justify-content: space-between; } /* ----------------------------------------------------------------------------- * Sticky Section * Section with one sticky column and one scrolling column * -------------------------------------------------------------------------- */ .sticky-section__inner { display: flex; flex-direction: column; gap: var(--sticky-gap, var(--space-6)); } /* Desktop: Two-column layout */ @media (min-width: 1024px) { .sticky-section__inner { flex-direction: row; align-items: flex-start; } /* Left sticky (default) */ .sticky-section--left .sticky-section__sticky { order: 1; } .sticky-section--left .sticky-section__scroll { order: 2; } /* Right sticky */ .sticky-section--right .sticky-section__sticky { order: 2; } .sticky-section--right .sticky-section__scroll { order: 1; } .sticky-section__sticky { position: sticky; top: var(--sticky-top, 100px); flex: 0 0 var(--sticky-width, 40%); max-height: calc(100vh - var(--sticky-top, 100px) - 2rem); overflow-y: auto; /* Smooth scrollbar */ scrollbar-width: thin; scrollbar-color: var(--ctx-border) transparent; } .sticky-section__sticky::-webkit-scrollbar { width: 6px; } .sticky-section__sticky::-webkit-scrollbar-track { background: transparent; } .sticky-section__sticky::-webkit-scrollbar-thumb { background: var(--ctx-border); border-radius: var(--radius-sm); } .sticky-section__sticky::-webkit-scrollbar-thumb:hover { background: var(--ctx-border-hover, var(--gray-400)); } .sticky-section__scroll { flex: 1; min-width: 0; /* Allow flex item to shrink below content size */ } } /* Mobile: Stack layout (sticky disabled) */ @media (max-width: 1023px) { .sticky-section__sticky { position: static; } } /* ----------------------------------------------------------------------------- * Skip to Content Link (WCAG 2.4.1) * -------------------------------------------------------------------------- */ .skip-to-content { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); z-index: var(--z-tooltip); padding: var(--space-2) var(--space-4); background: var(--primary, #3b82f6); color: var(--primary-contrast, var(--white)); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); text-decoration: none; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); transition: top var(--motion-duration-sm); } .skip-to-content:focus-visible { top: var(--space-2); } /* Ensure main can receive programmatic focus without visible outline */ #main:focus { outline: none; /* Focus is visible via skip link, not main element */ } /* ----------------------------------------------------------------------------- * Header * -------------------------------------------------------------------------- */ .header { position: sticky; top: var(--layout-top-offset, 0); z-index: 100; background: var(--ctx-surface, var(--white)); border-bottom: 1px solid var(--ctx-border, var(--gray-200)); transition: top var(--motion-duration-normal) var(--motion-ease-out), box-shadow var(--motion-duration-sm); } .header.is-scrolled { box-shadow: var(--shadow-md); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); } .header__logo img { height: var(--header-logo-height); width: auto; } .header__nav { display: flex; align-items: center; gap: var(--space-8); } .header__nav a { font-weight: var(--font-weight-medium); color: var(--ctx-text-muted, var(--gray-600)); padding: var(--space-2) 0; position: relative; } .header__nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary, #3b82f6); transition: width var(--motion-duration-sm); } .header__nav a:hover, .header__nav a.is-active { color: var(--ctx-text, var(--gray-900)); } .header__nav a:hover::after, .header__nav a.is-active::after { width: 100%; } .header__actions { display: flex; align-items: center; gap: var(--space-4); } .header__search-btn, .header__menu-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--ctx-text-muted, var(--gray-600)); transition: all var(--motion-duration-sm); } .header__search-btn:hover, .header__menu-btn:hover { background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text, var(--gray-900)); } .header__menu-btn { display: none; flex-direction: column; gap: var(--space-1); } .header__menu-btn span { width: 20px; height: 2px; background: currentColor; transition: all var(--motion-duration-sm); } .header__menu-btn.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .header__menu-btn.is-active span:nth-child(2) { opacity: 0; } .header__menu-btn.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile Menu */ .mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ctx-surface, var(--white)); border-bottom: 1px solid var(--ctx-border, var(--gray-200)); padding: var(--space-6); transform: translateY(-10px); opacity: 0; visibility: hidden; transition: all var(--motion-duration-sm); } .mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .mobile-menu__nav { display: flex; flex-direction: column; gap: var(--space-4); } .mobile-menu__nav a, .mobile-menu__link { font-size: var(--text-lg); font-weight: var(--font-weight-medium); padding: var(--space-3) 0; border-bottom: 1px solid var(--ctx-border, var(--gray-200)); display: block; } /* Mobile submenu accordion */ .mobile-menu__item--has-sub { border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } /* Header row: link + toggle button side by side */ .mobile-menu__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .mobile-menu__header .mobile-menu__link { flex: 1; } /* Toggle button (chevron) */ .mobile-menu__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: inherit; border-radius: var(--radius-sm); transition: background var(--motion-duration-sm); } .mobile-menu__toggle:hover { background: var(--ctx-bg-elevated, rgba(0, 0, 0, 0.05)); } .mobile-menu__toggle svg { transition: transform var(--motion-duration-sm); } .mobile-menu__item--has-sub.is-open .mobile-menu__toggle svg { transform: rotate(180deg); } /* Legacy support */ .mobile-menu__link--toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: var(--text-lg); font-weight: var(--font-weight-medium); padding: var(--space-3) 0; background: none; border: none; cursor: pointer; color: inherit; } .mobile-menu__link--toggle svg { transition: transform var(--motion-duration-sm); } .mobile-menu__item--has-sub.is-open .mobile-menu__link--toggle svg { transform: rotate(180deg); } .mobile-menu__sub { max-height: 0; overflow: hidden; transition: max-height var(--motion-duration-md); } .mobile-menu__item--has-sub.is-open .mobile-menu__sub { max-height: 500px; } .mobile-menu__sub-link { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-base); color: var(--ctx-text-muted, var(--gray-600)); } .mobile-menu__sub-link:hover { color: var(--primary, #3b82f6); } /* Desktop Dropdown */ .header__nav-item { position: relative; } .header__nav-link { font-weight: var(--font-weight-medium); color: var(--ctx-text-muted, var(--gray-600)); padding: var(--space-2) 0; position: relative; display: flex; align-items: center; gap: var(--space-1); background: none; border: none; cursor: pointer; font-size: var(--text-base); font-family: inherit; } .header__nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary, #3b82f6); transition: width var(--motion-duration-sm); } .header__nav-link:hover, .header__nav-item.is-open .header__nav-link { color: var(--ctx-text, var(--gray-900)); } .header__nav-link:hover::after, .header__nav-item.is-open .header__nav-link::after { width: 100%; } .header__nav-icon { transition: transform var(--motion-duration-sm); } .header__nav-item.is-open .header__nav-icon { transform: rotate(180deg); } .header__dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 220px; background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: var(--space-2); opacity: 0; visibility: hidden; transition: all var(--motion-duration-sm); z-index: 100; } .header__nav-item.is-open .header__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .header__dropdown-inner { display: flex; flex-direction: column; } .header__dropdown-link { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--ctx-text-muted, var(--gray-600)); transition: all var(--motion-duration-sm); } .header__dropdown-link:hover { background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text, var(--gray-900)); } .header__dropdown-link span:first-child { font-weight: var(--font-weight-medium); } .header__dropdown-desc { font-size: var(--text-xs); color: var(--ctx-text-faint); margin-top: var(--space-1); } /* ----------------------------------------------------------------------------- * Icons (content/icon partial) * SVG icons with size and color variants * -------------------------------------------------------------------------- */ .icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: currentColor; } /* Icon sizes */ .icon--xs { width: 12px; height: 12px; } .icon--sm { width: 16px; height: 16px; } .icon--md { width: 20px; height: 20px; } .icon--lg { width: 24px; height: 24px; } .icon--xl { width: 32px; height: 32px; } .icon--2xl { width: 48px; height: 48px; } /* Icon colors - brand colors are scheme-independent (same in light/dark) */ .icon--primary { color: var(--primary, #3b82f6); } .icon--secondary { color: var(--secondary, var(--purple)); } .icon--success { color: var(--success, #22c55e); } .icon--warning { color: var(--warning, #f59e0b); } .icon--danger { color: var(--error, #ef4444); } .icon--muted { color: var(--ctx-text-muted, var(--gray-600)); } /* ----------------------------------------------------------------------------- * Buttons * -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); min-height: 44px; /* WCAG 2.5.5 - Touch target size */ min-width: 44px; /* WCAG 2.5.5 - Touch target size */ font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); border-radius: var(--btn-radius, var(--radius-md)); transition: all var(--motion-duration-sm); cursor: pointer; border: 2px solid transparent; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; } .btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-color); border-color: var(--btn-primary-border); } .btn--primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border-hover); color: var(--btn-primary-color); box-shadow: var(--shadow-glow-md); transform: translateY(-2px); } .btn--secondary { background: transparent; color: var(--btn-secondary-color); border-color: var(--btn-secondary-border); } .btn--secondary:hover { border-color: var(--btn-secondary-border-hover); color: var(--btn-secondary-border-hover); } .btn--dark { background: var(--black); color: var(--white); border-color: var(--black); } .btn--dark:hover { background: var(--black-light); } .btn--white { background: var(--white); color: var(--black); border-color: var(--white); } .btn--white:hover { background: var(--ctx-bg-section, var(--gray-100)); } .btn--ghost { background: transparent; color: var(--white); border-color: color-mix(in srgb, var(--white) 30%, transparent); } .btn--ghost:hover { border-color: var(--primary, #3b82f6); color: var(--primary, #3b82f6); } .btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); } .btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); } .btn--full { width: 100%; } /* Button: Outline variants */ .btn--outline-primary { background: transparent; color: var(--primary, #3b82f6); border-color: var(--primary, #3b82f6); } .btn--outline-primary:hover { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); box-shadow: var(--shadow-primary-md); } .btn--outline-white { background: transparent; color: var(--white); border-color: var(--white); } .btn--outline-white:hover { background: var(--white); color: var(--black); } /* Button: Rounded (pill-shaped) */ .btn--rounded { border-radius: var(--radius-full); } /* Button: Icon only (square) */ .btn--icon-only { padding: var(--space-3); aspect-ratio: 1; min-width: auto; } .btn--icon-only.btn--sm { padding: var(--space-2); } .btn--icon-only.btn--lg { padding: var(--space-4); } /* Button: Loading state */ .btn--loading { position: relative; color: transparent; pointer-events: none; cursor: wait; } .btn--loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.6s linear infinite; } .btn--loading.btn--primary::after { border-color: var(--on-primary, var(--white)); border-right-color: transparent; } .btn--loading.btn--secondary::after, .btn--loading.btn--ghost::after { border-color: var(--primary, #3b82f6); border-right-color: transparent; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* Button Effects: Glow */ .btn--glow { box-shadow: var(--shadow-glow-md); } .btn--glow:hover { box-shadow: var(--shadow-glow-lg); } /* Button Effects: Pulse */ .btn--pulse { animation: btn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 59, 130, 246), 0.7); } 50% { box-shadow: 0 0 0 8px rgba(var(--primary-rgb, 59, 130, 246), 0); } } /* Button Effects: Shine */ .btn--shine { position: relative; overflow: hidden; } .btn--shine::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white) 30%, transparent), transparent); transition: left var(--motion-duration-lg); } .btn--shine:hover::before { left: 100%; } /* ----------------------------------------------------------------------------- * Hero Section * Brand-tint gradient: mixes primary color into background for distinction * Fallback for browsers without color-mix() support * -------------------------------------------------------------------------- */ .hero { /* Fallback: use section bg for some distinction (browsers without color-mix) */ background: var(--ctx-bg-section, var(--ctx-bg, var(--white))); /* Modern browsers: brand-tint gradient using color-mix() * Creates visible hero distinction by blending brand color into background * 3% → 8% gradient provides subtle but visible brand presence */ background: linear-gradient( 135deg, color-mix(in srgb, var(--primary, #3b82f6) 3%, var(--ctx-bg) 97%) 0%, color-mix(in srgb, var(--primary, #3b82f6) 8%, var(--ctx-bg) 92%) 100% ); color: var(--ctx-text, var(--gray-900)); padding: var(--space-20) 0 var(--space-24); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -200px; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.15) 0%, transparent 70%); pointer-events: none; z-index: 0; } .hero::after { content: ''; position: absolute; bottom: -200px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%); pointer-events: none; z-index: 0; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; position: relative; z-index: 1; } .hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-6); } .hero__badge-icon { display: inline-flex; align-items: center; color: inherit; } .hero__title { font-size: var(--text-6xl); line-height: var(--line-height-none); margin-bottom: var(--space-6); color: var(--ctx-text, var(--gray-900)); overflow-wrap: anywhere; /* Break long words on mobile if needed */ } .hero__title span { color: var(--primary); } .hero__text { font-size: var(--text-xl); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-8); max-width: 540px; overflow-wrap: anywhere; } /* Hero Actions (used by partial) */ .hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; position: relative; z-index: 1; } /* Hero CTA Note (below buttons, e.g., "No credit card required") */ .hero__cta-note { font-size: var(--text-sm); color: var(--ctx-text-muted); margin-top: var(--space-3); text-align: center; } /* Hero Subtitle (above title) */ .hero__subtitle { font-size: var(--text-lg); color: var(--primary); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-4); overflow-wrap: anywhere; } /* Hero Tagline (below title, for page/guide variants) */ .hero__tagline { font-size: var(--text-xl); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-6); max-width: 640px; overflow-wrap: anywhere; } /* Hero Content wrapper */ .hero__content { position: relative; z-index: 1; min-width: 0; /* Allow grid child to shrink below content width on mobile */ } /* Hero Visual (for split variants) */ .hero__visual { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; min-width: 0; /* Allow grid child to shrink below content width on mobile */ min-height: 400px; align-self: stretch; /* Fill grid row height */ } /* Ensure images fill the visual container */ .hero__visual img { max-width: 100%; height: 100%; object-fit: cover; } .hero__illustration { display: flex; justify-content: center; align-items: center; max-width: 100%; height: auto; } /* Hero Badges (trust badges row) */ .hero__badges { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); } .hero__badge-emoji { font-size: 1.2em; } /* Hero Meta (for guide variant) */ .hero__meta { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .hero__meta-item { display: flex; align-items: center; gap: var(--space-2); } /* Hero Stats */ .hero__stats { display: flex; gap: var(--space-8); margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--ctx-border, var(--gray-200)); } .hero__stat { text-align: center; } .hero__stat-value { display: block; font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--ctx-text, var(--on-surface)); line-height: var(--line-height-none); } .hero__stat-label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-top: var(--space-1); } /* Dark theme stats - use primary-light for accent if available */ [data-theme="dark"] .hero__stat-value { color: var(--primary-light, var(--ctx-text)); } /* Hero Video Background */ .hero__video-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__video-bg iframe, .hero__video-bg video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; } /* Hero Gradient Background */ .hero__gradient-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, var(--secondary, var(--primary-dark, #1e40af)) 50%, var(--primary-dark, #1e40af) 100% ); background-size: 200% 200%; animation: gradient-shift-oscillate 8s ease infinite; } @keyframes gradient-shift-oscillate { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Hero Scroll Indicator */ .hero__scroll-indicator { position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); animation: hero-bounce 2s ease-in-out infinite; color: var(--ctx-text-muted, var(--gray-600)); } @keyframes hero-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } /* Hero Image (direct img element in split layouts) */ .hero__image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--dna-radius, var(--radius-xl)); } /* Hero Image with floating animation (for mascot/product images) */ .hero__visual--animated .hero__image { max-width: 350px; width: auto; height: auto; filter: drop-shadow(0 30px 60px rgba(var(--primary-rgb), 0.3)); animation: hero-float 4s ease-in-out infinite; } @keyframes hero-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(2deg); } } /* ============================================================================= * Hero Layout Variants * ============================================================================= */ /* Centered variant - Container uses grid for proper centering */ .hero--centered > .container { display: grid; } .hero--centered .hero__inner { justify-self: center; grid-template-columns: 1fr; text-align: center; max-width: 900px; } .hero--centered .hero__text, .hero--centered .hero__tagline { margin-left: auto; margin-right: auto; } .hero--centered .hero__actions { justify-content: center; } .hero--centered .hero__badges { justify-content: center; } .hero--centered .hero__stats { justify-content: center; } /* Split variant (content left 60%, visual right 40%) */ .hero--split .hero__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-12); } .hero--split .hero__content { order: 1; } .hero--split .hero__visual { order: 2; } /* Split Reverse variant (visual left 40%, content right 60%) */ .hero--split-reverse .hero__inner { grid-template-columns: 1fr 1.2fr; gap: var(--space-12); } .hero--split-reverse .hero__content { order: 2; } .hero--split-reverse .hero__visual { order: 1; } /* Minimal variant (just title + subtitle, clean) */ .hero--minimal { padding: var(--space-16) 0; } .hero--minimal .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero--minimal .hero__title { font-size: var(--text-5xl); } .hero--minimal::before, .hero--minimal::after { display: none; } /* Page variant (inner page header) */ .hero--page { padding: var(--space-12) 0; } .hero--page .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero--page .hero__title { font-size: var(--text-4xl); } .hero--page::before, .hero--page::after { display: none; } /* Guide variant (article/guide header with meta) */ .hero--guide { padding: var(--space-12) 0; } /* Guide variant - Container uses grid for proper centering */ .hero--guide > .container { display: grid; } .hero--guide .hero__inner { justify-self: center; grid-template-columns: 1fr; text-align: center; max-width: 800px; } .hero--guide .hero__title { font-size: var(--text-4xl); } .hero--guide .hero__meta { justify-content: center; } /* Fullscreen variant */ .hero--fullscreen { min-height: 100vh; display: flex; align-items: center; padding: var(--space-24) 0; } .hero--fullscreen .hero__inner { grid-template-columns: 1fr; text-align: center; } /* Video variant */ .hero--video { position: relative; } .hero--video .hero__inner { grid-template-columns: 1fr; text-align: center; } /* Gradient variant */ .hero--gradient { color: var(--white); } .hero--gradient .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero--gradient .hero__subtitle, .hero--gradient .hero__text, .hero--gradient .hero__tagline { color: color-mix(in srgb, var(--white) 90%, transparent); } /* Parallax variant */ .hero--parallax { background-attachment: fixed; background-size: cover; background-position: center; } .hero--parallax .hero__inner { grid-template-columns: 1fr; text-align: center; } /* ============================================================================= * Hero Background Variants (v2.0) * Override the default brand-tint gradient for specific use cases * ============================================================================= */ /* Solid: No gradient, just the base background color */ /* Dark: Dark background for light-mode sites that need hero contrast */ .hero--dark { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary, #3b82f6) 10%, var(--surface-dark-default, var(--gray-900)) 90%) 0%, color-mix(in srgb, var(--primary, #3b82f6) 5%, var(--surface-dark-container, var(--gray-800)) 95%) 100% ); color: var(--on-surface-dark, var(--white)); } .hero--dark .hero__text, .hero--dark .hero__tagline { color: var(--on-surface-dark-variant, var(--gray-300)); } .hero--dark .hero__subtitle { color: var(--primary-light, var(--primary, #3b82f6)); } /* ============================================================================= * Hero Complex Background Override * * UX Standard: Industry leaders (Stripe, Linear, Vercel, Apple) use neutral * text on complex backgrounds (aurora, mesh, gradients with brand colors). * Colored accent text on these backgrounds competes visually and reduces * readability since the background already contains the brand color. * * When background uses --primary-rgb (aurora, mesh), accent text in brand * colors becomes unreadable. Force neutral colors for these contexts. * ============================================================================= */ .hero { --hero-accent: var(--primary); --hero-subtitle-color: var(--primary); } /* Complex backgrounds: neutralize accent colors */ .hero--aurora, .hero--gradient-mesh, .hero--bg-aurora, .hero--bg-mesh, .hero[data-effect="aurora"], .hero[data-effect="mesh"] { --hero-accent: var(--ctx-text); --hero-subtitle-color: var(--ctx-text-muted); } /* Apply hero-scoped accent to title spans within hero * Note: SplitType creates .char/.word/.line spans, all need to inherit this. * We use --hero-accent token which defaults to --primary but can be overridden * for complex backgrounds (aurora, mesh) where brand color competes with bg. */ .hero .hero__title span { color: var(--hero-accent); } /* Apply to .text-primary (explicit highlight class) */ .hero .text-primary { color: var(--hero-accent); } /* Apply to subtitle */ .hero .hero__subtitle { color: var(--hero-subtitle-color); } /* ============================================================================= * Hero Alignment Modifiers * ============================================================================= */ .hero--align-left .hero__content, .hero--align-left .hero__inner { text-align: left; } .hero--align-left .hero__actions, .hero--align-left .hero__stats, .hero--align-left .hero__meta { justify-content: flex-start; } .hero--align-center .hero__content, .hero--align-center .hero__inner { text-align: center; } .hero--align-center .hero__actions, .hero--align-center .hero__stats, .hero--align-center .hero__meta { justify-content: center; } .hero--align-center .hero__text, .hero--align-center .hero__tagline { margin-left: auto; margin-right: auto; } .hero--align-right .hero__content, .hero--align-right .hero__inner { text-align: right; } .hero--align-right .hero__actions, .hero--align-right .hero__stats, .hero--align-right .hero__meta { justify-content: flex-end; } /* ============================================================================= * Hero Size Modifiers * ============================================================================= */ .hero--sm { padding: var(--space-12) 0; } .hero--sm .hero__title { font-size: var(--text-4xl); } .hero--md { padding: var(--space-16) 0; } .hero--md .hero__title { font-size: var(--text-5xl); } /* .hero--lg is default */ .hero--xl { padding: var(--space-24) 0 var(--space-32); } .hero--xl .hero__title { font-size: clamp(var(--text-5xl), 5vw, var(--text-7xl)); } .hero--full { min-height: 100vh; display: flex; align-items: center; } /* ============================================================================= * Hero Background/Overlay Modifiers * WCAG AA Compliant: 4.5:1 contrast for normal text, 3:1 for large text * Config-driven via --comp-hero-* variables (set in config.php → components) * ============================================================================= */ .hero--has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } /* Text shadow for readability on all hero background images * Override: components.hero-text-shadow in config.php */ .hero--has-bg .hero__title, .hero--has-bg .hero__subtitle, .hero--has-bg .hero__text, .hero--has-bg .hero__tagline { text-shadow: var(--comp-hero-text-shadow, 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.9) ); } .hero--has-bg .hero__meta, .hero--has-bg .hero__badges { text-shadow: var(--comp-hero-text-shadow-meta, 0 1px 4px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) ); } /* Light overlay: ~3.8:1 contrast (AA for large text) * Override: components.hero-overlay-light in config.php */ .hero--overlay-light::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--comp-hero-overlay-light, 0.45)); z-index: 0; } /* Medium overlay: ~5.2:1 contrast (AA for normal text) * Override: components.hero-overlay-medium in config.php */ .hero--overlay-medium::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--comp-hero-overlay-medium, 0.65)); z-index: 0; } /* Heavy overlay: ~8.1:1 contrast (AAA compliant) - DEFAULT * Override: components.hero-overlay-heavy in config.php */ .hero--overlay-heavy::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--comp-hero-overlay-heavy, 0.80)); z-index: 0; } /* Ultra overlay: ~11.3:1 contrast (maximum for very bright images) * Override: components.hero-overlay-ultra in config.php */ .hero--overlay-ultra::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--comp-hero-overlay-ultra, 0.90)); z-index: 0; } /* Scrim gradient: darker at top (text area), lighter at bottom (image visible) * Override: components.hero-overlay-scrim-top/mid/bottom in config.php */ .hero--overlay-scrim::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, var(--comp-hero-overlay-scrim-top, 0.85)) 0%, rgba(0, 0, 0, var(--comp-hero-overlay-scrim-mid, 0.60)) 50%, rgba(0, 0, 0, var(--comp-hero-overlay-scrim-bottom, 0.30)) 100% ); z-index: 0; } /* Glass overlay: backdrop blur with semi-transparent overlay * Override: components.hero-overlay-glass, hero-blur, hero-saturate in config.php */ .hero--overlay-glass::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--comp-hero-overlay-glass, 0.50)); backdrop-filter: blur(var(--comp-hero-blur, 8px)) saturate(var(--comp-hero-saturate, 150%)); -webkit-backdrop-filter: blur(var(--comp-hero-blur, 8px)) saturate(var(--comp-hero-saturate, 150%)); z-index: 0; } @supports not (backdrop-filter: blur(8px)) { .hero--overlay-glass::before { background: rgba(0, 0, 0, var(--comp-hero-overlay-glass-fallback, 0.70)); } } /* Remove decorative elements when using overlays */ .hero--has-bg::after { display: none; } /* Re-enable ::after for treatments that need it */ .hero--treatment-duotone::after, .hero--treatment-brand-tint::after { display: block; } /* ============================================================================= * Hero Image Treatment Modifiers (2024-2025 Standards) * Modern image treatments replacing traditional dark overlays * Based on: Apple, Stripe, Linear, Vercel, Figma UX patterns * Config-driven via --comp-hero-* variables * ============================================================================= */ /* ----------------------------------------------------------------------------- * Duotone Treatment (Spotify/IBM Method) * Applies brand colors via grayscale + blend modes * Creates striking, on-brand visuals while ensuring text readability * ----------------------------------------------------------------------------- */ .hero--treatment-duotone { position: relative; isolation: isolate; } /* Convert to grayscale via blend mode with dark color */ .hero--treatment-duotone::before { content: ''; position: absolute; inset: 0; background: var(--comp-hero-duotone-dark, var(--surface-default, #1a1512)); mix-blend-mode: color; z-index: 1; pointer-events: none; } /* Apply brand color tint */ .hero--treatment-duotone::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, var(--primary-tint-25) 0%, transparent 40%, var(--primary-tint-15) 100% ); mix-blend-mode: overlay; z-index: 2; pointer-events: none; } /* Semi-transparent overlay for guaranteed text readability */ .hero--treatment-duotone .hero__content { position: relative; z-index: 4; } .hero--treatment-duotone .hero__content::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 200%; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 70% ); z-index: -1; pointer-events: none; } /* Ensure content is above all layers */ .hero--treatment-duotone .container, .hero--treatment-duotone .hero__inner { position: relative; z-index: 3; } /* Strong text shadow for readability */ .hero--treatment-duotone .hero__title, .hero--treatment-duotone .hero__subtitle, .hero--treatment-duotone .hero__text, .hero--treatment-duotone .hero__tagline { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 0, 0, 0.5); } /* ----------------------------------------------------------------------------- * Brand Tint Treatment * Colored overlay with brand color instead of pure black * Creates cohesive brand experience while ensuring readability * Modern approach seen on Linear, Vercel, Raycast * ----------------------------------------------------------------------------- */ .hero--treatment-brand-tint { position: relative; } .hero--treatment-brand-tint::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, color-mix(in srgb, var(--primary, #f5b800) 30%, rgba(0, 0, 0, 0.7)) 0%, rgba(0, 0, 0, 0.75) 100% ); z-index: 1; pointer-events: none; } /* Ensure content is above brand-tint layer */ .hero--treatment-brand-tint .container, .hero--treatment-brand-tint .hero__inner, .hero--treatment-brand-tint .hero__content { position: relative; z-index: 2; } /* Text shadow for brand-tint */ .hero--treatment-brand-tint .hero__title, .hero--treatment-brand-tint .hero__subtitle, .hero--treatment-brand-tint .hero__text, .hero--treatment-brand-tint .hero__tagline { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4); } /* ----------------------------------------------------------------------------- * Desaturate Treatment * Grayscale with optional tint for sophisticated, editorial look * Ensures text contrast while maintaining visual interest * Used by luxury brands, editorial sites, Apple product pages * ----------------------------------------------------------------------------- */ .hero--treatment-desaturate { position: relative; } .hero--treatment-desaturate::before { content: ''; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; filter: grayscale(var(--comp-hero-desaturate-amount, 100%)) brightness(var(--comp-hero-desaturate-brightness, 0.6)); z-index: -1; } /* Colorize the desaturated image with brand color */ .hero--treatment-desaturate.hero--treatment-colorize::after { content: ''; position: absolute; inset: 0; background: var(--comp-hero-colorize-color, var(--primary, #6366f1)); mix-blend-mode: overlay; opacity: var(--comp-hero-colorize-intensity, 0.3); z-index: 0; } /* ----------------------------------------------------------------------------- * Blur Background Treatment * Heavy blur for abstract background effect * Image provides color/mood without distracting from content * Used for form heroes, modal backgrounds, focus-heavy sections * ----------------------------------------------------------------------------- */ .hero--treatment-blur { position: relative; overflow: hidden; } .hero--treatment-blur::before { content: ''; position: absolute; inset: -20px; /* Extend beyond to avoid edge artifacts */ background: inherit; background-size: cover; background-position: center; filter: blur(var(--comp-hero-blur-amount, 20px)) brightness(var(--comp-hero-blur-brightness, 0.5)); z-index: -1; transform: scale(1.1); /* Extra scale to cover blur edges */ } /* ----------------------------------------------------------------------------- * Gradient Fade Treatment * Image fades into solid color (top-to-bottom or left-to-right) * Clean transition from image to content area * Modern split-feel without strict split layout * ----------------------------------------------------------------------------- */ .hero--treatment-fade-bottom::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, transparent var(--comp-hero-fade-start, 30%), var(--comp-hero-fade-color, var(--surface-default, #0f172a)) var(--comp-hero-fade-end, 100%) ); z-index: 0; pointer-events: none; } .hero--treatment-fade-top::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, transparent 0%, transparent var(--comp-hero-fade-start, 30%), var(--comp-hero-fade-color, var(--surface-default, #0f172a)) var(--comp-hero-fade-end, 100%) ); z-index: 0; pointer-events: none; } .hero--treatment-fade-left::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to left, transparent 0%, transparent var(--comp-hero-fade-start, 40%), var(--comp-hero-fade-color, var(--surface-default, #0f172a)) var(--comp-hero-fade-end, 100%) ); z-index: 0; pointer-events: none; } /* ----------------------------------------------------------------------------- * Vignette Treatment * Subtle edge darkening to focus attention on center content * Classic cinematographic technique, very subtle and professional * ----------------------------------------------------------------------------- */ .hero--treatment-vignette::after { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at center, transparent 0%, transparent var(--comp-hero-vignette-start, 50%), rgba(0, 0, 0, var(--comp-hero-vignette-intensity, 0.5)) 100% ); z-index: 0; pointer-events: none; } /* ----------------------------------------------------------------------------- * Noise Grain Treatment * Adds subtle film grain texture over image * Creates analog, premium feel * Used by photography sites, luxury brands * ----------------------------------------------------------------------------- */ .hero--treatment-grain::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: var(--comp-hero-grain-intensity, 0.15); mix-blend-mode: overlay; pointer-events: none; z-index: 1; } /* ----------------------------------------------------------------------------- * Split Image Treatment (Hybrid) * Image constrained to one side with solid color on other * Modern approach for content-heavy heroes with imagery * Can be combined with other treatments on the image side * ----------------------------------------------------------------------------- */ .hero--treatment-split { position: relative; } .hero--treatment-split::before { content: ''; position: absolute; top: 0; left: 0; width: var(--comp-hero-split-ratio, 50%); height: 100%; background: var(--comp-hero-split-bg, var(--surface-default, #0f172a)); z-index: 1; } .hero--treatment-split.hero--treatment-split-right::before { left: auto; right: 0; } /* Ensure content is above split overlay */ .hero--treatment-split .container { position: relative; z-index: 2; } /* ============================================================================= * Hero Visual Image Treatments (for split layouts) * Applied to .hero__visual element, affects the inside * ============================================================================= */ /* Base treatment setup */ .hero__visual[class*="--treatment-"] { position: relative; overflow: hidden; border-radius: var(--dna-radius, var(--radius-xl)); } .hero__visual[class*="--treatment-"] .hero__image { position: relative; z-index: 0; /* Image below overlay */ } .hero__visual[class*="--treatment-"]::before, .hero__visual[class*="--treatment-"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; /* Overlay above image */ } /* Brand Tint: Primary color overlay with soft blend */ .hero__visual--treatment-brand-tint::after { background: color-mix(in srgb, var(--primary) 30%, transparent); mix-blend-mode: multiply; } .hero__visual--treatment-brand-tint .hero__image { filter: contrast(1.05) saturate(0.9); } /* Duotone: Two-color effect (modern, striking) */ .hero__visual--treatment-duotone::before { background: var(--surface-default, #0A0A0F); mix-blend-mode: color; opacity: 0.7; } .hero__visual--treatment-duotone::after { background: var(--primary); mix-blend-mode: soft-light; opacity: 0.5; } .hero__visual--treatment-duotone .hero__image { filter: grayscale(100%) contrast(1.2); } /* Desaturate: Grayscale with subtle warmth */ .hero__visual--treatment-desaturate .hero__image { filter: grayscale(100%) contrast(1.1); } /* Colorize: Grayscale + primary color overlay */ .hero__visual--treatment-colorize::after { background: var(--primary); mix-blend-mode: color; opacity: 0.3; } .hero__visual--treatment-colorize .hero__image { filter: grayscale(100%) contrast(1.1); } /* Blur: Heavy blur for abstract background effect */ .hero__visual--treatment-blur .hero__image { filter: blur(8px) saturate(1.2); transform: scale(1.1); /* Prevent blur edge artifacts */ } /* Contrast: Enhanced contrast for product photography */ .hero__visual--treatment-contrast .hero__image { filter: contrast(1.15) brightness(1.05) saturate(1.1); } /* Vignette: Subtle edge darkening */ .hero__visual--treatment-vignette::after { background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%); } /* Grain: Film grain texture overlay */ .hero__visual--treatment-grain::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.08; mix-blend-mode: overlay; } /* Fade Bottom: Gradient fade to background */ .hero__visual--treatment-fade-bottom::after { background: linear-gradient(to top, var(--surface-default, #ffffff) 0%, transparent 60%); } /* Fade Left: Gradient fade for split layouts */ .hero__visual--treatment-fade-left::after { background: linear-gradient(to right, var(--surface-default, #ffffff) 0%, transparent 60%); } /* ============================================================================= * Hub Showcase (Stacked Layout Pattern) * Image displayed BELOW hero text - industry standard (Shopify, Notion, Airtable) * Guarantees text readability while showcasing imagery * ============================================================================= */ .hub-showcase { margin-top: calc(-1 * var(--space-8)); margin-bottom: var(--space-12); position: relative; z-index: 1; } .hub-showcase__figure { margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .hub-showcase__image { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; } /* Animation - Hub showcase uses Motion System (data-motion="fade-up") */ /* ============================================================================= * Hero Animation Modifiers * NOTE: Hero animations now use Motion System (data-motion attributes). * CSS modifiers below are for JS detection, actual animation via GSAP. * ============================================================================= */ /* .hero--animate enables Motion System animations on hero elements */ /* Animation handled by motion-reveal.js, not CSS keyframes */ /* ============================================================================= * Hero Title Style Modifiers * ============================================================================= */ /* Gradient title text */ .hero--title-gradient .hero__title { background: linear-gradient(135deg, var(--ctx-text, var(--gray-900)) 0%, var(--primary) 50%, var(--ctx-text, var(--gray-900)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Underlined title with accent */ .hero--title-underline .hero__title { position: relative; display: inline-block; } .hero--title-underline .hero__title::after { content: ''; position: absolute; left: 0; bottom: -0.1em; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), transparent); border-radius: var(--radius-sm); } /* Highlighted title with background */ .hero--title-highlight .hero__title span { background: linear-gradient(180deg, transparent 60%, rgba(var(--primary-rgb), 0.3) 60%); padding: 0 0.1em; } /* Outlined/stroke title */ .hero--title-outline .hero__title { -webkit-text-stroke: 2px var(--ctx-text, var(--gray-900)); -webkit-text-fill-color: transparent; } /* ============================================================================= * Hero Pattern Modifiers * ============================================================================= */ /* Dot pattern overlay */ .hero--pattern-dots::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 1px, transparent 1px); background-size: 20px 20px; z-index: 0; pointer-events: none; } /* Grid pattern overlay */ .hero--pattern-grid::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--primary-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px); background-size: 40px 40px; z-index: 0; pointer-events: none; } /* Diagonal lines pattern */ .hero--pattern-diagonal::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(var(--primary-rgb), 0.03) 10px, rgba(var(--primary-rgb), 0.03) 20px ); z-index: 0; pointer-events: none; } /* ============================================================================= * Hero Shape Modifiers * ============================================================================= */ /* Floating circles decoration */ .hero--shapes-circles::after { content: ''; position: absolute; top: 10%; right: 5%; width: 300px; height: 300px; border: 2px solid rgba(var(--primary-rgb), 0.2); border-radius: 50%; z-index: 0; pointer-events: none; } .hero--shapes-circles::before { content: ''; position: absolute; bottom: 10%; left: 5%; width: 200px; height: 200px; border: 2px solid rgba(var(--primary-rgb), 0.15); border-radius: 50%; z-index: 0; pointer-events: none; } /* Blob shape decoration */ .hero--shapes-blob::after { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: rgba(var(--primary-rgb), 0.1); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; z-index: 0; pointer-events: none; animation: blob-morph 8s ease-in-out infinite; } @keyframes blob-morph { 0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 50% { border-radius: 60% 40% 30% 70% / 50% 60% 50% 40%; } } /* Wave bottom decoration */ .hero--wave-bottom::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23ffffff' d='M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom; background-size: cover; z-index: 1; pointer-events: none; } /* ============================================================================= * Hero Advanced Animation Variants * NOTE: Reveal animations (slide-in, zoom, fade) now use Motion System. * CSS modifiers (.hero--slide-left, etc.) detected by motion-reveal.js. * ============================================================================= */ /* slide-in-right keyframe retained for component animations (notices, toasts) */ @keyframes slide-in-right { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* Parallax scroll effect (requires JS) */ .hero--parallax-scroll { overflow: hidden; } .hero--parallax-scroll .hero__content { will-change: transform; } /* ============================================================================= * Hero Gradient & Glow Variants * ============================================================================= */ /* Mesh gradient background */ .hero--gradient-mesh { background: radial-gradient(ellipse at 20% 80%, rgba(var(--primary-rgb), 0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(var(--secondary-rgb, var(--primary-rgb)), 0.2) 0%, transparent 50%), radial-gradient(ellipse at 40% 40%, rgba(var(--primary-rgb), 0.15) 0%, transparent 60%), var(--ctx-bg, var(--white)); } /* Aurora effect */ .hero--aurora { position: relative; overflow: hidden; } .hero--aurora::before { content: ''; position: absolute; inset: -50%; background: conic-gradient( from 0deg at 50% 50%, rgba(var(--primary-rgb), 0.1) 0deg, rgba(var(--secondary-rgb, var(--primary-rgb)), 0.15) 120deg, rgba(var(--primary-rgb), 0.1) 240deg, rgba(var(--secondary-rgb, var(--primary-rgb)), 0.15) 360deg ); animation: aurora-rotate 20s linear infinite; z-index: 0; pointer-events: none; } @keyframes aurora-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Spotlight effect */ .hero--spotlight { position: relative; } .hero--spotlight::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 80%; height: 60%; background: radial-gradient(ellipse, rgba(var(--primary-rgb), 0.2) 0%, transparent 70%); z-index: 0; pointer-events: none; } /* Glow behind title */ .hero--title-glow .hero__title { text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3), 0 0 40px rgba(var(--primary-rgb), 0.2), 0 0 60px rgba(var(--primary-rgb), 0.1); } /* Neon glow effect */ .hero--neon .hero__title { text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 40px var(--primary); } /* Radial glow background */ .hero--glow-center::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient( circle at center, rgba(var(--primary-rgb), 0.15) 0%, transparent 60% ); z-index: 0; pointer-events: none; } /* ============================================================================= * Hero Texture Variants * ============================================================================= */ /* Noise texture overlay */ .hero--noise::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.03; z-index: 0; pointer-events: none; } /* Grain texture */ .hero--grain::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E"); opacity: 0.05; z-index: 0; pointer-events: none; mix-blend-mode: overlay; } /* ============================================================================= * Hero Interactive Variants * ============================================================================= */ /* Hover lift on CTA buttons */ .hero--cta-hover .hero__actions .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-primary-lg); } /* Pulsing CTA */ .hero--cta-pulse .hero__actions .btn--primary { animation: cta-pulse 2s ease-in-out infinite; } @keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4); } 50% { box-shadow: 0 0 0 15px rgba(var(--primary-rgb), 0); } } /* Shake attention animation */ .hero--attention .hero__actions .btn--primary { animation: attention-shake 0.5s ease-in-out 2s 3; } @keyframes attention-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ============================================================================= * Hero Additional Layout Variants * ============================================================================= */ /* Stacked variant (magazine style - title/subtitle stacked, content below) */ .hero--stacked > .container { display: grid; } .hero--stacked .hero__inner { justify-self: center; grid-template-columns: 1fr; text-align: center; max-width: 1000px; } .hero--stacked .hero__subtitle { font-size: var(--text-xl); margin-bottom: var(--space-2); } .hero--stacked .hero__title { font-size: clamp(var(--text-5xl), 6vw, var(--text-7xl)); margin-bottom: var(--space-8); } .hero--stacked .hero__text { max-width: 700px; margin-left: auto; margin-right: auto; } /* Nano variant (ultra-compact banner) */ .hero--nano { padding: var(--space-6) 0; } .hero--nano .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero--nano .hero__title { font-size: var(--text-2xl); margin-bottom: 0; } .hero--nano::before, .hero--nano::after { display: none; } /* Banner size (slightly larger than nano) */ .hero--banner { padding: var(--space-8) 0; } .hero--banner .hero__title { font-size: var(--text-3xl); } /* Split Equal (50/50 layout) */ .hero--split-equal .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--space-12); } /* Asymmetric variant (content heavy - 65/35) */ .hero--asymmetric .hero__inner { grid-template-columns: 1.8fr 1fr; gap: var(--space-16); } .hero--asymmetric .hero__content { order: 1; } .hero--asymmetric .hero__visual { order: 2; } /* Asymmetric Reverse (visual heavy - 35/65) */ .hero--asymmetric-reverse .hero__inner { grid-template-columns: 1fr 1.8fr; gap: var(--space-16); } .hero--asymmetric-reverse .hero__content { order: 2; } .hero--asymmetric-reverse .hero__visual { order: 1; } /* Category variant (archive/category headers) */ .hero--category { padding: var(--space-12) 0; } .hero--category .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero--category .hero__title { font-size: var(--text-4xl); } .hero--category::before, .hero--category::after { display: none; } /* Product variant (product page headers) */ .hero--product .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; } .hero--product .hero__title { font-size: var(--text-4xl); } /* Boxed variant (content in card overlay) */ .hero--boxed { padding: var(--space-24) 0; } .hero--boxed .hero__inner { grid-template-columns: 1fr; justify-items: center; } .hero--boxed .hero__content { background: var(--ctx-bg-elevated); padding: var(--space-12); border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); max-width: 700px; text-align: center; } /* Floating variant (content card floating over bg) */ .hero--floating { padding: var(--space-32) 0; } .hero--floating .hero__inner { grid-template-columns: 1fr; justify-items: center; } .hero--floating .hero__content { background: var(--ctx-bg-elevated); padding: var(--space-12) var(--space-16); border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); max-width: 800px; text-align: center; transform: translateY(var(--space-8)); } /* Diagonal variant (diagonal split background) */ .hero--diagonal { position: relative; overflow: hidden; } .hero--diagonal .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--space-12); } .hero__diagonal-bg { position: absolute; top: 0; right: 0; width: 55%; height: 100%; background: var(--primary, #3b82f6); clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%); opacity: 0.1; z-index: 0; } /* App variant (app landing with mockup) */ .hero--app .hero__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: center; } .hero--app .hero__visual { display: flex; justify-content: center; } .hero--app .hero__visual img { max-height: 500px; filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--black) 30%, transparent)); } /* Form variant (hero with integrated form) */ .hero--form .hero__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: center; } .hero--form .hero__form-panel { background: var(--ctx-bg-elevated); padding: var(--space-8); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } /* ============================================================================= * Hero Content Width Modifiers * ============================================================================= */ .hero--content-narrow .hero__content { max-width: 600px; } .hero--content-narrow .hero__text { max-width: 500px; } .hero--content-wide .hero__content { max-width: 1000px; } .hero--content-wide .hero__text { max-width: 800px; } /* ============================================================================= * Hero CTA Layout Modifiers * ============================================================================= */ .hero--cta-stacked .hero__actions { flex-direction: column; align-items: flex-start; } .hero--cta-stacked.hero--align-center .hero__actions { align-items: center; } .hero--cta-centered .hero__actions { justify-content: center; } /* ============================================================================= * Hero Badge Style Variants * ============================================================================= */ .hero__badge--default { background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text, var(--gray-900)); } .hero__badge--pill { background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-dark, var(--primary, #3b82f6))); color: var(--on-primary, var(--white)); padding: var(--space-2) var(--space-5); } .hero__badge--outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } /* ============================================================================= * Hero Trust Elements * ============================================================================= */ /* Trust badges */ .hero__trust-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(var(--primary-rgb), 0.1); color: var(--ctx-text, var(--gray-900)); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); } .hero__trust-badge-icon { display: inline-flex; color: var(--primary); } /* Rating display */ .hero__rating { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); } .hero__rating-stars { display: flex; gap: var(--space-1); } .hero__star { font-size: var(--text-lg); line-height: var(--line-height-none); } .hero__star--filled { color: var(--warning); } .hero__star--half { color: var(--warning); opacity: 0.5; } .hero__star--empty { color: var(--ctx-border, var(--gray-200)); } .hero__rating-count, .hero__rating-source { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } /* Inline testimonial */ .hero__testimonial { margin-top: var(--space-8); padding: var(--space-6); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-lg); max-width: 500px; } .hero__testimonial-quote { font-size: var(--text-base); font-style: italic; color: var(--ctx-text, var(--gray-900)); margin-bottom: var(--space-4); } .hero__testimonial-author { display: flex; align-items: center; gap: var(--space-3); } .hero__testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .hero__testimonial-name { font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); } .hero__testimonial-role { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } /* Logo cloud */ .hero__logos { margin-top: var(--space-8); } .hero__logos-label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-4); } .hero__logos-grid { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; } .hero__logo-item { display: block; } .hero__logo-item img { max-height: 32px; width: auto; opacity: 0.7; filter: grayscale(100%); transition: opacity var(--duration-normal), filter var(--duration-normal); } .hero__logo-item:hover img { opacity: 1; filter: grayscale(0%); } /* ============================================================================= * Hero Form Elements * ============================================================================= */ /* Newsletter form in hero */ .hero__newsletter { margin-top: var(--space-6); } .hero__newsletter-form { max-width: 500px; } .hero__newsletter-input-group { display: flex; gap: var(--space-2); } .hero__newsletter-input { flex: 1; padding: var(--space-3) var(--space-4); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); background: var(--ctx-bg, var(--white)); color: var(--ctx-text, var(--gray-900)); font-size: var(--text-base); } .hero__newsletter-input:focus-visible { outline: none; /* Replaced by border + box-shadow for contained input look */ border-color: var(--ctx-focus-ring-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.2); } .hero__newsletter-privacy { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-600)); margin-top: var(--space-2); } .hero__newsletter-privacy a { color: var(--primary); text-decoration: underline; } /* Hero form panel (for split form variant) */ .hero__form-panel { background: var(--ctx-bg-elevated); padding: var(--space-8); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } /* Inline form in content area */ .hero__form { margin-top: var(--space-6); } /* ============================================================================= * Hero Video CTA Button * ============================================================================= */ .hero__video-cta { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: transparent; border: 2px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); color: var(--ctx-text, var(--gray-900)); font-size: var(--text-base); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--motion-duration-sm); } .hero__video-cta:hover { border-color: var(--primary); color: var(--primary); } .hero__video-cta-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary); border-radius: 50%; color: var(--on-primary, var(--white)); } .hero__video-cta-icon svg { width: 16px; height: 16px; } /* ============================================================================= * Hero Background Type Variants * ============================================================================= */ /* Mesh background layer */ .hero__mesh-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 20% 80%, rgba(var(--primary-rgb), 0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(var(--secondary-rgb, var(--primary-rgb)), 0.2) 0%, transparent 50%), radial-gradient(ellipse at 40% 40%, rgba(var(--primary-rgb), 0.15) 0%, transparent 60%); pointer-events: none; } /* Aurora background layer */ .hero__aurora-bg { position: absolute; inset: -50%; z-index: 0; background: conic-gradient( from 0deg at 50% 50%, rgba(var(--primary-rgb), 0.1) 0deg, rgba(var(--secondary-rgb, var(--primary-rgb)), 0.15) 120deg, rgba(var(--primary-rgb), 0.1) 240deg, rgba(var(--secondary-rgb, var(--primary-rgb)), 0.15) 360deg ); animation: aurora-rotate 20s linear infinite; pointer-events: none; } /* Background type classes (via bg_type param) */ .hero--bg-solid { background: var(--ctx-bg, var(--white)); } .hero--bg-solid::before, .hero--bg-solid::after { display: none; } .hero--bg-gradient { background: linear-gradient(135deg, var(--ctx-bg) 0%, var(--ctx-bg-section) 100%); } .hero--bg-pattern { position: relative; } .hero--bg-pattern::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 1px, transparent 1px); background-size: 20px 20px; z-index: 0; pointer-events: none; } .hero--bg-mesh { position: relative; } .hero--bg-aurora { position: relative; overflow: hidden; } /* ============================================================================= * Hero Overlay Gradient Modifier * ============================================================================= */ .hero--overlay-gradient::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--black) 70%, transparent) 0%, color-mix(in srgb, var(--black) 30%, transparent) 100%); z-index: 0; } /* ============================================================================= * Hero Step Progress * ============================================================================= */ .hero__step-progress { margin-bottom: var(--space-6); } /* ============================================================================= * Hero Mascot Positioning * ============================================================================= */ .hero--has-mascot { position: relative; } .hero__mascot { position: absolute; z-index: 2; pointer-events: none; } .hero__mascot img { max-width: 200px; max-height: 300px; height: auto; animation: float 4s ease-in-out infinite; } .hero--mascot-bottom-right .hero__mascot { bottom: 0; right: 5%; } .hero--mascot-bottom-left .hero__mascot { bottom: 0; left: 5%; } /* ============================================================================= * Hero Responsive Adjustments * ============================================================================= */ @media (max-width: 1023px) { .hero--split .hero__inner, .hero--split-reverse .hero__inner, .hero--split-equal .hero__inner, .hero--asymmetric .hero__inner, .hero--asymmetric-reverse .hero__inner, .hero--diagonal .hero__inner, .hero--app .hero__inner, .hero--form .hero__inner, .hero--product .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero--split .hero__content, .hero--split-reverse .hero__content, .hero--asymmetric .hero__content, .hero--asymmetric-reverse .hero__content { order: 1; } .hero--split .hero__visual, .hero--split-reverse .hero__visual, .hero--asymmetric .hero__visual, .hero--asymmetric-reverse .hero__visual { order: 2; margin-top: var(--space-8); } .hero--split .hero__actions, .hero--split-reverse .hero__actions, .hero--asymmetric .hero__actions, .hero--asymmetric-reverse .hero__actions { justify-content: center; } .hero--split .hero__text, .hero--split-reverse .hero__text, .hero--asymmetric .hero__text, .hero--asymmetric-reverse .hero__text { margin-left: auto; margin-right: auto; } .hero__diagonal-bg { display: none; } .hero__mascot { display: none; } .hero--form .hero__form-panel { margin-top: var(--space-8); } } @media (max-width: 639px) { .hero__title { font-size: var(--text-4xl); } .hero--xl .hero__title { font-size: var(--text-5xl); } .hero__newsletter-input-group { flex-direction: column; } .hero__logos-grid { justify-content: center; } .hero__rating { justify-content: center; } .hero__stats { flex-wrap: wrap; justify-content: center; } .hero__testimonial { margin-left: auto; margin-right: auto; } } /* ============================================================================= * Global Animation Utility Classes * ============================================================================= */ /* Float animation */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 3s ease-in-out infinite; } /* Pulse animation (opacity-based) */ @keyframes pulse-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .animate-pulse { animation: pulse-opacity 2s ease-in-out infinite; } /* Bounce animation */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .animate-bounce { animation: bounce 1s ease-in-out infinite; } /* Spin animation */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 2s linear infinite; } /* Ping animation (for notifications) */ @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } /* ============================================================================= * REVEAL ANIMATIONS REMOVED - Use Motion System Instead * * The following CSS keyframes have been removed (Motion System handles these): * - fade-in, fade-up, scale-in (use data-motion="fade", "fade-up", "scale-in") * - slide-in-left, zoom-in (use data-motion="slide-left", "zoom-in") * * For reveal animations, add data-motion attribute to elements. * See docs/architecture/MOTION_SYSTEM.md for full documentation. * ============================================================================= */ /* Delayed animations (still useful for Motion System stagger overrides) */ .delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; } .delay-500 { animation-delay: 500ms; } .delay-700 { animation-delay: 700ms; } .delay-1000 { animation-delay: 1000ms; } /* Animation fill mode */ .animate-fill-both { animation-fill-mode: both; } .animate-fill-forwards { animation-fill-mode: forwards; } /* ============================================================================= * Section Advanced Variants * ============================================================================= */ /* Glassmorphism section */ .section--glass { background: rgba(var(--surface-default-rgb, 255, 255, 255), 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-theme="dark"] .section--glass, .section--dark .section--glass { background: color-mix(in srgb, var(--black-light) 80%, transparent); } /* Spotlight section */ .section--spotlight { position: relative; } .section--spotlight::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 300px; background: radial-gradient(ellipse, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%); pointer-events: none; } /* Noise texture section - M3 Mode-Aware */ .section--noise { position: relative; --noise-opacity: var(--pattern-opacity-light, 0.03); } [data-theme="dark"] .section--noise, .section--dark .section--noise { --noise-opacity: var(--pattern-opacity-dark, 0.08); } .section--noise::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: var(--noise-opacity); pointer-events: none; } /* Mesh gradient section - M3 Mode-Aware */ .section--mesh { --mesh-opacity-1: var(--pattern-opacity-light, 0.15); --mesh-opacity-2: calc(var(--pattern-opacity-light, 0.15) * 0.67); background: radial-gradient(ellipse at 0% 100%, rgba(var(--primary-rgb), var(--mesh-opacity-1)) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, rgba(var(--secondary-rgb, var(--primary-rgb)), var(--mesh-opacity-2)) 0%, transparent 50%), var(--ctx-bg, var(--surface-default)); } [data-theme="dark"] .section--mesh, .section--dark .section--mesh { --mesh-opacity-1: var(--pattern-opacity-dark, 0.35); --mesh-opacity-2: calc(var(--pattern-opacity-dark, 0.35) * 0.67); } /** * Aurora section - DEPRECATED * Use data-effect="aurora" instead (Motion System v2.0) * This CSS-only approach causes overflow conflicts with child components. * Will be removed in v3.0. * @see docs/systems/DECISIONS_LOG.md#decision-4 */ .section--aurora { position: relative; overflow: hidden; --aurora-opacity-1: calc(var(--pattern-opacity-light, 0.15) * 0.33); --aurora-opacity-2: calc(var(--pattern-opacity-light, 0.15) * 0.53); } [data-theme="dark"] .section--aurora, .section--dark .section--aurora { --aurora-opacity-1: calc(var(--pattern-opacity-dark, 0.35) * 0.33); --aurora-opacity-2: calc(var(--pattern-opacity-dark, 0.35) * 0.53); } /* DEPRECATED: Commented out - use data-effect="aurora" instead (Motion System v2.0) .section--aurora::before { content: ''; position: absolute; inset: -100%; background: conic-gradient( from 180deg at 50% 50%, rgba(var(--primary-rgb), var(--aurora-opacity-1)) 0deg, rgba(var(--secondary-rgb, var(--primary-rgb)), var(--aurora-opacity-2)) 180deg, rgba(var(--primary-rgb), var(--aurora-opacity-1)) 360deg ); animation: aurora-rotate 30s linear infinite; pointer-events: none; } */ /* Animated gradient border - M3 Token-based */ .section--animated-border { position: relative; } .section--animated-border::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--primary), var(--secondary, var(--primary-50, var(--primary-light))), var(--primary) ); background-size: 200% 100%; animation: gradient-shift-scroll 3s linear infinite; } @keyframes gradient-shift-scroll { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Floating shapes background - M3 Mode-Aware */ .section--floating-shapes { position: relative; overflow: hidden; --shapes-opacity: calc(var(--pattern-opacity-light, 0.15) * 0.33); } [data-theme="dark"] .section--floating-shapes, .section--dark .section--floating-shapes { --shapes-opacity: calc(var(--pattern-opacity-dark, 0.35) * 0.33); } .section--floating-shapes::before, .section--floating-shapes::after { content: ''; position: absolute; border-radius: 50%; background: rgba(var(--primary-rgb), var(--shapes-opacity)); animation: float 6s ease-in-out infinite; pointer-events: none; } .section--floating-shapes::before { width: 200px; height: 200px; top: 10%; left: 5%; animation-delay: 0s; } .section--floating-shapes::after { width: 150px; height: 150px; bottom: 10%; right: 10%; animation-delay: -3s; } /* ============================================================================= * Card Advanced Variants * ============================================================================= */ /* ============================================================================= * Grid Advanced Variants * ============================================================================= */ /* Masonry-style grid (CSS only approximation) - Mobile-first */ .grid--masonry { display: block; column-count: 1; column-gap: var(--space-6); } .grid--masonry > * { break-inside: avoid; margin-bottom: var(--space-6); } @media (min-width: 640px) { .grid--masonry { column-count: 2; } } @media (min-width: 1024px) { .grid--masonry { column-count: 3; } } /* Staggered grid */ .grid--staggered > *:nth-child(even) { transform: translateY(30px); } /* Alternating sizes */ .grid--alternating > *:nth-child(3n+1) { grid-column: span 2; } /* Highlight first item * CRITICAL: grid-auto-rows required for grid-row: span to work correctly */ .grid--hero-first { grid-auto-rows: minmax(var(--grid-cell-height, 180px), 1fr); } .grid--hero-first > *:first-child { grid-column: 1 / -1; } @media (min-width: 768px) { .grid--hero-first > *:first-child { grid-column: span 2; grid-row: span 2; } } /* ============================================================================= * Text Animation Variants * ============================================================================= */ /* Gradient text */ .text-gradient { background: linear-gradient(135deg, var(--primary, #3b82f6), var(--secondary, var(--primary-light, #dbeafe))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Animated gradient text */ .text-gradient-animated { background: linear-gradient( 90deg, var(--primary, #3b82f6), var(--secondary, var(--primary-light, #dbeafe)), var(--primary, #3b82f6) ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift-scroll 3s linear infinite; } /* Typewriter cursor */ .text-typewriter::after { content: '|'; animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* Highlight marker effect */ .text-marker { background: linear-gradient(180deg, transparent 60%, rgba(var(--primary-rgb), 0.3) 60%); padding: 0 0.2em; } /* Strikethrough animation */ .text-strike { position: relative; } .text-strike::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-duration-md); } .text-strike:hover::after { transform: scaleX(1); } /* ============================================================================= * FAQ Advanced Variants * ============================================================================= */ /* Accordion style with side indicator */ .faq--accordion .faq__item { border-left: 3px solid transparent; border-radius: 0; border-top: none; border-right: none; border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .faq--accordion .faq__item.is-open { border-left-color: var(--primary, #3b82f6); background: var(--primary-light, #dbeafe); } /* Cards grid layout - Mobile-first */ .faq--grid .faq__list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); max-width: none; } @media (min-width: 768px) { .faq--grid .faq__list { grid-template-columns: repeat(2, 1fr); } } /* Bubble/chat style */ .faq--bubble .faq__item { border: none; background: transparent; } .faq--bubble .faq__question { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-2xl); border-bottom-left-radius: var(--radius-sm); } .faq--bubble .faq__answer-inner { background: var(--primary-light, #dbeafe); border-radius: var(--radius-2xl); border-top-left-radius: var(--radius-sm); margin-top: var(--space-2); padding: var(--space-4); } /* Timeline style */ .faq--timeline .faq__list { position: relative; padding-left: var(--space-8); } .faq--timeline .faq__list::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--ctx-border, var(--gray-200)); } .faq--timeline .faq__item { position: relative; border: none; background: transparent; margin-bottom: var(--space-6); } .faq--timeline .faq__item::before { content: ''; position: absolute; left: -30px; top: var(--space-5); width: 14px; height: 14px; background: var(--primary, #3b82f6); border: 3px solid var(--ctx-bg, var(--white)); border-radius: 50%; z-index: 1; } .faq--timeline .faq__question { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); } /* Gradient hover effect */ .faq--gradient .faq__item:hover .faq__question { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), rgba(var(--primary-rgb), 0.1)); } .faq--gradient .faq__item.is-open .faq__question { background: linear-gradient(135deg, var(--primary-light, #dbeafe), rgba(var(--primary-rgb), 0.2)); } /* ============================================================================= * Accordion Component (Wave 26) * ============================================================================= */ /* Base accordion */ .accordion { display: flex; flex-direction: column; } .accordion__item { border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .accordion__item:first-child { border-top: 1px solid var(--ctx-border, var(--gray-200)); } /* Trigger button */ .accordion__trigger { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4); background: transparent; border: none; font: inherit; font-weight: var(--font-weight-medium); text-align: left; cursor: pointer; transition: background var(--motion-duration-sm); } .accordion__trigger:hover { background: var(--ctx-bg-section, var(--gray-50)); } .accordion__trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .accordion__title { flex: 1; } /* Icon rotation */ .accordion__icon { flex-shrink: 0; transition: transform var(--motion-duration-sm); color: var(--ctx-text-muted, var(--gray-500)); } .accordion__item.is-open .accordion__icon { transform: rotate(180deg); } .accordion__icon--plus .accordion__item.is-open { transform: rotate(45deg); } /* Panel */ .accordion__panel { overflow: hidden; } .accordion__panel[hidden] { display: none; } .accordion__content { padding: 0 var(--space-4) var(--space-4); color: var(--ctx-text-muted, var(--gray-600)); } /* Item icon */ .accordion__item-icon { display: flex; color: var(--primary); } /* Size variants */ .accordion--sm .accordion__trigger { padding: var(--space-3); font-size: var(--text-sm); } .accordion--sm .accordion__content { padding: 0 var(--space-3) var(--space-3); font-size: var(--text-sm); } .accordion--lg .accordion__trigger { padding: var(--space-5); font-size: var(--text-lg); } .accordion--lg .accordion__content { padding: 0 var(--space-5) var(--space-5); } /* Boxed variant */ .accordion--boxed .accordion__item { border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); margin-bottom: var(--space-3); } .accordion--boxed .accordion__item:first-child { border-top: 1px solid var(--ctx-border, var(--gray-200)); } .accordion--boxed .accordion__item.is-open { box-shadow: var(--shadow-md); } /* Bordered variant */ .accordion--bordered .accordion__item { border: 1px solid var(--ctx-border, var(--gray-200)); border-bottom: none; } .accordion--bordered .accordion__item:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .accordion--bordered .accordion__item:last-child { border-bottom: 1px solid var(--ctx-border, var(--gray-200)); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Minimal variant */ .accordion--minimal .accordion__item { border: none; } .accordion--minimal .accordion__trigger { padding-left: 0; padding-right: 0; } .accordion--minimal .accordion__content { padding-left: 0; padding-right: 0; } /* Separated variant */ .accordion--separated .accordion__item { border: none; margin-bottom: var(--space-2); background: var(--ctx-bg-section, var(--gray-50)); border-radius: var(--radius-lg); } .accordion--separated .accordion__item.is-open { background: var(--ctx-surface, var(--white)); box-shadow: var(--shadow-md); } /* ============================================================================= * Tabs Component (Wave 27) * ============================================================================= */ /* Base tabs */ .tabs { display: flex; flex-direction: column; } .tabs__list { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--ctx-border, var(--gray-200)); } .tabs__button { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font: inherit; font-weight: var(--font-weight-medium); color: var(--ctx-text-muted, var(--gray-600)); cursor: pointer; transition: color var(--motion-duration-sm), border-color var(--motion-duration-sm); } .tabs__button:hover { color: var(--ctx-text, inherit); } .tabs__button--active { color: var(--primary); border-bottom-color: var(--primary, #3b82f6); } .tabs__button--disabled { opacity: 0.5; cursor: not-allowed; } .tabs__icon { display: flex; } .tabs__badge { padding: var(--space-1) var(--space-2); background: var(--primary-light, #dbeafe); color: var(--primary-dark, var(--primary, #1e40af)); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); } .tabs__panels { padding-top: var(--space-4); } .tabs__panel[hidden] { display: none; } .tabs__panel:focus { outline: none; } .tabs__panel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Size variants */ .tabs--sm .tabs__button { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); } .tabs--lg .tabs__button { padding: var(--space-4) var(--space-5); font-size: var(--text-lg); } /* Alignment */ .tabs--center .tabs__list { justify-content: center; } .tabs--right .tabs__list { justify-content: flex-end; } /* Full width */ .tabs--full .tabs__list { width: 100%; } .tabs--full .tabs__button { flex: 1; justify-content: center; } /* Pills variant */ .tabs--pills .tabs__list { border-bottom: none; gap: var(--space-2); background: var(--ctx-bg-section, var(--gray-100)); padding: var(--space-1); border-radius: var(--radius-lg); } .tabs--pills .tabs__button { margin-bottom: 0; border-bottom: none; border-radius: var(--radius-md); } .tabs--pills .tabs__button--active { background: var(--ctx-surface, var(--white)); color: var(--ctx-text, inherit); box-shadow: var(--shadow-sm); } /* Underline variant */ .tabs--underline .tabs__list { border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .tabs--underline .tabs__button { margin-bottom: -1px; border-bottom-width: 2px; } /* Boxed variant */ .tabs--boxed .tabs__list { border: 1px solid var(--ctx-border, var(--gray-200)); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; } .tabs--boxed .tabs__button { margin-bottom: 0; border-bottom: none; border-radius: 0; } .tabs--boxed .tabs__button--active { background: var(--ctx-surface, var(--white)); } .tabs--boxed .tabs__panels { border: 1px solid var(--ctx-border, var(--gray-200)); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--space-4); } /* Vertical variant */ .tabs--vertical { flex-direction: row; gap: var(--space-4); } .tabs--vertical .tabs__list { flex-direction: column; border-bottom: none; border-right: 2px solid var(--ctx-border, var(--gray-200)); padding-right: var(--space-4); } .tabs--vertical .tabs__button { margin-bottom: 0; margin-right: -2px; border-bottom: none; border-right: 2px solid transparent; } .tabs--vertical .tabs__button--active { border-right-color: var(--primary, #3b82f6); } .tabs--vertical .tabs__panels { flex: 1; padding-top: 0; } /* ============================================================================= * Dropdown Menu (Wave 29) * ============================================================================= */ /* Base dropdown */ .dropdown { position: relative; display: inline-block; } /* Trigger button */ .dropdown__trigger { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); font: inherit; font-weight: var(--font-weight-medium); color: var(--ctx-text, inherit); cursor: pointer; transition: background var(--motion-duration-sm), border-color var(--motion-duration-sm); } .dropdown__trigger:hover { background: var(--ctx-bg-section, var(--gray-50)); border-color: var(--ctx-border-hover, var(--gray-300)); } .dropdown__trigger--ghost { background: transparent; border-color: transparent; } .dropdown__trigger--ghost:hover { background: var(--ctx-bg-section, var(--gray-100)); } .dropdown__trigger--icon { padding: var(--space-2); } .dropdown__arrow { transition: transform var(--motion-duration-sm); color: var(--ctx-text-muted, var(--gray-500)); } .dropdown.is-open .dropdown__arrow { transform: rotate(180deg); } /* Menu */ .dropdown__menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; min-width: 160px; padding: var(--space-1); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 100; list-style: none; margin: 0; } .dropdown__menu[hidden] { display: none; } .dropdown__menu--right { left: auto; right: 0; } .dropdown__menu--sm { min-width: 120px; } .dropdown__menu--md { min-width: 200px; } .dropdown__menu--lg { min-width: 280px; } /* Menu item */ .dropdown__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ctx-text, inherit); text-decoration: none; transition: background var(--motion-duration-sm); } .dropdown__item:hover { background: var(--ctx-bg-section, var(--gray-100)); } .dropdown__item--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .dropdown__item-icon { display: flex; color: var(--ctx-text-muted, var(--gray-500)); } .dropdown__item:hover .dropdown__item-icon { color: var(--ctx-text, inherit); } /* Divider */ .dropdown__divider { height: 1px; margin: var(--space-1) 0; background: var(--ctx-border, var(--gray-200)); } /* ============================================================================= * Testimonial Advanced Variants * ============================================================================= */ /* Bubble quote style */ .testimonial--bubble { position: relative; background: var(--ctx-surface, var(--white)); border-radius: var(--radius-2xl); padding: var(--space-8); } .testimonial--bubble::after { content: ''; position: absolute; bottom: -12px; left: var(--space-10); width: 24px; height: 24px; background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-top: none; border-left: none; transform: rotate(45deg); } .testimonial--bubble .testimonial__author { margin-top: var(--space-6); } /* Large quote style */ .testimonial--large { text-align: center; padding: var(--space-12); } .testimonial--large .testimonial__quote { font-size: var(--text-2xl); font-style: italic; line-height: var(--line-height-normal); } .testimonial--large .testimonial__quote-icon { width: 48px; height: 48px; margin: 0 auto var(--space-6); opacity: 0.3; } .testimonial--large .testimonial__author { justify-content: center; } /* Card with gradient border - using background-clip trick */ .testimonial--gradient-border { position: relative; border: 2px solid transparent; background: linear-gradient(var(--ctx-surface), var(--ctx-surface)) padding-box, linear-gradient(135deg, var(--primary, #3b82f6), var(--secondary, var(--primary-light, #dbeafe))) border-box; } /* Minimal style */ .testimonial--minimal { background: transparent; border: none; padding: 0; } .testimonial--minimal .testimonial__quote { border-left: 3px solid var(--primary, #3b82f6); padding-left: var(--space-4); } /* Photo prominent style */ .testimonial--photo { display: flex; gap: var(--space-6); align-items: flex-start; } .testimonial--photo .testimonial__avatar { width: 80px; height: 80px; flex-shrink: 0; } .testimonial--photo .testimonial__author { flex-direction: column; align-items: flex-start; gap: var(--space-1); } /* Carousel dots */ .testimonials--carousel { overflow: hidden; } .testimonials__dots { display: flex; justify-content: center; gap: 0; /* Touch areas (44px) provide natural spacing */ margin-top: var(--space-6); } /* Testimonials dot: 44x44px touch target (WCAG 2.5.5), visual dot 8px via ::after */ .testimonials__dot { width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .testimonials__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ctx-border, var(--gray-200)); transition: all var(--motion-duration-sm); } .testimonials__dot.is-active::after, .testimonials__dot:hover::after { background: var(--primary, #3b82f6); transform: scale(1.2); } .testimonials__dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-full); } /* ============================================================================= * Stats Advanced Variants * ============================================================================= */ /* Animated counter style */ .stats--animated .stats__value { font-variant-numeric: tabular-nums; } /* Icon circle style */ .stats--icon-circle .stats__icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-dark, var(--primary, #3b82f6))); color: var(--on-primary, var(--white)); } /* Bordered cards */ .stats--bordered .stats__item { border: 2px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); padding: var(--space-6); transition: all var(--motion-duration-sm); } .stats--bordered .stats__item:hover { border-color: var(--primary, #3b82f6); transform: translateY(-4px); } /* Gradient values */ .stats--gradient .stats__value { background: linear-gradient(135deg, var(--primary, #3b82f6), var(--secondary, var(--primary-light, #dbeafe))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Large display */ .stats--large .stats__value { font-size: var(--text-6xl); } /* Compact inline */ .stats--inline { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); } .stats--inline .stats__item { flex-direction: row; gap: var(--space-3); } /* Divider between items */ .stats--divided .stats__item { position: relative; } .stats--divided .stats__item:not(:last-child)::after { content: ''; position: absolute; right: calc(var(--space-4) * -1); top: 20%; height: 60%; width: 1px; background: var(--ctx-border, var(--gray-200)); } /* Progress bar style */ .stats--progress .stats__bar { width: 100%; height: 8px; background: var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); margin-top: var(--space-3); overflow: hidden; } .stats--progress .stats__bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary, #3b82f6), var(--primary-light, #dbeafe)); border-radius: var(--radius-full); transition: width 1s ease-out; } /* Vertical stack layout */ .stats--vertical { display: flex; flex-direction: column; gap: var(--space-8); text-align: center; } .stats--vertical .stats__item { display: flex; flex-direction: column; align-items: center; } /* Color per item via CSS custom property */ .stats__item[style*="--stat-color"] .stats__value, .stats__item[style*="--stat-color"] .stats__number { color: var(--stat-color); } /* Color presets for stats */ .stats__item--teal { --stat-color: #008b8b; } .stats__item--magenta { --stat-color: #c71585; } .stats__item--cyan { --stat-color: #00a0b0; } .stats__item--orange { --stat-color: #f97316; } /* ============================================================================= * Notice/Alert Advanced Variants * ============================================================================= */ /* Filled style (solid background) */ .notice--filled { border: none; } .notice--filled.notice--info { background: var(--info-dark); color: var(--white); } .notice--filled.notice--success { background: var(--success-dark); color: var(--white); } .notice--filled.notice--warning { background: var(--warning-dark); color: var(--white); } .notice--filled.notice--error { background: var(--error-dark); color: var(--white); } .notice--filled .notice__icon, .notice--filled .notice__content strong, .notice--filled .notice__content a { color: var(--white); } /* Bordered/outlined style */ .notice--outlined { background: transparent; border-width: 2px; } /* Left accent bar */ .notice--accent { border-left-width: 4px; border-top: none; border-right: none; border-bottom: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } /* Dismissible with close button */ .notice--dismissible { position: relative; padding-right: var(--space-10); } .notice__close { position: absolute; top: var(--space-3); right: var(--space-3); width: 24px; height: 24px; background: transparent; border: none; cursor: pointer; opacity: 0.5; transition: opacity var(--motion-duration-sm); } .notice__close:hover { opacity: 1; } /* Banner style (full width) */ .notice--banner { border-radius: 0; margin: 0; text-align: center; } /* Floating notification */ .notice--floating { position: fixed; bottom: var(--space-6); right: var(--space-6); max-width: 400px; box-shadow: var(--shadow-xl); z-index: var(--z-toast); animation: slide-in-right 0.3s ease-out; } /* Toast style */ .notice--toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); box-shadow: var(--shadow-lg); } /* ============================================================================= * Wave 30: Toast Notification System * ============================================================================= */ /* Toast Container - stacks toasts by position */ .toast-container { position: fixed; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); pointer-events: none; max-height: 100vh; overflow: hidden; } .toast-container--top-right { top: 0; right: 0; align-items: flex-end; } .toast-container--top-left { top: 0; left: 0; align-items: flex-start; } .toast-container--bottom-right { bottom: 0; right: 0; align-items: flex-end; } .toast-container--bottom-left { bottom: 0; left: 0; align-items: flex-start; } .toast-container--top-center { top: 0; left: 50%; transform: translateX(-50%); align-items: center; } .toast-container--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; } /* Toast base */ .toast { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 280px; max-width: 400px; padding: var(--space-4); background: var(--ctx-bg-elevated, var(--white)); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); pointer-events: auto; position: relative; overflow: hidden; animation: toast-slide-in 0.3s ease-out; } .toast.is-leaving { animation: toast-slide-out 0.3s ease-in forwards; } @keyframes toast-slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* Position-specific animations */ .toast-container--top-left .toast, .toast-container--bottom-left .toast { animation-name: toast-slide-in-left; } @keyframes toast-slide-in-left { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } /* Toast type colors */ .toast--info { border-left: 4px solid var(--info, #3b82f6); } .toast--success { border-left: 4px solid var(--success, #22c55e); } .toast--warning { border-left: 4px solid var(--warning, #eab308); } .toast--error { border-left: 4px solid var(--error, #ef4444); } .toast--info .toast__icon { color: var(--info, #3b82f6); } .toast--success .toast__icon { color: var(--success, #22c55e); } .toast--warning .toast__icon { color: var(--warning, #eab308); } .toast--error .toast__icon { color: var(--error, #ef4444); } /* Toast elements */ .toast__icon { flex-shrink: 0; margin-top: var(--space-1); /* 4px - closest to 2px */ } .toast__body { flex: 1; min-width: 0; } .toast__title { display: block; font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); margin-bottom: var(--space-1); } .toast__content { margin: 0; font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .toast__action { flex-shrink: 0; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--primary, #3b82f6); text-decoration: none; align-self: center; } .toast__action:hover { text-decoration: underline; } .toast__close { flex-shrink: 0; padding: var(--space-1); background: none; border: none; color: var(--ctx-text-muted, var(--gray-400)); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--motion-duration-sm), background var(--motion-duration-sm); } .toast__close:hover { color: var(--ctx-text, var(--gray-700)); background: var(--ctx-bg-section, var(--gray-100)); } /* Progress bar for auto-dismiss */ .toast__progress { position: absolute; bottom: 0; left: 0; height: 3px; background: currentColor; opacity: 0.3; animation: toast-progress linear forwards; } @keyframes toast-progress { from { width: 100%; } to { width: 0%; } } /* ============================================================================= * Announcement Bar * Partial: feedback/announcement-bar.php * Sticky banner for site-wide announcements, promos, alerts * ============================================================================= */ .announcement-bar { position: fixed; left: 0; right: 0; z-index: 101; /* Just above header (z-index: 100) */ background: var(--announcement-bg, var(--primary)); color: var(--announcement-text, var(--on-primary)); padding: var(--space-3) var(--space-4); transform: translateY(var(--announcement-translate, 0)); opacity: 0; transition: transform var(--motion-duration-normal) var(--motion-ease-out), opacity var(--motion-duration-normal) var(--motion-ease-out); box-shadow: var(--shadow-md); } /* Hidden state for hide-on-scroll/scroll-up behaviors */ .announcement-bar--hidden { transform: translateY(-100%) !important; opacity: 0 !important; pointer-events: none; } .announcement-bar--top { top: 0; --announcement-translate: -100%; } .announcement-bar--bottom { bottom: 0; --announcement-translate: 100%; } .announcement-bar--visible { transform: translateY(0); opacity: 1; } .announcement-bar__content { display: flex; align-items: center; justify-content: center; gap: var(--space-4); max-width: var(--container-lg); margin: 0 auto; padding-right: var(--space-10); text-decoration: none; color: inherit; } .announcement-bar__content:is(a):hover { text-decoration: underline; } .announcement-bar__text { font-size: var(--text-sm); line-height: var(--line-height-normal); text-align: center; } .announcement-bar__text strong { font-weight: var(--font-weight-semibold); } .announcement-bar__close { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); background: transparent; border: none; color: inherit; cursor: pointer; padding: var(--space-1); display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity var(--motion-duration-fast) var(--motion-ease-out); border-radius: var(--radius-sm); } .announcement-bar__close:hover, .announcement-bar__close:focus-visible { opacity: 1; } .announcement-bar__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Announcement Bar Variants */ .announcement-bar--info { --announcement-bg: var(--info, #3b82f6); --announcement-text: var(--white); } .announcement-bar--success { --announcement-bg: var(--success, #22c55e); --announcement-text: var(--white); } .announcement-bar--warning { --announcement-bg: var(--warning, #eab308); --announcement-text: var(--black); } .announcement-bar--promo { --announcement-bg: var(--primary); --announcement-text: var(--on-primary); } .announcement-bar--dark { --announcement-bg: var(--surface-dark-default, #1a1a1a); --announcement-text: var(--on-surface-dark, #ffffff); } /* Announcement Bar Responsive */ @media (max-width: 767px) { .announcement-bar { padding: var(--space-2-5) var(--space-3); } .announcement-bar__text { font-size: var(--text-xs); } .announcement-bar__content { padding-right: var(--space-8); } .announcement-bar__close { right: var(--space-2); } } /* Announcement Bar & Header Reduced Motion */ @media (prefers-reduced-motion: reduce) { .announcement-bar, .header { transition: none; } .announcement-bar { transform: none !important; } .announcement-bar--hidden { opacity: 0 !important; } } /* Search bar */ .search-bar { position: relative; max-width: 500px; } .search-bar__input { width: 100%; padding: var(--space-4) var(--space-12) var(--space-4) var(--space-6); border: 2px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); font-size: var(--text-base); background: var(--ctx-surface, var(--white)); color: var(--ctx-text, var(--gray-900)); transition: all var(--motion-duration-sm); } .search-bar__input:focus-visible { outline: none; /* Replaced by border + box-shadow for contained input look */ border-color: var(--ctx-focus-ring-color); box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 59, 130, 246), 0.2); } .search-bar__button { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--primary, #3b82f6); border: none; color: var(--on-primary, var(--white)); cursor: pointer; transition: all var(--motion-duration-sm); } .search-bar__button:hover { background: var(--primary-hover, #2563eb); } /* ============================================================================= * Badge/Tag Advanced Variants * ============================================================================= */ /* Pill badges */ .badge--pill { border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); } /* Outlined badges */ .badge--outlined { background: transparent; border: 1px solid currentColor; } /* Dot indicator badge */ .badge--dot { display: inline-flex; align-items: center; gap: var(--space-2); } .badge--dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* Pulse animation for notifications */ .badge--pulse::before { animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; } /* Count badge (for notifications) */ .badge--count { min-width: 20px; height: 20px; padding: 0 var(--space-2); border-radius: 50%; font-size: var(--text-xs); font-weight: var(--font-weight-bold); display: inline-flex; align-items: center; justify-content: center; } /* Tag with remove button */ .tag--removable { display: inline-flex; align-items: center; gap: var(--space-2); padding-right: var(--space-2); } .tag__remove { width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--black) 20%, transparent); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); /* Min 12px for accessibility */ color: inherit; transition: background var(--motion-duration-sm); } .tag__remove:hover { background: color-mix(in srgb, var(--black) 40%, transparent); } /* Gradient badge */ .badge--gradient { background: linear-gradient(135deg, var(--primary, #3b82f6), var(--secondary, var(--primary-dark, #1e40af))); color: var(--on-primary, var(--white)); border: none; } /* Glowing badge */ .badge--glow { box-shadow: var(--shadow-glow-sm); } /* Badge Sizes */ .badge--xs { font-size: var(--text-xs); padding: var(--space-0-5) var(--space-1); } .badge--sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); } .badge--md { font-size: var(--text-sm); padding: var(--space-1-5) var(--space-3); } .badge--lg { font-size: var(--text-base); padding: var(--space-2) var(--space-4); } /* ============================================================================= * Navigation Advanced Variants * ============================================================================= */ /* Static header (opt-out of sticky) */ .header--static { position: relative; } /* Scrolled state - enhanced backdrop */ .header.is-scrolled { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Transparent header (for hero overlap) */ .header--transparent { position: absolute; top: 0; left: 0; right: 0; background: transparent; z-index: 100; } .header--transparent .nav__link { color: var(--white); } /* Centered logo header */ .header--centered { text-align: center; } .header--centered .header__inner { flex-direction: column; gap: var(--space-4); } /* Pill navigation links */ .nav--pills .nav__link { border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); } .nav--pills .nav__link:hover, .nav--pills .nav__link.is-active { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } /* Underline navigation */ .nav--underline .nav__link { position: relative; padding-bottom: var(--space-2); } .nav--underline .nav__link::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--primary, #3b82f6); transform: scaleX(0); transition: transform var(--motion-duration-sm); } .nav--underline .nav__link:hover::after, .nav--underline .nav__link.is-active::after { transform: scaleX(1); } /* Vertical sidebar navigation */ .nav--vertical { flex-direction: column; } .nav--vertical .nav__link { padding: var(--space-3) var(--space-4); border-left: 3px solid transparent; } .nav--vertical .nav__link:hover, .nav--vertical .nav__link.is-active { background: var(--primary-light, #dbeafe); border-left-color: var(--primary, #3b82f6); } /* Breadcrumbs variants */ .breadcrumbs--arrow li:not(:last-child)::after { content: '›'; } .breadcrumbs--chevron li:not(:last-child)::after { content: '»'; } .breadcrumbs--dot li:not(:last-child)::after { content: '•'; } /* Pagination variants */ .pagination--rounded .pagination__link { border-radius: 50%; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; } .pagination--minimal .pagination__link { background: transparent; border: none; } .pagination--minimal .pagination__link:hover, .pagination--minimal .pagination__link.is-active { color: var(--primary, #3b82f6); text-decoration: underline; } /* ============================================================================= * Footer Advanced Variants * ============================================================================= */ /* Centered footer */ .footer--centered { text-align: center; } .footer--centered .footer__nav { justify-content: center; } /* Minimal footer */ .footer--minimal { padding: var(--space-6) 0; border-top: 1px solid var(--ctx-border, var(--gray-200)); } .footer--minimal .footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); } /* Big footer with multiple columns */ .footer--big { padding: var(--space-16) 0; } .footer--big .footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-12); } @media (max-width: 767px) { .footer--big .footer__grid { grid-template-columns: 1fr 1fr; } } /* Gradient top border */ .footer--gradient-border::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--primary, #3b82f6), var(--secondary, var(--primary-light, #dbeafe))); } /* ============================================================================= * Pricing Table Variants * ============================================================================= */ /* Pricing card base */ .pricing-card { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); padding: var(--space-8); text-align: center; transition: all var(--motion-duration-sm); } .pricing-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } /* Featured/popular pricing */ .pricing-card--featured { border-color: var(--primary, #3b82f6); box-shadow: var(--shadow-primary); transform: scale(1.05); z-index: 1; } .pricing-card--featured:hover { transform: scale(1.05) translateY(-8px); } .pricing-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; } /* Pricing price display */ .pricing-card__price { font-size: var(--text-5xl); font-weight: var(--font-weight-bold); color: var(--ctx-heading); line-height: var(--line-height-none); margin: var(--space-4) 0; } .pricing-card__price-currency { font-size: var(--text-2xl); vertical-align: super; } .pricing-card__price-period { font-size: var(--text-base); font-weight: var(--font-weight-normal); color: var(--ctx-text-muted, var(--gray-600)); } /* Comparison style */ .pricing--comparison { display: flex; gap: 0; } .pricing--comparison .pricing-card { border-radius: 0; border-right: none; } .pricing--comparison .pricing-card:first-child { border-radius: var(--radius-xl) 0 0 var(--radius-xl); } .pricing--comparison .pricing-card:last-child { border-radius: 0 var(--radius-xl) var(--radius-xl) 0; border-right: 1px solid var(--ctx-border, var(--gray-200)); } /* ============================================================================= * Progress/Step Indicators * ============================================================================= */ /* Horizontal steps */ .steps-indicator { display: flex; justify-content: space-between; position: relative; } .steps-indicator::before { content: ''; position: absolute; top: var(--space-5); left: 10%; right: 10%; height: 2px; background: var(--ctx-border, var(--gray-200)); } .steps-indicator__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); z-index: 1; } .steps-indicator__number { width: 40px; height: 40px; border-radius: 50%; background: var(--ctx-surface, var(--white)); border: 2px solid var(--ctx-border, var(--gray-200)); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); transition: all var(--motion-duration-sm); } .steps-indicator__step.is-active .steps-indicator__number, .steps-indicator__step.is-complete .steps-indicator__number { background: var(--primary, #3b82f6); border-color: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .steps-indicator__label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .steps-indicator__step.is-active .steps-indicator__label { color: var(--primary, #3b82f6); font-weight: var(--font-weight-semibold); } /* Vertical steps */ .steps-indicator--vertical { flex-direction: column; gap: var(--space-6); } .steps-indicator--vertical::before { top: var(--space-5); bottom: var(--space-5); left: 19px; right: auto; width: 2px; height: auto; } .steps-indicator--vertical .steps-indicator__step { flex-direction: row; align-items: flex-start; gap: var(--space-4); } /* Progress bar */ .progress-bar { height: 8px; background: var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); overflow: hidden; } .progress-bar__fill { height: 100%; background: var(--primary, #3b82f6); border-radius: var(--radius-full); transition: width var(--motion-duration-lg); } /* Gradient progress */ .progress-bar--gradient .progress-bar__fill { background: linear-gradient(90deg, var(--primary, #3b82f6), var(--secondary, var(--primary-light, #dbeafe))); } /* Striped progress */ .progress-bar--striped .progress-bar__fill { background-image: linear-gradient( 45deg, color-mix(in srgb, var(--white) 15%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, var(--white) 15%, transparent) 50%, color-mix(in srgb, var(--white) 15%, transparent) 75%, transparent 75%, transparent ); background-size: 1rem 1rem; } /* Animated striped */ .progress-bar--animated .progress-bar__fill { animation: progress-stripes 1s linear infinite; } @keyframes progress-stripes { 0% { background-position: 1rem 0; } 100% { background-position: 0 0; } } /* ----------------------------------------------------------------------------- * Progress Bar System (Wave 24 Enhancement) * -------------------------------------------------------------------------- */ /* Wrapper with header */ .progress-wrapper { width: 100%; } .progress-bar__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); } .progress-bar__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, inherit); } .progress-bar__value { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--ctx-text-muted, var(--gray-600)); font-variant-numeric: tabular-nums; } /* Size variants */ .progress-wrapper--sm .progress-bar { height: 4px; } .progress-wrapper--sm .progress-bar__label, .progress-wrapper--sm .progress-bar__value { font-size: var(--text-xs); } .progress-wrapper--lg .progress-bar { height: 12px; } .progress-wrapper--lg .progress-bar__label, .progress-wrapper--lg .progress-bar__value { font-size: var(--text-base); } /* Color variants */ .progress-bar--success .progress-bar__fill { background: var(--success, #22c55e); } .progress-bar--warning .progress-bar__fill { background: var(--warning, #eab308); } .progress-bar--error .progress-bar__fill { background: var(--error, #ef4444); } .progress-bar--info .progress-bar__fill { background: var(--info, #3b82f6); } /* Indeterminate animation */ .progress-bar--indeterminate .progress-bar__fill { width: 30% !important; animation: progress-indeterminate 1.5s ease-in-out infinite; } @keyframes progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } /* ============================================================================= * Modal/Dialog Variants * ============================================================================= */ /* Modal backdrop - uses M3 scrim token */ .modal-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--ctx-scrim, var(--scrim, var(--black))) 50%, transparent); backdrop-filter: blur(4px); z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: all var(--motion-duration-sm); } .modal-backdrop.is-open { opacity: 1; visibility: visible; } /* Modal dialog */ .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: var(--ctx-surface, var(--white)); border-radius: var(--radius-xl); box-shadow: var(--shadow-2xl); max-width: 90vw; max-height: 90vh; overflow: auto; z-index: calc(var(--z-modal) + 1); opacity: 0; visibility: hidden; transition: all var(--motion-duration-sm); } .modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } /* Modal sizes */ .modal--sm { width: 400px; } .modal--md { width: 600px; } .modal--lg { width: 800px; } .modal--xl { width: 1000px; } .modal--fullscreen { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; } /* Slide-in from right (drawer) */ .modal--drawer-right { top: 0; left: auto; right: 0; transform: translateX(100%); height: 100vh; max-height: 100vh; border-radius: var(--radius-xl) 0 0 var(--radius-xl); } .modal--drawer-right.is-open { transform: translateX(0); } /* Slide-in from bottom (sheet) */ .modal--sheet { top: auto; bottom: 0; left: 0; right: 0; transform: translateY(100%); max-height: 80vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .modal--sheet.is-open { transform: translateY(0); } /* ----------------------------------------------------------------------------- * Modal Structure (Wave 28) * -------------------------------------------------------------------------- */ /* Header */ .modal__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .modal__icon { display: flex; color: var(--primary); } .modal__title { flex: 1; margin: 0; font-size: var(--text-xl); font-weight: var(--font-weight-semibold); } .modal__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: calc(var(--space-2) * -1); background: transparent; border: none; border-radius: var(--radius-md); color: var(--ctx-text-muted, var(--gray-500)); cursor: pointer; transition: background var(--motion-duration-sm), color var(--motion-duration-sm); } .modal__close:hover { background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text, inherit); } /* Body */ .modal__body { padding: var(--space-6); overflow-y: auto; } .modal__body:last-child { padding-bottom: var(--space-6); } /* Footer */ .modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--ctx-border, var(--gray-200)); background: var(--ctx-bg-section, var(--gray-50)); } /* Drawer adjustments */ .modal--drawer-right .modal__header { padding: var(--space-4); } .modal--drawer-right .modal__body { padding: var(--space-4); } .modal--drawer-right .modal__footer { padding: var(--space-4); } /* Sheet adjustments */ .modal--sheet .modal__header { padding: var(--space-4); justify-content: center; position: relative; } .modal--sheet .modal__close { position: absolute; right: var(--space-4); } /* No scroll body when modal open */ body.modal-open { overflow: hidden; } /* ----------------------------------------------------------------------------- * Modal Layout Variants (Scalable Architecture) * - default: standard header/body/footer * - split: two-column with image panel (lead gen, signup) * - media: full-bleed content (lightbox-style) * - centered: centered content with icon (confirmations) * -------------------------------------------------------------------------- */ /* LAYOUT: SPLIT - Two-column with image */ .modal--layout-split { display: flex; padding: 0; overflow: hidden; } .modal--layout-split .modal__split { display: flex; width: 100%; min-height: 400px; } .modal--layout-split .modal__split-image { flex-shrink: 0; background: var(--ctx-bg-section, var(--gray-100)); overflow: hidden; } .modal--layout-split .modal__split-image img { width: 100%; height: 100%; object-fit: cover; } .modal--layout-split .modal__split-content { flex: 1; display: flex; flex-direction: column; min-width: 0; } .modal--layout-split .modal__header { border-bottom: none; padding-bottom: var(--space-2); } .modal--layout-split .modal__body { flex: 1; padding-top: 0; } .modal--layout-split .modal__footer { border-top: none; background: transparent; } .modal--layout-split .modal__close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; background: var(--ctx-surface, var(--white)); box-shadow: var(--shadow-md); } /* Split ratios */ .modal--split-40-60 .modal__split-image { width: 40%; } .modal--split-40-60 .modal__split-content { width: 60%; } .modal--split-50-50 .modal__split-image { width: 50%; } .modal--split-50-50 .modal__split-content { width: 50%; } .modal--split-60-40 .modal__split-image { width: 60%; } .modal--split-60-40 .modal__split-content { width: 40%; } /* Split position (image left/right) */ .modal--split-left .modal__split { flex-direction: row; } .modal--split-right .modal__split { flex-direction: row-reverse; } /* Split responsive - stack on mobile */ @media (max-width: 768px) { .modal--layout-split .modal__split { flex-direction: column; min-height: auto; } .modal--layout-split .modal__split-image { width: 100% !important; height: 200px; } .modal--layout-split .modal__split-content { width: 100% !important; } .modal--split-right .modal__split { flex-direction: column; } } /* LAYOUT: MEDIA - Full-bleed content (lightbox-style) */ .modal--layout-media { padding: 0; background: transparent; box-shadow: none; } .modal--layout-media .modal__body { padding: 0; } .modal--layout-media .modal__body img, .modal--layout-media .modal__body video { display: block; max-width: 100%; max-height: 90vh; border-radius: var(--radius-lg); } .modal--layout-media .modal__close--overlay { position: absolute; top: var(--space-4); right: var(--space-4); background: color-mix(in srgb, var(--black) 60%, transparent); color: var(--white); border-radius: var(--radius-full); width: 44px; height: 44px; z-index: 2; } .modal--layout-media .modal__close--overlay:hover { background: color-mix(in srgb, var(--black) 80%, transparent); color: var(--white); } /* LAYOUT: CENTERED - Confirmation dialogs */ .modal--layout-centered { text-align: center; max-width: 400px; } .modal--layout-centered .modal__close { position: absolute; top: var(--space-3); right: var(--space-3); } .modal--layout-centered .modal__body--centered { padding: var(--space-8) var(--space-6) var(--space-4); } .modal--layout-centered .modal__centered-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto var(--space-4); background: var(--color-primary-tint-10, color-mix(in srgb, var(--primary) 10%, transparent)); border-radius: var(--radius-full); color: var(--primary); } .modal--layout-centered .modal__centered-icon svg { width: 32px; height: 32px; } .modal--layout-centered .modal__title { font-size: var(--text-xl); margin-bottom: var(--space-2); } .modal--layout-centered .modal__centered-content { color: var(--ctx-text-muted, var(--gray-600)); } .modal--layout-centered .modal__footer--centered { justify-content: center; flex-wrap: wrap; } /* ============================================================================= * Tooltip Variants * ============================================================================= */ /* Base tooltip */ .tooltip { position: relative; } .tooltip__content { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: var(--space-2) var(--space-3); background: var(--gray-900); color: var(--white); font-size: var(--text-sm); border-radius: var(--radius-md); white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--motion-duration-sm); z-index: 100; margin-bottom: var(--space-2); } .tooltip__content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ctx-inverted-bg); } .tooltip:hover .tooltip__content { opacity: 1; visibility: visible; } /* Tooltip positions */ .tooltip--top .tooltip__content { bottom: 100%; top: auto; } .tooltip--bottom .tooltip__content { top: 100%; bottom: auto; margin-bottom: 0; margin-top: var(--space-2); } .tooltip--bottom .tooltip__content::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ctx-inverted-bg); } .tooltip--left .tooltip__content { right: 100%; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); margin-right: var(--space-2); margin-bottom: 0; } .tooltip--right .tooltip__content { left: 100%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); margin-left: var(--space-2); margin-bottom: 0; } /* Light tooltip */ .tooltip--light .tooltip__content { background: var(--white); color: var(--ctx-text); box-shadow: var(--shadow-lg); } .tooltip--light .tooltip__content::after { border-top-color: var(--white); } /* ----------------------------------------------------------------------------- * Breadcrumbs (uses --ctx-* context variables) * -------------------------------------------------------------------------- */ .breadcrumbs { padding: var(--space-3) 0; } .breadcrumbs__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); } .breadcrumbs__list li { display: flex; align-items: center; } .breadcrumbs__list li:not(:last-child)::after { content: '/'; margin-left: var(--space-2); color: var(--ctx-text-faint); } .breadcrumbs__list a { color: var(--ctx-link); } .breadcrumbs__list a:hover { color: var(--primary, #3b82f6); } .breadcrumbs__list [aria-current="page"] { color: var(--ctx-text, var(--gray-900)); font-weight: var(--font-weight-medium); } /* ----------------------------------------------------------------------------- * Category Cards * -------------------------------------------------------------------------- */ .category-card { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); padding: var(--space-8); text-align: center; transition: all var(--motion-duration-sm); display: block; } .category-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--primary, #3b82f6); } .category-card__icon { width: 80px; height: 80px; margin: 0 auto var(--space-4); background: var(--primary-light, #dbeafe); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: var(--text-4xl); transition: all var(--motion-duration-sm); } .category-card:hover .category-card__icon { background: var(--primary, #3b82f6); transform: scale(1.1); } .category-card__title { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); } .category-card__count { color: var(--ctx-text-muted, var(--gray-600)); font-size: var(--text-sm); } /* ----------------------------------------------------------------------------- * Product Cards * -------------------------------------------------------------------------- */ .card { background: var(--ctx-surface, var(--white)); /* Border via box-shadow inset to avoid subpixel rendering artifacts * when combined with border-radius + overflow:hidden + transform */ border: none; box-shadow: inset 0 0 0 var(--card-border-width, 1px) var(--ctx-border, var(--gray-200)); border-radius: var(--card-radius, var(--radius-xl)); overflow: hidden; transition: all var(--motion-duration-sm) var(--motion-ease-bounce); position: relative; color: var(--ctx-text, var(--gray-900)); } .card:hover { /* DNA-driven hover: lift + scale + glow */ transform: translateY(var(--dna-hover-lift, -6px)) scale(var(--dna-hover-scale, 1)); /* Combine border shadow + elevation shadow + optional glow */ box-shadow: inset 0 0 0 var(--card-border-width, 1px) var(--ctx-border, var(--gray-200)), var(--shadow-xl), 0 0 var(--dna-hover-glow-spread, 0px) var(--dna-hover-glow-color, transparent); } .card__badge { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; z-index: 2; } .card__image { aspect-ratio: 4/3; background: var(--ctx-bg-section, var(--gray-100)); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Card Visual: Alternative container for icons/illustrations (featured variant) * Unlike card__image, this is for non-image visual content */ .card__visual { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card__visual img { max-width: 100%; height: auto; object-fit: contain; } .card__visual svg { width: 100%; height: auto; } .card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-duration-md); } .card:hover .card__image img { transform: scale(1.05); } .card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--text-5xl); background: linear-gradient(135deg, var(--ctx-bg-section) 0%, var(--ctx-bg-section) 100%); } .card__body { padding: var(--space-6); position: relative; } .card__content { /* Raw HTML content wrapper inside card__body */ } /* When card has badge but no image (body follows badge directly) */ .card__badge + .card__body { padding-top: calc(var(--space-4) + var(--space-8)); } .card__title { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); line-height: var(--line-height-tight); } .card__title a:hover { color: var(--primary, #3b82f6); } .card__desc { color: var(--ctx-text-muted, var(--gray-600)); font-size: var(--text-sm); margin-bottom: var(--space-4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card__highlights { margin-bottom: var(--space-4); font-size: var(--text-sm); } .card__highlights-positive, .card__highlights-negative { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); } .highlight-label { flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-weight-bold); } .highlight-label--positive { background: var(--success-light); color: var(--success); } .highlight-label--negative { background: var(--error-light); color: var(--error); } .card__highlights-positive ul, .card__highlights-negative ul { display: flex; flex-direction: column; gap: var(--space-1); } .card__highlights-positive li, .card__highlights-negative li { color: var(--ctx-text-muted, var(--gray-600)); } .card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--ctx-border, var(--gray-200)); } .card__price { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--ctx-text, var(--gray-900)); } .card__actions { display: flex; gap: var(--space-2); } /* Rating Stars */ .rating-stars { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); } .rating-stars .star { width: 18px; height: 18px; } .rating-stars .star--full { color: var(--primary); } .rating-value { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--ctx-text-muted, var(--gray-600)); } /* Product Card Horizontal */ .card--horizontal { display: grid; grid-template-columns: 280px 1fr; } .card--horizontal .card__image { aspect-ratio: auto; height: 100%; } /* ----------------------------------------------------------------------------- * Comparison Table * -------------------------------------------------------------------------- */ .data-table-wrapper { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); overflow: hidden; } .data-table__title { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); padding: var(--space-5) var(--space-6); background: var(--ctx-bg-section, var(--gray-100)); border-bottom: 1px solid var(--ctx-border, var(--gray-200)); margin: 0; } .data-table-scroll { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .data-table th, .data-table td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .data-table th { background: var(--ctx-bg-section, var(--gray-100)); font-weight: var(--font-weight-semibold); color: var(--ctx-text-muted, var(--gray-600)); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.5px; } .data-table tr:hover { background: var(--ctx-bg-section, var(--gray-100)); } .data-table tr.is-winner { background: var(--primary-light, #dbeafe); } .data-table tr.is-winner:hover { background: var(--primary-light, #dbeafe); } .data-table__rank { width: 60px; text-align: center; } .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); font-weight: var(--font-weight-bold); font-size: var(--text-sm); } .rank-badge--1 { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .rank-badge--2 { background: var(--ctx-border-strong); color: var(--ctx-text, var(--gray-900)); } .rank-badge--3 { background: var(--bronze); color: var(--white); } .data-table__product { display: flex; align-items: center; gap: var(--space-3); } .data-table__img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-md); background: var(--ctx-bg-section, var(--gray-100)); } .data-table__badge { display: inline-block; background: var(--primary-light, #dbeafe); color: var(--primary-dark, #1e40af); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); margin-top: var(--space-1); } .data-table__rating { font-weight: var(--font-weight-bold); } .rating-score { font-size: var(--text-lg); color: var(--primary, #3b82f6); } .rating-max { font-size: var(--text-sm); color: var(--ctx-text-faint); } .data-table__price { font-weight: var(--font-weight-bold); color: var(--ctx-text, var(--gray-900)); } /* ----------------------------------------------------------------------------- * Notice Box (generic alerts/notices) * -------------------------------------------------------------------------- */ .notice { background: var(--info-light); border: 1px solid color-mix(in srgb, var(--info) 20%, transparent); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-6); } .notice--full { display: flex; gap: var(--space-4); padding: var(--space-5); } .notice__icon { flex-shrink: 0; color: var(--info); } .notice__content strong { display: block; margin-bottom: var(--space-2); color: var(--info); } .notice__content p { font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); margin: 0; } .notice__content a { color: var(--info); text-decoration: underline; } .notice--compact { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); padding: var(--space-3) var(--space-4); } .notice--compact svg { flex-shrink: 0; color: var(--info); } /* Notice Type Variants */ .notice--info { background: var(--info-light); border-color: color-mix(in srgb, var(--info) 20%, transparent); } .notice--info .notice__icon, .notice--info .notice__content strong, .notice--info .notice__content a, .notice--info.notice--compact svg { color: var(--info); } .notice--affiliate { background: var(--info-light); border-color: color-mix(in srgb, var(--info) 20%, transparent); } .notice--affiliate .notice__icon, .notice--affiliate .notice__content strong, .notice--affiliate .notice__content a, .notice--affiliate.notice--compact svg { color: var(--info); } .notice--sponsored { background: var(--warning-light); border-color: color-mix(in srgb, var(--warning) 20%, transparent); } .notice--sponsored .notice__icon, .notice--sponsored .notice__content strong, .notice--sponsored .notice__content a, .notice--sponsored.notice--compact svg { color: var(--warning); } .notice--warning { background: var(--warning-light); border-color: color-mix(in srgb, var(--warning) 20%, transparent); } .notice--warning .notice__icon, .notice--warning .notice__content strong, .notice--warning .notice__content a, .notice--warning.notice--compact svg { color: var(--warning); } .notice--success { background: var(--success-light); border-color: color-mix(in srgb, var(--success) 20%, transparent); } .notice--success .notice__icon, .notice--success .notice__content strong, .notice--success .notice__content a, .notice--success.notice--compact svg { color: var(--success); } .notice--error { background: var(--error-light); border-color: color-mix(in srgb, var(--error) 20%, transparent); } .notice--error .notice__icon, .notice--error .notice__content strong, .notice--error .notice__content a, .notice--error.notice--compact svg { color: var(--error); } /* ----------------------------------------------------------------------------- * Author Box * -------------------------------------------------------------------------- */ .author-box { background: var(--ctx-bg-section, var(--gray-100)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); padding: var(--space-6); margin: var(--space-8) 0; } .author-box__main { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); } .author-box__avatar { width: 64px; height: 64px; border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; } .author-box__avatar img { width: 100%; height: 100%; object-fit: cover; } .author-box__avatar-placeholder { width: 100%; height: 100%; background: var(--primary-light, #dbeafe); display: flex; align-items: center; justify-content: center; color: var(--primary, #3b82f6); } .author-box__name { font-weight: var(--font-weight-bold); font-size: var(--text-lg); margin-bottom: var(--space-1); } .author-box__role { font-size: var(--text-sm); color: var(--primary, #3b82f6); font-weight: var(--font-weight-medium); } .author-box__bio { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-4); } .author-box__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--ctx-text-faint); } .author-box__date, .author-box__reading { display: flex; align-items: center; gap: var(--space-2); } /* ----------------------------------------------------------------------------- * Content (Article) * -------------------------------------------------------------------------- */ .content { max-width: 800px; margin: 0 auto; } .content h2 { margin-top: var(--space-12); margin-bottom: var(--space-6); padding-bottom: var(--space-3); border-bottom: 2px solid var(--primary, #3b82f6); } .content h3 { margin-top: var(--space-8); margin-bottom: var(--space-4); } .content p { margin-bottom: var(--space-5); line-height: var(--line-height-loose); color: var(--ctx-text, var(--gray-900)); } .content ul, .content ol { margin-bottom: var(--space-5); padding-left: var(--space-6); } .content ul { list-style: disc; } .content ol { list-style: decimal; } .content li { margin-bottom: var(--space-2); line-height: var(--line-height-relaxed); color: var(--ctx-text, var(--gray-900)); } .content blockquote { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); background: var(--primary-light, #dbeafe); border-left: 4px solid var(--primary, #3b82f6); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .content blockquote p:last-child { margin-bottom: 0; } .content img { border-radius: var(--radius-lg); margin: var(--space-6) 0; } /* Table of Contents */ .toc { background: var(--ctx-bg-section, var(--gray-100)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); padding: var(--space-6); margin-bottom: var(--space-8); } .toc__title { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .toc__list { counter-reset: toc; } .toc__list li { counter-increment: toc; margin-bottom: var(--space-2); } .toc__list a { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--ctx-text-muted, var(--gray-600)); font-size: var(--text-sm); line-height: var(--line-height-normal); } .toc__list a::before { content: counter(toc) "."; color: var(--primary, #3b82f6); font-weight: var(--font-weight-semibold); flex-shrink: 0; } .toc__list a:hover { color: var(--primary, #3b82f6); } /* ----------------------------------------------------------------------------- * CTA Section * -------------------------------------------------------------------------- */ .cta-section { background: linear-gradient(135deg, var(--ctx-bg) 0%, var(--ctx-bg-section) 100%); color: var(--ctx-text, var(--gray-900)); padding: var(--space-16) 0; text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 60%); pointer-events: none; } .cta-section__content { position: relative; z-index: 1; } .cta-section__title { font-size: var(--text-4xl); color: var(--ctx-text, var(--gray-900)); margin-bottom: var(--space-4); } .cta-section__text { font-size: var(--text-lg); color: var(--ctx-text-muted, var(--gray-600)); max-width: 500px; margin: 0 auto var(--space-8); } /* ----------------------------------------------------------------------------- * Footer * -------------------------------------------------------------------------- */ .footer { /* Use ctx-bg-section to match CTA gradient end for seamless transition */ background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text, var(--gray-900)); padding: var(--space-16) 0 var(--space-8); } .footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--space-10); margin-bottom: var(--space-12); } .footer__logo img { height: 40px; filter: brightness(0) invert(1); margin-bottom: var(--space-4); } .footer__desc { font-size: var(--text-sm); color: color-mix(in srgb, var(--white) 75%, transparent); line-height: var(--line-height-relaxed); margin-bottom: var(--space-6); } .footer__social { display: flex; gap: var(--space-3); } .footer__social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--ctx-surface-hover); color: var(--ctx-text, var(--gray-900)); transition: all var(--motion-duration-sm); } .footer__social a:hover { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .footer__title { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 1px; color: var(--ctx-text, var(--white)); margin-bottom: var(--space-5); } .footer__links li { margin-bottom: var(--space-3); } .footer__links a { font-size: var(--text-sm); color: color-mix(in srgb, var(--white) 75%, transparent); transition: color var(--motion-duration-sm); } .footer__links a:hover { color: var(--primary, #3b82f6); } .footer__bottom { border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent); padding-top: var(--space-8); text-align: center; } .footer__bottom p { font-size: var(--text-sm); color: color-mix(in srgb, var(--white) 75%, transparent); margin-bottom: var(--space-2); } .footer__notice { font-size: var(--text-xs); } .footer__bottom-main { margin-bottom: var(--space-4); } .footer__credit { font-size: var(--label-small-font-size); /* 11px */ color: var(--ctx-text-muted); letter-spacing: 0.02em; margin: 0; } .footer__credit a { color: inherit; text-decoration: none; transition: color var(--motion-duration-xs); } .footer__credit a:hover { color: var(--ctx-text); } /* ----------------------------------------------------------------------------- * Placeholder Image * -------------------------------------------------------------------------- */ .placeholder-image { width: 100%; height: 100%; } /* ----------------------------------------------------------------------------- * Section Headers * -------------------------------------------------------------------------- */ .section-header { text-align: center; margin-bottom: var(--space-12); } .section-header__title { margin-bottom: var(--space-4); } .section-header__subtitle { font-size: var(--text-lg); color: var(--ctx-text-muted, var(--gray-600)); max-width: 600px; margin: 0 auto; } /* ----------------------------------------------------------------------------- * Featured Grid * -------------------------------------------------------------------------- */ .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } /* ----------------------------------------------------------------------------- * Quick Links (Home) * -------------------------------------------------------------------------- */ .quick-link { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); transition: all var(--motion-duration-sm); } .quick-link:hover { border-color: var(--primary, #3b82f6); transform: translateX(8px); } .quick-link__icon { width: 56px; height: 56px; background: var(--primary-light, #dbeafe); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--headline-small-font-size); flex-shrink: 0; /* Use primary-dark for contrast on primary-light background */ /* Fixes yellow icons invisible on yellow-light bg (ledylight) */ color: var(--primary-dark, var(--primary, #1e40af)); } .quick-link__content { flex: 1; } .quick-link__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); } .quick-link__desc { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .quick-link__arrow { color: var(--ctx-text-faint); transition: all var(--motion-duration-sm); } .quick-link:hover .quick-link__arrow { color: var(--primary, #3b82f6); transform: translateX(4px); } /* ----------------------------------------------------------------------------- * Trust Bar * -------------------------------------------------------------------------- */ .trust-bar { background: var(--ctx-bg-section, var(--gray-100)); padding: var(--space-6) 0; border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .trust-bar__inner { display: flex; justify-content: center; gap: var(--space-12); } .trust-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .trust-item__icon { width: 40px; height: 40px; background: var(--ctx-surface, var(--white)); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--primary); } /* ----------------------------------------------------------------------------- * Responsive * -------------------------------------------------------------------------- */ @media (max-width: 1023px) { :root { --text-5xl: 2.5rem; --text-6xl: 3rem; } .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__text { margin: 0 auto var(--space-8); } .hero__actions { justify-content: center; } .hero__image, .hero__visual { margin-top: var(--space-8); } /* Hero visual adjustments on tablet/mobile */ .hero__visual { min-height: 300px; max-height: 400px; width: 100%; aspect-ratio: 16 / 10; } /* Split variants stack on mobile */ .hero--split .hero__inner, .hero--split-reverse .hero__inner { grid-template-columns: 1fr; } .hero--split .hero__content, .hero--split .hero__visual, .hero--split-reverse .hero__content, .hero--split-reverse .hero__visual { order: unset; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .featured-grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: repeat(2, 1fr); } .card--horizontal { grid-template-columns: 1fr; } } @media (max-width: 767px) { .header__nav { display: none; } .header__menu-btn { display: flex; } .mobile-menu { display: block; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .featured-grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); } .trust-bar__inner { flex-direction: column; gap: var(--space-4); align-items: center; } .data-table__col--name { min-width: 200px; } } @media (max-width: 639px) { :root { --text-4xl: 2rem; --text-5xl: 2.25rem; --text-6xl: 2.5rem; } .container { padding: 0 var(--space-4); } .section { padding: var(--space-12) 0; } .hero { padding: var(--space-12) 0 var(--space-16); } .hero__actions { flex-direction: column; width: 100%; } .hero__actions .btn { width: 100%; } } /* ============================================================================= * PREMIUM ANIMATIONS & EFFECTS * ============================================================================= */ /* ----------------------------------------------------------------------------- * Legacy Animation Classes - REMOVED (Motion System v2.0) * See motion-core.css for [data-motion] animations * -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Gradient Text * -------------------------------------------------------------------------- */ .gradient-text { background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, var(--secondary, var(--primary-light, #dbeafe)) 50%, var(--primary, #3b82f6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text-white { background: linear-gradient(135deg, var(--white) 0%, color-mix(in srgb, var(--white) 80%, transparent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ----------------------------------------------------------------------------- * Glass Effect * -------------------------------------------------------------------------- */ .glass { background: color-mix(in srgb, var(--white) 10%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--white) 15%, transparent); } .glass-dark { background: color-mix(in srgb, var(--black) 30%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--white) 10%, transparent); } /* ----------------------------------------------------------------------------- * Premium Card Styles * -------------------------------------------------------------------------- */ .card-premium { position: relative; background: var(--white); border-radius: var(--radius-xl); overflow: hidden; } .card-premium::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-xl); padding: 2px; background: linear-gradient(135deg, var(--primary, #3b82f6), transparent 50%, var(--primary, #3b82f6)); -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--motion-duration-sm); } .card-premium:hover::before { opacity: 1; } /* ----------------------------------------------------------------------------- * Shimmer Effect * -------------------------------------------------------------------------- */ .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--white) 20%, transparent), transparent ); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* ----------------------------------------------------------------------------- * Pulse Animation * -------------------------------------------------------------------------- */ .pulse { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { box-shadow: var(--shadow-glow-sm); } 50% { box-shadow: var(--shadow-glow-lg); } } /* ----------------------------------------------------------------------------- * Enhanced Hero Section (particles, effects) * NOTE: Base .hero styles are in "Hero Section" above * -------------------------------------------------------------------------- */ .hero__particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero__particle { position: absolute; width: 4px; height: 4px; background: var(--primary, #3b82f6); border-radius: var(--radius-full); opacity: 0.3; animation: particle-float 10s ease-in-out infinite; } @keyframes particle-float { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; } 50% { transform: translateY(-100px) rotate(180deg); opacity: 0.7; } } /* Enhanced hero glow */ .hero::before { background: radial-gradient( ellipse at 70% 30%, rgba(var(--primary-rgb), 0.2) 0%, transparent 50% ); animation: hero-glow 8s ease-in-out infinite alternate; } @keyframes hero-glow { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 1; transform: scale(1.1); } } /* ----------------------------------------------------------------------------- * Button Shine Effect (Pure CSS - no JS required) * -------------------------------------------------------------------------- */ .btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--white) 20%, transparent) 50%, transparent 100% ); pointer-events: none; mix-blend-mode: overlay; transition: left 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .btn:hover::after { left: 100%; } /* ----------------------------------------------------------------------------- * Enhanced Cards * -------------------------------------------------------------------------- */ /* Card glow effect removed - was causing z-index issues with sections below */ .category-card { transition: all var(--motion-duration-sm) var(--motion-ease-bounce); } /* ----------------------------------------------------------------------------- * FAQ Component (Motion System v2.0 + M3 Component Tokens) * Variants: default, compact, boxed, minimal, elevated, numbered, accordion, * bubble, timeline, gradient, grid * * Component tokens (--comp-faq-*) defined in :root, consumed as --faq-* * Section wrapper (.faq-section) handles spacing/backgrounds via DNA system * -------------------------------------------------------------------------- */ /* Section wrapper - inherits from DNA section classes */ .faq-section { /* Spacing handled by .section class from DNA */ } /* FAQ component container - no margin, section handles it */ .faq { /* Component-level, no margin needed */ } .faq__list { max-width: var(--faq-max-width); margin: 0 auto; } .faq__item { border: var(--faq-item-border-width) solid var(--ctx-border, var(--gray-200)); border-radius: var(--faq-item-radius); margin-bottom: var(--faq-item-gap); overflow: hidden; background: var(--ctx-surface, var(--white)); transition: all var(--faq-transition); } .faq__item:hover { border-color: var(--ctx-border-strong); } .faq__item.is-open { border-color: var(--primary, #3b82f6); box-shadow: var(--faq-shadow-open); } .faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--faq-item-padding); font-size: var(--faq-question-size); font-weight: var(--faq-question-weight); text-align: left; color: var(--ctx-text, var(--gray-900)); background: transparent; cursor: pointer; border: none; transition: background var(--motion-duration-sm); } .faq__question:hover { background: var(--ctx-surface-hover); } .faq__item.is-open .faq__question { background: var(--primary-light, #dbeafe); color: var(--primary-dark, var(--primary, #3b82f6)); } .faq__icon { flex-shrink: 0; width: var(--faq-icon-size); height: var(--faq-icon-size); color: var(--ctx-text-faint); transition: all var(--faq-transition); } .faq__item.is-open .faq__icon { transform: rotate(180deg); color: var(--primary, #3b82f6); } .faq__answer { max-height: 0; overflow: hidden; transition: max-height var(--motion-duration-md); } .faq__answer-inner { padding: 0 var(--faq-item-padding) var(--faq-item-padding); color: var(--ctx-text-muted, var(--gray-600)); line-height: var(--faq-answer-line-height); } /* ----------------------------------------------------------------------------- * FAQ Variants * -------------------------------------------------------------------------- */ /* Compact: tighter spacing, smaller text */ .faq--compact { --faq-item-padding: var(--space-4); --faq-item-gap: var(--space-2); --faq-question-size: var(--text-sm); --faq-icon-size: 20px; } /* Boxed: cards with shadows, no borders */ .faq--boxed .faq__item { border: none; box-shadow: var(--ctx-shadow); border-radius: var(--radius-xl); } .faq--boxed .faq__item:hover { box-shadow: var(--ctx-shadow-lg); transform: translateY(-2px); } .faq--boxed .faq__item.is-open { box-shadow: var(--shadow-primary); } /* Minimal: no borders, just dividers */ .faq--minimal .faq__item { border: none; border-bottom: 1px solid var(--ctx-border-subtle); border-radius: 0; background: transparent; } .faq--minimal .faq__item:last-child { border-bottom: none; } .faq--minimal .faq__item.is-open { box-shadow: none; border-bottom-color: var(--primary, #3b82f6); } /* Elevated: floating cards with strong shadows */ .faq--elevated .faq__item { border: none; box-shadow: var(--ctx-shadow-lg); border-radius: var(--radius-2xl); margin-bottom: var(--space-4); } .faq--elevated .faq__item:hover { box-shadow: var(--ctx-shadow-xl); transform: translateY(-4px); } .faq--elevated .faq__item.is-open { box-shadow: var(--shadow-elevated); } /* Numbered: with question numbers */ .faq--numbered { counter-reset: faq-counter; } .faq--numbered .faq__item { counter-increment: faq-counter; } .faq--numbered .faq__question::before { content: counter(faq-counter); display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; margin-right: var(--space-3); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-weight-bold); } /* ----------------------------------------------------------------------------- * Scroll Progress Indicator * -------------------------------------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--primary, #3b82f6), var(--secondary, var(--primary-hover, #2563eb))); z-index: calc(var(--z-announcement) + 1); transition: width 0.1s linear; } /* ----------------------------------------------------------------------------- * Smooth Link Underlines * -------------------------------------------------------------------------- */ .link-underline { position: relative; display: inline-block; } .link-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--primary, #3b82f6); transition: width var(--motion-duration-md); } .link-underline:hover::after { width: 100%; } /* ----------------------------------------------------------------------------- * Loading States * -------------------------------------------------------------------------- */ .skeleton { background: linear-gradient( 90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ----------------------------------------------------------------------------- * Skeleton System (Wave 25 Enhancement) * -------------------------------------------------------------------------- */ /* Type variants */ .skeleton--rect { border-radius: var(--radius-md); } .skeleton--circle, .skeleton--avatar { border-radius: 50%; flex-shrink: 0; } .skeleton--button { border-radius: var(--radius-md); } .skeleton--image { border-radius: var(--radius-lg); width: 100%; } /* No animation variant */ .skeleton--no-anim { animation: none; background: var(--gray-200); } /* Multiple lines container */ .skeleton-lines { display: flex; flex-direction: column; } /* Dark theme support */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--gray-800) 25%, var(--gray-700) 50%, var(--gray-800) 75%); background-size: 200% 100%; } /* Preset skeleton layouts */ .skeleton-card { display: flex; flex-direction: column; gap: var(--space-3); } .skeleton-card__image { aspect-ratio: 16/9; border-radius: var(--radius-lg); } .skeleton-card__content { display: flex; flex-direction: column; gap: var(--space-2); } .skeleton-row { display: flex; align-items: center; gap: var(--space-3); } /* ----------------------------------------------------------------------------- * Badge Animations * -------------------------------------------------------------------------- */ .badge-float { animation: badge-float 3s ease-in-out infinite; } @keyframes badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .hero__badge { animation: badge-float 3s ease-in-out infinite; box-shadow: var(--shadow-primary-sm); } /* ----------------------------------------------------------------------------- * Image Hover Effects * -------------------------------------------------------------------------- */ .img-zoom { overflow: hidden; } .img-zoom img { transition: transform var(--motion-duration-lg); } .img-zoom:hover img { transform: scale(1.1); } .img-reveal { overflow: hidden; } .img-reveal img { transition: transform var(--motion-duration-lg), filter var(--motion-duration-lg); } .img-reveal:hover img { transform: scale(1.05); } /* ----------------------------------------------------------------------------- * Score/Rating Ring * -------------------------------------------------------------------------- */ .score-ring { position: relative; width: 120px; height: 120px; } .score-ring__circle { fill: none; stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; } .score-ring__bg { stroke: var(--gray-200); } .score-ring__progress { stroke: var(--primary, #3b82f6); stroke-dasharray: 339.292; stroke-dashoffset: 339.292; transition: stroke-dashoffset 1.5s ease-out; } .score-ring__value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--primary); } /* ----------------------------------------------------------------------------- * Tooltip * -------------------------------------------------------------------------- */ [data-tooltip] { position: relative; cursor: help; } [data-tooltip]::before { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px); padding: var(--space-2) var(--space-3); background: var(--ctx-inverted-bg); color: var(--ctx-inverted-text); font-size: var(--text-xs); border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--motion-duration-sm); z-index: var(--z-tooltip); } [data-tooltip]:hover::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ----------------------------------------------------------------------------- * Tooltip System (Wave 23 Enhancement) * -------------------------------------------------------------------------- */ /* Focus support for accessibility */ .tooltip:focus .tooltip__content, .tooltip:focus-within .tooltip__content { opacity: 1; visibility: visible; } /* Focus-only trigger (no hover) */ .tooltip--focus-only:hover .tooltip__content { opacity: 0; visibility: hidden; } .tooltip--focus-only:focus .tooltip__content, .tooltip--focus-only:focus-within .tooltip__content { opacity: 1; visibility: visible; } /* Hover-only trigger (no focus) */ .tooltip--hover-only:focus .tooltip__content { opacity: 0; visibility: hidden; } /* Tooltip trigger wrapper */ .tooltip__trigger { display: inline-flex; align-items: center; gap: var(--space-1); } /* Help icon indicator */ .tooltip__icon { display: inline-flex; color: var(--ctx-text-muted, var(--gray-500)); transition: color var(--motion-duration-sm); } .tooltip:hover .tooltip__icon, .tooltip:focus .tooltip__icon { color: var(--primary, #3b82f6); } /* Arrow for left/right positions */ .tooltip--left .tooltip__content::after { left: auto; right: -6px; top: 50%; bottom: auto; transform: translateY(-50%); border-top-color: transparent; border-left-color: var(--ctx-inverted-bg); } .tooltip--right .tooltip__content::after { right: auto; left: -6px; top: 50%; bottom: auto; transform: translateY(-50%); border-top-color: transparent; border-right-color: var(--ctx-inverted-bg); } /* Button-style tooltip trigger */ button.tooltip { background: transparent; border: none; padding: 0; font: inherit; color: inherit; cursor: help; } button.tooltip:focus { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* ----------------------------------------------------------------------------- * Reveal Animations (CSS only fallback) * -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: all var(--motion-duration-lg); } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------------------------- * Counter Animation Helper * -------------------------------------------------------------------------- */ [data-counter] { font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------------------- * Magnetic Button Effect (visual only - JS handles interaction) * -------------------------------------------------------------------------- */ .btn-magnetic { transition: transform var(--motion-duration-md); } /* ----------------------------------------------------------------------------- * Smooth Page Transition * -------------------------------------------------------------------------- */ body { opacity: 1; } .page-transitioning body { opacity: 0; transition: opacity var(--motion-duration-md); } /* ----------------------------------------------------------------------------- * Custom Scrollbar * -------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ctx-bg-section, var(--gray-100)); } ::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--primary, #3b82f6); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--ctx-text-faint) var(--ctx-bg-section); } /* ----------------------------------------------------------------------------- * Selection Highlight * -------------------------------------------------------------------------- */ ::selection { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } ::-moz-selection { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } /* Contextual selection for dark/primary backgrounds - invert colors */ .section--dark ::selection, .section--primary ::selection, .section--cta ::selection, .section--gradient ::selection, .hero--gradient ::selection, .hero--dark ::selection, [data-theme="dark"] ::selection, .footer ::selection { background: color-mix(in srgb, var(--white) 95%, transparent); color: var(--primary, #3b82f6); } .section--dark ::-moz-selection, .section--primary ::-moz-selection, .section--cta ::-moz-selection, .section--gradient ::-moz-selection, .hero--gradient ::-moz-selection, .hero--dark ::-moz-selection, [data-theme="dark"] ::-moz-selection, .footer ::-moz-selection { background: color-mix(in srgb, var(--white) 95%, transparent); color: var(--primary, #3b82f6); } /* ============================================================================= * FOCUS VISIBLE STYLES (WCAG 2.4.7) * All interactive elements must have visible focus indication * ========================================================================== */ /* ----------------------------------------------------------------------------- * Global Focus Styles * -------------------------------------------------------------------------- */ /* Remove default focus for mouse users (modern browsers) */ :focus:not(:focus-visible) { outline: none; } /* Fallback for older browsers - keep outline on :focus */ @supports not selector(:focus-visible) { :focus { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; } } /* Base focus visible styles - all interactive elements */ :focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* ----------------------------------------------------------------------------- * Buttons * -------------------------------------------------------------------------- */ /* Standard buttons - ring + shadow */ .btn:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); box-shadow: var(--ctx-focus-shadow, 0 0 0 4px rgba(99, 102, 241, 0.3)); } /* Primary button - needs contrast */ .btn--primary:focus-visible { outline-color: var(--surface-default, #ffffff); box-shadow: 0 0 0 4px var(--primary-light, #e0e7ff); } /* Icon-only buttons - circular ring */ .btn--icon-only:focus-visible, .icon-btn:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); border-radius: 50%; } /* Close buttons */ .close-btn:focus-visible, [data-close]:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* ----------------------------------------------------------------------------- * Links * -------------------------------------------------------------------------- */ /* Links - underline enhancement */ a:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); text-decoration: underline; } /* ----------------------------------------------------------------------------- * Cards * -------------------------------------------------------------------------- */ /* Cards - ring around entire card */ .card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ----------------------------------------------------------------------------- * Forms * -------------------------------------------------------------------------- */ /* Form inputs - use border + box shadow instead of outline for contained look */ input:focus-visible, textarea:focus-visible, select:focus-visible, .form-input:focus-visible, .form-textarea:focus-visible, .form-select:focus-visible { outline: none; /* Replaced by border + box-shadow for contained look */ border-color: var(--ctx-focus-ring-color, var(--primary, #3b82f6)); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.2); } /* Checkboxes and radios - standard ring */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* Custom checkbox/radio containers */ .checkbox:focus-within, .radio:focus-within, .form-check:focus-within { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* ----------------------------------------------------------------------------- * Navigation * -------------------------------------------------------------------------- */ /* Header navigation links */ .nav__link:focus-visible, .header__nav a:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); background: rgba(99, 102, 241, 0.1); } /* Mobile menu links */ .mobile-menu__link:focus-visible, .mobile-menu__sub-link:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: -2px; /* Inset for contained look */ background: rgba(99, 102, 241, 0.1); } /* Mobile menu toggle */ .mobile-menu__link--toggle:focus-visible, .mobile-menu__toggle:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: -2px; } /* Skip to content - make it prominent */ .skip-to-content:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3); } /* Breadcrumbs */ .breadcrumbs__link:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* ----------------------------------------------------------------------------- * Interactive Components * -------------------------------------------------------------------------- */ /* Dropdown triggers */ .dropdown__trigger:focus-visible, [data-dropdown-trigger]:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* FAQ questions (accordion triggers) */ .faq__question:focus-visible, .faq-item__question:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); background: rgba(99, 102, 241, 0.05); } /* Tabs */ .tabs__button:focus-visible, .tab-button:focus-visible, [role="tab"]:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* Pagination */ .pagination__link:focus-visible, .page-numbers:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* Search triggers */ .search-trigger:focus-visible, [data-search-trigger]:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* Modal/Dialog close buttons */ .modal__close:focus-visible, .dialog__close:focus-visible { outline: var(--ctx-focus-ring-width, 2px) var(--ctx-focus-ring-style, solid) var(--ctx-focus-ring-color, var(--primary, #3b82f6)); outline-offset: var(--ctx-focus-ring-offset, 2px); } /* ----------------------------------------------------------------------------- * Dark Mode / Dark Sections Focus * -------------------------------------------------------------------------- */ /* Dark theme - use lighter outline color for visibility */ [data-theme="dark"] :focus-visible, .section--dark :focus-visible, .footer :focus-visible { outline-color: var(--primary-light, #e0e7ff); } [data-theme="dark"] .btn:focus-visible, .section--dark .btn:focus-visible, .footer .btn:focus-visible { box-shadow: 0 0 0 4px rgba(224, 231, 255, 0.3); } [data-theme="dark"] .card:focus-visible, .section--dark .card:focus-visible { box-shadow: 0 0 0 4px rgba(224, 231, 255, 0.2); } [data-theme="dark"] .nav__link:focus-visible, .section--dark .nav__link:focus-visible, [data-theme="dark"] .mobile-menu__link:focus-visible { background: rgba(224, 231, 255, 0.1); } /* ----------------------------------------------------------------------------- * NEVER HIDE FOCUS * The following patterns should NOT exist in the codebase. * Search and remove if found: * * :focus { outline: none; } ❌ REMOVE * button:focus { outline: 0; } ❌ REMOVE * a:focus { outline: none; } ❌ REMOVE * *:focus { outline: 0 !important; } ❌ REMOVE * * Only use outline: none WITH an alternative focus style (border + box-shadow). * -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Guide Content Styles * Reusable components for educational/guide pages * -------------------------------------------------------------------------- */ /* Guide wrapper - prose content with proper spacing */ .guide-article { max-width: 800px; margin: 0 auto; } .guide-article h2 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-top: var(--space-12); margin-bottom: var(--space-6); color: var(--ctx-text, var(--gray-900)); } .guide-article h2:first-child { margin-top: 0; } .guide-article h3 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); margin-top: var(--space-8); margin-bottom: var(--space-4); color: var(--ctx-text, var(--gray-900)); } .guide-article p { margin-bottom: var(--space-4); line-height: var(--line-height-loose); color: var(--ctx-text, var(--gray-900)); } .guide-article ul, .guide-article ol { margin-bottom: var(--space-6); padding-left: var(--space-6); } .guide-article li { margin-bottom: var(--space-2); line-height: var(--line-height-relaxed); color: var(--ctx-text, var(--gray-900)); } .guide-article strong { color: var(--ctx-text, var(--gray-900)); font-weight: var(--font-weight-semibold); } /* Lead paragraph */ .guide-lead { font-size: var(--text-lg); line-height: var(--line-height-loose); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-8); } /* Formula/highlight box */ .formula-box { background: var(--ctx-surface, var(--white)); border: 2px solid var(--primary, #3b82f6); border-radius: var(--radius-lg); padding: var(--space-8); margin: var(--space-8) 0; text-align: center; } .formula-box__formula { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--primary); margin-bottom: var(--space-2); } .formula-box__caption { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } /* Data tables */ .data-table { width: 100%; border-collapse: collapse; margin: var(--space-8) 0; background: var(--ctx-surface, var(--white)); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .data-table th, .data-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .data-table th { background: var(--ctx-bg-section, var(--gray-100)); font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.025em; } .data-table td { color: var(--ctx-text, var(--gray-900)); } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--ctx-bg-section, var(--gray-100)); } /* Example box */ .example-box { background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-lg); padding: var(--space-6); margin: var(--space-6) 0; } .example-box h4 { margin: 0 0 var(--space-4) 0; font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); } .example-box p { margin-bottom: var(--space-3); } .example-box p:last-child, .example-box ul:last-child { margin-bottom: 0; } /* Guide cards grid - for temperature/zones etc */ .guide-cards { display: grid; gap: var(--space-6); margin: var(--space-8) 0; } @media (min-width: 768px) { .guide-cards { grid-template-columns: repeat(2, 1fr); } } .guide-cards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Guide card */ .guide-card { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); padding: var(--space-6); transition: var(--motion-duration-sm); } .guide-card:hover { border-color: var(--primary, #3b82f6); box-shadow: var(--shadow-md); } .guide-card__icon { font-size: var(--headline-large-font-size); margin-bottom: var(--space-4); } .guide-card__title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); color: var(--ctx-text, var(--gray-900)); } .guide-card__title--highlight { color: var(--primary); } .guide-card p { color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-3); font-size: var(--text-sm); line-height: var(--line-height-normal); } .guide-card ul { margin: var(--space-3) 0 0 0; padding-left: var(--space-5); } .guide-card li { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-1); } .guide-card__note { font-style: italic; color: var(--ctx-text-faint); font-size: var(--text-sm); margin-top: var(--space-4); } /* Badge inline */ .badge { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); padding: 0.25em 0.75em; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.025em; } .badge--primary { background: var(--primary-light, #dbeafe); color: var(--primary-dark, #1e40af); } .badge--success { background: var(--success-light); color: var(--success-dark); } .badge--warning { background: var(--warning-light); color: var(--warning-dark); } .badge--danger { background: var(--error-light); color: var(--error-dark); } .badge--info { background: var(--info-light); color: var(--info-dark); } /* Tips grid - do/don't */ .tips-columns { display: grid; gap: var(--space-6); margin: var(--space-8) 0; } @media (min-width: 768px) { .tips-columns { grid-template-columns: repeat(2, 1fr); } } .tips-column h4 { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); } .tips-column--do h4 { color: var(--success); } .tips-column--dont h4 { color: var(--error); } .tips-column ul { margin: 0; padding-left: var(--space-5); } .tips-column li { margin-bottom: var(--space-2); line-height: var(--line-height-normal); } /* Table responsive wrapper */ .table-wrapper { overflow-x: auto; margin: var(--space-8) 0; -webkit-overflow-scrolling: touch; } /* Feature box (compact info cards) */ .feature-box { padding: var(--space-6); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-lg); } .feature-box__title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2) 0; } .feature-box__text { margin: 0; font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); line-height: var(--line-height-normal); } /* ----------------------------------------------------------------------------- * Print Styles * -------------------------------------------------------------------------- */ @media print { /* Hide interactive/navigation elements - !important required for print override */ .header, .footer, .cta-section, .btn, .hero::before, .hero::after { display: none !important; } /* Force print-friendly colors */ body { color: var(--black); background: var(--white); } .hero { background: var(--gray-100); color: var(--black); } /* Show link URLs */ a { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: var(--text-sm); } } /* ============================================================================= * ADDITIONAL BEM COMPONENTS * Complete coverage for all partials * ============================================================================= */ /* ----------------------------------------------------------------------------- * Steps / Timeline / Process * Modern architecture with DNA integration, Motion System ready * Supports: vertical, horizontal, timeline, zigzag, grid, journey * -------------------------------------------------------------------------- */ /* === TOKENS === */ .steps { /* Marker tokens - DNA overridable */ --steps-marker-size: var(--dna-steps-marker-size, 48px); --steps-marker-size-sm: 32px; --steps-marker-size-lg: 56px; --steps-marker-bg: var(--dna-steps-marker-bg, var(--primary)); --steps-marker-color: var(--dna-steps-marker-color, var(--on-primary, var(--white))); --steps-marker-border: var(--dna-steps-marker-border, none); --steps-marker-shadow: var(--dna-steps-marker-shadow, var(--shadow-md)); --steps-marker-glow: var(--dna-steps-marker-glow, 0 0 20px color-mix(in srgb, var(--primary) 40%, transparent)); /* Track tokens - DNA overridable */ --steps-track-width: var(--dna-steps-track-width, 3px); --steps-track-color: var(--dna-steps-track-color, var(--ctx-border, var(--gray-300))); --steps-track-gradient: var(--dna-steps-track-gradient, linear-gradient(180deg, var(--primary) 0%, var(--ctx-border) 100%)); --steps-track-progress: 0; /* Layout tokens */ --steps-gap: var(--space-8); --steps-gap-horizontal: var(--space-12); /* Base styles */ display: flex; flex-direction: column; gap: var(--steps-gap); position: relative; } /* === SIZE VARIANTS === */ .steps--sm { --steps-marker-size: var(--steps-marker-size-sm); --steps-gap: var(--space-6); } .steps--lg { --steps-marker-size: var(--steps-marker-size-lg); --steps-gap: var(--space-10); } .steps--sm .step__title { font-size: var(--text-base); } .steps--md .step__title { font-size: var(--text-lg); } .steps--lg .step__title { font-size: var(--text-xl); } /* === LAYOUT: HORIZONTAL === */ .steps--horizontal { flex-direction: row; align-items: flex-start; gap: var(--steps-gap-horizontal); justify-content: center; } .steps--horizontal .step { flex-direction: column; align-items: center; text-align: center; flex: 1; max-width: 280px; } .steps--horizontal .step__content { margin-top: var(--space-4); } /* === LAYOUT: TIMELINE (vertical with track) === */ .steps--timeline { padding-left: calc(var(--steps-marker-size) / 2 + var(--space-6)); max-width: 700px; margin-inline: auto; } /* Timeline track - gradient line */ .steps--timeline::before { content: ''; position: absolute; left: calc(var(--steps-marker-size) / 2); top: calc(var(--steps-marker-size) / 2); bottom: calc(var(--steps-marker-size) / 2); width: var(--steps-track-width); background: var(--steps-track-color); border-radius: var(--radius-full); transform-origin: top; } /* Timeline track - gradient variant */ .steps--timeline.steps--track-gradient::before { background: var(--steps-track-gradient); } /* Timeline track - animated progress (Motion System) */ .steps--timeline[data-scrub]::before { background: linear-gradient(180deg, var(--primary) 0%, var(--primary) calc(var(--steps-track-progress, 0) * 100%), var(--steps-track-color) calc(var(--steps-track-progress, 0) * 100%), var(--steps-track-color) 100% ); } /* === LAYOUT: HORIZONTAL TIMELINE === */ .steps--horizontal-timeline { flex-direction: row; align-items: flex-start; justify-content: space-between; padding-top: calc(var(--steps-marker-size) / 2); } .steps--horizontal-timeline::before { content: ''; position: absolute; top: calc(var(--steps-marker-size) / 2); left: calc(var(--steps-marker-size) / 2); right: calc(var(--steps-marker-size) / 2); height: var(--steps-track-width); background: var(--steps-track-color); border-radius: var(--radius-full); } .steps--horizontal-timeline.steps--track-gradient::before { background: linear-gradient(90deg, var(--primary), var(--secondary, var(--primary))); } .steps--horizontal-timeline .step { flex-direction: column; align-items: center; text-align: center; flex: 1; position: relative; z-index: 1; } .steps--horizontal-timeline .step__content { margin-top: var(--space-4); } /* === LAYOUT: ZIGZAG (alternating) === */ .steps--zigzag .step:nth-child(even) { flex-direction: row-reverse; text-align: right; } .steps--zigzag .step:nth-child(even) .step__content { align-items: flex-end; } /* === LAYOUT: GRID (multi-row) === */ .steps--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-8); } .steps--grid .step { flex-direction: column; align-items: center; text-align: center; } /* === LAYOUT: CARDS === */ .steps--cards .step { background: var(--ctx-bg-elevated, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--motion-duration-md), box-shadow var(--motion-duration-md); } .steps--cards .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* === LAYOUT: COMPACT === */ .steps--compact { --steps-gap: var(--space-4); --steps-marker-size: 32px; } /* === STEP ITEM === */ .step { position: relative; display: flex; gap: var(--space-4); align-items: flex-start; } /* === MARKER (unified) === */ .step__marker { flex-shrink: 0; width: var(--steps-marker-size); height: var(--steps-marker-size); border-radius: var(--radius-full); background: var(--steps-marker-bg); color: var(--steps-marker-color); border: var(--steps-marker-border); box-shadow: var(--steps-marker-shadow); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: var(--text-base); position: relative; z-index: 2; transition: transform var(--motion-duration-md), box-shadow var(--motion-duration-md); } /* Marker hover glow */ .step:hover .step__marker { box-shadow: var(--steps-marker-shadow), var(--steps-marker-glow); transform: scale(1.05); } /* Marker icon */ .step__marker svg { width: calc(var(--steps-marker-size) * 0.45); height: calc(var(--steps-marker-size) * 0.45); } /* === MARKER VARIANTS (DNA) === */ /* Elevated (default) */ .steps--marker-elevated .step__marker { background: var(--ctx-bg-elevated, var(--white)); color: var(--primary); border: 2px solid var(--primary); box-shadow: var(--shadow-lg); } /* Glass */ .steps--marker-glass .step__marker { background: color-mix(in srgb, var(--primary) 15%, transparent); backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); box-shadow: var(--shadow-lg); } /* Gradient */ .steps--marker-gradient .step__marker { background: linear-gradient(135deg, var(--primary), var(--secondary, var(--primary-dark))); box-shadow: var(--shadow-lg), var(--steps-marker-glow); } /* Outlined */ .steps--marker-outlined .step__marker { background: transparent; border: 2px solid var(--primary); color: var(--primary); box-shadow: none; } /* === STATUS STATES === */ .step--completed .step__marker { background: var(--success); color: var(--on-success, var(--white)); box-shadow: var(--shadow-md), 0 0 16px color-mix(in srgb, var(--success) 40%, transparent); } .step--current .step__marker { animation: step-pulse 2s ease-in-out infinite; box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); } .step--upcoming .step__marker { background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text-muted, var(--gray-500)); box-shadow: none; } @keyframes step-pulse { 0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); } 50% { box-shadow: var(--shadow-lg), 0 0 0 8px color-mix(in srgb, var(--primary) 15%, transparent); } } /* === CONTENT === */ .step__content { flex: 1; display: flex; flex-direction: column; padding-top: var(--space-1); } .step__title { font-weight: var(--font-weight-semibold); font-size: var(--text-lg); margin-bottom: var(--space-2); color: var(--ctx-text, var(--gray-900)); line-height: var(--line-height-tight); } .step__text { color: var(--ctx-text-muted, var(--gray-600)); line-height: var(--line-height-relaxed); font-size: var(--text-base); } .step__duration { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ctx-text-faint); margin-top: var(--space-3); } .step__duration svg { width: 14px; height: 14px; } /* === STEP IMAGE (illustration beside content) === */ .step__image { flex-shrink: 0; width: 100%; max-width: 180px; border-radius: var(--radius-lg); overflow: hidden; } .step__image img { width: 100%; height: auto; display: block; } /* Step with image: side-by-side layout */ .step--has-image { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: start; } .step--has-image .step__marker { grid-row: 1; } .step--has-image .step__image { grid-row: 1; grid-column: 3; } .step--has-image .step__content { grid-row: 1; grid-column: 2; } /* Timeline layout with image: image after content */ .steps--timeline .step--has-image { grid-template-columns: 1fr auto; } .steps--timeline .step--has-image .step__image { grid-column: 2; } .steps--timeline .step--has-image .step__content { grid-column: 1; } /* === STEP CTA (inline action button) === */ .step__cta { margin-top: var(--space-4); } @media (max-width: 640px) { .step--has-image { grid-template-columns: auto 1fr; } .step--has-image .step__image { grid-column: 1 / -1; grid-row: 2; max-width: 100%; margin-top: var(--space-3); } } /* === MOTION SYSTEM INTEGRATION === */ /* Marker glow on reveal */ .step[data-motion-ready] .step__marker { animation: marker-reveal 0.6s var(--motion-ease-out) forwards; } @keyframes marker-reveal { 0% { transform: scale(0.8); opacity: 0; box-shadow: none; } 50% { box-shadow: var(--steps-marker-shadow), var(--steps-marker-glow); } 100% { transform: scale(1); opacity: 1; box-shadow: var(--steps-marker-shadow); } } /* === RESPONSIVE === */ @media (max-width: 768px) { .steps--horizontal, .steps--horizontal-timeline { flex-direction: column; align-items: stretch; } .steps--horizontal .step, .steps--horizontal-timeline .step { flex-direction: row; text-align: left; max-width: none; } .steps--horizontal .step__content, .steps--horizontal-timeline .step__content { margin-top: 0; margin-left: var(--space-4); } .steps--horizontal-timeline::before { top: 0; bottom: 0; left: calc(var(--steps-marker-size) / 2); right: auto; width: var(--steps-track-width); height: auto; } .steps--zigzag .step:nth-child(even) { flex-direction: row; text-align: left; } .steps--zigzag .step:nth-child(even) .step__content { align-items: flex-start; } } /* ----------------------------------------------------------------------------- * Checklist * -------------------------------------------------------------------------- */ .checklist { display: flex; flex-direction: column; gap: var(--space-3); } .checklist--compact { gap: var(--space-2); } .checklist--card { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); padding: var(--space-6); } .checklist__item { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ctx-text, var(--gray-900)); } .checklist__item::before { content: '✓'; flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--success-light); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-weight-bold); } .checklist--bullet .checklist__item::before { content: ''; width: 8px; height: 8px; background: var(--primary, #3b82f6); margin-top: var(--space-2); /* 8px - closest to 6px */ } .checklist--number { counter-reset: checklist; } .checklist--number .checklist__item::before { counter-increment: checklist; content: counter(checklist); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .checklist__item--unchecked::before { content: ''; background: var(--ctx-bg-section, var(--gray-100)); border: 2px solid var(--ctx-border, var(--gray-200)); } /* ----------------------------------------------------------------------------- * CTA Box * -------------------------------------------------------------------------- */ .cta-box { background: var(--ctx-bg-elevated, var(--white)); border: 2px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); padding: var(--space-8); text-align: center; } .cta-box--compact { padding: var(--space-6); } .cta-box--centered { text-align: center; } .cta-box--dark { background: var(--surface-dark-default, var(--black)); border-color: var(--border-default, var(--gray-800)); color: var(--on-surface-dark, var(--cream)); } .cta-box--light { background: var(--surface-light-default, var(--white)); border-color: var(--border-light, var(--gray-200)); } .cta-box--sm { padding: var(--space-4); } .cta-box--md { padding: var(--space-6); } .cta-box--lg { padding: var(--space-10); } .cta-box__content { max-width: 600px; margin: 0 auto; } .cta-box__title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); color: var(--ctx-heading, var(--gray-900)); } .cta-box__text { color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-6); } /* CTA Box: Gradient variant */ .cta-box--gradient { background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, var(--secondary, var(--primary-dark, #1e40af)) 100%); border-color: transparent; color: var(--on-primary, var(--white)); } .cta-box--gradient .cta-box__title { color: var(--on-primary, var(--white)); } .cta-box--gradient .cta-box__text { color: color-mix(in srgb, var(--white) 90%, transparent); } /* CTA Box: Split layout (text left, button right) */ .cta-box--split { text-align: left; } .cta-box--split .cta-box__content { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .cta-box--split .btn { flex-shrink: 0; white-space: nowrap; } @media (max-width: 767px) { .cta-box--split .cta-box__content { flex-direction: column; align-items: stretch; text-align: center; } .cta-box--split .btn { width: 100%; } } /* CTA Box: Minimal (no border/bg) */ .cta-box--minimal { background: transparent; border: none; padding: var(--space-6) 0; } /* CTA Box: Elevated (strong shadow) */ .cta-box--elevated { box-shadow: var(--shadow-xl); border: none; } .cta-box--elevated:hover { transform: translateY(-4px); box-shadow: var(--shadow-2xl); transition: all var(--motion-duration-md); } /* CTA Box: Outlined (border only, transparent bg) */ .cta-box--outlined { background: transparent; border: 2px solid var(--primary, #3b82f6); backdrop-filter: blur(8px); } /* CTA Box: Primary background */ .cta-box--primary { background: var(--primary, #3b82f6); border-color: var(--primary-dark, var(--primary, #3b82f6)); color: var(--on-primary, var(--white)); } .cta-box--primary .cta-box__title { color: var(--on-primary, var(--white)); } .cta-box--primary .cta-box__text { color: color-mix(in srgb, var(--white) 90%, transparent); } /* ----------------------------------------------------------------------------- * Disclaimer * -------------------------------------------------------------------------- */ .disclaimer { display: flex; gap: var(--space-4); padding: var(--space-5); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-lg); border-left: 4px solid var(--ctx-border, var(--gray-200)); font-size: var(--text-sm); } .disclaimer--info { border-left-color: var(--info); background: var(--info-light); } .disclaimer--success { border-left-color: var(--success); background: var(--success-light); } .disclaimer--error { border-left-color: var(--error); background: var(--error-light); } .disclaimer--health { border-left-color: var(--pink); background: var(--pink-light); } .disclaimer--legal { border-left-color: var(--ctx-text-muted, var(--gray-600)); background: var(--ctx-bg-section, var(--gray-100)); } .disclaimer__icon { flex-shrink: 0; color: var(--ctx-text-muted, var(--gray-600)); } .disclaimer__content { flex: 1; } .disclaimer__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); color: var(--ctx-text, var(--gray-900)); } .disclaimer__text { color: var(--ctx-text-muted, var(--gray-600)); line-height: var(--line-height-normal); } .disclaimer-section { padding: var(--space-12) 0; } .disclaimer-section--alt { background: var(--ctx-bg-section, var(--gray-100)); } /* ----------------------------------------------------------------------------- * Prose (article content) * -------------------------------------------------------------------------- */ .prose { color: var(--ctx-text, var(--gray-900)); line-height: var(--line-height-loose); } .prose h2 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-top: var(--space-10); margin-bottom: var(--space-4); color: var(--ctx-text, var(--gray-900)); } .prose h3 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); margin-top: var(--space-8); margin-bottom: var(--space-3); color: var(--ctx-text, var(--gray-900)); } .prose p { margin-bottom: var(--space-4); } .prose ul, .prose ol { margin-bottom: var(--space-4); padding-left: var(--space-6); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: var(--space-2); } .prose a { color: var(--primary); text-decoration: underline; } .prose a:hover { color: var(--primary-hover, #2563eb); } .prose blockquote { border-left: 4px solid var(--primary, #3b82f6); padding-left: var(--space-6); margin: var(--space-6) 0; font-style: italic; color: var(--ctx-text-muted, var(--gray-600)); } .prose__lead { font-size: var(--text-lg); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-8); } /* ----------------------------------------------------------------------------- * Feature Grid * -------------------------------------------------------------------------- */ .feature-grid-section { padding: var(--space-16) 0; } .feature-grid-section--alt { background: var(--ctx-bg-section, var(--gray-100)); } .feature-grid-section--dark { background: var(--surface-dark-default, var(--black-deep)); color: var(--on-surface-dark, var(--cream)); } .feature-grid { display: grid; gap: var(--space-8); } /* Mobile-first: 1 column default, multi-column on tablet+ */ @media (min-width: 768px) { .feature-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .feature-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .feature-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } .feature-grid--align-left { text-align: left; } .feature-grid--align-center { text-align: center; } .feature-grid--sm .feature-grid__title { font-size: var(--text-base); } .feature-grid--md .feature-grid__title { font-size: var(--text-lg); } .feature-grid--lg .feature-grid__title { font-size: var(--text-xl); } .feature-grid__item { display: flex; flex-direction: column; } .feature-grid--icon-left .feature-grid__item { flex-direction: row; gap: var(--space-4); } .feature-grid--boxed .feature-grid__item { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); padding: var(--space-6); } .feature-grid__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--primary-light, #dbeafe); color: var(--primary, #3b82f6); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); font-size: var(--headline-small-font-size); } .feature-grid--align-center .feature-grid__icon { margin-left: auto; margin-right: auto; } .feature-grid__number { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: var(--text-sm); margin-bottom: var(--space-4); } .feature-grid__content { flex: 1; } .feature-grid__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); color: var(--ctx-text, var(--gray-900)); } .feature-grid__text { color: var(--ctx-text-muted, var(--gray-600)); font-size: var(--text-sm); line-height: var(--line-height-normal); } .feature-grid__link { margin-top: var(--space-3); color: var(--primary, #3b82f6); font-weight: var(--font-weight-medium); } /* ----------------------------------------------------------------------------- * Stats Section * -------------------------------------------------------------------------- */ .stats-section { padding: var(--space-12) 0; } .stats-section--alt { background: var(--ctx-bg-section, var(--gray-100)); } .stats-section--dark { background: var(--surface-dark-default, var(--black-deep)); color: var(--on-surface-dark, var(--cream)); } .stats-section--primary { background: var(--primary, #3b82f6); color: var(--on-primary, var(--black)); } .stats { display: grid; gap: var(--space-8); text-align: center; } .stats--default { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .stats--boxed .stats__item { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); padding: var(--space-6); } .stats--minimal { gap: var(--space-12); } .stats--align-left { text-align: left; } .stats--align-center { text-align: center; } .stats__item { display: flex; flex-direction: column; align-items: center; } .stats--align-left .stats__item { align-items: flex-start; } .stats__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--primary-light, #dbeafe); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .stats__value, .stats__number { font-size: var(--text-4xl); font-weight: var(--font-weight-bold); color: var(--primary); line-height: var(--line-height-none); margin-bottom: var(--space-2); } .stats__prefix, .stats__suffix { font-size: var(--text-2xl); } .stats__label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); text-transform: uppercase; letter-spacing: 0.05em; } /* ----------------------------------------------------------------------------- * Testimonials * -------------------------------------------------------------------------- */ .testimonials-section { padding: var(--space-16) 0; } .testimonials-section--alt { background: var(--ctx-bg-section, var(--gray-100)); } .testimonials-section--dark { background: var(--surface-dark-default, var(--black-deep)); color: var(--on-surface-dark, var(--cream)); } .testimonials { display: grid; gap: var(--space-6); } /* Mobile-first: 1 column default, multi-column on tablet+ */ .testimonials--masonry .testimonial { break-inside: avoid; margin-bottom: var(--space-6); } @media (min-width: 768px) { .testimonials--cols-2 { grid-template-columns: repeat(2, 1fr); } .testimonials--cols-3 { grid-template-columns: repeat(3, 1fr); } .testimonials--masonry { columns: 2; column-gap: var(--space-6); } } .testimonial { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); padding: var(--space-6); } .testimonial--featured { border-color: var(--primary, #3b82f6); box-shadow: var(--shadow-lg); } .testimonial__quote-icon { width: 32px; height: 32px; color: var(--primary, #3b82f6); margin-bottom: var(--space-4); } .testimonial__quote { font-size: var(--text-base); line-height: var(--line-height-relaxed); color: var(--ctx-text, var(--gray-900)); margin-bottom: var(--space-6); } .testimonial__rating { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); } .testimonial__star { width: 16px; height: 16px; color: var(--ctx-border, var(--gray-200)); } .testimonial__star--filled { color: var(--primary, #3b82f6); } .testimonial__author { display: flex; align-items: center; gap: var(--space-3); } .testimonial__avatar { width: 48px; height: 48px; border-radius: var(--radius-full); overflow: hidden; background: var(--ctx-bg-section, var(--gray-100)); } .testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial__author-info { flex: 1; } .testimonial__author-name { font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); } .testimonial__author-title { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .testimonial__company-logo { height: 24px; opacity: 0.6; } .testimonial__source { font-size: var(--text-xs); color: var(--ctx-text-faint); margin-top: var(--space-2); } /* Verified purchase badge */ .testimonial__verified { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--success); margin-top: var(--space-3); padding: var(--space-1) var(--space-2); background: var(--success-light, rgba(34, 197, 94, 0.1)); border-radius: var(--radius-sm); } .testimonial__verified .icon { width: 14px; height: 14px; } /* Aggregate rating summary */ .testimonials__aggregate { text-align: center; margin-bottom: var(--space-8); } .aggregate-rating { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: var(--ctx-bg-elevated); border-radius: var(--radius-lg); } .aggregate-rating__score { display: flex; align-items: baseline; gap: var(--space-1); } .aggregate-rating__value { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--ctx-text); } .aggregate-rating__max { font-size: var(--text-sm); color: var(--ctx-text-muted); } .aggregate-rating__stars { display: flex; gap: var(--space-1); } .aggregate-rating__star { color: var(--ctx-border); } .aggregate-rating__star--filled { color: var(--warning, #eab308); } .aggregate-rating__star--half { color: var(--warning, #eab308); opacity: 0.5; } .aggregate-rating__count { font-size: var(--text-sm); color: var(--ctx-text-muted); } .aggregate-rating__source { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ctx-text-muted); padding: var(--space-1) var(--space-2); background: var(--ctx-bg-section); border-radius: var(--radius-sm); } .aggregate-rating__source .icon { width: 14px; height: 14px; } /* Slider navigation */ .testimonials__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-6); } .testimonials__track .testimonial { flex: 0 0 350px; scroll-snap-align: start; } .testimonials__nav { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); } .testimonials__prev, .testimonials__next { width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--ctx-border, var(--gray-200)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--motion-duration-sm); } .testimonials__prev:hover, .testimonials__next:hover { background: var(--primary, #3b82f6); border-color: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } /* ----------------------------------------------------------------------------- * Sidebar Box * -------------------------------------------------------------------------- */ .sidebar-box { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6); } .sidebar-box--primary { background: var(--primary-light, #dbeafe); border-color: var(--primary, #3b82f6); } .sidebar-box--highlight { border-color: var(--primary, #3b82f6); box-shadow: var(--shadow-md); } .sidebar-box__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .sidebar-box__title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); color: var(--ctx-text, var(--gray-900)); } /* ----------------------------------------------------------------------------- * Video Embed * -------------------------------------------------------------------------- */ .video-embed { position: relative; width: 100%; margin: var(--space-6) 0; } .video-embed--sm { max-width: 640px; } .video-embed--md { max-width: 640px; } .video-embed--lg { max-width: 800px; } .video-embed--full { max-width: 100%; } .video-embed--align-left { margin-left: 0; margin-right: auto; } .video-embed--align-center { margin-left: auto; margin-right: auto; } .video-embed--align-right { margin-left: auto; margin-right: 0; } .video-embed__container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-default, var(--black-deep)); } .video-embed--square .video-embed__container { padding-bottom: 100%; } .video-embed--vertical .video-embed__container { padding-bottom: 177.78%; } /* 9:16 */ .video-embed--cinematic .video-embed__container { padding-bottom: 41.67%; } /* 21:9 */ .video-embed__video, .video-embed__iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .video-embed__thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: var(--motion-duration-sm); } .video-embed__thumbnail:hover { filter: brightness(0.9); } .video-embed__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--motion-duration-sm); box-shadow: var(--shadow-card-dark); } .video-embed__play:hover { transform: translate(-50%, -50%) scale(1.1); } .video-embed__caption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); text-align: center; } .video-embed__lazy { cursor: pointer; } /* ----------------------------------------------------------------------------- * Forms * -------------------------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: var(--space-6); } .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .form-label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-900)); } .form-label--required::after { content: ' *'; color: var(--error); } .form-input, .form-textarea, .form-select { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--text-base); font-family: inherit; color: var(--ctx-text, var(--gray-900)); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--input-radius, var(--radius-md)); transition: var(--motion-duration-sm); } /* Focus styles moved to centralized Focus Styles section above */ .form-input::placeholder, .form-textarea::placeholder { color: var(--ctx-text-faint); } .form-textarea { min-height: 120px; resize: vertical; } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-10); } .form-hint { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-600)); } .form-error { font-size: var(--text-xs); color: var(--error); } /* Checkbox & Radio */ .checkbox-group, .radio-group { display: flex; flex-direction: column; gap: var(--space-3); } .checkbox-group--inline, .radio-group--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); } .checkbox-item, .radio-item { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; } .checkbox-item input, .radio-item input { width: 18px; height: 18px; accent-color: var(--primary, #3b82f6); } /* Newsletter form inline */ .form-newsletter { display: flex; gap: var(--space-3); } .form-newsletter .form-input { flex: 1; } @media (max-width: 639px) { .form-newsletter { flex-direction: column; } } /* ----------------------------------------------------------------------------- * Charts (ApexCharts) * -------------------------------------------------------------------------- */ .chart-container { position: relative; width: 100%; } .chart-gauge, .chart-bar, .chart-line, .chart-area, .chart-pie, .chart-radar, .chart-funnel, .chart-heatmap { width: 100%; } .chart-gauge--sm, .chart-bar--sm, .chart-line--sm, .chart-area--sm, .chart-pie--sm { max-width: 300px; } .chart-gauge--md, .chart-bar--md, .chart-line--md, .chart-area--md, .chart-pie--md { max-width: 500px; } .chart-gauge--lg, .chart-bar--lg, .chart-line--lg, .chart-area--lg, .chart-pie--lg { max-width: 700px; } .chart-gauge__title, .chart-bar__title, .chart-line__title, .chart-area__title, .chart-pie__title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); color: var(--ctx-text, var(--gray-900)); text-align: center; } .chart-gauge__chart, .chart-bar__chart, .chart-line__chart, .chart-area__chart, .chart-pie__chart { min-height: 200px; } /* ----------------------------------------------------------------------------- * List Component * -------------------------------------------------------------------------- */ .list { display: flex; flex-direction: column; gap: var(--space-2); } .list--checked .list__item::before { content: '✓'; color: var(--success); font-weight: var(--font-weight-bold); margin-right: var(--space-2); } .list--numbered { counter-reset: list; } .list--numbered .list__item::before { counter-increment: list; content: counter(list) "."; color: var(--primary); font-weight: var(--font-weight-semibold); margin-right: var(--space-2); } .list--icon .list__item { display: flex; align-items: flex-start; gap: var(--space-3); } .list--sm .list__item { font-size: var(--text-sm); } .list--md .list__item { font-size: var(--text-base); } .list--lg .list__item { font-size: var(--text-lg); } .list__item { color: var(--ctx-text, var(--gray-900)); line-height: var(--line-height-normal); } .list__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--primary); } .list__text { flex: 1; } /* ----------------------------------------------------------------------------- * Tags * -------------------------------------------------------------------------- */ .tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-weight-medium); background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text, var(--gray-900)); border-radius: var(--radius-full); transition: var(--motion-duration-sm); } .tag:hover { background: var(--ctx-bg-section, var(--gray-100)); } .tag--primary { background: var(--primary-light, #dbeafe); color: var(--primary-dark, #1e40af); } .tag--clickable { cursor: pointer; } /* ----------------------------------------------------------------------------- * Comparison Table (affiliate) * -------------------------------------------------------------------------- */ .comparison-table { width: 100%; overflow-x: auto; } .comparison-table table { width: 100%; border-collapse: collapse; background: var(--ctx-surface, var(--white)); border-radius: var(--radius-lg); overflow: hidden; } .comparison-table th, .comparison-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .comparison-table th { background: var(--ctx-bg-section, var(--gray-100)); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); } .comparison-table tr:last-child td { border-bottom: none; } .comparison-table tr:hover td { background: var(--ctx-bg-section, var(--gray-100)); } .comparison-table__winner { background: var(--primary-light, #dbeafe) !important; } .comparison-table__winner td { background: var(--primary-light, #dbeafe) !important; } /* Ratings in tables */ .rating { display: flex; align-items: center; gap: var(--space-1); } .rating__value { font-weight: var(--font-weight-bold); color: var(--primary, #3b82f6); } .rating__na { color: var(--ctx-text-faint); font-style: italic; } /* Product card link in tables */ .table-product-link { display: flex; align-items: center; gap: var(--space-3); } .table-product-link img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-md); } .table-note { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-600)); margin-top: var(--space-4); } /* ----------------------------------------------------------------------------- * Quick Picks (affiliate) * -------------------------------------------------------------------------- */ .quick-picks { display: grid; gap: var(--space-4); } /* Mobile-first: 1 column default, multi-column on tablet+ */ @media (min-width: 768px) { .quick-picks--cols-2 { grid-template-columns: repeat(2, 1fr); } .quick-picks--cols-3 { grid-template-columns: repeat(3, 1fr); } } .quick-pick { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); transition: var(--motion-duration-sm); } .quick-pick:hover { border-color: var(--primary, #3b82f6); box-shadow: var(--shadow-md); } .quick-pick__rank { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: var(--text-sm); } .quick-pick__content { flex: 1; } .quick-pick__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); } .quick-pick__label { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-600)); } /* ----------------------------------------------------------------------------- * Disclosure (affiliate) * -------------------------------------------------------------------------- */ .disclosure { padding: var(--space-4); background: var(--info-light); border: 1px solid color-mix(in srgb, var(--info) 20%, transparent); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); } .disclosure a { color: var(--info); text-decoration: underline; } /* ----------------------------------------------------------------------------- * Pagination * -------------------------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-8) 0; } .pagination__item { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-900)); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); transition: var(--motion-duration-sm); } .pagination__item:hover { border-color: var(--primary, #3b82f6); color: var(--primary, #3b82f6); } .pagination__item--active { background: var(--primary, #3b82f6); border-color: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .pagination__item--disabled { opacity: 0.5; pointer-events: none; } .pagination__item--dots { border: none; background: transparent; } .pagination--compact .pagination__item { min-width: 32px; height: 32px; font-size: var(--text-sm); } /* ----------------------------------------------------------------------------- * Chat Button * -------------------------------------------------------------------------- */ .chat-button { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); border-radius: var(--radius-full); font-weight: var(--font-weight-semibold); cursor: pointer; transition: var(--motion-duration-sm); box-shadow: var(--shadow-lg); } .chat-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); } .chat-button__text { font-size: var(--text-sm); } /* Floating modifiers: see CHAT BUTTON COMPONENT section below */ /* ----------------------------------------------------------------------------- * Utility Spacing Classes * -------------------------------------------------------------------------- */ .mt-none { margin-top: 0; } .mt-xs { margin-top: var(--space-2); } .mt-sm { margin-top: var(--space-4); } .mt-md { margin-top: var(--space-6); } .mt-lg { margin-top: var(--space-8); } .mt-xl { margin-top: var(--space-12); } .mt-2xl { margin-top: var(--space-16); } .mb-none { margin-bottom: 0; } .mb-xs { margin-bottom: var(--space-2); } .mb-sm { margin-bottom: var(--space-4); } .mb-md { margin-bottom: var(--space-6); } .mb-lg { margin-bottom: var(--space-8); } .mb-xl { margin-bottom: var(--space-12); } .mb-2xl { margin-bottom: var(--space-16); } .py-none { padding-top: 0; padding-bottom: 0; } .py-sm { padding-top: var(--space-4); padding-bottom: var(--space-4); } .py-md { padding-top: var(--space-6); padding-bottom: var(--space-6); } .py-lg { padding-top: var(--space-8); padding-bottom: var(--space-8); } .py-xl { padding-top: var(--space-12); padding-bottom: var(--space-12); } .py-2xl { padding-top: var(--space-16); padding-bottom: var(--space-16); } .p-none { padding: 0; } .p-sm { padding: var(--space-4); } .p-md { padding: var(--space-6); } .p-lg { padding: var(--space-8); } /* Text alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* Text sizes */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } /* Font weights */ .font-normal { font-weight: var(--font-weight-normal); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } /* Text colors - .text-primary uses contextual accent for dark context support */ .text-primary { color: var(--primary); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--error); } /* Visibility */ @media print { .no-print { display: none !important; } } /* ----------------------------------------------------------------------------- * Screen Reader Only (Accessibility) * -------------------------------------------------------------------------- */ /** * Visually hide content while keeping it accessible to screen readers. * Use for skip links, form labels, icon button labels, etc. * * WCAG 1.3.1 (Info and Relationships) * WCAG 4.1.2 (Name, Role, Value) */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /** * Allow the element to be focusable when navigated via keyboard. * Useful for skip links. * * WCAG 2.4.1 (Bypass Blocks) */ .sr-only-focusable:focus, .sr-only-focusable:active { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; } /** * Hide content from all users (visual and screen readers). * Alias for display: none with semantic meaning. */ .hidden { display: none !important; } /** * Make element invisible but maintain layout. * Content still accessible to screen readers. */ .invisible { visibility: hidden; } /* ----------------------------------------------------------------------------- * Container Variants * -------------------------------------------------------------------------- */ .container--xs { max-width: 600px; } .container--sm { max-width: 800px; } .container--md { max-width: 1000px; } .container--lg { max-width: 1280px; } .container--xl { max-width: 1400px; } .container--full { max-width: 100%; } .container--padding-none { padding-left: 0; padding-right: 0; } .container--padding-sm { padding-left: var(--space-4); padding-right: var(--space-4); } .container--padding-md { padding-left: var(--space-6); padding-right: var(--space-6); } .container--padding-lg { padding-left: var(--space-8); padding-right: var(--space-8); } /* ----------------------------------------------------------------------------- * Grid Variants * -------------------------------------------------------------------------- */ .grid--1 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--5 { grid-template-columns: repeat(5, 1fr); } .grid--6 { grid-template-columns: repeat(6, 1fr); } .grid--gap-none { gap: 0; } .grid--gap-xs { gap: var(--space-2); } .grid--gap-sm { gap: var(--space-4); } .grid--gap-md { gap: var(--space-6); } .grid--gap-lg { gap: var(--space-8); } .grid--gap-xl { gap: var(--space-12); } /* Aligned with margin scale (Wave 4 fix) */ .grid--gap-2xl { gap: var(--space-16); } /* Aligned with margin scale (Wave 4 fix) */ .grid--align-start { align-items: start; } .grid--align-center { align-items: center; } .grid--align-end { align-items: end; } .grid--justify-start { justify-items: start; } .grid--justify-center { justify-items: center; } .grid--justify-end { justify-items: end; } /* ----------------------------------------------------------------------------- * Flex Variants * -------------------------------------------------------------------------- */ .flex--column { flex-direction: column; } .flex--row-reverse { flex-direction: row-reverse; } .flex--column-reverse { flex-direction: column-reverse; } .flex--align-start { align-items: flex-start; } .flex--align-center { align-items: center; } .flex--align-end { align-items: flex-end; } .flex--align-baseline { align-items: baseline; } .flex--justify-start { justify-content: flex-start; } .flex--justify-center { justify-content: center; } .flex--justify-end { justify-content: flex-end; } .flex--justify-between { justify-content: space-between; } .flex--justify-around { justify-content: space-around; } .flex--justify-evenly { justify-content: space-evenly; } .flex--gap-none { gap: 0; } .flex--gap-xs { gap: var(--space-2); } .flex--gap-sm { gap: var(--space-4); } .flex--gap-md { gap: var(--space-6); } .flex--gap-lg { gap: var(--space-8); } .flex--gap-xl { gap: var(--space-12); } /* Aligned with margin scale (Wave 4 fix) */ .flex--gap-2xl { gap: var(--space-16); } /* Aligned with margin scale (Wave 4 fix) */ .flex--wrap { flex-wrap: wrap; } .flex--wrap-reverse { flex-wrap: wrap-reverse; } /* ----------------------------------------------------------------------------- * Section Variants * v2.0: Uses --ctx-bg-section for alternating sections (10%+ luminosity contrast) * -------------------------------------------------------------------------- */ .section--alt { background: var(--ctx-bg-section, var(--gray-100)); } .section--gray { background: var(--ctx-bg-section, var(--gray-100)); } /* CTA Section: Brand-tinted dark gradient for high contrast call-to-action */ .section--cta { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary, #3b82f6) 15%, var(--surface-dark-default, var(--gray-900)) 85%) 0%, color-mix(in srgb, var(--primary, #3b82f6) 5%, var(--surface-dark-container, var(--gray-800)) 95%) 100% ); color: var(--on-surface-dark, var(--white)); } /* ----------------------------------------------------------------------------- * GLOBAL DARK MODE: Elevated Surfaces for Contrast Sections * Material Design 3 Principle: In dark mode, elevation = LIGHTER surfaces * * Problem: .section--dark uses bg-dark for contrast on light pages. * But when global dark mode is ON, the page ALSO uses bg-dark = no contrast. * * Solution: When page is in dark mode, "contrast" sections (dark, cta) use * elevated (lighter) backgrounds to maintain relative visual hierarchy. * -------------------------------------------------------------------------- */ html[data-theme="dark"] .section--dark { /* Use elevated background - one step lighter than page base */ background: var(--surface-dark-container-highest, var(--gray-700)); /* Update contextual vars for cards inside to maintain hierarchy */ --ctx-bg: var(--surface-dark-container-highest, var(--gray-700)); } html[data-theme="dark"] .section--cta { /* CTA uses brand-tinted elevated surface for emphasis */ background: linear-gradient( 135deg, color-mix(in srgb, var(--primary, #3b82f6) 20%, var(--surface-dark-container-highest, var(--gray-700)) 80%) 0%, color-mix(in srgb, var(--primary, #3b82f6) 10%, var(--surface-dark-container-highest, var(--gray-700)) 90%) 100% ); --ctx-bg: var(--surface-dark-container-highest, var(--gray-700)); } /* Section with data-theme="dark" attribute in global dark mode */ html[data-theme="dark"] section[data-theme="dark"]:not(.footer) { background: var(--surface-dark-container-highest, var(--gray-700)); --ctx-bg: var(--surface-dark-container-highest, var(--gray-700)); } /* Missing dark mode rules for section variants */ html[data-theme="dark"] .section--primary { /* Primary sections in dark mode need lighter treatment */ background: color-mix(in srgb, var(--primary, #3b82f6) 15%, var(--surface-dark-default, var(--gray-800)) 85%); --ctx-bg: color-mix(in srgb, var(--primary, #3b82f6) 15%, var(--surface-dark-default, var(--gray-800)) 85%); } html[data-theme="dark"] .section--gray { /* Gray sections use elevated surface in dark mode */ background: var(--surface-dark-container, var(--gray-750, #2d2d2d)); --ctx-bg: var(--surface-dark-container, var(--gray-750, #2d2d2d)); } html[data-theme="dark"] .section--alt { /* Alt sections alternate with different dark shade */ background: var(--surface-dark-container-highest, var(--gray-700)); --ctx-bg: var(--surface-dark-container-highest, var(--gray-700)); } .section--has-bg { position: relative; background-size: cover; background-position: center; } .section--overlay-light::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--white) 70%, transparent); } .section--overlay-medium::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--black) 50%, transparent); } .section--overlay-heavy::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--black) 80%, transparent); } /* Background Pattern Variants - M3 Mode-Aware */ .section--pattern-dots { position: relative; --pattern-opacity: var(--pattern-opacity-light, 0.15); background-image: radial-gradient(circle, rgba(var(--primary-rgb), var(--pattern-opacity)) 1px, transparent 1px); background-size: var(--pattern-size-md, 24px) var(--pattern-size-md, 24px); } [data-theme="dark"] .section--pattern-dots, .section--dark .section--pattern-dots { --pattern-opacity: var(--pattern-opacity-dark, 0.35); } .section--pattern-grid { position: relative; --pattern-opacity: var(--pattern-opacity-light, 0.15); --pattern-line-opacity: calc(var(--pattern-opacity) * 0.5); background-image: linear-gradient(rgba(var(--primary-rgb), var(--pattern-line-opacity)) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-rgb), var(--pattern-line-opacity)) 1px, transparent 1px); background-size: var(--pattern-size-lg, 32px) var(--pattern-size-lg, 32px); } [data-theme="dark"] .section--pattern-grid, .section--dark .section--pattern-grid { --pattern-opacity: var(--pattern-opacity-dark, 0.35); } .section--pattern-waves { position: relative; } .section--pattern-waves::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px; --pattern-opacity: var(--pattern-opacity-light, 0.15); background: linear-gradient( 180deg, rgba(var(--primary-rgb), calc(var(--pattern-opacity) * 0.7)) 0%, rgba(var(--primary-rgb), calc(var(--pattern-opacity) * 0.3)) 50%, transparent 100% ); clip-path: polygon( 0% 0%, 5% 25%, 10% 40%, 20% 55%, 30% 45%, 40% 60%, 50% 50%, 60% 65%, 70% 55%, 80% 45%, 90% 35%, 95% 25%, 100% 15%, 100% 0% ); pointer-events: none; } [data-theme="dark"] .section--pattern-waves::before, .section--dark .section--pattern-waves::before { --pattern-opacity: var(--pattern-opacity-dark, 0.35); } /* Border/Divider Modifiers - M3 Mode-Aware */ .section--border-top { --border-opacity: var(--pattern-opacity-light, 0.3); border-top: 2px solid rgba(var(--primary-rgb), var(--border-opacity)); } .section--border-bottom { --border-opacity: var(--pattern-opacity-light, 0.3); border-bottom: 2px solid rgba(var(--primary-rgb), var(--border-opacity)); } [data-theme="dark"] .section--border-top, .section--dark .section--border-top { --border-opacity: var(--pattern-opacity-dark, 0.5); } [data-theme="dark"] .section--border-bottom, .section--dark .section--border-bottom { --border-opacity: var(--pattern-opacity-dark, 0.5); } /* Wave Divider - M3 Mode-Aware (uses mask for theme adaptation) */ .section--divider-wave { position: relative; } .section--divider-wave::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 50px; background: var(--surface-default, var(--surface-default)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50'%3E%3Cpath fill='%23000' d='M0,25L48,28.3C96,32,192,38,288,36.7C384,35,480,27,576,25C672,23,768,27,864,30C960,33,1056,35,1152,33.3C1248,32,1344,27,1392,24.2L1440,21L1440,50L1392,50C1344,50,1248,50,1152,50C1056,50,960,50,864,50C768,50,672,50,576,50C480,50,384,50,288,50C192,50,96,50,48,50L0,50Z'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50'%3E%3Cpath fill='%23000' d='M0,25L48,28.3C96,32,192,38,288,36.7C384,35,480,27,576,25C672,23,768,27,864,30C960,33,1056,35,1152,33.3C1248,32,1344,27,1392,24.2L1440,21L1440,50L1392,50C1344,50,1248,50,1152,50C1056,50,960,50,864,50C768,50,672,50,576,50C480,50,384,50,288,50C192,50,96,50,48,50L0,50Z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: bottom center; mask-position: bottom center; pointer-events: none; z-index: 1; } .section--divider-angle { position: relative; } .section--divider-angle::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 0; border-style: solid; border-width: 0 0 50px 100vw; border-color: transparent transparent var(--surface-default, var(--white)) transparent; } .section--parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } @media (max-width: 767px) { /* Disable parallax on mobile for performance */ .section--parallax { background-attachment: scroll; } } /* Additional Background Variants */ .section--gradient { background: linear-gradient(135deg, rgba(var(--primary-rgb, 59, 130, 246), 0.1) 0%, rgba(var(--secondary-rgb, 139, 92, 246), 0.1) 100%); } .section--primary { background: var(--primary, var(--purple)); color: var(--on-primary, var(--white)); } .section--primary h1, .section--primary h2, .section--primary h3, .section--primary h4, .section--primary h5, .section--primary h6 { color: var(--on-primary, var(--white)); } .section--primary .btn--primary { background: var(--surface-default, var(--white)); color: var(--primary, var(--purple)); } .section--primary .btn--primary:hover { background: color-mix(in srgb, var(--white) 90%, transparent); } .section--secondary { background: var(--secondary, var(--purple)); color: var(--on-secondary, var(--white)); } .section--secondary h1, .section--secondary h2, .section--secondary h3, .section--secondary h4, .section--secondary h5, .section--secondary h6 { color: var(--on-secondary, var(--white)); } .section--secondary .btn--primary { background: var(--surface-default, var(--white)); color: var(--secondary, var(--purple)); } .section--secondary .btn--primary:hover { background: color-mix(in srgb, var(--white) 90%, transparent); } /* Content Layout Modifiers */ .section--narrow .container { max-width: var(--container-sm, 800px); } .section--wide { padding-left: var(--space-4); padding-right: var(--space-4); } .section--wide .container { max-width: 100%; padding: 0; } .section--split .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; } @media (max-width: 767px) { .section--split .container { grid-template-columns: 1fr; gap: var(--space-8); } } /* Section Header - Uses hyphen naming for Motion System autoAnimate detection */ .section-header { margin-bottom: var(--space-12); } .section-header--center { text-align: center; } .section-header--right { text-align: right; } .section-header--sm { margin-bottom: var(--space-6); } .section-header--md { margin-bottom: var(--space-8); } .section-header--lg { margin-bottom: var(--space-12); } .section__title { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); color: var(--ctx-heading); } .section__subtitle { font-size: var(--text-lg); color: var(--ctx-text-muted, var(--gray-600)); max-width: 600px; } .section-header--center .section__subtitle { margin-left: auto; margin-right: auto; } /* ----------------------------------------------------------------------------- * Content Section * -------------------------------------------------------------------------- */ .content-section { padding: var(--space-8) 0; } .content-section--spacing-sm { padding: var(--space-4) 0; } .content-section--spacing-md { padding: var(--space-6) 0; } .content-section--spacing-lg { padding: var(--space-10) 0; } .content-section--spacing-xl { padding: var(--space-16) 0; } .content-section--scrollable { overflow-x: auto; } /* ----------------------------------------------------------------------------- * Article Content * -------------------------------------------------------------------------- */ .article-content { max-width: 800px; margin: 0 auto; } .article-content--sm { max-width: 600px; } .article-content--md { max-width: 800px; } .article-content--lg { max-width: 1000px; } .article-content--xl { max-width: 1280px; } .article-content--full { max-width: 100%; } .article-content--centered { text-align: center; } /* ----------------------------------------------------------------------------- * Blog Layout * -------------------------------------------------------------------------- */ .blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-10); } .blog-layout--sidebar-left { grid-template-columns: 300px 1fr; } .blog-layout--sidebar-left .blog-sidebar { order: -1; } .blog-main { min-width: 0; } @media (max-width: 1023px) { .blog-layout, .blog-layout--sidebar-left { grid-template-columns: 1fr; } .blog-layout--sidebar-left .blog-sidebar { order: 0; } } /* ----------------------------------------------------------------------------- * Button Variants * -------------------------------------------------------------------------- */ .btn--outline { background: transparent; color: var(--primary, #3b82f6); border-color: var(--primary, #3b82f6); } .btn--outline:hover { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .btn--danger { background: var(--error); color: var(--white); border-color: var(--error); } .btn--danger:hover { background: var(--error-dark); } .btn--success { background: var(--success); color: var(--white); border-color: var(--success); } .btn--success:hover { background: var(--success-dark); } .btn--disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; } .btn__icon--left { margin-right: var(--space-2); } .btn__icon--right, .btn__icon--after { margin-left: var(--space-2); } .btn__icon--before { margin-right: var(--space-2); } /* ============================================================================= * MISSING COMPONENTS - Full Coverage * ============================================================================= */ /* ----------------------------------------------------------------------------- * Trust Badges * -------------------------------------------------------------------------- */ .trust-section { padding: var(--space-6) 0; background: var(--ctx-bg-section, var(--gray-100)); } .trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); } .trust-badges--compact { gap: var(--space-4); } .trust-badges--centered { justify-content: center; } .trust-badge { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .trust-badge__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary, #3b82f6); } .trust-badge__text { color: var(--ctx-text, var(--gray-900)); } .trust-badge__text strong { font-weight: var(--font-weight-semibold); } /* Trust Badge Variants */ .trust-badges--inline { flex-direction: row; justify-content: flex-start; gap: var(--space-4); } .trust-badges--inline .trust-badge { font-size: var(--text-xs); } .trust-badges--vertical { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .trust-badges--card .trust-badge { padding: var(--space-3) var(--space-4); background: var(--ctx-bg-elevated, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); } .trust-badges--card .trust-badge:hover { border-color: var(--primary); } .trust-badges--icon-only { gap: var(--space-4); } .trust-badges--icon-only .trust-badge { padding: var(--space-2); background: var(--ctx-bg-elevated, var(--white)); border-radius: var(--radius-full); } /* Trust Badge Colors */ .trust-badges--primary .trust-badge__icon { color: var(--primary); } .trust-badges--success .trust-badge__icon { color: var(--success); } .trust-badges--muted .trust-badge__icon { color: var(--ctx-text-muted, var(--gray-500)); } .trust-badges--success .trust-badge__text { color: var(--success); } /* Trust Badge Links */ a.trust-badge { text-decoration: none; transition: var(--motion-duration-sm); } a.trust-badge:hover { color: var(--primary); } a.trust-badge:hover .trust-badge__icon { transform: scale(1.1); } /* Trust Badge Icon Backgrounds (Industry Standard: Stripe, Shopify pattern) * Use --icon-bg for better visibility on colored/dark backgrounds */ .trust-badges--icon-bg .trust-badge__icon { width: 2.25rem; height: 2.25rem; padding: 0.375rem; background: color-mix(in srgb, var(--ctx-text) 8%, transparent); border-radius: var(--radius-full); } .trust-badges--icon-bg .trust-badge__icon svg { stroke-width: 2.25; } /* High contrast variant for dark backgrounds */ .trust-badges--high-contrast .trust-badge__icon { color: var(--ctx-text); } .trust-badges--high-contrast .trust-badge__icon svg { stroke-width: 2.5; } .trust-badges--high-contrast .trust-badge__text { color: var(--ctx-text); font-weight: var(--font-weight-medium); } /* Accent icon background (primary tint) */ .trust-badges--accent-bg .trust-badge__icon { width: 2.25rem; height: 2.25rem; padding: 0.375rem; background: var(--primary-tint-15, color-mix(in srgb, var(--primary) 15%, transparent)); border-radius: var(--radius-full); color: var(--primary); } .trust-badges--accent-bg .trust-badge__icon svg { stroke-width: 2.25; } /* Auto icon style: adapts to context (white bg on dark, none on light) */ .trust-badges--icon-auto .trust-badge__icon { transition: background var(--motion-duration-sm), padding var(--motion-duration-sm); } [data-theme="dark"] .trust-badges--icon-auto .trust-badge__icon, .section--dark .trust-badges--icon-auto .trust-badge__icon, .section--cta .trust-badges--icon-auto .trust-badge__icon { padding: 0.35rem; background: var(--white); border-radius: var(--radius-full); } /* Trust Section Variants * --seamless: Transparent background, connects hero to next section without gap * --compact: Reduced padding, transparent background * --transparent: Just transparent, keeps normal padding */ .trust-section.section--seamless { padding: var(--space-4) 0 var(--space-2); background: transparent; margin-top: calc(-1 * var(--space-12)); /* Pull up into hero */ margin-bottom: calc(-1 * var(--space-6)); /* Pull into next section - no white gap */ position: relative; z-index: 1; } .trust-section.section--compact { padding: var(--space-3) 0; background: transparent; } .trust-section.section--transparent { background: transparent; } /* ----------------------------------------------------------------------------- * Article Header * -------------------------------------------------------------------------- */ .article-header { margin-bottom: var(--space-8); } .article-header__title { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); } .article-header__intro { font-size: var(--text-lg); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-6); } .article-header__media { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); } /* ----------------------------------------------------------------------------- * Cards Grid - Mobile-first * -------------------------------------------------------------------------- */ .cards-grid { display: grid; gap: var(--space-6); align-items: start; /* Prevent cards from stretching to fill row height */ } /* Equal height cards - all cards in a row have same height */ .cards-grid--equal-height { align-items: stretch; } .cards-grid--equal-height > .card, .cards-grid--equal-height > * > .card { height: 100%; } /* Horizontal cards in equal-height grid: image fills */ .cards-grid--equal-height .card--horizontal .card__image { min-height: 100%; } /* Mobile-first: 1 column default, multi-column on tablet+ */ @media (min-width: 768px) { .cards-grid--2 { grid-template-columns: repeat(2, 1fr); } .cards-grid--3 { grid-template-columns: repeat(3, 1fr); } .cards-grid--4 { grid-template-columns: repeat(4, 1fr); } } .cards-grid__track { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; } .cards-grid__nav { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); } .cards-grid__prev, .cards-grid__next { width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--ctx-border, var(--gray-200)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--motion-duration-sm); } /* ----------------------------------------------------------------------------- * Course Sidebar * -------------------------------------------------------------------------- */ .course-sidebar { position: fixed; top: 0; left: -320px; width: 320px; height: 100vh; background: var(--ctx-surface, var(--white)); border-right: 1px solid var(--ctx-border, var(--gray-200)); z-index: var(--z-modal); transition: left var(--motion-duration-md); display: flex; flex-direction: column; } .course-sidebar.open { left: 0; } .course-sidebar__overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--black) 50%, transparent); z-index: calc(var(--z-modal) - 1); opacity: 0; visibility: hidden; transition: var(--motion-duration-sm); } .course-sidebar__overlay.visible { opacity: 1; visibility: visible; } .course-sidebar__header { padding: var(--space-4); border-bottom: 1px solid var(--ctx-border, var(--gray-200)); display: flex; align-items: center; justify-content: space-between; } .course-sidebar__title { font-weight: var(--font-weight-semibold); font-size: var(--text-lg); } .course-sidebar__close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); cursor: pointer; } .course-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-4); } .course-sidebar__step-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); } .course-sidebar__step-number { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: var(--text-sm); } .course-sidebar__step-title { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); } .course-sidebar__lessons { padding-left: var(--space-6); } .course-sidebar__overview { padding: var(--space-4); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-md); } .course-sidebar__footer { padding: var(--space-4); border-top: 1px solid var(--ctx-border, var(--gray-200)); } .course-sidebar__toggle { position: fixed; bottom: var(--space-6); left: var(--space-6); z-index: var(--z-sticky-content); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); border-radius: var(--radius-full); font-weight: var(--font-weight-semibold); cursor: pointer; box-shadow: var(--shadow-lg); } .course-sidebar__toggle-label { font-size: var(--text-sm); } /* ----------------------------------------------------------------------------- * Day Card / Example * -------------------------------------------------------------------------- */ .day-card { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); overflow: hidden; } .day-card__header { padding: var(--space-4); background: var(--ctx-bg-section, var(--gray-100)); border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .day-card__title { font-weight: var(--font-weight-semibold); } .day-card__meals { padding: var(--space-4); } .day-example { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); } .day-example__header { padding: var(--space-4); background: var(--primary-light, #dbeafe); border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .day-example__content { padding: var(--space-4); } .day-example__footer { padding: var(--space-4); border-top: 1px solid var(--ctx-border, var(--gray-200)); background: var(--ctx-bg-section, var(--gray-100)); } /* ----------------------------------------------------------------------------- * Filters * -------------------------------------------------------------------------- */ .blog-filter { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); font-size: var(--text-sm); cursor: pointer; transition: var(--motion-duration-sm); } .blog-filter:hover, .blog-filter.active { border-color: var(--primary, #3b82f6); background: var(--primary-light, #dbeafe); } .blog-filter__icon { width: 16px; height: 16px; display: inline-flex; align-items: center; color: var(--ctx-text-muted, var(--gray-600)); } .blog-filter:hover .blog-filter__icon, .blog-filter.active .blog-filter__icon, .blog-filter--active .blog-filter__icon { color: var(--primary, #3b82f6); } .blog-filter__count { padding: var(--space-1) var(--space-2); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-full); font-size: var(--text-xs); } .faq-filters { margin-bottom: var(--space-6); } .faq-filters__pills { display: flex; flex-wrap: wrap; gap: var(--comp-faq-filter-gap, var(--space-2)); justify-content: center; } .faq-filters__pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--comp-faq-filter-padding-y, var(--space-2)) var(--comp-faq-filter-padding-x, var(--space-4)); background: var(--ctx-bg-section, var(--gray-100)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--comp-faq-filter-radius, var(--radius-full)); font-size: var(--comp-faq-filter-size, var(--text-sm)); font-weight: var(--font-weight-medium); color: var(--ctx-text-muted, var(--gray-600)); cursor: pointer; transition: var(--motion-duration-sm); } .faq-filters__pill:hover { background: var(--ctx-bg-alt); color: var(--ctx-text, var(--gray-900)); border-color: var(--ctx-border-hover); } .faq-filters__pill--active { background: var(--primary, #3b82f6); border-color: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .faq-filters__pill--active:hover { background: var(--primary-hover, #2563eb); border-color: var(--primary-hover, #2563eb); } .faq-filters__icon { width: var(--icon-size-sm); height: var(--icon-size-sm); } .filter-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } /* ----------------------------------------------------------------------------- * Food Components * -------------------------------------------------------------------------- */ .food-category { margin-bottom: var(--space-6); } .food-category__title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); } .food-group { margin-bottom: var(--space-4); } .food-group__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); } /* ----------------------------------------------------------------------------- * Lesson Card & Navigation * -------------------------------------------------------------------------- */ .lesson-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); transition: var(--motion-duration-sm); cursor: pointer; } .lesson-card:hover { border-color: var(--primary, #3b82f6); box-shadow: var(--shadow-md); } .lesson-card--completed { border-color: var(--success); background: var(--success-light); } .lesson-card--current { border-color: var(--primary, #3b82f6); box-shadow: 0 0 0 3px var(--primary-light, #dbeafe); } .lesson-card__number { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--ctx-bg-section, var(--gray-100)); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: var(--text-sm); flex-shrink: 0; } .lesson-card--completed .lesson-card__number { background: var(--success); color: var(--on-success); } .lesson-card--current .lesson-card__number { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .lesson-card__icon { width: 20px; height: 20px; color: var(--ctx-text-muted, var(--gray-600)); } .lesson-card__content { flex: 1; min-width: 0; } .lesson-card__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); } .lesson-card__description { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-2); } .lesson-card__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--ctx-text-faint); } .lesson-card__duration { display: flex; align-items: center; gap: var(--space-1); } .lesson-card__action { flex-shrink: 0; } .lesson-navigation { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--ctx-border, var(--gray-200)); margin-top: var(--space-8); } .lesson-navigation__progress { text-align: center; font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } /* ----------------------------------------------------------------------------- * Logo Cloud * -------------------------------------------------------------------------- */ .logo-cloud { text-align: center; padding: var(--space-8) 0; } .logo-cloud__title { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-6); text-transform: uppercase; letter-spacing: 0.05em; } .logo-cloud__track { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-8); } .logo-cloud__item { height: 32px; opacity: 0.6; transition: var(--motion-duration-sm); } .logo-cloud__item:hover { opacity: 1; } /* ----------------------------------------------------------------------------- * Macro Components * -------------------------------------------------------------------------- */ .macro-item { display: flex; align-items: center; gap: var(--space-2); } .macro-item__value { font-weight: var(--font-weight-bold); font-size: var(--text-lg); } .macro-item__label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .macro-split { display: flex; justify-content: space-around; padding: var(--space-4); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-lg); } .macro-split__item { text-align: center; } .macro-split__value { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--primary); } .macro-split__label { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-600)); text-transform: uppercase; } .macro-split__cal { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } /* ----------------------------------------------------------------------------- * Meal Components * -------------------------------------------------------------------------- */ .meal-card { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); overflow: hidden; } .meal-card__image { aspect-ratio: 16 / 10; overflow: hidden; } .meal-card__image img { width: 100%; height: 100%; object-fit: cover; } .meal-card__type { padding: var(--space-2) var(--space-4); background: var(--primary-light, #dbeafe); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; } .meal-card__name { padding: var(--space-4); font-weight: var(--font-weight-semibold); } .meal-card__macros { padding: 0 var(--space-4) var(--space-4); display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .meal-card__ingredients { padding: var(--space-4); border-top: 1px solid var(--ctx-border, var(--gray-200)); font-size: var(--text-sm); } .meal-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; } .meal-item__label { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-600)); text-transform: uppercase; min-width: 80px; } .meal-item__name { font-weight: var(--font-weight-medium); } .meal-plan { display: flex; flex-direction: column; gap: var(--space-2); } .meal-plan__item { display: flex; justify-content: space-between; padding: var(--space-2); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-md); } .meal-plan__label { font-weight: var(--font-weight-medium); } /* ----------------------------------------------------------------------------- * Newsletter Form * -------------------------------------------------------------------------- */ .newsletter-form { display: flex; gap: var(--space-3); max-width: 500px; } .newsletter-form__input { flex: 1; } @media (max-width: 639px) { .newsletter-form { flex-direction: column; } } /* ----------------------------------------------------------------------------- * Product Card (Affiliate) * -------------------------------------------------------------------------- */ .product-card { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); overflow: hidden; transition: var(--motion-duration-sm); } .product-card:hover { box-shadow: var(--shadow-lg); } .product-card__header { position: relative; padding: var(--space-4); background: var(--ctx-bg-section, var(--gray-100)); } .product-card__rank { position: absolute; top: var(--space-3); left: var(--space-3); width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); } .product-card__badge { position: absolute; top: var(--space-3); right: var(--space-3); padding: var(--space-1) var(--space-3); background: var(--success); color: var(--on-success); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); } .product-card__image { text-align: center; padding: var(--space-4); } .product-card__image img { max-height: 150px; width: auto; } .product-card__body { padding: var(--space-4); } .product-card__title-group { margin-bottom: var(--space-3); } .product-card__brand { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-600)); text-transform: uppercase; margin-bottom: var(--space-1); } .product-card__title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); } .product-card__rating { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .product-card__reviews { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .product-card__price { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--primary, #3b82f6); margin-bottom: var(--space-3); } .product-card__quick-info { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-4); } .product-card__specs { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .product-card__verdict { padding: var(--space-3); background: var(--success-light); border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: var(--space-4); } .product-card__analysis { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .product-card__footer { padding: var(--space-4); border-top: 1px solid var(--ctx-border, var(--gray-200)); } /* Product Card - Scarcity & Secondary CTAs */ .product-card__badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); z-index: 1; } .product-card__badge--bestseller { background: var(--warning); color: var(--on-surface-dark); } .product-card__badge--trending { background: var(--info); color: var(--on-primary, var(--white)); } .product-card__scarcity { display: flex; align-items: center; gap: var(--space-2); color: var(--warning); font-size: var(--text-sm); font-weight: var(--font-weight-medium); margin-top: var(--space-2); } .product-card__scarcity .icon { flex-shrink: 0; } .product-card--low-stock { border-color: var(--warning); } .product-card--bestseller .product-card__title::after { content: "🔥"; margin-left: var(--space-1); } .product-card--trending .product-card__title::after { content: "📈"; margin-left: var(--space-1); } /* Product Card - Secondary Actions */ .product-card__actions { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); opacity: 0; transform: translateX(10px); transition: opacity var(--motion-duration-sm), transform var(--motion-duration-sm); z-index: 2; } .product-card:hover .product-card__actions { opacity: 1; transform: translateX(0); } .product-card__action { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--ctx-bg, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); cursor: pointer; transition: var(--motion-duration-sm); } .product-card__action:hover { background: var(--primary); color: var(--on-primary, var(--white)); border-color: var(--primary); } .product-card__action--wishlist.is-active { background: var(--error); color: var(--white); border-color: var(--error); } .product-card__action--compare.is-active { background: var(--success); color: var(--white); border-color: var(--success); } @media (max-width: 767px) { .product-card__actions { opacity: 1; transform: none; } .product-card__action { min-width: 44px; min-height: 44px; } } /* Product Card - Urgency & Savings */ .product-card__urgency { display: flex; align-items: center; gap: var(--space-2); color: var(--error); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); margin-top: var(--space-2); padding: var(--space-1) var(--space-2); background: var(--error-light, rgba(239, 68, 68, 0.1)); border-radius: var(--radius-sm); } .product-card__urgency .icon { flex-shrink: 0; animation: pulse-opacity 1.5s ease-in-out infinite; } .product-card__urgency-text { white-space: nowrap; } .product-card--urgency { border-color: var(--error); } .product-card--urgency .product-card__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, transparent 50%); pointer-events: none; } .product-card__savings { display: flex; align-items: center; gap: var(--space-2); color: var(--success); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); margin-top: var(--space-2); } .product-card__savings .icon { flex-shrink: 0; } .product-card--savings .product-card__badge--sale { background: var(--success); } /* Note: Uses pulse-opacity keyframe from animation utilities section (avoids conflict with pulse scale transform) */ /* Free Shipping Progress Bar */ .free-shipping-bar { padding: var(--space-4); background: var(--ctx-bg-section, var(--gray-50)); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .free-shipping-bar--compact { padding: var(--space-3); margin-bottom: var(--space-3); } .free-shipping-bar__message { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); margin-bottom: var(--space-2); } .free-shipping-bar__message .icon { flex-shrink: 0; color: var(--primary); } .free-shipping-bar__message--success { color: var(--success); } .free-shipping-bar__message--success .icon { color: var(--success); } .free-shipping-bar--complete .free-shipping-bar__message { margin-bottom: 0; } .free-shipping-bar__progress { margin-top: var(--space-2); } .free-shipping-bar__track { height: 8px; background: var(--ctx-bg-elevated, var(--gray-200)); border-radius: var(--radius-full); overflow: hidden; } .free-shipping-bar__fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--success)); border-radius: var(--radius-full); transition: width var(--motion-duration-md); } .free-shipping-bar__labels { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-500)); } .free-shipping-bar--complete { background: var(--success-light, rgba(34, 197, 94, 0.1)); border: 1px solid var(--success); } /* Product Price - Sizes & Anchoring */ .product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); } .product-price--sm { font-size: var(--text-sm); } .product-price--md { font-size: var(--text-base); } .product-price--lg { font-size: var(--text-xl); } .product-price--lg .product-price__current { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); } .product-price__original { text-decoration: line-through; color: var(--ctx-text-muted, var(--gray-500)); font-size: 0.85em; } .product-price--anchoring .product-price__original { font-size: 1em; font-weight: var(--font-weight-medium); background: var(--error-light, rgba(239, 68, 68, 0.1)); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); } .product-price__current { font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); } .product-price--sale .product-price__current { color: var(--success); } .product-price__savings { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--success); color: var(--white); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); } .product-price__savings-percent { /* Inherits from parent */ } .product-price__savings-amount { font-size: var(--text-xs); } .product-price__tax { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-500)); } /* Property Card - Real Estate */ .property-card { position: relative; background: var(--ctx-bg, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); overflow: hidden; transition: var(--motion-duration-sm); } .property-card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .property-card__link { display: block; text-decoration: none; color: inherit; } .property-card__image { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ctx-bg-section, var(--gray-100)); } .property-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-duration-md); } .property-card--hover:hover .property-card__image img { transform: scale(1.05); } .property-card__content { padding: var(--space-4); } .property-card__header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); } .property-card__type { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); font-weight: var(--font-weight-semibold); } .property-card__title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); margin-bottom: var(--space-1); } .property-card__location { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-3); } .property-card__location-icon { flex-shrink: 0; } .property-card__price-sqm { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-500)); } .property-card__meta { margin-top: var(--space-3); } .property-card__energy { margin-top: var(--space-2); } .property-card__agent { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--ctx-border, var(--gray-200)); background: var(--ctx-bg-section, var(--gray-50)); } .property-card__agent-photo { width: 32px; height: 32px; border-radius: var(--radius-full); object-fit: cover; } .property-card__agent-name { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-900)); } /* Property Card Actions */ .property-card__actions { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); opacity: 0; transform: translateX(10px); transition: opacity var(--motion-duration-sm), transform var(--motion-duration-sm); z-index: 2; } .property-card:hover .property-card__actions { opacity: 1; transform: translateX(0); } .property-card__action { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--ctx-bg, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); cursor: pointer; transition: var(--motion-duration-sm); } .property-card__action:hover { background: var(--primary); color: var(--on-primary, var(--white)); border-color: var(--primary); } .property-card__action--favorite.is-active { background: var(--error); color: var(--white); border-color: var(--error); } .property-card__action--compare.is-active { background: var(--success); color: var(--white); border-color: var(--success); } @media (max-width: 767px) { .property-card__actions { opacity: 1; transform: none; } .property-card__action { min-width: 44px; min-height: 44px; } } /* Property Card Variants */ .property-card--horizontal { display: grid; grid-template-columns: 300px 1fr; } .property-card--horizontal .property-card__image { aspect-ratio: 4/3; } .property-card--minimal { border: none; box-shadow: none; background: transparent; } .property-card--minimal .property-card__content { padding: var(--space-3) 0; } .property-card--overlay .property-card__content { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); color: var(--white); padding: var(--space-6) var(--space-4) var(--space-4); } .property-card--overlay .property-card__title, .property-card--overlay .property-card__location { color: var(--white); } .property-card--compact .property-card__content { padding: var(--space-3); } .property-card--compact .property-card__title { font-size: var(--text-base); } .property-card--featured { border-color: var(--primary); box-shadow: var(--shadow-lg); } .property-card--sold::after, .property-card--rented::after { content: attr(data-status-label); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); background: var(--error); color: var(--white); padding: var(--space-2) var(--space-4); font-weight: var(--font-weight-bold); font-size: var(--text-lg); text-transform: uppercase; border-radius: var(--radius-sm); z-index: 10; } .property-card--sold .property-card__image, .property-card--rented .property-card__image { filter: grayscale(0.8); opacity: 0.7; } /* Value Propositions */ .value-props { display: flex; flex-wrap: wrap; gap: var(--space-4); } .value-props--vertical { flex-direction: column; gap: var(--space-3); } .value-props--compact { gap: var(--space-2); } .value-props--compact .value-props__item { font-size: var(--text-sm); } .value-props--centered { justify-content: center; text-align: center; } .value-props__item { display: flex; align-items: center; gap: var(--space-2); color: var(--ctx-text-muted, var(--gray-600)); } .value-props__item .icon { flex-shrink: 0; color: var(--success); width: 18px; height: 18px; } .value-props--primary .value-props__item .icon { color: var(--primary); } .checkout-order-summary__value-props { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--ctx-border, var(--gray-200)); } .register-form .value-props { margin-bottom: var(--space-6); padding: var(--space-4); background: var(--success-light, rgba(34, 197, 94, 0.1)); border-radius: var(--radius-md); } /* Exit Intent Modal */ .exit-intent-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); opacity: 0; visibility: hidden; transition: opacity var(--motion-duration-md), visibility var(--motion-duration-md); } .exit-intent-modal.is-active { opacity: 1; visibility: visible; } .exit-intent-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } .exit-intent-modal__container { position: relative; background: var(--ctx-bg, var(--white)); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; transform: translateY(20px) scale(0.95); transition: transform var(--motion-duration-md); } .exit-intent-modal.is-active .exit-intent-modal__container { transform: translateY(0) scale(1); } .exit-intent-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-full); cursor: pointer; color: var(--ctx-text-muted, var(--gray-500)); transition: var(--motion-duration-sm); z-index: 1; } .exit-intent-modal__close:hover { background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text, var(--gray-900)); } .exit-intent-modal__content { padding: var(--space-8); } .exit-intent-modal__body { text-align: center; } .exit-intent-modal__badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--success); color: var(--white); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); } .exit-intent-modal__title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--ctx-text, var(--gray-900)); margin-bottom: var(--space-3); } .exit-intent-modal__text { font-size: var(--text-base); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-6); } .exit-intent-modal__code { display: flex; align-items: center; justify-content: center; gap: var(--space-3); background: var(--ctx-bg-section, var(--gray-100)); padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-6); } .exit-intent-modal__code-label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .exit-intent-modal__code-value { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--primary); letter-spacing: 0.1em; } .exit-intent-modal__code-copy { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--ctx-bg, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); cursor: pointer; transition: var(--motion-duration-sm); } .exit-intent-modal__code-copy:hover { border-color: var(--primary); color: var(--primary); } .exit-intent-modal__actions { display: flex; flex-direction: column; gap: var(--space-3); } .exit-intent-modal__dismiss { background: transparent; border: none; color: var(--ctx-text-muted, var(--gray-500)); font-size: var(--text-sm); cursor: pointer; text-decoration: underline; padding: var(--space-2); } .exit-intent-modal__dismiss:hover { color: var(--ctx-text, var(--gray-700)); } /* Exit Intent Modal Variants */ .exit-intent-modal--split .exit-intent-modal__container { max-width: 640px; } .exit-intent-modal--split .exit-intent-modal__content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: 0; } .exit-intent-modal--split .exit-intent-modal__image { overflow: hidden; border-radius: var(--radius-xl) 0 0 var(--radius-xl); } .exit-intent-modal--split .exit-intent-modal__image img { width: 100%; height: 100%; object-fit: cover; } .exit-intent-modal--split .exit-intent-modal__body { padding: var(--space-8); text-align: left; } .exit-intent-modal--minimal .exit-intent-modal__container { max-width: 400px; } .exit-intent-modal--minimal .exit-intent-modal__content { padding: var(--space-6); } @media (max-width: 639px) { .exit-intent-modal--split .exit-intent-modal__content { grid-template-columns: 1fr; } .exit-intent-modal--split .exit-intent-modal__image { display: none; } .exit-intent-modal--split .exit-intent-modal__body { text-align: center; } .exit-intent-modal__close { min-width: 44px; min-height: 44px; } } /* ----------------------------------------------------------------------------- * Savings Visualization (Wave 16) * -------------------------------------------------------------------------- */ .cart-totals__row--savings { background: linear-gradient(90deg, color-mix(in srgb, var(--success, #22c55e) 10%, transparent), transparent); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-2) calc(-1 * var(--space-4)); } .cart-totals__label--savings { display: flex; align-items: center; gap: var(--space-2); color: var(--success, #22c55e); font-weight: var(--font-weight-semibold); } .cart-totals__label--savings .icon { color: var(--success, #22c55e); } .cart-totals__value--savings { color: var(--success, #22c55e); font-weight: var(--font-weight-bold); font-size: var(--text-lg); } @media (max-width: 639px) { .cart-totals__row--savings { padding: var(--space-2) var(--space-3); } } /* ----------------------------------------------------------------------------- * Deal Strength Indicators (Wave 17) * -------------------------------------------------------------------------- */ .product-card__deal-strength { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.03em; } .product-card__deal-strength--excellent { background: linear-gradient(135deg, var(--success, #22c55e) 0%, #16a34a 100%); color: white; box-shadow: 0 2px 8px color-mix(in srgb, var(--success) 30%, transparent); } .product-card__deal-strength--great { background: color-mix(in srgb, var(--success, #22c55e) 15%, transparent); color: var(--success, #22c55e); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); } .product-card__deal-strength--good { background: color-mix(in srgb, var(--info, #3b82f6) 15%, transparent); color: var(--info, #3b82f6); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); } .product-card__deal-strength--fair { background: color-mix(in srgb, var(--ctx-text-muted, #64748b) 10%, transparent); color: var(--ctx-text-muted, #64748b); border: 1px solid color-mix(in srgb, var(--ctx-text-muted) 20%, transparent); } .product-card__price-original { text-decoration: line-through; color: var(--ctx-text-muted, #64748b); font-size: var(--text-sm); margin-right: var(--space-2); } .product-card__price-current { font-weight: var(--font-weight-bold); color: var(--success, #22c55e); } .product-card__discount { display: inline-flex; align-items: center; background: var(--error, #ef4444); color: white; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-weight-bold); margin-left: var(--space-2); } .product-card--deal-excellent { border-color: var(--success, #22c55e); box-shadow: 0 0 0 1px var(--success, #22c55e), 0 4px 12px color-mix(in srgb, var(--success) 15%, transparent); } .product-card--deal-great { border-color: color-mix(in srgb, var(--success) 50%, transparent); } /* Quick-pick deal badges */ .quick-pick__discount { display: inline-flex; background: var(--error, #ef4444); color: white; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-weight-bold); } .quick-pick__deal { display: inline-flex; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); } .quick-pick__deal--excellent { background: var(--success, #22c55e); color: white; } .quick-pick__deal--great { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); } .quick-pick__deal--good { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); } .quick-pick__deal--fair { background: color-mix(in srgb, var(--ctx-text-muted) 10%, transparent); color: var(--ctx-text-muted); } /* ----------------------------------------------------------------------------- * Stock Status Indicators (Wave 18) * -------------------------------------------------------------------------- */ .product-card__stock { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-weight-medium); margin-top: var(--space-1); } .product-card__stock--success { color: var(--success, #22c55e); } .product-card__stock--warning { color: var(--warning, #eab308); } .product-card__stock--error { color: var(--error, #ef4444); } .product-card__stock--info { color: var(--info, #3b82f6); } .product-card__delivery { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--success, #22c55e); margin-top: var(--space-1); } /* Mini-cart item stock */ .mini-cart__item-stock { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); margin-top: var(--space-1); } .mini-cart__item-stock--instock { color: var(--success, #22c55e); } .mini-cart__item-stock--outofstock { color: var(--error, #ef4444); } .mini-cart__item-stock--onbackorder { color: var(--info, #3b82f6); } /* ----------------------------------------------------------------------------- * Shipping Transparency (Wave 19) * -------------------------------------------------------------------------- */ /* Shipping method enhancements */ .cart-shipping__method--selected { background: var(--primary-tint-8); border-color: var(--primary, #3b82f6); } .cart-shipping__method-info { display: flex; flex-direction: column; gap: var(--space-1); } .cart-shipping__method-delivery { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ctx-text-muted, #64748b); } .cart-shipping__method-price--free { color: var(--success, #22c55e); font-weight: var(--font-weight-bold); } /* Free shipping progress */ .cart-shipping__free-shipping { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); background: var(--ctx-bg-section, var(--gray-50)); border-radius: var(--radius-lg); } .cart-shipping__free-shipping--reached { background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent); } .cart-shipping__free-shipping-message { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); } .cart-shipping__free-shipping-message--success { color: var(--success, #22c55e); } .cart-shipping__free-shipping-progress { margin-top: var(--space-2); } .cart-shipping__free-shipping-track { height: 6px; background: var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); overflow: hidden; } .cart-shipping__free-shipping-fill { height: 100%; background: linear-gradient(90deg, var(--primary, #3b82f6), var(--success, #22c55e)); border-radius: var(--radius-full); transition: width var(--motion-duration-md); } /* Shipping guarantees */ .cart-shipping__guarantees { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--ctx-border, var(--gray-200)); } .cart-shipping__guarantee { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ctx-text-muted, #64748b); } .cart-shipping__guarantee .icon { color: var(--success, #22c55e); } @media (max-width: 639px) { .cart-shipping__guarantees { gap: var(--space-2); } .cart-shipping__guarantee { flex: 1 1 calc(50% - var(--space-2)); } } /* ----------------------------------------------------------------------------- * Payment Trust Enhancement (Wave 20) * -------------------------------------------------------------------------- */ /* Trust section container */ .checkout-payment__trust { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--ctx-border, var(--gray-200)); } /* Security badges */ .checkout-security-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-4); } .checkout-security-badge { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: color-mix(in srgb, var(--success, #22c55e) 8%, transparent); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--success, #22c55e); } .checkout-security-badge .icon { color: var(--success, #22c55e); } /* Card logos */ .checkout-payment__cards { text-align: center; margin-bottom: var(--space-4); } .checkout-payment__cards-label { display: block; font-size: var(--text-xs); color: var(--ctx-text-muted, #64748b); margin-bottom: var(--space-2); } .checkout-payment__cards-logos { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; } .checkout-payment__card-logo { display: flex; align-items: center; opacity: 0.7; transition: opacity var(--motion-duration-sm); } .checkout-payment__card-logo:hover { opacity: 1; } /* Money-back guarantee */ .checkout-payment__guarantee { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: linear-gradient(135deg, color-mix(in srgb, var(--success, #22c55e) 10%, transparent), var(--primary-tint-5)); border-radius: var(--radius-lg); margin-bottom: var(--space-4); } .checkout-payment__guarantee .icon { color: var(--success, #22c55e); flex-shrink: 0; } .checkout-payment__guarantee-text { display: flex; flex-direction: column; } .checkout-payment__guarantee-text strong { font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); } .checkout-payment__guarantee-text span { font-size: var(--text-xs); color: var(--ctx-text-muted, #64748b); } /* Customer count */ .checkout-payment__customers { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ctx-text-muted, #64748b); margin-bottom: var(--space-3); } .checkout-payment__customers .icon { color: var(--primary); } /* Privacy notice */ .checkout-payment__privacy { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ctx-text-muted, #64748b); text-align: center; padding: var(--space-2); background: var(--ctx-bg-section, var(--gray-50)); border-radius: var(--radius-sm); } .checkout-payment__privacy .icon { flex-shrink: 0; opacity: 0.7; } @media (max-width: 639px) { .checkout-security-badges { gap: var(--space-2); } .checkout-security-badge { flex: 1 1 calc(33% - var(--space-2)); justify-content: center; text-align: center; } } /* ----------------------------------------------------------------------------- * Form UX Enhancement (Wave 21) * -------------------------------------------------------------------------- */ /* Validation states */ .form-group--success .form-input, .form-group--success .form-textarea, .form-group--success .form-select { border-color: var(--success, #22c55e); } .form-group--success .form-input:focus, .form-group--success .form-textarea:focus, .form-group--success .form-select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 15%, transparent); } .form-group--error .form-input, .form-group--error .form-textarea, .form-group--error .form-select { border-color: var(--error, #ef4444); } .form-group--error .form-input:focus, .form-group--error .form-textarea:focus, .form-group--error .form-select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent); } /* Input wrapper for icons and indicators */ .form-input-wrapper { position: relative; display: flex; align-items: center; } .form-group--has-icon .form-input, .form-group--has-icon .form-select { padding-left: calc(var(--space-4) + 20px); } .form-group--has-icon-suffix .form-input { padding-right: calc(var(--space-4) + 20px); } /* Icons */ .form-input-icon { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--ctx-text-muted, #64748b); pointer-events: none; } .form-input-icon--prefix { left: var(--space-3); } .form-input-icon--suffix { right: var(--space-3); } /* Validation indicators */ .form-input-indicator { position: absolute; right: var(--space-3); display: flex; align-items: center; justify-content: center; pointer-events: none; } .form-input-indicator--success { color: var(--success, #22c55e); } .form-input-indicator--error { color: var(--error, #ef4444); } .form-group--has-icon-suffix .form-input-indicator { right: calc(var(--space-3) + 24px); } /* Error message */ .form-error { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--error, #ef4444); } /* Character counter */ .form-counter { display: flex; justify-content: flex-end; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ctx-text-muted, #64748b); } /* Floating label variant */ .form-group--floating { position: relative; } .form-group--floating .form-label { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); font-size: var(--text-sm); color: var(--ctx-text-muted, #64748b); transition: all var(--motion-duration-sm); pointer-events: none; background: transparent; padding: 0 var(--space-1); } .form-group--floating .form-input:focus ~ .form-label, .form-group--floating .form-input:not(:placeholder-shown) ~ .form-label { top: 0; transform: translateY(-50%); font-size: var(--text-xs); background: var(--ctx-bg, var(--white)); color: var(--primary, #3b82f6); } .form-group--floating .form-input { padding-top: var(--space-4); } /* ----------------------------------------------------------------------------- * Wave 31: Form Field Enhancements * -------------------------------------------------------------------------- */ /* Size variants */ .form-group--sm .form-label { font-size: var(--text-xs); } .form-group--sm .form-input, .form-group--sm .form-select, .form-group--sm .form-textarea { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); min-height: 36px; } .form-group--sm .form-hint, .form-group--sm .form-error { font-size: var(--text-xs); } .form-group--lg .form-label { font-size: var(--text-base); } .form-group--lg .form-input, .form-group--lg .form-select, .form-group--lg .form-textarea { font-size: var(--text-lg); padding: var(--space-4) var(--space-5); min-height: 56px; } .form-group--lg .form-hint, .form-group--lg .form-error { font-size: var(--text-sm); } /* Disabled state */ .form-group--disabled { opacity: 0.6; pointer-events: none; } .form-group--disabled .form-input, .form-group--disabled .form-select, .form-group--disabled .form-textarea { background-color: var(--ctx-bg-section, var(--gray-100)); cursor: not-allowed; } /* Underline variant */ .form-group--underline .form-input, .form-group--underline .form-select, .form-group--underline .form-textarea { border: none; border-bottom: 2px solid var(--ctx-border, var(--gray-300)); border-radius: 0; padding-left: 0; padding-right: 0; background: transparent; } .form-group--underline .form-input:focus, .form-group--underline .form-select:focus, .form-group--underline .form-textarea:focus { border-bottom-color: var(--primary, #3b82f6); box-shadow: none; } /* Filled variant */ .form-group--filled .form-input, .form-group--filled .form-select, .form-group--filled .form-textarea { background-color: var(--ctx-bg-section, var(--gray-100)); border: 2px solid transparent; } .form-group--filled .form-input:focus, .form-group--filled .form-select:focus, .form-group--filled .form-textarea:focus { background-color: var(--ctx-bg, var(--white)); border-color: var(--primary, #3b82f6); } /* Password toggle */ .form-password-toggle { display: flex; align-items: center; justify-content: center; position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); padding: var(--space-1); background: none; border: none; color: var(--ctx-text-muted, var(--gray-400)); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--motion-duration-sm); } .form-password-toggle:hover { color: var(--ctx-text, var(--gray-700)); } .form-password-toggle__icon { display: none; } .form-password-toggle__icon--show { display: block; } .form-password-toggle.is-visible .form-password-toggle__icon--show { display: none; } .form-password-toggle.is-visible .form-password-toggle__icon--hide { display: block; } /* Adjust input padding when password toggle present */ .form-group--has-icon-suffix .form-input[type="password"], .form-group--has-icon-suffix .form-input[type="text"][data-password-field] { padding-right: calc(var(--space-4) + 28px); } /* ----------------------------------------------------------------------------- * Wave 32: Input Group Component * -------------------------------------------------------------------------- */ .input-group-wrapper { width: 100%; } .input-group__label { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); margin-bottom: var(--space-2); } .input-group__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .input-group { display: flex; align-items: stretch; width: 100%; } .input-group__input { flex: 1; min-width: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-base); border: 1px solid var(--ctx-border, var(--gray-300)); background: var(--ctx-bg, var(--white)); color: var(--ctx-text, var(--gray-900)); transition: border-color var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .input-group__input:focus { outline: none; border-color: var(--primary, #3b82f6); box-shadow: 0 0 0 3px var(--primary-tint-15); } /* Default: button right, addon left */ .input-group__input { border-radius: 0; } .input-group > :first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); } .input-group > :last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; } .input-group > :only-child { border-radius: var(--radius-md); } /* Adjacent borders */ .input-group__addon + .input-group__input, .input-group__button + .input-group__input { border-left: none; } .input-group__input + .input-group__addon, .input-group__input + .input-group__button { border-left: none; } /* Addon (static text/icon) */ .input-group__addon { display: flex; align-items: center; padding: 0 var(--space-3); font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); background: var(--ctx-bg-section, var(--gray-100)); border: 1px solid var(--ctx-border, var(--gray-300)); white-space: nowrap; } /* Button */ .input-group__button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); font-size: var(--text-sm); font-weight: var(--font-weight-medium); border: 1px solid transparent; cursor: pointer; transition: background var(--motion-duration-sm), border-color var(--motion-duration-sm); white-space: nowrap; } .input-group__button--primary { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .input-group__button--primary:hover { background: var(--primary-hover, #2563eb); } .input-group__button--secondary { background: var(--ctx-bg, var(--white)); color: var(--ctx-text, var(--gray-700)); border-color: var(--ctx-border, var(--gray-300)); } .input-group__button--secondary:hover { background: var(--ctx-bg-section, var(--gray-100)); } .input-group__button--ghost { background: transparent; color: var(--primary); } .input-group__button--ghost:hover { background: var(--primary-tint-10); } .input-group__button-icon { display: flex; flex-shrink: 0; } .input-group__button-text { display: inline; } /* Size variants */ .input-group--sm .input-group__input { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); } .input-group--sm .input-group__addon { padding: 0 var(--space-2); font-size: var(--text-xs); } .input-group--sm .input-group__button { padding: 0 var(--space-3); font-size: var(--text-xs); } .input-group--lg .input-group__input { padding: var(--space-4) var(--space-5); font-size: var(--text-lg); } .input-group--lg .input-group__addon { padding: 0 var(--space-4); font-size: var(--text-base); } .input-group--lg .input-group__button { padding: 0 var(--space-5); font-size: var(--text-base); } /* Rounded variant */ .input-group--rounded > :first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); } .input-group--rounded > :last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; } /* Hint text */ .input-group__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-2); } /* ----------------------------------------------------------------------------- * Wave 33: File Upload Component * -------------------------------------------------------------------------- */ .file-upload { width: 100%; } .file-upload__label { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); margin-bottom: var(--space-2); } .file-upload__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .file-upload__dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8); border: 2px dashed var(--ctx-border, var(--gray-300)); border-radius: var(--radius-lg); background: var(--ctx-bg, var(--white)); cursor: pointer; transition: border-color var(--motion-duration-sm), background var(--motion-duration-sm); } .file-upload__dropzone:hover, .file-upload__dropzone.is-dragover { border-color: var(--primary, #3b82f6); background: var(--primary-tint-5); } .file-upload__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .file-upload__content { text-align: center; pointer-events: none; } .file-upload__icon { display: flex; justify-content: center; color: var(--ctx-text-muted, var(--gray-400)); margin-bottom: var(--space-3); } .file-upload__text { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin: 0; } .file-upload__browse { color: var(--primary); font-weight: var(--font-weight-medium); cursor: pointer; } .file-upload__size { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-500)); margin: var(--space-2) 0 0; } /* Preview */ .file-upload__preview { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); background: var(--ctx-bg-section, var(--gray-50)); border-radius: var(--radius-md); pointer-events: auto; } .file-upload__preview-img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .file-upload__preview-info { flex: 1; min-width: 0; } .file-upload__preview-name { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-900)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-upload__preview-size { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-500)); } .file-upload__remove { flex-shrink: 0; padding: var(--space-2); background: none; border: none; color: var(--ctx-text-muted, var(--gray-400)); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--motion-duration-sm), background var(--motion-duration-sm); } .file-upload__remove:hover { color: var(--error, #ef4444); background: color-mix(in srgb, var(--error, #ef4444) 10%, transparent); } /* Compact variant */ .file-upload--compact .file-upload__dropzone { flex-direction: row; padding: var(--space-4); gap: var(--space-3); } .file-upload--compact .file-upload__icon { margin-bottom: 0; } .file-upload--compact .file-upload__content { text-align: left; } /* Avatar variant */ .file-upload--avatar .file-upload__dropzone { width: 120px; height: 120px; padding: 0; border-radius: 50%; overflow: hidden; } .file-upload__avatar { position: relative; width: 100%; height: 100%; } .file-upload__avatar-img, .file-upload__avatar-placeholder { width: 100%; height: 100%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text-muted, var(--gray-400)); } .file-upload__avatar-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); color: var(--white); opacity: 0; transition: opacity var(--motion-duration-sm); pointer-events: none; } .file-upload--avatar .file-upload__dropzone:hover .file-upload__avatar-overlay { opacity: 1; } /* Size variants */ .file-upload--sm .file-upload__dropzone { padding: var(--space-4); } .file-upload--sm .file-upload__text { font-size: var(--text-xs); } .file-upload--sm.file-upload--avatar .file-upload__dropzone { width: 80px; height: 80px; } .file-upload--lg .file-upload__dropzone { padding: var(--space-12); } .file-upload--lg .file-upload__text { font-size: var(--text-base); } .file-upload--lg.file-upload--avatar .file-upload__dropzone { width: 160px; height: 160px; } /* Error state */ .file-upload--error .file-upload__dropzone { border-color: var(--error, #ef4444); } .file-upload__error { font-size: var(--text-sm); color: var(--error, #ef4444); margin-top: var(--space-2); } .file-upload__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-2); } /* ----------------------------------------------------------------------------- * Wave 34: Star Rating Component * -------------------------------------------------------------------------- */ .star-rating { width: 100%; } .star-rating__label { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); margin-bottom: var(--space-2); } .star-rating__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .star-rating__container { display: inline-flex; align-items: center; gap: var(--space-2); } .star-rating__stars { display: flex; gap: var(--space-1); } .star-rating__star { position: relative; padding: 0; background: none; border: none; cursor: pointer; color: var(--ctx-text-faint); transition: transform var(--motion-duration-sm); } .star-rating--readonly .star-rating__star { cursor: default; } .star-rating__star:not(.star-rating--readonly .star-rating__star):hover { transform: scale(1.1); } .star-rating__icon { width: 24px; height: 24px; display: block; } /* Icon visibility */ .star-rating__icon--filled, .star-rating__icon--half { display: none; } .star-rating__star.is-filled .star-rating__icon--empty { display: none; } .star-rating__star.is-filled .star-rating__icon--filled { display: block; } .star-rating__star.is-half .star-rating__icon--empty { display: none; } .star-rating__star.is-half .star-rating__icon--half { display: block; } /* Half star overlay button (for half-star mode) */ .star-rating__star--half-btn { position: absolute; left: 0; top: 0; width: 50%; height: 100%; opacity: 0; } /* Colors */ .star-rating--gold .star-rating__star.is-filled, .star-rating--gold .star-rating__star.is-half, .star-rating--gold .star-rating__star:hover { color: var(--warning); } .star-rating--primary .star-rating__star.is-filled, .star-rating--primary .star-rating__star.is-half, .star-rating--primary .star-rating__star:hover { color: var(--primary, #3b82f6); } .star-rating--default .star-rating__star.is-filled, .star-rating--default .star-rating__star.is-half, .star-rating--default .star-rating__star:hover { color: var(--ctx-text, var(--gray-700)); } /* Hover preview (fill all stars up to hovered) */ .star-rating:not(.star-rating--readonly) .star-rating__stars:hover .star-rating__star { color: var(--ctx-text-faint); } .star-rating--gold:not(.star-rating--readonly) .star-rating__stars:hover .star-rating__star:hover, .star-rating--gold:not(.star-rating--readonly) .star-rating__stars:hover .star-rating__star:hover ~ .star-rating__star { color: var(--warning); } /* Size variants */ .star-rating--sm .star-rating__icon { width: 18px; height: 18px; } .star-rating--lg .star-rating__icon { width: 32px; height: 32px; } /* Value display */ .star-rating__value { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .star-rating__value-num { font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); } .star-rating__value-max { color: var(--ctx-text-muted, var(--gray-400)); } .star-rating__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-2); } /* ----------------------------------------------------------------------------- * Wave 35: Toggle Switch Component * -------------------------------------------------------------------------- */ .toggle__wrapper { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; } .toggle--disabled .toggle__wrapper { cursor: not-allowed; opacity: 0.5; } .toggle__input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle__track { position: relative; display: inline-flex; align-items: center; width: 44px; height: 24px; background: var(--gray-300); border-radius: var(--radius-full); transition: background var(--motion-duration-sm); } .toggle__input:checked + .toggle__track { background: var(--primary, #3b82f6); } .toggle--success .toggle__input:checked + .toggle__track { background: var(--success, #22c55e); } .toggle--default .toggle__input:checked + .toggle__track { background: var(--ctx-text, var(--gray-700)); } .toggle__input:focus-visible + .toggle__track { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; } .toggle__thumb { position: absolute; left: 2px; width: 20px; height: 20px; background: var(--white); border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--motion-duration-sm); display: flex; align-items: center; justify-content: center; } .toggle__input:checked + .toggle__track .toggle__thumb { transform: translateX(20px); } /* Size variants */ .toggle--sm .toggle__track { width: 36px; height: 20px; } .toggle--sm .toggle__thumb { width: 16px; height: 16px; } .toggle--sm .toggle__input:checked + .toggle__track .toggle__thumb { transform: translateX(16px); } .toggle--lg .toggle__track { width: 56px; height: 32px; } .toggle--lg .toggle__thumb { width: 28px; height: 28px; } .toggle--lg .toggle__input:checked + .toggle__track .toggle__thumb { transform: translateX(24px); } /* Icon variant */ .toggle__icon { display: none; color: var(--ctx-text-faint); } .toggle__icon--off { display: flex; } .toggle__input:checked + .toggle__track .toggle__icon--off { display: none; } .toggle__input:checked + .toggle__track .toggle__icon--on { display: flex; color: var(--primary, #3b82f6); } /* Labeled variant */ .toggle--labeled .toggle__track { width: 80px; padding: 0 var(--space-2); } .toggle--labeled .toggle__thumb { left: 2px; } .toggle--labeled .toggle__input:checked + .toggle__track .toggle__thumb { transform: translateX(54px); } .toggle__label-on, .toggle__label-off { font-size: var(--text-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.05em; } .toggle__label-on { display: none; color: var(--white); margin-left: var(--space-1); } .toggle__label-off { display: block; color: var(--ctx-text-muted); margin-left: auto; margin-right: var(--space-1); } .toggle__input:checked + .toggle__track .toggle__label-on { display: block; } .toggle__input:checked + .toggle__track .toggle__label-off { display: none; } /* Text label */ .toggle__text { font-size: var(--text-sm); color: var(--ctx-text, var(--gray-700)); } .toggle__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-2); margin-left: calc(44px + var(--space-3)); } .toggle--sm .toggle__hint { margin-left: calc(36px + var(--space-3)); } .toggle--lg .toggle__hint { margin-left: calc(56px + var(--space-3)); } /* ----------------------------------------------------------------------------- * Wave 36: Tag Input Component * -------------------------------------------------------------------------- */ .tag-input { width: 100%; } .tag-input__label { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); margin-bottom: var(--space-2); } .tag-input__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .tag-input__container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); background: var(--ctx-bg, var(--white)); min-height: 44px; cursor: text; transition: border-color var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .tag-input__container:focus-within { border-color: var(--primary, #3b82f6); box-shadow: 0 0 0 3px var(--primary-tint-15); } .tag-input--disabled .tag-input__container { background: var(--ctx-bg-section, var(--gray-100)); cursor: not-allowed; opacity: 0.6; } .tag-input__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .tag-input__tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--primary-light, #e0e7ff); color: var(--primary-dark, #3730a3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--font-weight-medium); animation: tag-pop-in 0.2s ease-out; } @keyframes tag-pop-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .tag-input__tag-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-input__tag-remove { display: flex; padding: 2px; background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; border-radius: var(--radius-sm); transition: opacity var(--motion-duration-sm), background var(--motion-duration-sm); } .tag-input__tag-remove:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); } .tag-input__input { flex: 1; min-width: 120px; padding: var(--space-1) 0; border: none; background: transparent; font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); outline: none; } .tag-input__input::placeholder { color: var(--ctx-text-muted, var(--gray-400)); } /* Pill variant */ .tag-input--pill .tag-input__tag { border-radius: var(--radius-full); } /* Outline variant */ .tag-input--outline .tag-input__tag { background: transparent; border: 1px solid var(--primary, #3b82f6); color: var(--primary); } /* Size variants */ .tag-input--sm .tag-input__container { padding: var(--space-1) var(--space-2); min-height: 36px; } .tag-input--sm .tag-input__tag { font-size: var(--text-xs); padding: 2px var(--space-1); } .tag-input--sm .tag-input__input { font-size: var(--text-xs); } .tag-input--lg .tag-input__container { padding: var(--space-3) var(--space-4); min-height: 52px; } .tag-input--lg .tag-input__tag { font-size: var(--text-base); padding: var(--space-2) var(--space-3); } .tag-input--lg .tag-input__input { font-size: var(--text-base); } .tag-input__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-2); } /* ----------------------------------------------------------------------------- * Range Slider (Wave 37) * -------------------------------------------------------------------------- */ .range-slider { display: flex; flex-direction: column; gap: var(--space-2); } .range-slider__header { display: flex; justify-content: space-between; align-items: center; } .range-slider__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); } .range-slider__value { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--primary); min-width: 50px; text-align: right; } .range-slider__container { position: relative; display: flex; align-items: center; gap: var(--space-3); } .range-slider__track { position: absolute; left: 0; right: 0; height: 6px; background: var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); pointer-events: none; } .range-slider__fill { height: 100%; background: var(--primary, #3b82f6); border-radius: var(--radius-full); transition: width var(--duration-fast); } .range-slider__input { width: 100%; height: 6px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; position: relative; z-index: 1; } /* Thumb - WebKit */ .range-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--primary, #3b82f6); border: 2px solid var(--white); border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .range-slider__input::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: var(--shadow-md); } .range-slider__input:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--primary-light, rgba(59, 130, 246, 0.3)); } /* Thumb - Firefox */ .range-slider__input::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary, #3b82f6); border: 2px solid var(--white); border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .range-slider__input::-moz-range-thumb:hover { transform: scale(1.15); } .range-slider__input:focus::-moz-range-thumb { box-shadow: 0 0 0 3px var(--primary-light, rgba(59, 130, 246, 0.3)); } /* Track - Firefox */ .range-slider__input::-moz-range-track { background: transparent; } /* Value right position */ .range-slider__value--right { min-width: 60px; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-700)); } /* Tooltip position */ .range-slider__tooltip { position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); padding: var(--space-1) var(--space-2); background: var(--gray-800); color: var(--white); font-size: var(--text-xs); font-weight: var(--font-weight-medium); border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--motion-duration-sm); } .range-slider__tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--ctx-inverted-bg); } .range-slider--value-tooltip:hover .range-slider__tooltip, .range-slider--value-tooltip:focus-within .range-slider__tooltip { opacity: 1; } /* Ticks */ .range-slider__ticks { display: flex; justify-content: space-between; padding: 0 9px; margin-top: var(--space-1); } .range-slider__tick { position: relative; font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-500)); } .range-slider__tick--start { position: absolute; left: 0; } .range-slider__tick--end { position: absolute; right: 0; } /* Hint */ .range-slider__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-1); } /* Size variants */ .range-slider--sm .range-slider__track { height: 4px; } .range-slider--sm .range-slider__input { height: 4px; } .range-slider--sm .range-slider__input::-webkit-slider-thumb { width: 14px; height: 14px; } .range-slider--sm .range-slider__input::-moz-range-thumb { width: 14px; height: 14px; } .range-slider--sm .range-slider__label { font-size: var(--text-xs); } .range-slider--sm .range-slider__value { font-size: var(--text-xs); } .range-slider--lg .range-slider__track { height: 8px; } .range-slider--lg .range-slider__input { height: 8px; } .range-slider--lg .range-slider__input::-webkit-slider-thumb { width: 24px; height: 24px; } .range-slider--lg .range-slider__input::-moz-range-thumb { width: 24px; height: 24px; } .range-slider--lg .range-slider__label { font-size: var(--text-base); } .range-slider--lg .range-slider__value { font-size: var(--text-base); } /* Color variants */ .range-slider--success .range-slider__fill { background: var(--success, #22c55e); } .range-slider--success .range-slider__input::-webkit-slider-thumb { background: var(--success, #22c55e); } .range-slider--success .range-slider__input::-moz-range-thumb { background: var(--success, #22c55e); } .range-slider--success .range-slider__value { color: var(--success, #22c55e); } .range-slider--default .range-slider__fill { background: var(--gray-500); } .range-slider--default .range-slider__input::-webkit-slider-thumb { background: var(--gray-600); } .range-slider--default .range-slider__input::-moz-range-thumb { background: var(--gray-600); } .range-slider--default .range-slider__value { color: var(--ctx-text-muted); } /* Disabled state */ .range-slider--disabled { opacity: 0.5; pointer-events: none; } .range-slider--disabled .range-slider__input { cursor: not-allowed; } /* ----------------------------------------------------------------------------- * Date Picker (Wave 38) * -------------------------------------------------------------------------- */ .date-picker { position: relative; display: flex; flex-direction: column; gap: var(--space-2); } .date-picker__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); } .date-picker__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .date-picker__input-wrapper { position: relative; display: flex; align-items: center; } .date-picker__icon { position: absolute; left: var(--space-3); display: flex; color: var(--ctx-text-muted, var(--gray-400)); pointer-events: none; } .date-picker__display { width: 100%; padding: var(--space-3) var(--space-4); padding-left: calc(var(--space-3) + 16px + var(--space-2)); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); cursor: pointer; transition: border-color var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .date-picker__display:hover { border-color: var(--ctx-border-hover); } .date-picker__display:focus { border-color: var(--primary, #3b82f6); outline: none; box-shadow: 0 0 0 3px var(--primary-light, rgba(59, 130, 246, 0.2)); } .date-picker__display::placeholder { color: var(--ctx-text-muted, var(--gray-400)); } .date-picker__clear { position: absolute; right: var(--space-3); display: flex; padding: var(--space-1); background: none; border: none; color: var(--ctx-text-muted, var(--gray-400)); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--motion-duration-sm), background var(--motion-duration-sm); } .date-picker__clear:hover { color: var(--ctx-text, var(--gray-700)); background: var(--gray-100); } /* Dropdown */ .date-picker__dropdown { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 280px; margin-top: var(--space-2); padding: var(--space-4); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .date-picker__dropdown[hidden] { display: none; } /* Header */ .date-picker__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .date-picker__month-year { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); } .date-picker__nav { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: none; border: none; color: var(--ctx-text-muted, var(--gray-500)); cursor: pointer; border-radius: var(--radius-md); transition: background var(--motion-duration-sm), color var(--motion-duration-sm); } .date-picker__nav:hover { background: var(--gray-100); color: var(--ctx-text, var(--gray-700)); } /* Calendar grid */ .date-picker__calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .date-picker__day-name { padding: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--ctx-text-muted, var(--gray-500)); text-align: center; text-transform: uppercase; } .date-picker__day { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: none; font-size: var(--text-sm); color: var(--ctx-text, var(--gray-700)); cursor: pointer; border-radius: var(--radius-md); transition: background var(--motion-duration-sm), color var(--motion-duration-sm); } .date-picker__day:hover { background: var(--gray-100); } .date-picker__day--other { color: var(--ctx-text-faint); } .date-picker__day--today { font-weight: var(--font-weight-bold); color: var(--primary, #3b82f6); } .date-picker__day--selected { background: var(--primary, #3b82f6); color: var(--white); } .date-picker__day--selected:hover { background: var(--primary-hover, #2563eb); } .date-picker__day--disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } /* Time picker */ .date-picker__time { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--ctx-border, var(--gray-200)); margin-top: var(--space-3); } .date-picker__time-input { width: 50px; padding: var(--space-2); text-align: center; border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); font-size: var(--text-sm); } .date-picker__time-input:focus { border-color: var(--primary, #3b82f6); outline: none; } .date-picker__time-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .date-picker__time-sep { color: var(--ctx-text-muted, var(--gray-400)); font-weight: var(--font-weight-semibold); } /* Footer */ .date-picker__footer { display: flex; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--ctx-border, var(--gray-200)); margin-top: var(--space-3); } .date-picker__today, .date-picker__clear-btn { padding: var(--space-2) var(--space-3); background: none; border: none; font-size: var(--text-sm); color: var(--primary, #3b82f6); cursor: pointer; border-radius: var(--radius-md); transition: background var(--motion-duration-sm); } .date-picker__today:hover, .date-picker__clear-btn:hover { background: var(--primary-light, rgba(59, 130, 246, 0.1)); } /* Size variants */ .date-picker--sm .date-picker__display { padding: var(--space-2) var(--space-3); padding-left: calc(var(--space-2) + 14px + var(--space-2)); font-size: var(--text-xs); } .date-picker--sm .date-picker__icon svg { width: 14px; height: 14px; } .date-picker--sm .date-picker__label { font-size: var(--text-xs); } .date-picker--lg .date-picker__display { padding: var(--space-4) var(--space-5); padding-left: calc(var(--space-4) + 18px + var(--space-2)); font-size: var(--text-base); } .date-picker--lg .date-picker__icon svg { width: 18px; height: 18px; } .date-picker--lg .date-picker__label { font-size: var(--text-base); } /* Error state */ .date-picker--error .date-picker__display { border-color: var(--error, #ef4444); } .date-picker--error .date-picker__display:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } .date-picker__error { font-size: var(--text-sm); color: var(--error, #ef4444); margin-top: var(--space-1); } /* Disabled state */ .date-picker--disabled { opacity: 0.5; pointer-events: none; } .date-picker--disabled .date-picker__display { cursor: not-allowed; background: var(--gray-50); } /* Hint */ .date-picker__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-1); } /* ----------------------------------------------------------------------------- * Autocomplete / Combobox (Wave 39) * -------------------------------------------------------------------------- */ .autocomplete { position: relative; display: flex; flex-direction: column; gap: var(--space-2); } .autocomplete__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); } .autocomplete__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .autocomplete__input-wrapper { position: relative; display: flex; align-items: center; } .autocomplete__icon { position: absolute; left: var(--space-3); display: flex; color: var(--ctx-text-muted, var(--gray-400)); pointer-events: none; } .autocomplete__input { width: 100%; padding: var(--space-3) var(--space-4); padding-left: calc(var(--space-3) + 16px + var(--space-2)); padding-right: calc(var(--space-3) + 32px); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); transition: border-color var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .autocomplete__input:hover { border-color: var(--ctx-border-hover); } .autocomplete__input:focus { border-color: var(--primary, #3b82f6); outline: none; box-shadow: 0 0 0 3px var(--primary-light, rgba(59, 130, 246, 0.2)); } .autocomplete__input::placeholder { color: var(--ctx-text-muted, var(--gray-400)); } .autocomplete__actions { position: absolute; right: var(--space-3); display: flex; align-items: center; gap: var(--space-1); } .autocomplete__spinner { display: flex; color: var(--ctx-text-muted, var(--gray-400)); animation: spin 0.8s linear infinite; } /* Note: Uses canonical spin keyframe from animation utilities section */ .autocomplete__clear { display: flex; padding: var(--space-1); background: none; border: none; color: var(--ctx-text-muted, var(--gray-400)); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--motion-duration-sm), background var(--motion-duration-sm); } .autocomplete__clear:hover { color: var(--ctx-text, var(--gray-700)); background: var(--gray-100); } /* Listbox dropdown */ .autocomplete__listbox { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin: 0; margin-top: var(--space-1); padding: var(--space-1); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); list-style: none; max-height: 240px; overflow-y: auto; } .autocomplete__listbox[hidden] { display: none; } .autocomplete__option { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--motion-duration-sm); } .autocomplete__option:hover, .autocomplete__option--highlighted { background: var(--gray-100); } .autocomplete__option[aria-selected="true"] { background: var(--primary-light, rgba(59, 130, 246, 0.1)); } .autocomplete__option-label { font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); } .autocomplete__option-desc { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-500)); } .autocomplete__no-results, .autocomplete__loading { padding: var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); } /* Size variants */ .autocomplete--sm .autocomplete__input { padding: var(--space-2) var(--space-3); padding-left: calc(var(--space-2) + 14px + var(--space-2)); font-size: var(--text-xs); } .autocomplete--sm .autocomplete__icon svg { width: 14px; height: 14px; } .autocomplete--sm .autocomplete__label { font-size: var(--text-xs); } .autocomplete--sm .autocomplete__option { padding: var(--space-1) var(--space-2); } .autocomplete--sm .autocomplete__option-label { font-size: var(--text-xs); } .autocomplete--lg .autocomplete__input { padding: var(--space-4) var(--space-5); padding-left: calc(var(--space-4) + 18px + var(--space-2)); font-size: var(--text-base); } .autocomplete--lg .autocomplete__icon svg { width: 18px; height: 18px; } .autocomplete--lg .autocomplete__label { font-size: var(--text-base); } .autocomplete--lg .autocomplete__option { padding: var(--space-3) var(--space-4); } .autocomplete--lg .autocomplete__option-label { font-size: var(--text-base); } /* Error state */ .autocomplete--error .autocomplete__input { border-color: var(--error, #ef4444); } .autocomplete--error .autocomplete__input:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } .autocomplete__error { font-size: var(--text-sm); color: var(--error, #ef4444); margin-top: var(--space-1); } /* Disabled state */ .autocomplete--disabled { opacity: 0.5; pointer-events: none; } .autocomplete--disabled .autocomplete__input { cursor: not-allowed; background: var(--gray-50); } /* Hint */ .autocomplete__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-1); } /* ----------------------------------------------------------------------------- * Color Picker (Wave 40) * -------------------------------------------------------------------------- */ .color-picker { position: relative; display: flex; flex-direction: column; gap: var(--space-2); } .color-picker__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); } .color-picker__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .color-picker__control { display: flex; align-items: center; gap: var(--space-2); } .color-picker__trigger { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .color-picker__trigger:hover { border-color: var(--ctx-border-hover); } .color-picker__trigger:focus { border-color: var(--primary, #3b82f6); outline: none; box-shadow: 0 0 0 3px var(--primary-light, rgba(59, 130, 246, 0.2)); } .color-picker__preview { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .color-picker__trigger-icon { color: var(--ctx-text-muted, var(--gray-400)); } .color-picker__input { width: 100px; padding: var(--space-2) var(--space-3); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); font-size: var(--text-sm); font-family: var(--font-mono, monospace); color: var(--ctx-text, var(--gray-900)); text-transform: uppercase; } .color-picker__input:focus { border-color: var(--primary, #3b82f6); outline: none; } .color-picker__input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Dropdown */ .color-picker__dropdown { position: absolute; top: 100%; left: 0; z-index: 50; margin-top: var(--space-2); padding: var(--space-3); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .color-picker__dropdown[hidden] { display: none; } /* Palette grid */ .color-picker__palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); margin-bottom: var(--space-3); } .color-picker__swatch { position: relative; width: 32px; height: 32px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--motion-duration-sm), border-color var(--motion-duration-sm); } .color-picker__swatch:hover { transform: scale(1.1); } .color-picker__swatch:focus { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary, #3b82f6); } .color-picker__swatch--selected { border-color: var(--ctx-border-strong); } .color-picker__check { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--white); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); } /* Custom color section */ .color-picker__custom { padding-top: var(--space-3); border-top: 1px solid var(--ctx-border, var(--gray-200)); } .color-picker__custom-label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; } .color-picker__native { width: 32px; height: 32px; padding: 0; border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-sm); cursor: pointer; } .color-picker__native::-webkit-color-swatch-wrapper { padding: 2px; } .color-picker__native::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); } .color-picker__custom-text { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } /* Size variants */ .color-picker--sm .color-picker__trigger { padding: var(--space-1); } .color-picker--sm .color-picker__preview { width: 22px; height: 22px; } .color-picker--sm .color-picker__input { width: 85px; padding: var(--space-1) var(--space-2); font-size: var(--text-xs); } .color-picker--sm .color-picker__swatch { width: 26px; height: 26px; } .color-picker--lg .color-picker__trigger { padding: var(--space-3); } .color-picker--lg .color-picker__preview { width: 36px; height: 36px; } .color-picker--lg .color-picker__input { width: 120px; padding: var(--space-3) var(--space-4); font-size: var(--text-base); } .color-picker--lg .color-picker__swatch { width: 40px; height: 40px; } /* Error state */ .color-picker--error .color-picker__trigger { border-color: var(--error, #ef4444); } .color-picker--error .color-picker__input { border-color: var(--error, #ef4444); } .color-picker__error { font-size: var(--text-sm); color: var(--error, #ef4444); margin-top: var(--space-1); } /* Disabled state */ .color-picker--disabled { opacity: 0.5; pointer-events: none; } .color-picker--disabled .color-picker__trigger { cursor: not-allowed; } /* Hint */ .color-picker__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-1); } /* ----------------------------------------------------------------------------- * Number Stepper (Wave 41) * -------------------------------------------------------------------------- */ .number-stepper { display: flex; flex-direction: column; gap: var(--space-2); } .number-stepper__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); } .number-stepper__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .number-stepper__control { display: inline-flex; align-items: center; border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); background: var(--ctx-surface, var(--white)); overflow: hidden; } .number-stepper__btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--gray-50); border: none; color: var(--ctx-text, var(--gray-700)); cursor: pointer; transition: background var(--motion-duration-sm), color var(--motion-duration-sm); } .number-stepper__btn:hover:not(:disabled) { background: var(--gray-100); } .number-stepper__btn:active:not(:disabled) { background: var(--gray-200); } .number-stepper__btn:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary, #3b82f6); } .number-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; } .number-stepper__input-wrapper { display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-left: 1px solid var(--ctx-border, var(--gray-200)); border-right: 1px solid var(--ctx-border, var(--gray-200)); } .number-stepper__prefix, .number-stepper__suffix { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); } .number-stepper__input { width: 60px; padding: var(--space-2) 0; border: none; background: transparent; text-align: center; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-900)); -moz-appearance: textfield; } .number-stepper__input::-webkit-outer-spin-button, .number-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .number-stepper__input:focus { outline: none; } .number-stepper__input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Inline variant (label on left) */ .number-stepper--inline { flex-direction: row; align-items: center; gap: var(--space-4); } .number-stepper--inline .number-stepper__label { margin: 0; } /* Stacked variant (vertical buttons) */ .number-stepper--stacked .number-stepper__control { flex-direction: row-reverse; } .number-stepper--stacked .number-stepper__btn { width: 32px; height: 20px; } .number-stepper--stacked .number-stepper__btn svg { width: 12px; height: 12px; } .number-stepper--stacked .number-stepper__btn--decrease { border-radius: 0 0 var(--radius-sm) 0; } .number-stepper--stacked .number-stepper__btn--increase { border-radius: 0 var(--radius-sm) 0 0; } /* Size variants */ .number-stepper--sm .number-stepper__btn { width: 32px; height: 32px; } .number-stepper--sm .number-stepper__btn svg { width: 14px; height: 14px; } .number-stepper--sm .number-stepper__input { width: 50px; font-size: var(--text-xs); } .number-stepper--sm .number-stepper__label { font-size: var(--text-xs); } .number-stepper--lg .number-stepper__btn { width: 48px; height: 48px; } .number-stepper--lg .number-stepper__btn svg { width: 20px; height: 20px; } .number-stepper--lg .number-stepper__input { width: 80px; padding: var(--space-3) 0; font-size: var(--text-base); } .number-stepper--lg .number-stepper__label { font-size: var(--text-base); } /* Error state */ .number-stepper--error .number-stepper__control { border-color: var(--error, #ef4444); } .number-stepper__error { font-size: var(--text-sm); color: var(--error, #ef4444); margin-top: var(--space-1); } /* Disabled state */ .number-stepper--disabled { opacity: 0.5; pointer-events: none; } /* Hint */ .number-stepper__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-1); } /* ----------------------------------------------------------------------------- * OTP / PIN Input (Wave 42) * -------------------------------------------------------------------------- */ .otp-input { display: flex; flex-direction: column; gap: var(--space-2); } .otp-input__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); text-align: center; } .otp-input__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .otp-input__fields { display: flex; justify-content: center; align-items: center; gap: var(--space-2); } .otp-input__digit { width: 48px; height: 56px; padding: 0; border: 2px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); background: var(--ctx-surface, var(--white)); text-align: center; font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); caret-color: var(--primary, #3b82f6); transition: border-color var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .otp-input__digit:hover { border-color: var(--ctx-border-hover); } .otp-input__digit:focus { border-color: var(--primary, #3b82f6); outline: none; box-shadow: 0 0 0 3px var(--primary-light, rgba(59, 130, 246, 0.2)); } .otp-input__digit::placeholder { color: var(--ctx-input-placeholder); } /* Filled state */ .otp-input__digit:not(:placeholder-shown) { border-color: var(--primary, #3b82f6); background: var(--primary-light, rgba(59, 130, 246, 0.05)); } /* Separator between groups */ .otp-input__separator { color: var(--ctx-text-muted, var(--gray-400)); font-weight: var(--font-weight-semibold); } /* Masked variant (dots) */ .otp-input--masked .otp-input__digit { -webkit-text-security: disc; text-security: disc; font-size: var(--text-3xl); } /* Size variants */ .otp-input--sm .otp-input__digit { width: 36px; height: 44px; font-size: var(--text-lg); } .otp-input--sm .otp-input__fields { gap: var(--space-1); } .otp-input--sm .otp-input__label { font-size: var(--text-xs); } .otp-input--lg .otp-input__digit { width: 60px; height: 72px; font-size: var(--text-4xl); border-radius: var(--radius-lg); } .otp-input--lg .otp-input__fields { gap: var(--space-3); } .otp-input--lg .otp-input__label { font-size: var(--text-base); } /* Error state */ .otp-input--error .otp-input__digit { border-color: var(--error, #ef4444); } .otp-input--error .otp-input__digit:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } .otp-input__error { font-size: var(--text-sm); color: var(--error, #ef4444); text-align: center; margin-top: var(--space-1); } /* Disabled state */ .otp-input--disabled { opacity: 0.5; pointer-events: none; } .otp-input--disabled .otp-input__digit { background: var(--gray-50); } /* Hint */ .otp-input__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); text-align: center; margin-top: var(--space-1); } /* Success animation */ @keyframes otp-success { 0% { transform: scale(1); } 50% { transform: scale(1.1); border-color: var(--success, #22c55e); } 100% { transform: scale(1); border-color: var(--success, #22c55e); } } .otp-input--success .otp-input__digit { animation: otp-success 0.3s ease; border-color: var(--success, #22c55e); } /* ----------------------------------------------------------------------------- * Phone Input (Wave 43) * -------------------------------------------------------------------------- */ .phone-input { display: flex; flex-direction: column; gap: var(--space-2); } .phone-input__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); } .phone-input__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .phone-input__control { display: flex; border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); background: var(--ctx-surface, var(--white)); overflow: hidden; transition: border-color var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .phone-input__control:focus-within { border-color: var(--primary, #3b82f6); box-shadow: 0 0 0 3px var(--primary-light, rgba(59, 130, 246, 0.2)); } .phone-input__country { position: relative; } .phone-input__trigger { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-3); background: var(--gray-50); border: none; border-right: 1px solid var(--ctx-border, var(--gray-200)); cursor: pointer; transition: background var(--motion-duration-sm); } .phone-input__trigger:hover { background: var(--gray-100); } .phone-input__flag { font-size: 1.25rem; line-height: 1; } .phone-input__dial { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); } .phone-input__chevron { color: var(--ctx-text-muted, var(--gray-400)); transition: transform var(--motion-duration-sm); } .phone-input__trigger[aria-expanded="true"] .phone-input__chevron { transform: rotate(180deg); } /* Dropdown */ .phone-input__dropdown { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 250px; margin-top: var(--space-1); padding: var(--space-1); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); list-style: none; max-height: 240px; overflow-y: auto; } .phone-input__dropdown[hidden] { display: none; } .phone-input__option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--motion-duration-sm); } .phone-input__option:hover { background: var(--gray-100); } .phone-input__option--selected { background: var(--primary-light, rgba(59, 130, 246, 0.1)); } .phone-input__option-flag { font-size: 1.25rem; line-height: 1; } .phone-input__option-name { flex: 1; font-size: var(--text-sm); color: var(--ctx-text, var(--gray-700)); } .phone-input__option-dial { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); } /* Phone number input */ .phone-input__number { flex: 1; padding: var(--space-3); border: none; background: transparent; font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); } .phone-input__number:focus { outline: none; } .phone-input__number:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .phone-input__number::placeholder { color: var(--ctx-text-muted, var(--gray-400)); } /* Size variants */ .phone-input--sm .phone-input__trigger { padding: var(--space-2); } .phone-input--sm .phone-input__flag { font-size: 1rem; } .phone-input--sm .phone-input__dial { font-size: var(--text-xs); } .phone-input--sm .phone-input__number { padding: var(--space-2); font-size: var(--text-xs); } .phone-input--sm .phone-input__label { font-size: var(--text-xs); } .phone-input--lg .phone-input__trigger { padding: var(--space-4); } .phone-input--lg .phone-input__flag { font-size: 1.5rem; } .phone-input--lg .phone-input__dial { font-size: var(--text-base); } .phone-input--lg .phone-input__number { padding: var(--space-4); font-size: var(--text-base); } .phone-input--lg .phone-input__label { font-size: var(--text-base); } /* Error state */ .phone-input--error .phone-input__control { border-color: var(--error, #ef4444); } .phone-input--error .phone-input__control:focus-within { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } .phone-input__error { font-size: var(--text-sm); color: var(--error, #ef4444); margin-top: var(--space-1); } /* Disabled state */ .phone-input--disabled { opacity: 0.5; pointer-events: none; } .phone-input--disabled .phone-input__control { background: var(--gray-50); } /* Hint */ .phone-input__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); margin-top: var(--space-1); } /* ----------------------------------------------------------------------------- * Credit Card Input (Wave 44) * -------------------------------------------------------------------------- */ .credit-card { display: flex; flex-direction: column; gap: var(--space-3); } .credit-card__header { display: flex; justify-content: space-between; align-items: center; } .credit-card__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--ctx-text, var(--gray-700)); } .credit-card__required { color: var(--error, #ef4444); margin-left: var(--space-1); /* 4px - closest to 2px */ } .credit-card__brands { display: flex; gap: var(--space-1); } .credit-card__brand { width: 32px; height: 20px; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity var(--motion-duration-sm); } .credit-card__brand svg { width: 100%; height: 100%; } .credit-card__brand--active { opacity: 1; } .credit-card__brand--visa { color: #1a1f71; } .credit-card__brand--mastercard { color: #eb001b; } .credit-card__brand--amex { color: #006fcf; } .credit-card__field { display: flex; flex-direction: column; gap: var(--space-1); } .credit-card__field-label { font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--ctx-text-muted, var(--gray-500)); text-transform: uppercase; letter-spacing: 0.05em; } .credit-card__input { padding: var(--space-3); border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); background: var(--ctx-surface, var(--white)); font-size: var(--text-sm); color: var(--ctx-text, var(--gray-900)); transition: border-color var(--motion-duration-sm), box-shadow var(--motion-duration-sm); } .credit-card__input:hover { border-color: var(--ctx-border-hover); } .credit-card__input:focus { border-color: var(--primary, #3b82f6); outline: none; box-shadow: 0 0 0 3px var(--primary-light, rgba(59, 130, 246, 0.2)); } .credit-card__input::placeholder { color: var(--ctx-text-muted, var(--gray-400)); } .credit-card__number-wrapper { position: relative; } .credit-card__card-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ctx-text-muted, var(--gray-400)); pointer-events: none; transition: color var(--motion-duration-sm); } .credit-card__input--number { padding-left: calc(var(--space-3) + 24px + var(--space-2)); font-family: var(--font-mono, monospace); letter-spacing: 0.1em; } /* Detected card type icon */ .credit-card__card-icon--visa { color: #1a1f71; } .credit-card__card-icon--mastercard { color: #eb001b; } .credit-card__card-icon--amex { color: #006fcf; } .credit-card__card-icon--discover { color: #ff6000; } .credit-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .credit-card__input--expiry { font-family: var(--font-mono, monospace); letter-spacing: 0.1em; } .credit-card__cvc-wrapper { position: relative; } .credit-card__input--cvc { font-family: var(--font-mono, monospace); letter-spacing: 0.1em; padding-right: calc(var(--space-3) + 20px); } .credit-card__cvc-icon { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ctx-text-muted, var(--gray-400)); cursor: help; } /* Secure badge */ .credit-card__secure { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--success, #22c55e); } /* Size variants */ .credit-card--sm .credit-card__input { padding: var(--space-2); font-size: var(--text-xs); } .credit-card--sm .credit-card__field-label { font-size: var(--text-xs); } .credit-card--sm .credit-card__input--number { padding-left: calc(var(--space-2) + 20px + var(--space-1)); } .credit-card--lg .credit-card__input { padding: var(--space-4); font-size: var(--text-base); } .credit-card--lg .credit-card__field-label { font-size: var(--text-sm); } .credit-card--lg .credit-card__input--number { padding-left: calc(var(--space-4) + 28px + var(--space-2)); } /* Error state */ .credit-card--error .credit-card__input { border-color: var(--error, #ef4444); } .credit-card--error .credit-card__input:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } .credit-card__error { font-size: var(--text-sm); color: var(--error, #ef4444); } /* Disabled state */ .credit-card--disabled { opacity: 0.5; pointer-events: none; } .credit-card--disabled .credit-card__input { background: var(--gray-50); } /* Hint */ .credit-card__hint { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); } /* ----------------------------------------------------------------------------- * Button Loading States (Wave 22) * -------------------------------------------------------------------------- */ /* Loading state - base properties defined in Button: Loading state section above */ .btn--loading .btn__text { opacity: 0.7; } /* Spinner */ .btn__spinner { display: inline-flex; align-items: center; justify-content: center; margin-right: var(--space-2); } .btn__spinner-icon { width: 1em; height: 1em; animation: btn-spin 0.8s linear infinite; } /* Note: btn-spin keyframe defined in Button section above */ /* Size adjustments */ .btn--sm .btn__spinner-icon { width: 0.875em; height: 0.875em; } .btn--lg .btn__spinner-icon { width: 1.25em; height: 1.25em; } /* Button text wrapper */ .btn__text { display: inline; } /* ----------------------------------------------------------------------------- * Quick Nav * -------------------------------------------------------------------------- */ .quick-nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-lg); margin-bottom: var(--space-6); } .quick-nav__icon { width: 20px; height: 20px; color: var(--ctx-text-muted, var(--gray-600)); } .quick-nav__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); } .quick-nav__pill { padding: var(--space-1) var(--space-3); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); font-size: var(--text-sm); transition: var(--motion-duration-sm); } .quick-nav__pill:hover { border-color: var(--primary, #3b82f6); color: var(--primary, #3b82f6); } /* ----------------------------------------------------------------------------- * Quiz System * -------------------------------------------------------------------------- */ .quiz-progress { margin-bottom: var(--space-6); } .quiz-progress__bar { height: 8px; background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-full); overflow: hidden; } .quiz-progress__fill { height: 100%; background: var(--primary, #3b82f6); border-radius: var(--radius-full); transition: width var(--motion-duration-md); } .quiz-progress__text { text-align: center; font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-top: var(--space-2); } .quiz-question { margin-bottom: var(--space-6); } .quiz-question__header { margin-bottom: var(--space-4); } .quiz-question__number { font-size: var(--text-sm); color: var(--primary); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); } .quiz-question__title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); } .quiz-question__subtitle { color: var(--ctx-text-muted, var(--gray-600)); } .quiz-options { display: flex; flex-direction: column; gap: var(--space-3); } .quiz-option { display: block; cursor: pointer; } .quiz-option__card { padding: var(--space-4); background: var(--ctx-surface, var(--white)); border: 2px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); transition: var(--motion-duration-sm); } .quiz-option:hover .quiz-option__card { border-color: var(--primary, #3b82f6); } .quiz-option input:checked + .quiz-option__card { border-color: var(--primary, #3b82f6); background: var(--primary-light, #dbeafe); } .quiz-option__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); } .quiz-option__text { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .quiz-nav, .quiz-navigation { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); } .quiz-results { text-align: center; padding: var(--space-8); } .quiz-results__header { margin-bottom: var(--space-6); } .quiz-results__icon { width: 80px; height: 80px; margin: 0 auto var(--space-4); color: var(--primary); } .quiz-results__title { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); } .quiz-results__subtitle { font-size: var(--text-lg); color: var(--ctx-text-muted, var(--gray-600)); } .quiz-results__score { font-size: var(--text-5xl); font-weight: var(--font-weight-bold); color: var(--primary); margin: var(--space-6) 0; } .quiz-results__message { font-size: var(--text-lg); margin-bottom: var(--space-6); } .quiz-results__content { text-align: left; max-width: 600px; margin: 0 auto; } .quiz-results__cta { margin-top: var(--space-6); } .quiz-results__actions { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); } .quiz-result-badge { display: inline-block; padding: var(--space-2) var(--space-4); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); border-radius: var(--radius-full); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); } .quiz-result-card { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6); } .quiz-result-description { font-size: var(--text-lg); line-height: var(--line-height-relaxed); } .quiz-result-section { margin-bottom: var(--space-6); } .quiz-summary { background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-6); } .quiz-summary__item { display: flex; justify-content: space-between; padding: var(--space-2) 0; } .quiz-summary__label { color: var(--ctx-text-muted, var(--gray-600)); } .quiz-summary__value { font-weight: var(--font-weight-semibold); } .quiz-summary__value--correct { color: var(--success); } .quiz-summary__value--incorrect { color: var(--error); } .quiz-review { margin-top: var(--space-8); } .quiz-review__toggle { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); cursor: pointer; width: 100%; margin-bottom: var(--space-4); } .quiz-review__list { display: flex; flex-direction: column; gap: var(--space-4); } .quiz-review__question { padding: var(--space-4); background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); } .quiz-review__answers { margin-top: var(--space-3); padding-left: var(--space-4); } .quiz-review__your-answer { margin-bottom: var(--space-2); } .quiz-review__correct-answer { color: var(--success); font-weight: var(--font-weight-medium); } .quiz-review__explanation { margin-top: var(--space-3); padding: var(--space-3); background: var(--info-light); border-radius: var(--radius-md); font-size: var(--text-sm); } /* ----------------------------------------------------------------------------- * Sidebar Components * -------------------------------------------------------------------------- */ .sidebar-articles { display: flex; flex-direction: column; gap: var(--space-4); } .sidebar-article { display: flex; gap: var(--space-3); } .sidebar-article__image { width: 80px; height: 60px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; } .sidebar-article__image img { width: 100%; height: 100%; object-fit: cover; } .sidebar-article__content { flex: 1; min-width: 0; } .sidebar-article__title { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); margin-bottom: var(--space-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-article__meta { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-600)); } .sidebar-article__category { color: var(--primary); } .sidebar-list { display: flex; flex-direction: column; } .sidebar-list__item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--ctx-border, var(--gray-200)); font-size: var(--text-sm); } .sidebar-list__item:last-child { border-bottom: none; } .sidebar-list__count { padding: var(--space-1) var(--space-2); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-full); font-size: var(--text-xs); } /* Contact Info List (for contact page sidebar) */ .contact-info-list { display: flex; flex-direction: column; gap: var(--space-4); } .contact-info-item { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .contact-info-item:last-child { border-bottom: none; padding-bottom: 0; } .contact-info-item__icon { flex-shrink: 0; color: var(--primary, #3b82f6); } .contact-info-item__content { flex: 1; min-width: 0; } .contact-info-item__title { display: block; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); color: var(--ctx-text); } .contact-info-item__text { font-size: var(--text-sm); color: var(--ctx-text-muted); } .contact-info-item__text a { color: var(--primary, #3b82f6); text-decoration: none; } .contact-info-item__text a:hover { text-decoration: underline; } /* ----------------------------------------------------------------------------- * Spec / Misc Components * -------------------------------------------------------------------------- */ .spec-item { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--ctx-border, var(--gray-200)); font-size: var(--text-sm); } .spec-item:last-child { border-bottom: none; } .spec-item__label { color: var(--ctx-text-muted, var(--gray-600)); } .spec-item__value { font-weight: var(--font-weight-medium); } .specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (max-width: 639px) { .specs-grid { grid-template-columns: 1fr; } } .pros-cons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } @media (max-width: 639px) { .pros-cons { grid-template-columns: 1fr; } } .starter-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-medium); } .starter-badge--primary { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } /* ----------------------------------------------------------------------------- * Step Navigation & Progress * -------------------------------------------------------------------------- */ .step-navigation { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-lg); margin-top: var(--space-8); } .step-navigation__label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .step-navigation__label-mobile { display: none; } .step-navigation__label-desktop { display: block; } @media (max-width: 639px) { .step-navigation__label-mobile { display: block; } .step-navigation__label-desktop { display: none; } } .step-progress { padding: var(--space-4); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-lg); margin-bottom: var(--space-6); } .step-progress__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .step-progress__step-number { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: var(--text-sm); } .step-progress__step-title { font-weight: var(--font-weight-semibold); } .step-progress__label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-2); } .step-progress__bar { height: 8px; background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-full); overflow: hidden; } .step-progress__fill { height: 100%; background: var(--primary, #3b82f6); border-radius: var(--radius-full); transition: width var(--motion-duration-md); } .step-progress__duration { font-size: var(--text-xs); color: var(--ctx-text-faint); margin-top: var(--space-2); } .step-progress__steps { display: flex; gap: var(--space-2); margin-top: var(--space-3); } /* ----------------------------------------------------------------------------- * Misc * -------------------------------------------------------------------------- */ .success-indicator { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--success-light); border-radius: var(--radius-lg); } .success-indicator__icon { width: 24px; height: 24px; color: var(--success); flex-shrink: 0; } .success-indicator__content { flex: 1; } .supplement-card { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); padding: var(--space-4); } .supplement-card__badge { display: inline-block; padding: var(--space-1) var(--space-2); background: var(--primary-light, #dbeafe); color: var(--primary-dark, #1e40af); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); } .supplement-card__content { font-size: var(--text-sm); } .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ============================================================================= * CSS FIX: Missing Component Styles (PHP-CSS Alignment) * Fixes class naming mismatches between partials and CSS * ============================================================================= */ /* ----------------------------------------------------------------------------- * Cards Grid Section (Wrapper) * PHP: sections/cards-grid.php * -------------------------------------------------------------------------- */ .cards-grid-section { padding: var(--space-16) 0; } .cards-grid-section--default { background: var(--ctx-bg, var(--white)); } .cards-grid-section--alt { background: var(--ctx-bg-section, var(--gray-100)); } .cards-grid-section--dark { background: var(--surface-dark-default, var(--black-deep)); color: var(--on-surface-dark, var(--cream)); } /* Cards Grid Column Variants - Mobile-first (PHP uses --cols-X, CSS had --X) */ /* 1 column default, multi-column on tablet+ */ .cards-grid--masonry > .card { break-inside: avoid; margin-bottom: var(--space-6); } @media (min-width: 768px) { .cards-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .cards-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .cards-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } .cards-grid--featured > .card:first-child { grid-column: span 2; } .cards-grid--masonry { columns: 3; column-gap: var(--space-6); } } /* Cards Grid Layout Variants */ .cards-grid--default { /* Base grid, no special treatment */ } .cards-grid--slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-6); padding-bottom: var(--space-4); } .cards-grid--slider > .card { flex: 0 0 300px; scroll-snap-align: start; } .cards-grid--stacked > .card { margin-top: calc(-1 * var(--space-4)); position: relative; } .cards-grid--stacked > .card:first-child { margin-top: 0; } /* Section CTA */ .section__cta { margin-top: var(--space-8); text-align: center; } .section-header--left { text-align: left; } .section-header--left .section__subtitle { margin-left: 0; margin-right: 0; } /* ============================================================================= * Carousel * Partial: media/carousel.php * Multi-slide carousel for images, cards, and mixed content * ============================================================================= */ .carousel-section { padding: var(--space-16) 0; } .carousel { position: relative; overflow-x: hidden; overflow-y: visible; padding-bottom: var(--space-12); } .carousel__viewport { overflow: hidden; width: 100%; } .carousel__track { display: flex; transition: transform var(--motion-duration-normal) var(--motion-ease-out); will-change: transform; } .carousel__slide { flex: 0 0 100%; min-width: 0; opacity: 0.5; transition: opacity var(--motion-duration-normal) var(--motion-ease-out); } .carousel__slide--active { opacity: 1; } /* Carousel Image Wrapper */ .carousel__image-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); } .carousel__image { width: 100%; height: 100%; object-fit: cover; } .carousel__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-4) var(--space-6); background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%); color: var(--white); font-size: var(--text-sm); } /* Carousel Navigation Arrows */ .carousel__prev, .carousel__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--ctx-bg-elevated, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); color: var(--ctx-text, var(--gray-900)); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: all var(--motion-duration-fast) var(--motion-ease-out); } .carousel__prev { left: var(--space-4); } .carousel__next { right: var(--space-4); } .carousel__prev:hover, .carousel__next:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .carousel__prev:focus-visible, .carousel__next:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .carousel__prev:disabled, .carousel__next:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Carousel Pagination Dots */ .carousel__pagination { display: flex; justify-content: center; gap: 0; /* Touch areas (44px) provide natural spacing */ margin-top: var(--space-6); } /* Carousel dot: 44x44px touch target (WCAG 2.5.5), visual dot 10px via ::after */ .carousel__dot { position: relative; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } /* Visual dot (10px) centered in 44px container */ .carousel__dot::after { content: ''; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--ctx-border, var(--gray-300)); transition: all var(--motion-duration-fast) var(--motion-ease-out); } .carousel__dot:hover::after { background: var(--ctx-text-muted, var(--gray-500)); } .carousel__dot--active::after { background: var(--primary); transform: scale(1.2); } .carousel__dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-full); } /* Carousel Variants */ .carousel--fade .carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--motion-duration-normal) var(--motion-ease-out); } .carousel--fade .carousel__slide--active { position: relative; opacity: 1; } .carousel--cards .carousel__slide { flex: 0 0 calc(100% / var(--slides-per-view, 1)); padding: 0 var(--space-3); } .carousel--cards .carousel__track { margin: 0 calc(-1 * var(--space-3)); } /* Carousel Gap Variants */ .carousel--gap-none .carousel__slide { padding: 0; } .carousel--gap-none .carousel__track { margin: 0; gap: 0; } .carousel--gap-xs .carousel__slide { padding: 0 var(--space-1); } .carousel--gap-sm .carousel__slide { padding: 0 var(--space-2); } .carousel--gap-md .carousel__slide { padding: 0 var(--space-3); } .carousel--gap-lg .carousel__slide { padding: 0 var(--space-4); } .carousel--gap-xl .carousel__slide { padding: 0 var(--space-6); } /* Carousel Center Mode: Central slide emphasized, side slides smaller */ .carousel--center-mode { --center-scale: 1.05; --side-scale: 0.9; --side-opacity: 0.7; } .carousel--center-mode .carousel__viewport { overflow: visible; } .carousel--center-mode .carousel__slide { transition: transform var(--motion-duration-normal, 0.4s) var(--motion-ease-out, ease-out), opacity var(--motion-duration-normal, 0.4s) var(--motion-ease-out, ease-out); transform: scale(var(--side-scale)); opacity: var(--side-opacity); } .carousel--center-mode .carousel__slide--active { transform: scale(var(--center-scale)); opacity: 1; z-index: 2; } /* Center mode: Lift the central card visually */ .carousel--center-mode .carousel__slide--active .card { box-shadow: var(--shadow-xl); } /* Center mode responsive: reduce scale difference on mobile */ @media (max-width: 767px) { .carousel--center-mode { --center-scale: 1; --side-scale: 0.95; --side-opacity: 0.8; } } /* Carousel Responsive */ @media (max-width: 767px) { .carousel__prev, .carousel__next { width: 40px; height: 40px; } .carousel__prev { left: var(--space-2); } .carousel__next { right: var(--space-2); } .carousel__pagination { margin-top: var(--space-4); } .carousel--cards .carousel__slide { flex: 0 0 85%; } } /* Carousel Reduced Motion */ @media (prefers-reduced-motion: reduce) { .carousel__track, .carousel__slide { transition: none; } } /* ----------------------------------------------------------------------------- * Lightbox Component * PHP: media/lightbox.php * JS: assets/js/components/lightbox.js * -------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: var(--z-modal, 300); display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.95); } .lightbox[hidden] { display: none; } .lightbox__overlay { position: absolute; inset: 0; cursor: pointer; } .lightbox__container { position: relative; display: flex; flex-direction: column; height: 100%; z-index: 1; } .lightbox__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); color: var(--white); } .lightbox__counter { font-size: var(--text-sm); font-weight: var(--font-weight-medium); opacity: 0.8; } .lightbox__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: none; color: var(--white); cursor: pointer; border-radius: var(--radius-full); transition: background var(--motion-duration-xs) var(--motion-ease-out); } .lightbox__close:hover, .lightbox__close:focus { background: rgba(255, 255, 255, 0.1); } .lightbox__close:focus { outline: 2px solid var(--white); outline-offset: 2px; } .lightbox__content { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 0; padding: 0 var(--space-16); } .lightbox__slides { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .lightbox__slide { display: none; width: 100%; height: 100%; } .lightbox__slide.is-active { display: flex; align-items: center; justify-content: center; } .lightbox__image-wrapper { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; } .lightbox__image { max-width: 100%; max-height: calc(100vh - 200px); object-fit: contain; border-radius: var(--radius-md); } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: rgba(255, 255, 255, 0.1); border: none; color: var(--white); cursor: pointer; border-radius: var(--radius-full); transition: background var(--motion-duration-xs) var(--motion-ease-out); z-index: 10; } .lightbox__nav:hover, .lightbox__nav:focus { background: rgba(255, 255, 255, 0.2); } .lightbox__nav:focus { outline: 2px solid var(--white); outline-offset: 2px; } .lightbox__prev { left: var(--space-4); } .lightbox__next { right: var(--space-4); } .lightbox__footer { padding: var(--space-4); text-align: center; } .lightbox__caption { display: none; color: var(--white); font-size: var(--text-sm); opacity: 0.8; margin: 0; } .lightbox__caption.is-active { display: block; } .lightbox__thumbnails { padding: var(--space-4); overflow-x: auto; -webkit-overflow-scrolling: touch; } .lightbox__thumbnails-track { display: flex; gap: var(--space-2); justify-content: center; } .lightbox__thumb { flex-shrink: 0; width: 60px; height: 60px; padding: 0; background: transparent; border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; overflow: hidden; opacity: 0.6; transition: opacity var(--motion-duration-xs) var(--motion-ease-out), border-color var(--motion-duration-xs) var(--motion-ease-out); } .lightbox__thumb:hover, .lightbox__thumb:focus { opacity: 0.9; } .lightbox__thumb.is-active { opacity: 1; border-color: var(--white); } .lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 767px) { .lightbox__content { padding: 0 var(--space-4); } .lightbox__nav { width: 40px; height: 40px; } .lightbox__prev { left: var(--space-2); } .lightbox__next { right: var(--space-2); } .lightbox__thumb { width: 50px; height: 50px; } } /* ----------------------------------------------------------------------------- * Before/After Image Comparison * PHP: media/before-after.php * JS: assets/js/components/before-after.js * -------------------------------------------------------------------------- */ .before-after { --ba-handle-size: 44px; --ba-handle-color: var(--ctx-bg, #fff); --ba-handle-border: var(--color-primary, #3b82f6); --ba-line-width: 3px; --ba-label-bg: rgba(0, 0, 0, 0.7); --ba-label-color: #fff; position: relative; width: 100%; user-select: none; touch-action: pan-y; overflow: hidden; border-radius: var(--radius-md, 8px); } .before-after--vertical { touch-action: pan-x; } .before-after__container { position: relative; width: 100%; } .before-after__before, .before-after__after { position: relative; width: 100%; } .before-after__before { position: absolute; inset: 0; overflow: hidden; z-index: 2; } .before-after__image { display: block; width: 100%; height: auto; object-fit: cover; pointer-events: none; } .before-after__label { position: absolute; padding: 0.5rem 1rem; background: var(--ba-label-bg); color: var(--ba-label-color); font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-sm, 4px); opacity: 0; transition: opacity var(--motion-duration-xs) var(--motion-ease-out); } .before-after:hover .before-after__label, .before-after:focus-within .before-after__label { opacity: 1; } .before-after--horizontal .before-after__label--before { top: 1rem; left: 1rem; } .before-after--horizontal .before-after__label--after { top: 1rem; right: 1rem; } .before-after--vertical .before-after__label--before { top: 1rem; left: 50%; transform: translateX(-50%); } .before-after--vertical .before-after__label--after { bottom: 1rem; left: 50%; transform: translateX(-50%); } .before-after__slider { position: absolute; z-index: 10; cursor: ew-resize; } .before-after--horizontal .before-after__slider { top: 0; bottom: 0; width: var(--ba-handle-size); transform: translateX(-50%); } .before-after--vertical .before-after__slider { left: 0; right: 0; height: var(--ba-handle-size); transform: translateY(-50%); cursor: ns-resize; } .before-after__line { position: absolute; background: var(--ba-handle-border); box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } .before-after--horizontal .before-after__line { top: 0; bottom: 0; left: 50%; width: var(--ba-line-width); transform: translateX(-50%); } .before-after--vertical .before-after__line { left: 0; right: 0; top: 50%; height: var(--ba-line-width); transform: translateY(-50%); } .before-after__handle { position: absolute; width: var(--ba-handle-size); height: var(--ba-handle-size); background: var(--ba-handle-color); border: 3px solid var(--ba-handle-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: transform var(--motion-duration-xs) var(--motion-ease-out), box-shadow var(--motion-duration-xs) var(--motion-ease-out); } .before-after--horizontal .before-after__handle, .before-after--vertical .before-after__handle { top: 50%; left: 50%; transform: translate(-50%, -50%); } .before-after__handle:hover, .before-after__slider:focus .before-after__handle { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .before-after__slider:focus { outline: none; } .before-after__slider:focus .before-after__handle { outline: 2px solid var(--color-primary, #3b82f6); outline-offset: 2px; } .before-after__handle svg { color: var(--ba-handle-border); width: 20px; height: 20px; } @media (prefers-reduced-motion: reduce) { .before-after__handle, .before-after__label { transition: none; } } /* ----------------------------------------------------------------------------- * Image Hotspots * PHP: media/image-hotspots.php * JS: assets/js/components/image-hotspots.js * -------------------------------------------------------------------------- */ .image-hotspots { position: relative; display: inline-block; max-width: 100%; } .image-hotspots__container { position: relative; display: block; } .image-hotspots__image { display: block; width: 100%; height: auto; border-radius: var(--radius-md, 8px); } .image-hotspots__point { position: absolute; transform: translate(-50%, -50%); z-index: 10; } .image-hotspots__trigger { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--color-primary, #3b82f6); color: var(--color-text-on-primary, #fff); border: 2px solid #fff; border-radius: 50%; cursor: pointer; font-size: 0.875rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: transform var(--motion-duration-xs) var(--motion-ease-out), box-shadow var(--motion-duration-xs) var(--motion-ease-out); } .image-hotspots__trigger:hover, .image-hotspots__trigger:focus { transform: scale(1.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .image-hotspots__trigger:focus { outline: 2px solid var(--color-primary, #3b82f6); outline-offset: 2px; } .image-hotspots__pulse { position: absolute; inset: -4px; border: 2px solid var(--color-primary, #3b82f6); border-radius: 50%; animation: hotspot-pulse 2s infinite; } @keyframes hotspot-pulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } .image-hotspots__tooltip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 200px; max-width: 300px; padding: 1rem; background: var(--ctx-bg-elevated, #fff); border: 1px solid var(--ctx-border, #e5e7eb); border-radius: var(--radius-md, 8px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); z-index: 100; } .image-hotspots__tooltip[hidden] { display: none; } .image-hotspots__arrow { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--ctx-bg-elevated, #fff); border-right: 1px solid var(--ctx-border, #e5e7eb); border-bottom: 1px solid var(--ctx-border, #e5e7eb); } .image-hotspots__title { font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; color: var(--ctx-text, #1a1a1a); } .image-hotspots__content { font-size: 0.9375rem; line-height: 1.5; color: var(--ctx-text-muted, #64748b); } .image-hotspots__link { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--color-primary, #3b82f6); text-decoration: none; } .image-hotspots__link:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .image-hotspots__trigger, .image-hotspots__pulse { animation: none; transition: none; } } /* ----------------------------------------------------------------------------- * Auto TOC (Table of Contents) * PHP: navigation/auto-toc.php * JS: assets/js/components/auto-toc.js * -------------------------------------------------------------------------- */ .auto-toc { background: var(--ctx-bg-elevated, #f9fafb); border: 1px solid var(--ctx-border, #e5e7eb); border-radius: var(--radius-md, 8px); padding: 1.25rem; } .auto-toc__title { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; color: var(--ctx-text, #1a1a1a); } .auto-toc__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; margin: 0 0 1rem; background: none; border: none; cursor: pointer; font: inherit; text-align: left; } .auto-toc__toggle .auto-toc__title { margin: 0; } .auto-toc__icon { transition: transform var(--motion-duration-xs) var(--motion-ease-out); } .auto-toc__toggle[aria-expanded="false"] .auto-toc__icon { transform: rotate(-90deg); } .auto-toc__toggle[aria-expanded="false"] + .auto-toc__content { display: none; } .auto-toc__list, .auto-toc__sublist { margin: 0; padding: 0; list-style: none; } .auto-toc__sublist { margin-left: 1rem; margin-top: 0.5rem; } .auto-toc__item { margin-bottom: 0.5rem; } .auto-toc__link { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--ctx-text-muted, #64748b); text-decoration: none; font-size: 0.9375rem; line-height: 1.4; transition: color var(--motion-duration-xs) var(--motion-ease-out); } .auto-toc__link:hover, .auto-toc__link:focus { color: var(--color-primary, #3b82f6); } .auto-toc__number { font-weight: 500; color: var(--color-primary, #3b82f6); min-width: 1.5rem; } .auto-toc__item--level-1 > .auto-toc__link { font-weight: 500; } .auto-toc__item--level-3 > .auto-toc__link { font-size: 0.875rem; } /* Active state (requires JS intersection observer) */ .auto-toc__link.is-active { color: var(--color-primary, #3b82f6); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .auto-toc__icon { transition: none; } } /* ----------------------------------------------------------------------------- * Reading Progress Indicator * PHP: navigation/reading-progress.php * JS: assets/js/components/reading-progress.js * -------------------------------------------------------------------------- */ .reading-progress { position: fixed; left: 0; right: 0; width: 100%; height: var(--bar-height, 3px); background: var(--bar-color, var(--color-primary)); transform-origin: left center; transform: scaleX(var(--progress, 0)); transition: transform var(--motion-duration-xs) var(--motion-ease-out), opacity var(--motion-duration-sm) var(--motion-ease-out); z-index: var(--bar-z-index, 9999); opacity: 0; pointer-events: none; } .reading-progress--top { top: 0; } .reading-progress--bottom { bottom: 0; } .reading-progress.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .reading-progress { transition: none; } } /* ----------------------------------------------------------------------------- * Newsletter Component (Complete) * PHP: forms/newsletter.php * -------------------------------------------------------------------------- */ .newsletter-section { padding: var(--space-16) 0; } .newsletter-section--default { background: var(--ctx-bg, var(--white)); } .newsletter-section--alt { background: var(--ctx-bg-section, var(--gray-100)); } .newsletter-section--dark { background: var(--surface-dark-default, var(--black-deep)); color: var(--on-surface-dark, var(--cream)); } .newsletter-section--gradient { background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, var(--primary-dark, #1e40af) 100%); color: var(--white); } .newsletter-section--primary { background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); } .newsletter { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-xl); padding: var(--space-8); text-align: center; max-width: 600px; margin: 0 auto; } .newsletter--default { /* Standard centered box layout */ } .newsletter--inline { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); max-width: none; text-align: left; flex-wrap: wrap; } .newsletter--inline .newsletter__title { font-size: var(--text-lg); margin: 0; white-space: nowrap; } .newsletter--minimal { background: transparent; border: none; padding: 0; text-align: left; } /* Mobile-first: 1 column default, 2 columns on tablet+ */ .newsletter--split { display: grid; grid-template-columns: 1fr; gap: var(--space-8); text-align: left; max-width: 900px; align-items: center; } @media (min-width: 768px) { .newsletter--split { grid-template-columns: 1fr 1fr; } } .newsletter--centered { text-align: center; background: linear-gradient(135deg, var(--primary-light, #dbeafe) 0%, var(--ctx-bg) 100%); } .newsletter--banner { max-width: none; background: var(--surface-dark-default, var(--black-deep)); color: var(--on-surface-dark, var(--cream)); border: none; border-radius: 0; padding: var(--space-6); } .newsletter__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; } .newsletter__content { flex: 1; min-width: 250px; } .newsletter__title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); color: var(--ctx-text, var(--gray-900)); } .newsletter__subtitle { font-size: var(--text-base); color: var(--ctx-text-muted, var(--gray-600)); margin-bottom: var(--space-4); } .newsletter__bonus { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--primary); margin-bottom: var(--space-6); padding: var(--space-2) var(--space-3); background: var(--primary-light, #dbeafe); border-radius: var(--radius-full); } .newsletter__bonus svg { flex-shrink: 0; } .newsletter__bonus--centered { justify-content: center; margin-top: var(--space-4); margin-bottom: 0; } .newsletter__form-wrapper { flex: 1; min-width: 280px; } .newsletter__form { display: flex; gap: var(--space-3); flex-wrap: wrap; } .newsletter__form--inline { flex-wrap: nowrap; } .newsletter__input { flex: 1; min-width: 200px; padding: var(--space-3) var(--space-4); font-size: var(--text-base); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); background: var(--ctx-surface, var(--white)); color: var(--ctx-text, var(--gray-900)); transition: var(--motion-duration-sm); } .newsletter__input:focus-visible { outline: none; /* Replaced by border + box-shadow for contained input look */ border-color: var(--ctx-focus-ring-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.2); } .newsletter--banner .newsletter__input { background: var(--surface-light-default, var(--white)); color: var(--on-surface-light, var(--black)); } .newsletter__disclaimer { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-600)); margin-top: var(--space-3); } .newsletter--split .newsletter__disclaimer { margin-top: var(--space-2); } .newsletter__success { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6); text-align: center; color: var(--success); } .newsletter__success svg { width: 48px; height: 48px; } .newsletter__success p { font-size: var(--text-lg); font-weight: var(--font-weight-medium); } /* Newsletter mobile adjustments - flex items stack on mobile (UX choice) */ @media (max-width: 767px) { .newsletter--inline { flex-direction: column; text-align: center; } .newsletter__inner { flex-direction: column; text-align: center; } .newsletter__form { flex-direction: column; } .newsletter__form .btn { width: 100%; } } /* ----------------------------------------------------------------------------- * Feature Grid Section (Wrapper - extends existing) * -------------------------------------------------------------------------- */ .feature-grid-section--default { background: var(--ctx-bg, var(--white)); } .feature-grid-section--gradient { background: linear-gradient(135deg, var(--surface-dark-default, var(--black-deep)) 0%, var(--surface-dark-container, var(--black-soft)) 100%); color: var(--on-surface-dark, var(--cream)); } /* Feature Grid Column Variants - Mobile-first (ensure --cols-X works) */ /* Note: 1 column default, multi-column definitions in earlier @media (min-width: 768px) block */ /* Feature Grid Variants */ .feature-grid--icon-top .feature-grid__item { text-align: center; } .feature-grid--icon-top .feature-grid__icon { margin: 0 auto var(--space-4); } .feature-grid--icon-left .feature-grid__item { display: flex; gap: var(--space-4); text-align: left; } .feature-grid--icon-left .feature-grid__icon { flex-shrink: 0; } .feature-grid--numbered .feature-grid__number { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); } .feature-grid--boxed .feature-grid__item { background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-lg); padding: var(--space-6); transition: var(--motion-duration-sm); } .feature-grid--boxed .feature-grid__item:hover { border-color: var(--primary, #3b82f6); box-shadow: var(--shadow-lg); } .feature-grid--minimal .feature-grid__item { padding: var(--space-4); } .feature-grid--alternating .feature-grid__item:nth-child(even) { flex-direction: row-reverse; } .feature-grid--sm .feature-grid__icon { width: 32px; height: 32px; } .feature-grid--md .feature-grid__icon { width: 48px; height: 48px; } .feature-grid--lg .feature-grid__icon { width: 64px; height: 64px; } .feature-grid__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--primary); font-weight: var(--font-weight-medium); margin-top: var(--space-3); transition: var(--motion-duration-sm); } .feature-grid__link:hover { gap: var(--space-3); } /* ----------------------------------------------------------------------------- * Additional Card Variants & Fixes * -------------------------------------------------------------------------- */ .card--sm { padding: var(--space-4); } .card--lg { padding: var(--space-8); } .card--cta .card__icon { margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; color: var(--primary); } .card--cta .card__features { text-align: left; margin: var(--space-6) 0; } .card--stat { text-align: center; padding: var(--space-6); } .card--stat .card__value { font-size: var(--text-4xl); font-weight: var(--font-weight-bold); color: var(--primary); line-height: var(--line-height-none); } .card--stat .card__label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); margin-top: var(--space-2); } .card--stat .card__trend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); margin-top: var(--space-2); } .card--stat .card__icon { display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); color: var(--primary); } .card--stat .card__trend--up { color: var(--success); } .card--stat .card__trend--down { color: var(--danger); } .card--stat .card__trend--neutral { color: var(--ctx-text-muted, var(--gray-600)); } /* Impact Card: Photo + colored stat band + content * For ONG, institutional, annual reports - showcasing impact metrics */ .card--impact { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-default, var(--white)); box-shadow: var(--shadow-md); } .card--impact .card__image { aspect-ratio: 3/2; } .card--impact .card__image img { width: 100%; height: 100%; object-fit: cover; } .card--impact .card__stat-band { --stat-color: var(--gray-600); background: var(--stat-color); padding: var(--space-3) var(--space-4); text-align: center; } .card--impact .card__stat-value { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; } .card--impact .card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; } .card--impact .card__title { text-transform: uppercase; font-size: var(--text-sm); font-weight: var(--font-semibold); letter-spacing: 0.05em; margin-bottom: var(--space-2); } .card--impact .card__text { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); line-height: var(--line-height-relaxed); flex: 1; } .card--impact .card__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--stat-color, var(--primary)); text-decoration: none; margin-top: var(--space-4); transition: gap var(--motion-duration-fast, 0.2s) var(--motion-ease-out, ease-out); } .card--impact .card__link:hover { gap: var(--space-3); } .card--impact .card__link svg { flex-shrink: 0; } /* Color presets for impact stat band */ .card--impact[data-stat-color="gray"] { --stat-color: #5c6670; } .card--impact[data-stat-color="teal"] { --stat-color: #008b8b; } .card--impact[data-stat-color="magenta"] { --stat-color: #c71585; } .card--impact[data-stat-color="primary"] { --stat-color: var(--primary); } /* Overlay Card: Image background with content overlay * This variant manages its own visual style - DNA surface classes are bypassed * Explicit overrides ensure correct rendering even if other classes are present * Note: transform NOT blocked - allows combining with hover-lift/scale if desired */ .card--overlay { position: relative; overflow: hidden; background: transparent; border: none; box-shadow: none; min-height: 280px; display: flex; align-items: flex-end; } .card--overlay .card__image { position: absolute; inset: 0; z-index: 0; /* Override base .card__image properties that conflict with absolute positioning */ aspect-ratio: unset; background: transparent; } .card--overlay .card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-duration-normal) var(--motion-ease-out); } .card--overlay:hover .card__image img { transform: scale(1.05); } .card--overlay .card__body { position: relative; z-index: 2; width: 100%; padding: var(--space-6); background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%); color: var(--white); } .card--overlay .card__title { color: var(--white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .card--overlay .card__text { color: rgba(255, 255, 255, 0.9); } .card--overlay .card__badge { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 3; } /* Logo overlay for case study cards (top-right to not conflict with badge) */ .card--overlay .card__logo { position: absolute; top: var(--space-4); right: var(--space-4); max-height: 2rem; max-width: 6rem; width: auto; object-fit: contain; filter: brightness(0) invert(1); z-index: 3; } /* Stat overlay for case study cards (bottom-left hero stat) */ .card--overlay .card__stat { position: absolute; bottom: var(--space-6); left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); z-index: 3; } .card--overlay .card__stat-value { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--white); line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .card--overlay .card__stat-label { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Title Badge Style: Title as floating badge at bottom of card */ .card--title-badge .card__title, .card--title-badge-offset .card__title { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); background: var(--surface-default, var(--white)); color: var(--on-surface, var(--gray-900)); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; z-index: 5; text-shadow: none; } /* Badge Offset: Title overflows card bottom edge */ .card--title-badge-offset .card__title { bottom: calc(-1 * var(--space-3)); } /* When title is badge style, hide the default overlay content area */ .card--title-badge .card__content, .card--title-badge-offset .card__content { display: none; } /* Link Card: Clickable card with cursor pointer and hover state */ .card--link { cursor: pointer; text-decoration: none; color: inherit; } .card--link:hover { text-decoration: none; } /* Numbered Card: Card with visible number indicator */ .card--numbered { position: relative; } .card--numbered::before { content: attr(data-number); position: absolute; top: var(--space-4); left: var(--space-4); width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-weight-bold); z-index: 5; } .card--numbered .card__body { padding-top: var(--space-12); } /* Minimal Card: Transparent with no decoration */ .card--minimal { background: transparent; border: none; box-shadow: none; padding: 0; } /* Horizontal Reverse: Content left, image right */ .card--horizontal-reverse { display: flex; flex-direction: row-reverse; align-items: stretch; } .card--horizontal-reverse .card__image { flex: 0 0 var(--comp-card-image-width, 40%); } .card--horizontal-reverse .card__body { flex: 1; padding: var(--space-6); } @media (max-width: 639px) { .card--horizontal-reverse { flex-direction: column; } .card--horizontal-reverse .card__image { flex: none; } } /* Stacked cards effect */ .card--stacked { position: relative; } .card--stacked::before, .card--stacked::after { content: ''; position: absolute; left: 10px; right: 10px; height: 100%; background: var(--ctx-surface, var(--white)); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--card-radius, var(--radius-xl)); z-index: -1; } .card--stacked::before { bottom: -8px; opacity: 0.7; } .card--stacked::after { bottom: -16px; left: var(--space-5); right: var(--space-5); opacity: 0.4; } /* Feature Card: Icon + title + description */ .card--feature { text-align: var(--comp-feature-align, center); padding: var(--comp-feature-padding, var(--space-6)); } .card--feature .card__body { padding: 0; /* Card already has padding */ } .card--feature .card__icon { font-size: var(--comp-feature-icon-size, 2.5rem); margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: center; color: var(--primary, #3b82f6); } /* Feature card icon on dark backgrounds - use lighter color for visibility */ .section--dark .card--feature .card__icon, [data-theme="dark"] .card--feature .card__icon { color: var(--primary-light, var(--ctx-text, var(--gray-900))); } .card--feature .card__title { font-size: var(--comp-feature-title-size, var(--text-lg)); margin-bottom: var(--space-2); } .card--feature .card__text { color: var(--ctx-text-muted, var(--gray-600)); font-size: var(--text-sm); } .card--feature .card__link { display: inline-block; margin-top: var(--space-4); color: var(--primary); font-weight: var(--font-weight-medium); } /* Pricing Card */ .card--pricing { text-align: center; padding: var(--comp-pricing-padding, var(--space-8)); position: relative; overflow: hidden; } .card--pricing.card--featured { border-color: var(--primary, #3b82f6); box-shadow: var(--comp-pricing-featured-shadow, 0 8px 32px rgba(0, 0, 0, 0.15)); } .card--pricing .card__ribbon { position: absolute; top: var(--space-4); right: calc(-1 * var(--space-8)); background: var(--primary, #3b82f6); color: var(--on-primary, var(--white)); padding: var(--space-1) var(--space-10); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); transform: rotate(45deg); text-transform: uppercase; } .card--pricing .card__header { margin-bottom: var(--space-6); } .card--pricing .card__title { font-size: var(--text-xl); margin-bottom: var(--space-2); } .card--pricing .card__subtitle { color: var(--ctx-text-muted, var(--gray-600)); font-size: var(--text-sm); } .card--pricing .card__price { margin-bottom: var(--space-6); } .card--pricing .card__price-value { font-size: var(--comp-pricing-price-size, var(--text-4xl)); font-weight: var(--font-weight-bold); color: var(--primary, #3b82f6); } .card--pricing .card__price-period { display: block; font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .card--pricing .card__features { list-style: none; padding: 0; margin: 0 0 var(--space-6); text-align: left; } .card--pricing .card__feature { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--ctx-border-subtle); } .card--pricing .card__feature:last-child { border-bottom: none; } .card--pricing .card__feature-icon { flex-shrink: 0; color: var(--success); } .card--pricing .card__feature--excluded { color: var(--ctx-text-muted, var(--gray-600)); text-decoration: line-through; } .card--pricing .card__feature--excluded .card__feature-icon { color: var(--ctx-text-muted, var(--gray-600)); } /* Testimonial Card */ .card--testimonial { padding: var(--comp-testimonial-padding, var(--space-6)); text-align: center; } .card--testimonial .card__rating { display: flex; justify-content: center; gap: var(--space-1); margin-bottom: var(--space-4); } .card--testimonial .card__star { color: var(--ctx-text-muted, var(--gray-600)); } .card--testimonial .card__star--filled { color: var(--warning); } .card--testimonial .card__quote { font-size: var(--comp-testimonial-quote-size, var(--text-lg)); font-style: italic; line-height: var(--line-height-relaxed); margin: 0 0 var(--space-6); color: var(--ctx-text, var(--gray-900)); } .card--testimonial .card__quote::before { content: '"'; font-size: var(--text-4xl); color: var(--primary, #3b82f6); opacity: 0.3; display: block; line-height: var(--line-height-none); margin-bottom: var(--space-2); } .card--testimonial .card__author { display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .card--testimonial .card__avatar { width: var(--comp-testimonial-avatar-size, 48px); height: var(--comp-testimonial-avatar-size, 48px); border-radius: var(--radius-full); object-fit: cover; } .card--testimonial .card__author-info { text-align: left; } .card--testimonial .card__author-name { display: block; font-style: normal; font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); } .card--testimonial .card__author-title { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } /* Elevated Card - stronger shadow on hover, DNA-driven lift */ .card--elevated:hover { /* DNA-driven transform with stronger shadow for elevated surface */ transform: translateY(calc(var(--dna-hover-lift, -6px) * 1.33)) scale(var(--dna-hover-scale, 1)); box-shadow: inset 0 0 0 var(--card-border-width, 1px) var(--ctx-border, var(--gray-200)), var(--shadow-3xl), 0 0 var(--dna-hover-glow-spread, 0px) var(--dna-hover-glow-color, transparent); } /* Glass: Glassmorphism effect with backdrop blur * Uses box-shadow inset for border to avoid subpixel rendering artifacts * when combined with border-radius + overflow:hidden + transform */ .card--glass { background: color-mix(in srgb, var(--white) 18%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 10%, transparent), var(--shadow-2xl); } [data-theme="light"] .card--glass, .section--default .card--glass, .section--alt .card--glass { background: color-mix(in srgb, var(--white) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--black) 10%, transparent), var(--shadow-2xl); } /* Glass: Dark mode - glass effect with primary tint for brand coherence */ /* Increased intensity for better visibility on dark backgrounds */ [data-theme="dark"] .card--glass, .section--dark .card--glass, .section--cta .card--glass, .footer .card--glass { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary, #3b82f6) 15%, rgba(255, 255, 255, 0.12)), color-mix(in srgb, var(--primary, #3b82f6) 8%, rgba(255, 255, 255, 0.06)) ); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #3b82f6) 45%, rgba(255, 255, 255, 0.20)), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .card--glass:hover, .section--dark .card--glass:hover, .section--cta .card--glass:hover, .footer .card--glass:hover { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary, #3b82f6) 22%, rgba(255, 255, 255, 0.16)), color-mix(in srgb, var(--primary, #3b82f6) 12%, rgba(255, 255, 255, 0.08)) ); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #3b82f6) 60%, rgba(255, 255, 255, 0.25)), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 24px color-mix(in srgb, var(--primary, #3b82f6) 25%, transparent); } /* Outlined: No background, just colored border */ .card--outlined { background: transparent; border: 2px solid var(--primary, #3b82f6); box-shadow: none; } .card--outlined:hover { background: rgba(var(--primary-rgb), 0.05); box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.15); } /* Outlined: Dark mode - glass effect with primary tint for visibility + elegance */ [data-theme="dark"] .card--outlined, .section--dark .card--outlined, .section--cta .card--outlined, .footer .card--outlined { /* Subtle glass effect + primary color tint for brand warmth */ background: linear-gradient( 135deg, color-mix(in srgb, var(--primary, #3b82f6) 8%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--primary, #3b82f6) 4%, rgba(255, 255, 255, 0.03)) ); border: 2px solid var(--primary, #3b82f6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="dark"] .card--outlined:hover, .section--dark .card--outlined:hover, .section--cta .card--outlined:hover, .footer .card--outlined:hover { /* Intensify primary tint on hover */ background: linear-gradient( 135deg, color-mix(in srgb, var(--primary, #3b82f6) 15%, rgba(255, 255, 255, 0.10)), color-mix(in srgb, var(--primary, #3b82f6) 8%, rgba(255, 255, 255, 0.05)) ); border-color: var(--primary-hover, var(--primary, #3b82f6)); box-shadow: 0 8px 32px rgba(var(--primary-rgb, 59, 130, 246), 0.25), 0 0 0 1px rgba(var(--primary-rgb, 59, 130, 246), 0.1); } /* Gradient: Gradient background */ .card--gradient { background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, var(--primary-dark, #1e40af) 100%); border: none; color: var(--on-primary, var(--white)); } .card--gradient .card__title, .card--gradient .card__text { color: inherit; } .card--gradient:hover { box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.3); } /* ----------------------------------------------------------------------------- * Card Hover Modifiers * -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Card Size Modifiers * -------------------------------------------------------------------------- */ /* Compact: Less padding */ .card--compact { padding: var(--space-3); } .card--compact .card__body { padding: var(--space-3); } /* ----------------------------------------------------------------------------- * Card Layout Modifiers * -------------------------------------------------------------------------- */ /* Dark: Dark background card (for use on light sections) */ .card--dark { background: var(--surface-dark, var(--gray-900)); box-shadow: inset 0 0 0 var(--card-border-width, 1px) color-mix(in srgb, var(--white) 10%, transparent); } .card--dark .card__title { color: var(--white); } .card--dark .card__text { color: color-mix(in srgb, var(--white) 80%, transparent); } .card--dark:hover { background: var(--surface-dark-hover, var(--gray-800)); box-shadow: inset 0 0 0 var(--card-border-width, 1px) color-mix(in srgb, var(--white) 20%, transparent), var(--shadow-xl); } /* ============================================================================= * QUIZ COMPONENT * Interactive quiz with progress, questions, results * ============================================================================= */ .quiz-container { max-width: var(--quiz-max-width); margin: 0 auto; } .quiz-progress { height: var(--quiz-progress-height); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--quiz-progress-radius); margin-bottom: var(--space-8); overflow: hidden; } .quiz-progress__bar { height: 100%; background: linear-gradient(90deg, var(--primary, #3b82f6), var(--primary-hover, #2563eb)); border-radius: var(--quiz-progress-radius); transition: width var(--quiz-transition); } .quiz-question { background: var(--ctx-surface, var(--white)); border-radius: var(--quiz-question-radius); padding: var(--quiz-question-padding); margin-bottom: var(--space-6); display: none; box-shadow: var(--quiz-question-shadow); border: 1px solid var(--ctx-border, var(--gray-200)); } .quiz-question.active { display: block; animation: quizFadeIn var(--quiz-transition); } @keyframes quizFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .quiz-question__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); } .quiz-question__number { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); font-weight: var(--font-weight-medium); } .quiz-question__title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-6); line-height: var(--line-height-snug); color: var(--ctx-heading); } .quiz-options { display: flex; flex-direction: column; gap: var(--quiz-option-gap); } .quiz-option { background: var(--ctx-bg-section, var(--gray-100)); border: 2px solid var(--ctx-border, var(--gray-200)); border-radius: var(--quiz-option-radius); padding: var(--quiz-option-padding); cursor: pointer; transition: all var(--motion-duration-sm); display: flex; align-items: flex-start; gap: var(--quiz-option-gap); } .quiz-option:hover:not(.disabled) { border-color: var(--primary, #3b82f6); background: var(--primary-light, #dbeafe); } .quiz-option input[type="radio"] { margin-top: var(--space-1); cursor: pointer; accent-color: var(--primary, #3b82f6); } .quiz-option label { cursor: pointer; flex: 1; line-height: var(--line-height-normal); color: var(--ctx-text, var(--gray-900)); } .quiz-option.selected { border-color: var(--primary, #3b82f6); background: var(--primary-light, #dbeafe); } .quiz-option.correct { border-color: var(--success); background: var(--success-light); } .quiz-option.incorrect { border-color: var(--error); background: var(--error-light); } .quiz-option.disabled { cursor: not-allowed; opacity: 0.7; } .quiz-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-8); gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--ctx-border, var(--gray-200)); } .quiz-navigation .btn { min-width: 140px; } /* Quiz Results */ .quiz-results { display: none; background: var(--ctx-surface, var(--white)); border-radius: var(--quiz-question-radius); padding: var(--quiz-results-padding); box-shadow: var(--quiz-question-shadow); border: 1px solid var(--ctx-border, var(--gray-200)); } .quiz-results.active { display: block; animation: quizFadeIn 0.4s ease; } .quiz-results__header { text-align: center; margin-bottom: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--ctx-border, var(--gray-200)); } .quiz-results__score { font-size: var(--quiz-score-size); font-weight: var(--font-weight-bold); background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-hover, #2563eb)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-2); } .quiz-results__title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--ctx-heading); margin-bottom: var(--space-3); } .quiz-results__message { font-size: var(--text-lg); color: var(--ctx-text-muted, var(--gray-600)); line-height: var(--line-height-normal); max-width: 500px; margin: 0 auto; } /* Quiz Review */ .quiz-review { margin-top: var(--space-8); } .quiz-review__title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--ctx-heading); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .quiz-review__list { display: flex; flex-direction: column; gap: var(--space-4); } .quiz-review__item { background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-md); padding: var(--space-5); border-left: 4px solid var(--error); } .quiz-review__item--correct { border-left-color: var(--success); } .quiz-review__question { font-weight: var(--font-weight-semibold); color: var(--ctx-heading); margin-bottom: var(--space-3); font-size: var(--text-base); } .quiz-review__answers { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); } .quiz-review__your-answer { color: var(--error); display: flex; align-items: flex-start; gap: var(--space-2); } .quiz-review__correct-answer { color: var(--success); display: flex; align-items: flex-start; gap: var(--space-2); } .quiz-review__explanation { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--ctx-border, var(--gray-200)); color: var(--ctx-text-muted, var(--gray-600)); font-size: var(--text-sm); line-height: var(--line-height-normal); } .quiz-review__toggle { display: flex; align-items: center; gap: var(--space-2); background: none; border: none; color: var(--primary, #3b82f6); font-weight: var(--font-weight-medium); cursor: pointer; padding: 0; font-size: var(--text-sm); margin-bottom: var(--space-4); } .quiz-review__toggle:hover { text-decoration: underline; } .quiz-review__toggle svg { transition: transform var(--motion-duration-sm); } .quiz-review__toggle.expanded svg { transform: rotate(180deg); } /* Quiz Actions */ .quiz-results__actions { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--ctx-border, var(--gray-200)); flex-wrap: wrap; } /* Quiz Summary */ .quiz-summary { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-6); } .quiz-summary__item { text-align: center; } .quiz-summary__value { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); } .quiz-summary__value--correct { color: var(--success); } .quiz-summary__value--incorrect { color: var(--error); } .quiz-summary__label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } /* Quiz Mobile */ @media (max-width: 639px) { .quiz-question { padding: var(--space-6); } .quiz-results { padding: var(--space-6); } .quiz-results__score { font-size: var(--text-5xl); } .quiz-navigation { flex-direction: column; } .quiz-navigation .btn { width: 100%; } .quiz-results__actions { flex-direction: column; } .quiz-results__actions .btn { width: 100%; } } /* ----------------------------------------------------------------------------- * Quiz Email Gate * Email capture gate shown before quiz results (leads module integration) * ----------------------------------------------------------------------------- */ .quiz-email-gate { display: none; text-align: center; padding: var(--space-8); background: var(--ctx-bg-elevated); border-radius: var(--radius-lg); border: 1px solid var(--ctx-border); } .quiz-email-gate.active, .quiz-email-gate[hidden="false"] { display: block; } .quiz-email-gate__icon { color: var(--primary); margin-bottom: var(--space-6); } .quiz-email-gate__icon svg { width: 64px; height: 64px; } .quiz-email-gate__title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); color: var(--ctx-text); } .quiz-email-gate__message { color: var(--ctx-text-muted); margin-bottom: var(--space-6); max-width: 400px; margin-left: auto; margin-right: auto; } .quiz-email-gate__bonus { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--primary-tint-15); border: 1px solid var(--primary-tint-30); border-radius: var(--radius-md); margin-bottom: var(--space-6); } .quiz-email-gate__bonus-icon { color: var(--primary); } .quiz-email-gate__bonus-text { font-size: var(--text-sm); color: var(--ctx-text); } .quiz-email-gate__form { max-width: 400px; margin: 0 auto var(--space-4); } .quiz-email-gate__field { display: flex; flex-direction: column; gap: var(--space-2); } .quiz-email-gate__field input[type="email"] { flex: 1; min-height: 48px; padding: var(--space-3) var(--space-4); font-size: var(--text-base); border: 1px solid var(--ctx-border); border-radius: var(--radius-md); background: var(--ctx-bg); color: var(--ctx-text); } .quiz-email-gate__field input[type="email"]:focus { outline: 2px solid var(--primary); outline-offset: 2px; border-color: var(--primary); } .quiz-email-gate__field input[type="email"]::placeholder { color: var(--ctx-text-muted); } .quiz-email-gate__field .btn { width: 100%; } @media (min-width: 640px) { .quiz-email-gate__field { flex-direction: row; } .quiz-email-gate__field .btn { width: auto; } } .quiz-email-gate__hint { font-size: var(--text-xs); color: var(--ctx-text-muted); margin-top: var(--space-2); } .quiz-email-gate__skip { background: none; border: none; color: var(--ctx-text-muted); font-size: var(--text-sm); cursor: pointer; text-decoration: underline; padding: var(--space-2); transition: color var(--motion-duration-sm); } .quiz-email-gate__skip:hover { color: var(--ctx-text); } .quiz-email-gate__skip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .quiz-email-gate__loading, .quiz-email-gate__success { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8); } .quiz-email-gate__spinner { width: 40px; height: 40px; border: 3px solid var(--ctx-border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .quiz-email-gate__success svg { color: var(--success); } /* ============================================================================= * CHAT BUTTON COMPONENT * Floating chat button for live chat integration * ============================================================================= */ .chat-button--floating { position: fixed; z-index: var(--chat-btn-z-index); box-shadow: var(--chat-btn-shadow); } .chat-button--bottom-right { bottom: var(--chat-btn-offset); right: var(--chat-btn-offset); } .chat-button--bottom-left { bottom: var(--chat-btn-offset); left: var(--chat-btn-offset); } .chat-button__icon { flex-shrink: 0; } @media (max-width: 767px) { .chat-button--floating { bottom: var(--chat-btn-offset-mobile); } } /* ============================================================================= * THEME TOGGLE * Dark/Light mode switch button * ============================================================================= */ /* Smooth theme transition */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, fill 0.2s ease, box-shadow 0.2s ease !important; } /* Theme Toggle Button */ .theme-toggle { --toggle-size: 40px; --toggle-padding: var(--space-2); --toggle-icon-size: 20px; position: relative; display: flex; align-items: center; justify-content: center; width: var(--toggle-size); height: var(--toggle-size); padding: var(--toggle-padding); background: transparent; border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-full); cursor: pointer; transition: all var(--motion-duration-sm); color: var(--ctx-text-muted, var(--gray-600)); } .theme-toggle:hover { background: var(--ctx-bg-section, var(--gray-100)); border-color: var(--ctx-border-strong, var(--gray-300)); color: var(--ctx-text, var(--gray-900)); } .theme-toggle:focus-visible { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; } /* Icons */ .theme-toggle__icon { width: var(--toggle-icon-size); height: var(--toggle-icon-size); transition: transform var(--motion-duration-md), opacity var(--motion-duration-sm); } .theme-toggle__icon--sun { display: block; } .theme-toggle__icon--moon { display: none; } /* Dark mode state */ .theme-toggle.is-dark .theme-toggle__icon--sun { display: none; } .theme-toggle.is-dark .theme-toggle__icon--moon { display: block; } /* Icon animations */ .theme-toggle:hover .theme-toggle__icon { transform: rotate(15deg); } .theme-toggle.is-dark:hover .theme-toggle__icon { transform: rotate(-15deg); } /* Compact variant for tight spaces */ .theme-toggle--compact { --toggle-size: 32px; --toggle-padding: 6px; --toggle-icon-size: 16px; border: none; } /* Text variant with label */ .theme-toggle--text { width: auto; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); } .theme-toggle__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); } /* Header integration */ .header .theme-toggle { margin-left: var(--space-2); } /* Mobile adjustments */ @media (max-width: 767px) { .theme-toggle { --toggle-size: 36px; --toggle-icon-size: 18px; } } /* ============================================================================= * Language Switcher * Multilingual language selection component * ============================================================================= */ .lang-switcher { position: relative; display: inline-flex; align-items: center; } /* Dropdown Toggle Button */ .lang-switcher__toggle { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: transparent; border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); color: var(--ctx-text, var(--gray-900)); font-size: var(--text-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--motion-duration-sm); min-height: 36px; } .lang-switcher__toggle:hover { background: var(--ctx-bg-section, var(--gray-100)); border-color: var(--ctx-border-strong, var(--gray-300)); } .lang-switcher__toggle:focus-visible { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; } .lang-switcher__icon { transition: transform var(--motion-duration-sm); } .lang-switcher[aria-expanded="true"] .lang-switcher__icon, .lang-switcher__toggle[aria-expanded="true"] .lang-switcher__icon { transform: rotate(180deg); } /* Dropdown Menu */ .lang-switcher__menu { position: absolute; top: 100%; right: 0; z-index: 100; min-width: 140px; margin-top: var(--space-1); padding: var(--space-1); background: var(--ctx-bg-elevated, #fff); border: 1px solid var(--ctx-border, var(--gray-200)); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); list-style: none; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--motion-duration-sm), transform var(--motion-duration-sm), visibility var(--motion-duration-sm); } .lang-switcher__menu:not([hidden]) { opacity: 1; visibility: visible; transform: translateY(0); } .lang-switcher__menu li { margin: 0; } /* Menu Options */ .lang-switcher__option { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); color: var(--ctx-text, var(--gray-900)); font-size: var(--text-sm); font-weight: var(--font-weight-medium); text-decoration: none; border-radius: var(--radius-sm); transition: all var(--motion-duration-sm); } .lang-switcher__option:hover { background: var(--ctx-bg-section, var(--gray-100)); color: var(--primary); } .lang-switcher__option--active { background: var(--primary-light, rgba(99, 102, 241, 0.1)); color: var(--primary); } /* Flag Emoji */ .lang-switcher__flag { font-size: 1.1em; line-height: var(--line-height-none); } /* Inline/List Variant */ .lang-switcher__list { display: flex; align-items: center; gap: var(--space-1); } .lang-switcher__link { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); color: var(--ctx-text-muted, var(--gray-600)); font-size: var(--text-sm); font-weight: var(--font-weight-medium); text-decoration: none; border-radius: var(--radius-sm); transition: all var(--motion-duration-sm); } .lang-switcher__link:hover { color: var(--primary); background: var(--ctx-bg-section, var(--gray-100)); } .lang-switcher__link--active { color: var(--primary); font-weight: var(--font-weight-semibold); } .lang-switcher__separator { color: var(--ctx-border, var(--gray-300)); font-size: var(--text-xs); } /* Compact Variant */ .lang-switcher--compact .lang-switcher__toggle { padding: var(--space-1) var(--space-2); border: none; min-height: 32px; } .lang-switcher--compact .lang-switcher__current { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; } /* Header Integration */ .header .lang-switcher { margin-right: var(--space-2); } /* Mobile Adjustments */ @media (max-width: 767px) { .lang-switcher--dropdown .lang-switcher__toggle { padding: var(--space-1) var(--space-2); min-height: 32px; } .lang-switcher--dropdown .lang-switcher__current { display: none; } .lang-switcher--dropdown .lang-switcher__toggle::after { content: '🌐'; font-size: 1.1em; } .lang-switcher--dropdown .lang-switcher__icon { display: none; } .lang-switcher__menu { min-width: 120px; } } /* Touch Target (WCAG 2.5.5) */ @media (max-width: 1023px) { .lang-switcher__toggle, .lang-switcher__option, .lang-switcher__link { min-height: 44px; } } /* ----------------------------------------------------------------------------- * Accessibility: Touch Target Sizes (WCAG 2.5.5) * * Minimum 44x44px for ALL interactive elements * Benefits: touch devices, users with motor impairments, touchscreen laptops * -------------------------------------------------------------------------- */ /* Global touch targets (all breakpoints) */ .btn--icon-only { min-width: 44px; min-height: 44px; } .btn--icon-only.btn--sm { min-width: 44px; min-height: 44px; padding: var(--space-3); } /* Close buttons - global 44px */ [aria-label="Close"], [aria-label="Fermer"], .modal__close, .notice__close, .toast__close, .announcement-bar__close, .course-sidebar__close, .exit-intent-modal__close { min-width: 44px; min-height: 44px; } /* Copy/action buttons - global 44px */ .exit-intent-modal__code-copy, .copy-button, [class*="__copy"] { min-width: 44px; min-height: 44px; } /* Additional mobile-specific adjustments */ @media (max-width: 1023px) { /* Header actions */ .header__search-btn, .header__menu-btn { width: 44px; height: 44px; } /* Pagination */ .pagination__item { min-width: 44px; height: 44px; } .pagination--compact .pagination__item { min-width: 44px; height: 44px; } /* Theme toggle */ .theme-toggle { --toggle-size: 44px; } /* Mobile menu links */ .mobile-menu__link, .mobile-menu__sub-link { min-height: 44px; display: flex; align-items: center; } /* Dropdown links */ .header__dropdown-link { min-height: 44px; padding-top: var(--space-3); padding-bottom: var(--space-3); } /* Card links that act as buttons */ .card__link { min-height: 44px; display: inline-flex; align-items: center; } /* Close buttons & copy buttons: now global (see above) */ /* FAQ accordion toggles */ .faq__question { min-height: 44px; } /* Tab buttons */ .tab-button, .tabs__tab { min-height: 44px; } /* Sidebar toggle */ .sidebar-toggle { min-width: 44px; min-height: 44px; } /* Lesson navigation */ .lesson-navigation .btn { min-height: 44px; } /* Form controls - labels provide touch area */ .checkbox-item, .radio-item, .checkbox-card, .radio-card { min-height: 44px; padding: var(--space-2) 0; } /* Small checkbox/radio inputs are OK since label is clickable */ .checkbox-item input, .radio-item input { min-width: 20px; min-height: 20px; } /* Filter and sort buttons */ .filter-btn, .filter-button, .sort-btn, .sort-button, [class*="filter-"] button, [class*="sort-"] button { min-height: 44px; padding: var(--space-2) var(--space-4); } /* Tag links */ .tag, .tag-link, .tags__item a, [class*="tag-"] a { min-height: 44px; display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); } /* Share buttons */ .share-btn, .share-button, [class*="share-"] button, [class*="share-"] a { min-width: 44px; min-height: 44px; } /* Favorite/wishlist buttons */ .favorite-btn, .wishlist-btn, [class*="favorite-"] button, [class*="wishlist-"] button { min-width: 44px; min-height: 44px; } /* Compare buttons */ .compare-btn, [class*="compare-"] button { min-width: 44px; min-height: 44px; } /* Quantity buttons (cart/product) */ .qty-btn, .quantity-btn, [class*="qty-"] button, [class*="quantity-"] button { min-width: 44px; min-height: 44px; } /* Number stepper buttons */ .number-stepper__btn { min-width: 44px; min-height: 44px; } /* Toggle switch - entire toggle is the touch target */ .toggle, .toggle__track { min-height: 44px; } /* Social media links */ .social-link, .social-links a, [class*="social-"] a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Breadcrumb links */ .breadcrumbs__list a, .breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; padding: var(--space-2) var(--space-1); } /* Footer links */ .footer__link, .footer a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; padding: var(--space-2) 0; } /* Step navigation buttons */ .step-nav__btn, .step-navigation button, .step-navigation a { min-height: 44px; } /* Quiz option buttons */ .quiz-option, .quiz-option label { min-height: 44px; padding: var(--space-3); } /* Gallery thumbnail buttons */ .gallery__thumb, .product-gallery__thumb, [class*="gallery-"] button { min-width: 44px; min-height: 44px; } /* Accordion/collapse triggers */ .accordion__trigger, .collapse__trigger, [aria-expanded]:not(.faq__question) { min-height: 44px; } /* Dropdown triggers */ .dropdown__trigger, [aria-haspopup="true"] { min-height: 44px; } /* Card action buttons */ .card__action, .card__btn, [class*="card-"] button:not(.btn) { min-height: 44px; } /* Main navigation links */ .header__nav a, .nav__link { min-height: 44px; display: inline-flex; align-items: center; padding: var(--space-2) var(--space-2); } /* All buttons ensure minimum size */ .btn, button { min-height: 44px; } /* Small buttons still meet minimum */ .btn--sm { min-height: 44px; /* Override smaller size on touch devices */ } /* Links in main content - expand hit area */ .prose a, .content a, .article-content a { padding: var(--space-1) 0; min-height: 44px; display: inline-flex; align-items: center; } /* Dropdown menu items */ .dropdown__item, .dropdown__link, [role="menuitem"] { min-height: 44px; padding: var(--space-3) var(--space-4); } /* Ensure adequate spacing between adjacent touch targets */ .btn-group > .btn + .btn, .button-group > button + button { margin-left: var(--space-2); } /* Navigation items spacing */ .nav__link + .nav__link { margin-left: var(--space-2); } } /* ----------------------------------------------------------------------------- * Touch Device Optimization (WCAG 2.5.5) * * Target devices with coarse pointers (touchscreens) * Ensures all interactive elements are easily tappable * -------------------------------------------------------------------------- */ @media (pointer: coarse) { /* All interactive elements - safety net */ a, button, input, select, textarea, [role="button"], [tabindex="0"] { min-height: 44px; } /* Buttons */ .btn, button { min-height: 44px; min-width: 44px; } /* Small buttons override on touch */ .btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); } /* Links */ a { min-height: 44px; display: inline-flex; align-items: center; } /* Content links - add vertical padding */ .prose a, .content a, .article-content a, p a, li a { padding-top: var(--space-1); padding-bottom: var(--space-1); } /* Form inputs */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], select, textarea { min-height: 44px; } /* Checkboxes and radios - label provides touch area */ input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; } label:has(input[type="checkbox"]), label:has(input[type="radio"]) { min-height: 44px; display: flex; align-items: center; padding: var(--space-2) 0; } /* Icon buttons */ .btn--icon-only, [aria-label]:not(input):not(select):not(textarea) { min-width: 44px; min-height: 44px; } /* Navigation */ nav a, .nav__link, .header__nav a, .footer__link { min-height: 44px; } /* Dropdown items */ .dropdown__item, [role="menuitem"] { min-height: 44px; padding: var(--space-3) var(--space-4); } /* Tab buttons */ [role="tab"], .tab, .tabs__tab { min-height: 44px; } /* Close buttons */ [aria-label="Close"], [aria-label="Fermer"], .close, .modal__close { min-width: 44px; min-height: 44px; } /* Pagination */ .pagination a, .pagination button { min-width: 44px; min-height: 44px; } /* Ensure spacing between adjacent touch targets */ .btn + .btn, a + a:not(.prose a + a), button + button { margin-left: var(--space-2); } /* Increase gap in button groups */ .btn-group, .button-group { gap: var(--space-2); } } /* ============================================================================= * WAVE 45: Skeleton Loader Component * ============================================================================= */ /* Base */ .skeleton { position: relative; overflow: hidden; } /* Animation */ .skeleton--animated .skeleton__line, .skeleton--animated .skeleton__avatar, .skeleton--animated .skeleton__image, .skeleton--animated .skeleton__title, .skeleton--animated .skeleton__cell { background: linear-gradient(90deg, var(--ctx-bg-section, var(--gray-200)) 25%, var(--ctx-bg-elevated, var(--gray-100)) 50%, var(--ctx-bg-section, var(--gray-200)) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.5s ease-in-out infinite; } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Static (no animation) */ .skeleton:not(.skeleton--animated) .skeleton__line, .skeleton:not(.skeleton--animated) .skeleton__avatar, .skeleton:not(.skeleton--animated) .skeleton__image, .skeleton:not(.skeleton--animated) .skeleton__title, .skeleton:not(.skeleton--animated) .skeleton__cell { background: var(--ctx-bg-section, var(--gray-200)); } /* Text Variant */ .skeleton--text { display: flex; flex-direction: column; gap: var(--space-2); } .skeleton__line { height: 1rem; border-radius: var(--radius-sm); width: 100%; } .skeleton__line--short { width: 60%; } .skeleton__line--title { height: 1.25rem; width: 70%; } /* Avatar Variant */ .skeleton__avatar { display: block; border-radius: 50%; } .skeleton--sm .skeleton__avatar { width: 32px; height: 32px; } .skeleton--md .skeleton__avatar { width: 48px; height: 48px; } .skeleton--lg .skeleton__avatar { width: 64px; height: 64px; } .skeleton__avatar--sm { width: 32px; height: 32px; } .skeleton__avatar--lg { width: 64px; height: 64px; } /* Image Variant */ .skeleton--image .skeleton__image { display: block; width: 100%; padding-top: 56.25%; border-radius: var(--radius-md); } /* Card Variant */ .skeleton--card { background: var(--ctx-bg, var(--white)); border-radius: var(--radius-lg); overflow: hidden; } .skeleton--card .skeleton__image { display: block; width: 100%; padding-top: 56.25%; } .skeleton--card .skeleton__content { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .skeleton--card .skeleton__title { height: 1.5rem; width: 80%; border-radius: var(--radius-sm); } /* Table Variant */ .skeleton--table { width: 100%; } .skeleton__table { display: flex; flex-direction: column; gap: var(--space-2); } .skeleton__row { display: flex; gap: var(--space-2); } .skeleton__row--header .skeleton__cell { background: var(--ctx-bg-section, var(--gray-300)); } .skeleton__cell { flex: 1; height: 2.5rem; border-radius: var(--radius-sm); } /* List Variant */ .skeleton--list { display: flex; flex-direction: column; gap: var(--space-4); } .skeleton__list-item { display: flex; align-items: center; gap: var(--space-3); } .skeleton__list-content { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); } /* Profile Variant */ .skeleton--profile { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; } .skeleton--profile .skeleton__title { width: 120px; height: 1.25rem; border-radius: var(--radius-sm); } .skeleton--profile .skeleton__line--short { width: 80px; } /* Size Variants */ .skeleton--sm .skeleton__line { height: 0.75rem; } .skeleton--sm .skeleton__title { height: 1rem; } .skeleton--lg .skeleton__line { height: 1.25rem; } .skeleton--lg .skeleton__title { height: 1.75rem; } /* ============================================================================= * WAVE 46: Spinner Component * ============================================================================= */ /* Base */ .spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); } .spinner--inline { display: inline-flex; flex-direction: row; gap: var(--space-2); } /* Overlay */ .spinner--overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: var(--z-modal); backdrop-filter: blur(2px); } /* Default Spinner (Circle) */ .spinner__icon { animation: spin 1s linear infinite; } /* Note: Uses canonical spin keyframe from animation utilities section */ /* Size Variants */ .spinner--xs .spinner__icon { width: 16px; height: 16px; } .spinner--sm .spinner__icon { width: 20px; height: 20px; } .spinner--md .spinner__icon { width: 32px; height: 32px; } .spinner--lg .spinner__icon { width: 48px; height: 48px; } .spinner--xl .spinner__icon { width: 64px; height: 64px; } /* Color Variants */ .spinner--primary { color: var(--primary, #3b82f6); } .spinner--current { color: currentColor; } .spinner--white { color: white; } .spinner--muted { color: var(--ctx-text-muted, var(--gray-500)); } /* Dots Variant */ .spinner__dots { display: flex; gap: var(--space-1); } .spinner__dot { width: 8px; height: 8px; background: currentColor; border-radius: 50%; animation: spinner-dots 1.4s ease-in-out infinite both; } .spinner--sm .spinner__dot { width: 6px; height: 6px; } .spinner--lg .spinner__dot { width: 12px; height: 12px; } .spinner__dot:nth-child(1) { animation-delay: -0.32s; } .spinner__dot:nth-child(2) { animation-delay: -0.16s; } @keyframes spinner-dots { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Ring Variant */ .spinner__ring { width: 32px; height: 32px; border: 3px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner--xs .spinner__ring { width: 16px; height: 16px; border-width: 2px; } .spinner--sm .spinner__ring { width: 20px; height: 20px; border-width: 2px; } .spinner--lg .spinner__ring { width: 48px; height: 48px; border-width: 4px; } .spinner--xl .spinner__ring { width: 64px; height: 64px; border-width: 5px; } /* Bars Variant */ .spinner__bars { display: flex; gap: 3px; height: 24px; align-items: center; } .spinner__bar { width: 4px; height: 100%; background: currentColor; border-radius: var(--radius-sm); animation: spinner-bars 1.2s ease-in-out infinite; } .spinner--sm .spinner__bars { height: 16px; } .spinner--sm .spinner__bar { width: 3px; } .spinner--lg .spinner__bars { height: 36px; } .spinner--lg .spinner__bar { width: 5px; } .spinner__bar:nth-child(1) { animation-delay: -0.4s; } .spinner__bar:nth-child(2) { animation-delay: -0.3s; } .spinner__bar:nth-child(3) { animation-delay: -0.2s; } .spinner__bar:nth-child(4) { animation-delay: -0.1s; } @keyframes spinner-bars { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } } /* Label */ .spinner__label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-600)); } .spinner--overlay .spinner__label { color: white; } .spinner--inline .spinner__label { font-size: inherit; } /* ============================================================================= * WAVE 47: Scroll to Top Button * ============================================================================= */ /* Base */ .scroll-to-top { position: fixed; z-index: var(--z-dropdown); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity var(--motion-duration-md), transform var(--motion-duration-md), background var(--motion-duration-sm); opacity: 0; transform: translateY(16px); pointer-events: none; } .scroll-to-top:not([hidden]) { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Position Variants */ .scroll-to-top--bottom-right { bottom: var(--space-6); right: var(--space-6); } .scroll-to-top--bottom-left { bottom: var(--space-6); left: var(--space-6); } .scroll-to-top--bottom-center { bottom: var(--space-6); left: 50%; transform: translateX(-50%); } .scroll-to-top--bottom-center:not([hidden]) { transform: translateX(-50%) translateY(0); } /* Size Variants */ .scroll-to-top--sm { width: 36px; height: 36px; } .scroll-to-top--md { width: 44px; height: 44px; } .scroll-to-top--lg { width: 56px; height: 56px; } /* Shape Variants */ .scroll-to-top--circle { border-radius: 50%; } .scroll-to-top--rounded { border-radius: var(--radius-lg); } .scroll-to-top--default { border-radius: var(--radius-md); } /* Color Variants */ .scroll-to-top--primary { background: var(--primary, #3b82f6); color: white; box-shadow: var(--shadow-md); } .scroll-to-top--primary:hover { background: var(--primary-hover, #2563eb); box-shadow: var(--shadow-lg); } .scroll-to-top--dark { background: var(--gray-900, #1a1a1a); color: white; box-shadow: var(--shadow-md); } .scroll-to-top--dark:hover { background: var(--gray-800, #333); } .scroll-to-top--light { background: white; color: var(--gray-700, #374151); box-shadow: var(--shadow-md); border: 1px solid var(--gray-200, #e5e7eb); } .scroll-to-top--light:hover { background: var(--gray-50, #f9fafb); border-color: var(--gray-300, #d1d5db); } /* Icon */ .scroll-to-top__icon { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .scroll-to-top--sm .scroll-to-top__icon svg { width: 16px; height: 16px; } .scroll-to-top--lg .scroll-to-top__icon svg { width: 24px; height: 24px; } /* Progress Ring */ .scroll-to-top--progress { position: relative; } .scroll-to-top__progress { position: absolute; inset: 0; width: 100%; height: 100%; } .scroll-to-top__progress-ring { stroke-linecap: round; transition: stroke-dashoffset 0.1s; } /* Focus State */ .scroll-to-top:focus-visible { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .scroll-to-top { transition: opacity 0.1s ease; } } /* ============================================================================= * WAVE 48: Divider Component * ============================================================================= */ /* Base (horizontal) */ .divider { border: 0; } .divider--horizontal { width: 100%; height: 0; } .divider--vertical { width: 0; height: 100%; } /* Thickness/Size */ .divider--horizontal.divider--sm { border-top-width: 1px; } .divider--horizontal.divider--md { border-top-width: 2px; } .divider--horizontal.divider--lg { border-top-width: 3px; } .divider--vertical.divider--sm { border-left-width: 1px; } .divider--vertical.divider--md { border-left-width: 2px; } .divider--vertical.divider--lg { border-left-width: 3px; } /* Spacing */ .divider--spacing-none { margin: 0; } .divider--horizontal.divider--spacing-sm { margin: var(--space-2) 0; } .divider--horizontal.divider--spacing-md { margin: var(--space-4) 0; } .divider--horizontal.divider--spacing-lg { margin: var(--space-6) 0; } .divider--horizontal.divider--spacing-xl { margin: var(--space-8) 0; } .divider--vertical.divider--spacing-sm { margin: 0 var(--space-2); } .divider--vertical.divider--spacing-md { margin: 0 var(--space-4); } .divider--vertical.divider--spacing-lg { margin: 0 var(--space-6); } .divider--vertical.divider--spacing-xl { margin: 0 var(--space-8); } /* Variants */ .divider--default { border-style: solid; border-color: var(--ctx-border, var(--gray-200)); } .divider--dashed { border-style: dashed; } .divider--dotted { border-style: dotted; } .divider--gradient { border: 0; background: linear-gradient(90deg, transparent, var(--ctx-border, var(--gray-300)), transparent); } .divider--horizontal.divider--gradient { height: 1px; } .divider--vertical.divider--gradient { width: 1px; background: linear-gradient(180deg, transparent, var(--ctx-border, var(--gray-300)), transparent); } /* Colors */ .divider--primary { border-color: var(--primary, #3b82f6); } .divider--muted { border-color: var(--ctx-border, var(--gray-100)); } /* With Content (label/icon) */ .divider--with-content { display: flex; align-items: center; border: 0; gap: var(--space-3); } .divider--with-content.divider--horizontal { flex-direction: row; } .divider--with-content.divider--vertical { flex-direction: column; writing-mode: vertical-lr; } .divider__line { flex: 1; height: 0; } .divider--horizontal .divider__line { border-top: 1px solid var(--ctx-border, var(--gray-200)); } .divider--vertical .divider__line { width: 0; height: auto; flex: 1; border-left: 1px solid var(--ctx-border, var(--gray-200)); } .divider--dashed .divider__line { border-style: dashed; } .divider--dotted .divider__line { border-style: dotted; } .divider--primary .divider__line { border-color: var(--primary, #3b82f6); } .divider__content { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); white-space: nowrap; padding: 0 var(--space-2); } .divider--vertical .divider__content { writing-mode: horizontal-tb; } /* ============================================================================= * WAVE 49: Avatar Component * ============================================================================= */ /* Base */ .avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; vertical-align: middle; } /* Image */ .avatar__image { width: 100%; height: 100%; object-fit: cover; } /* Fallback (initials or icon) */ .avatar__fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); text-transform: uppercase; } .avatar__fallback--icon { background: var(--ctx-bg-section); color: var(--ctx-text-muted); } .avatar__fallback--primary { background: var(--primary, #3b82f6); color: white; } /* Auto colors */ .avatar__fallback--color-0 { background: var(--primary); color: var(--on-primary, white); } .avatar__fallback--color-1 { background: var(--success); color: white; } .avatar__fallback--color-2 { background: var(--warning); color: white; } .avatar__fallback--color-3 { background: var(--error); color: white; } .avatar__fallback--color-4 { background: var(--purple); color: white; } /* Size Variants */ .avatar--xs { width: 24px; height: 24px; font-size: var(--text-xs); } .avatar--sm { width: 32px; height: 32px; font-size: 12px; } .avatar--md { width: 40px; height: 40px; font-size: 14px; } .avatar--lg { width: 48px; height: 48px; font-size: 16px; } .avatar--xl { width: 64px; height: 64px; font-size: 20px; } .avatar--2xl { width: 96px; height: 96px; font-size: 28px; } /* Shape Variants */ .avatar--circle { border-radius: 50%; } .avatar--circle .avatar__image { border-radius: 50%; } .avatar--rounded { border-radius: var(--radius-lg); } .avatar--rounded .avatar__image { border-radius: var(--radius-lg); } .avatar--square { border-radius: var(--radius-md); } .avatar--square .avatar__image { border-radius: var(--radius-md); } /* Border */ .avatar--bordered { box-shadow: 0 0 0 2px var(--ctx-bg, white); } /* Status Indicator */ .avatar__status { position: absolute; width: 25%; height: 25%; min-width: 8px; min-height: 8px; max-width: 16px; max-height: 16px; border-radius: 50%; border: 2px solid var(--ctx-bg, white); } .avatar--status-bottom-right .avatar__status { bottom: 0; right: 0; } .avatar--status-top-right .avatar__status { top: 0; right: 0; } .avatar__status--online { background: #22c55e; } .avatar__status--offline { background: #9ca3af; } .avatar__status--busy { background: #ef4444; } .avatar__status--away { background: #f59e0b; } /* Badge */ .avatar__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 18px; text-align: center; color: white; background: #ef4444; border-radius: var(--radius-md); border: 2px solid var(--ctx-bg, white); } .avatar--lg .avatar__badge, .avatar--xl .avatar__badge, .avatar--2xl .avatar__badge { min-width: 22px; height: 22px; font-size: 12px; line-height: 22px; border-radius: var(--radius-lg); } /* Clickable */ a.avatar { text-decoration: none; transition: transform var(--motion-duration-xs), box-shadow var(--motion-duration-xs); } a.avatar:hover { transform: scale(1.05); } a.avatar:focus-visible { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; } /* ============================================================================= * WAVE 50: Empty State Component * ============================================================================= */ /* Base */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-8); } /* Visual */ .empty-state__visual { margin-bottom: var(--space-4); } .empty-state__icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--ctx-bg-section, var(--gray-100)); color: var(--ctx-text-muted, var(--gray-400)); } .empty-state__icon svg { width: 40px; height: 40px; } /* Content */ .empty-state__content { max-width: 360px; } .empty-state__title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--gray-900)); margin-bottom: var(--space-2); } .empty-state__text { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--gray-500)); line-height: var(--line-height-normal); } /* Actions */ .empty-state__actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; justify-content: center; } /* Size Variants */ .empty-state--sm { padding: var(--space-4); } .empty-state--sm .empty-state__icon { width: 56px; height: 56px; } .empty-state--sm .empty-state__icon svg { width: 28px; height: 28px; } .empty-state--sm .empty-state__title { font-size: var(--text-base); } .empty-state--sm .empty-state__actions { margin-top: var(--space-4); } .empty-state--lg { padding: var(--space-12); } .empty-state--lg .empty-state__icon { width: 120px; height: 120px; } .empty-state--lg .empty-state__icon svg { width: 60px; height: 60px; } .empty-state--lg .empty-state__title { font-size: var(--text-xl); } .empty-state--lg .empty-state__content { max-width: 480px; } /* Compact Variant */ .empty-state--compact { padding: var(--space-6); } .empty-state--compact .empty-state__visual { margin-bottom: var(--space-3); } .empty-state--compact .empty-state__icon { width: 48px; height: 48px; } .empty-state--compact .empty-state__icon svg { width: 24px; height: 24px; } .empty-state--compact .empty-state__title { font-size: var(--text-sm); font-weight: var(--font-weight-medium); } .empty-state--compact .empty-state__text { font-size: var(--text-xs); } .empty-state--compact .empty-state__actions { margin-top: var(--space-3); } /* Card Variant */ .empty-state--card { background: var(--ctx-bg-elevated, white); border-radius: var(--radius-lg); border: 1px dashed var(--ctx-border, var(--gray-200)); } /* ============================================================================= * WAVE 51: Copy Button Component * ============================================================================= */ /* Base */ .copy-button { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--ctx-border, var(--gray-300)); border-radius: var(--radius-md); background: var(--ctx-bg, white); color: var(--ctx-text, var(--gray-700)); font-size: var(--text-sm); cursor: pointer; transition: all var(--motion-duration-xs); } .copy-button:hover { background: var(--ctx-bg-section, var(--gray-50)); border-color: var(--ctx-border, var(--gray-400)); } .copy-button:focus-visible { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; } /* Icons */ .copy-button__icon { display: flex; align-items: center; justify-content: center; } .copy-button__icon--check { display: none; color: var(--success, #22c55e); } .copy-button.is-copied .copy-button__icon--copy { display: none; } .copy-button.is-copied .copy-button__icon--check { display: flex; } /* Copied State */ .copy-button.is-copied { background: var(--success-light, #dcfce7); border-color: var(--success, #22c55e); color: var(--success, #16a34a); } /* Size Variants */ .copy-button--sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); } .copy-button--sm .copy-button__icon svg { width: 14px; height: 14px; } .copy-button--lg { padding: var(--space-3) var(--space-4); font-size: var(--text-base); } .copy-button--lg .copy-button__icon svg { width: 18px; height: 18px; } /* Icon Only Variant */ .copy-button--icon { padding: var(--space-2); } .copy-button--icon .copy-button__text { display: none; } .copy-button--icon.copy-button--sm { padding: var(--space-1); } /* Subtle Variant */ .copy-button--subtle { border-color: transparent; background: transparent; } .copy-button--subtle:hover { background: var(--ctx-bg-section, var(--gray-100)); } /* ============================================================================= * WAVE 52: Countdown Component * ============================================================================= */ /* Base */ .countdown { display: inline-flex; align-items: center; gap: var(--space-3); } /* Unit */ .countdown__unit { display: flex; flex-direction: column; align-items: center; text-align: center; } .countdown__value { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold); line-height: 1; } .countdown__label { font-size: var(--text-xs); color: var(--ctx-text-muted, var(--gray-500)); text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--space-1); } /* Separator */ .countdown__separator { font-weight: var(--font-weight-bold); color: var(--ctx-text-muted, var(--gray-400)); align-self: flex-start; margin-top: 0.1em; } /* Expired */ .countdown__expired { font-weight: var(--font-weight-semibold); color: var(--ctx-text-muted, var(--gray-500)); } .countdown.is-expired .countdown__unit, .countdown.is-expired .countdown__separator { display: none; } .countdown.is-expired .countdown__expired { display: block; } /* Size Variants */ .countdown--sm .countdown__value { font-size: var(--text-xl); } .countdown--sm .countdown__label { font-size: var(--text-xs); } .countdown--md .countdown__value { font-size: var(--text-3xl); } .countdown--lg .countdown__value { font-size: var(--text-5xl); } .countdown--lg .countdown__label { font-size: var(--text-sm); } /* Default Variant */ .countdown--default .countdown__unit { min-width: 60px; padding: var(--space-3); background: var(--ctx-bg-section, var(--gray-100)); border-radius: var(--radius-md); } .countdown--default.countdown--lg .countdown__unit { min-width: 80px; padding: var(--space-4); } /* Compact Variant */ .countdown--compact { gap: var(--space-1); } .countdown--compact .countdown__unit { flex-direction: row; gap: 2px; } .countdown--compact .countdown__label { margin-top: 0; font-size: inherit; text-transform: none; } .countdown--compact .countdown__separator { display: none; } /* Minimal Variant */ .countdown--minimal { gap: var(--space-2); } .countdown--minimal .countdown__unit { flex-direction: row; gap: 2px; } .countdown--minimal .countdown__label { margin-top: 0; } .countdown--minimal .countdown__separator { display: none; } /* Flip Variant */ .countdown--flip .countdown__unit { position: relative; background: var(--gray-900); color: white; border-radius: var(--radius-md); min-width: 64px; padding: var(--space-4); } .countdown--flip .countdown__value { font-size: var(--text-4xl); } .countdown--flip .countdown__label { color: var(--gray-400); } /* ============================================================================= * WAVE 53: Calculator Component * Config-driven calculators/simulators with stepped forms and results display * ============================================================================= */ /* Container */ .calculator-container { max-width: 100%; } /* Form */ .calculator-form { display: flex; flex-direction: column; gap: var(--space-4); } /* Steps */ .calculator-step { margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--ctx-border, var(--border-default)); } .calculator-step:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .calculator-step h3 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); color: var(--ctx-text, var(--on-surface)); } /* Step Number Badge */ .step-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--primary); color: var(--on-primary, white); border-radius: 50%; font-weight: var(--font-weight-bold); font-size: var(--text-sm); flex-shrink: 0; } /* Calculator Form Overrides */ .calculator-form .form-group { margin-bottom: var(--space-4); } .calculator-form .form-group label { display: block; font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); color: var(--ctx-text, var(--on-surface)); } .calculator-form .form-group small { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ctx-text-muted, var(--on-surface-variant)); } /* Inputs */ .calculator-form input[type="number"], .calculator-form input[type="text"], .calculator-form select { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--text-base); font-family: inherit; color: var(--ctx-text, var(--on-surface)); background: var(--ctx-surface, var(--surface-default)); border: 1px solid var(--ctx-border, var(--border-default)); border-radius: var(--radius-md); transition: border-color var(--duration-normal), box-shadow var(--duration-normal); } .calculator-form input[type="number"]:focus, .calculator-form input[type="text"]:focus, .calculator-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint-15); } .calculator-form input[type="number"]::placeholder, .calculator-form input[type="text"]::placeholder { color: var(--ctx-text-muted, var(--on-surface-variant)); } /* Select Arrow */ .calculator-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-10); } /* Checkbox Label */ .checkbox-label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; color: var(--ctx-text, var(--on-surface)); } .checkbox-label input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); } /* Collapsible Options */ .options-advanced { margin-top: var(--space-4); } .options-advanced summary { cursor: pointer; color: var(--primary); font-weight: var(--font-weight-medium); user-select: none; } .options-advanced summary:hover { text-decoration: underline; } .options-content { margin-top: var(--space-4); padding: var(--space-4); background: var(--ctx-bg-section, var(--surface-container)); border-radius: var(--radius-md); } /* Submit Button */ .calculator-submit { margin-top: var(--space-4); } /* ============================================================================= * Calculator Results * ============================================================================= */ /* Results Section */ .results-section { margin-top: var(--space-6); padding: var(--space-6); background: linear-gradient(135deg, var(--primary-light) 0%, var(--ctx-bg, var(--surface-default)) 100%); border: 2px solid var(--primary); border-radius: var(--radius-xl); } /* Result Header (optional, for context like age display) */ .result-header { text-align: center; margin-bottom: var(--space-6); color: var(--ctx-text, var(--on-surface)); } .result-header h3 { margin-bottom: var(--space-2); } .result-header p { color: var(--ctx-text-muted, var(--on-surface-variant)); } .result-header p strong { color: var(--primary); font-weight: var(--font-weight-bold); } /* Main Result */ .result-main { text-align: center; margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 2px solid var(--primary); } .result-main__label { font-size: var(--text-lg); color: var(--ctx-text-muted, var(--on-surface-variant)); margin-bottom: var(--space-2); } .result-main__value { font-size: var(--text-4xl); font-weight: var(--font-weight-bold); color: var(--primary); line-height: 1; } .result-main__subtext { margin-top: var(--space-2); color: var(--ctx-text-muted, var(--on-surface-variant)); } .result-main__subtext strong { color: var(--ctx-text, var(--on-surface)); } /* Result Grid */ .result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .result-item { background: var(--ctx-surface, var(--surface-default)); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--ctx-border, var(--border-default)); text-align: center; } .result-item--highlight { border-color: var(--primary); background: var(--primary-light); } .result-item__icon { font-size: var(--text-2xl); margin-bottom: var(--space-2); } .result-item__label { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--on-surface-variant)); margin-bottom: var(--space-1); } .result-item__value { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--ctx-text, var(--on-surface)); } .result-item__amount { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-top: var(--space-1); color: var(--ctx-text, var(--on-surface)); } /* Result Info Box */ .result-info { background: var(--ctx-surface, var(--surface-default)); padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-6); color: var(--ctx-text, var(--on-surface)); } .result-info h4 { margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); } .result-info p { margin: 0; } /* Result Table */ .result-table { background: var(--ctx-surface, var(--surface-default)); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--ctx-border, var(--border-default)); margin-bottom: var(--space-6); } .result-table__title { padding: var(--space-4); font-weight: var(--font-weight-semibold); background: var(--ctx-bg-section, var(--surface-container)); border-bottom: 1px solid var(--ctx-border, var(--border-default)); color: var(--ctx-text, var(--on-surface)); } .result-table table { width: 100%; border-collapse: collapse; } .result-table th, .result-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--ctx-border, var(--border-default)); color: var(--ctx-text, var(--on-surface)); } .result-table th { background: var(--ctx-bg-section, var(--surface-container)); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); } .result-table tr:last-child td { border-bottom: none; } /* Result Actions */ .result-actions { margin-top: var(--space-6); text-align: center; } /* ============================================================================= * Calculator Variants * ============================================================================= */ /* Simple Variant (no step numbers) */ .calculator--simple .calculator-step { border-bottom: none; padding-bottom: 0; margin-bottom: var(--space-4); } .calculator--simple .calculator-step h3 { font-size: var(--text-base); } .calculator--simple .step-number { display: none; } /* Compact Variant */ .results-section--compact { padding: var(--space-4); } .results-section--compact .result-main { margin-bottom: var(--space-4); padding-bottom: var(--space-4); } .results-section--compact .result-main__value { font-size: var(--text-3xl); } .results-section--compact .result-grid { gap: var(--space-3); margin-bottom: var(--space-4); } .results-section--compact .result-item { padding: var(--space-3); } .results-section--compact .result-item__value { font-size: var(--text-xl); } /* Demembrement-specific (2-column grid for usufruit/nue-propriété) */ .result-grid--2 { grid-template-columns: repeat(2, 1fr); } /* Mobile Responsive */ @media (max-width: 639px) { .result-main__value { font-size: var(--text-3xl); } .result-grid { grid-template-columns: 1fr; } .result-table { overflow-x: auto; } .result-table table { min-width: 400px; } } /* ============================================================================= * Calculator Actions (PDF, Share, Lead Capture) * ============================================================================= */ .calculator-actions { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--ctx-border, var(--border-default)); } .calculator-actions__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .calculator-action { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; } .calculator-action__text--success { color: var(--success); } .calculator-actions__link-display { margin-top: var(--space-3); } .calculator-actions__link-input { width: 100%; padding: var(--space-3); font-size: var(--text-sm); font-family: var(--font-mono, monospace); color: var(--ctx-text-muted, var(--on-surface-variant)); background: var(--ctx-bg-elevated, var(--surface-container-highest)); border: 1px solid var(--ctx-border, var(--border-default)); border-radius: var(--radius-md); } /* Stacked Variant */ .calculator-actions--stacked .calculator-actions__buttons { flex-direction: column; align-items: stretch; } .calculator-actions--stacked .calculator-action { justify-content: center; } /* Compact Variant */ .calculator-actions--compact { margin-top: var(--space-4); padding-top: var(--space-4); gap: var(--space-3); } .calculator-actions--compact .calculator-actions__buttons { gap: var(--space-2); } .calculator-actions--compact .calculator-action { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); } /* Mobile */ @media (max-width: 639px) { .calculator-actions__buttons { flex-direction: column; } .calculator-action { justify-content: center; } } /* ============================================================================= * Calculator PDF Template (hidden, used for PDF generation) * ============================================================================= */ .calculator-pdf { display: none; /* Use fixed fonts for html2canvas compatibility */ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 11pt; line-height: var(--line-height-normal); color: #1a1a1a; background: #ffffff; padding: 15mm 10mm 25mm 10mm; } /* PDF Header */ .pdf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8mm; padding-bottom: 5mm; /* Use fixed color for html2canvas */ border-bottom: 2px solid #3b82f6; } .pdf-header__logo { max-height: 15mm; max-width: 50mm; } .pdf-header__meta { text-align: right; } .pdf-header__title { font-size: 14pt; font-weight: var(--font-weight-bold); /* Use fixed color for html2canvas */ color: #3b82f6; margin: 0 0 2mm 0; } .pdf-header__subtitle { font-size: 10pt; color: #666666; margin: 0; } .pdf-header__date { font-size: 9pt; color: #999999; margin-top: 1mm; } /* PDF Body */ .pdf-body { min-height: 200mm; } /* PDF Sections */ .pdf-section { margin-bottom: 8mm; page-break-inside: avoid; break-inside: avoid; } .pdf-section__title { font-size: 12pt; font-weight: var(--font-weight-semibold); color: #333333; margin: 0 0 4mm 0; padding-bottom: 2mm; border-bottom: 1px solid #e5e5e5; page-break-after: avoid; break-after: avoid; } /* PDF Main Result */ .pdf-section--main .pdf-result-main { text-align: center; padding: 6mm; /* Use simple colors for html2canvas compatibility (no color-mix) */ background: linear-gradient(135deg, #f0f7ff, #e6f0ff); border-radius: 4mm; border: 1px solid #cce0ff; } .pdf-result-main__label { font-size: 10pt; color: #666666; margin: 0 0 2mm 0; text-transform: uppercase; letter-spacing: 0.5pt; } .pdf-result-main__value { font-size: 22pt; font-weight: var(--font-weight-bold); /* Use fixed color for html2canvas */ color: #3b82f6; margin: 0 0 2mm 0; } .pdf-result-main__subtext { font-size: 9pt; color: #888888; margin: 0; } /* PDF Grid (for multiple results) */ .pdf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; } .pdf-grid--3 { grid-template-columns: repeat(3, 1fr); } .pdf-result-item { padding: 4mm; background: #f8f9fa; border-radius: 2mm; border: 1px solid #e9ecef; text-align: center; } .pdf-result-item__label { font-size: 9pt; color: #666666; margin: 0 0 1mm 0; } .pdf-result-item__value { font-size: 14pt; font-weight: var(--font-weight-semibold); color: #333333; margin: 0; } .pdf-result-item__amount { font-size: 11pt; font-weight: var(--font-weight-medium); /* Use fixed color for html2canvas */ color: #3b82f6; margin: 1mm 0 0 0; } .pdf-result-item__detail { font-size: 8pt; color: #999999; margin: 1mm 0 0 0; } /* PDF Table */ .pdf-table { width: 100%; border-collapse: collapse; font-size: 9pt; } .pdf-table th, .pdf-table td { padding: 2mm 3mm; text-align: left; border-bottom: 1px solid #e5e5e5; } .pdf-table th { background: #f8f9fa; font-weight: var(--font-weight-semibold); color: #333333; } .pdf-table tr:last-child td { border-bottom: none; } /* PDF Info Section */ .pdf-section--info { padding: 4mm; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 2mm; border-left: 3px solid #f59e0b; } .pdf-info-text { font-size: 9pt; color: #92400e; margin: 0; } /* PDF Footer (fixed at bottom of each page) */ .pdf-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 4mm 10mm; background: #ffffff; border-top: 1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center; font-size: 8pt; color: #999999; } .pdf-footer__disclaimer { flex: 1; margin: 0; } .pdf-footer__url { margin: 0 4mm; /* Use fixed color for html2canvas */ color: #3b82f6; } .pdf-footer__page { margin: 0; } /* Force new page for long sections */ .pdf-section--new-page { page-break-before: always; break-before: always; } /* Keep title with content */ .pdf-section__title + * { page-break-before: avoid; break-before: avoid; } /* ============================================================================= * Print Styles for Calculator PDF * ============================================================================= */ @media print { /* Hide everything except PDF content when printing */ body > *:not(.calculator-pdf-print-mode) { display: none !important; } /* Show PDF content when in print mode */ .calculator-pdf-print-mode .calculator-pdf { display: block !important; position: static !important; width: 100% !important; height: auto !important; overflow: visible !important; background: #ffffff !important; } /* Page setup */ @page { size: A4; margin: 15mm 10mm 20mm 10mm; } /* Ensure sections don't break awkwardly */ .pdf-section { page-break-inside: avoid !important; break-inside: avoid !important; } /* Keep titles with their content */ .pdf-section__title { page-break-after: avoid !important; break-after: avoid !important; } /* Table row handling */ .pdf-table tr { page-break-inside: avoid; break-inside: avoid; } /* Force widows/orphans control */ .pdf-section p, .pdf-info-text { widows: 3; orphans: 3; } /* Ensure colors print */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } } /* ============================================================================= * Lead Capture Modal * ============================================================================= */ .lead-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--duration-slow), visibility var(--duration-slow); } .lead-modal--open { opacity: 1; visibility: visible; } .lead-modal__content { position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: var(--surface-default, #ffffff); border-radius: var(--radius-lg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transform: translateY(20px) scale(0.95); transition: transform var(--motion-duration-md); } .lead-modal--open .lead-modal__content { transform: translateY(0) scale(1); } .lead-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-full); color: var(--ctx-text-muted); cursor: pointer; transition: background var(--duration-normal), color var(--duration-normal); } .lead-modal__close:hover { background: var(--surface-container); color: var(--ctx-text); } .lead-modal__header { padding: var(--space-6) var(--space-6) var(--space-4); text-align: center; } .lead-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--primary-light), var(--primary-tint-10)); border-radius: var(--radius-full); color: var(--primary); } .lead-modal__title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--ctx-text); margin: 0 0 var(--space-2); } .lead-modal__subtitle { font-size: var(--text-base); color: var(--ctx-text-muted); margin: 0; } .lead-modal__body { padding: 0 var(--space-6) var(--space-6); } .lead-modal__form { display: flex; flex-direction: column; gap: var(--space-4); } .lead-modal__consent { margin-top: var(--space-4); } .lead-modal__consent .form-group { margin-bottom: 0; } .lead-modal__consent .checkbox-label { font-size: var(--text-sm); color: var(--ctx-text, var(--on-surface)); align-items: flex-start; gap: var(--space-3); } .lead-modal__consent .checkbox-label input[type="checkbox"] { flex-shrink: 0; margin-top: var(--space-1); /* 4px - closest to 2px */ width: 1.25rem; height: 1.25rem; } .lead-modal__consent .checkbox-label span { line-height: var(--line-height-snug); } .lead-modal__consent a { color: var(--primary); text-decoration: underline; } .lead-modal__submit { width: 100%; margin-top: var(--space-2); } .lead-modal__footer { padding: var(--space-4) var(--space-6); background: var(--surface-container); border-top: 1px solid var(--border-default); text-align: center; font-size: var(--text-sm); color: var(--ctx-text-muted); } .lead-modal__success { text-align: center; padding: var(--space-6); } .lead-modal__success-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--space-4); background: var(--success-light); border-radius: var(--radius-full); color: var(--success); } .lead-modal__success-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--ctx-text); margin: 0 0 var(--space-2); } .lead-modal__success-text { font-size: var(--text-base); color: var(--ctx-text-muted); margin: 0; } .lead-modal__error { margin-top: var(--space-3); padding: var(--space-3); background: var(--error-light); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); border-radius: var(--radius-md); color: var(--error); font-size: var(--text-sm); text-align: center; } /* ============================================================================= * Lead Capture Inline Form * ============================================================================= */ .lead-inline { margin-top: var(--space-6); padding: var(--space-5); background: var(--ctx-bg-elevated, var(--surface-container-highest)); border: 1px solid var(--ctx-border, var(--border-default)); border-radius: var(--radius-lg); } .lead-inline__header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); } .lead-inline__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary-light), var(--primary-tint-10)); border-radius: var(--radius-full); color: var(--primary); } .lead-inline__text { flex: 1; } .lead-inline__title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--ctx-text, var(--on-surface)); margin: 0 0 var(--space-1); } .lead-inline__subtitle { font-size: var(--text-sm); color: var(--ctx-text-muted, var(--on-surface-variant)); margin: 0; } .lead-inline__fields { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; } .lead-inline__field { flex: 1; min-width: 200px; } .lead-inline__submit { flex-shrink: 0; } .lead-inline__consent { margin-top: var(--space-3); } .lead-inline__error { margin-top: var(--space-3); padding: var(--space-3); background: var(--error-light); border-radius: var(--radius-md); color: var(--error); font-size: var(--text-sm); } .lead-inline__success { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); background: var(--success-light); border-radius: var(--radius-md); color: var(--success); font-weight: var(--font-weight-medium); } /* Mobile */ @media (max-width: 639px) { .lead-inline__fields { flex-direction: column; } .lead-inline__field { width: 100%; } .lead-inline__submit { width: 100%; } } /* ============================================================================= * MARQUEE COMPONENT * Infinite scrolling carousel for logos, text, announcements * Animation powered by GSAP (if enabled) or CSS fallback * * Component tokens (config.php > components): * - marquee-duration: Animation duration (default: 30s) * - marquee-logo-height: Logo height (default: 40px) * - marquee-logo-opacity: Logo opacity at rest (default: 0.7) * - marquee-logo-opacity-hover: Logo opacity on hover (default: 1) * - marquee-logo-filter: Logo filter at rest (default: grayscale(100%)) * - marquee-logo-filter-hover: Logo filter on hover (default: grayscale(0%)) * - marquee-text-weight: Text font weight (default: 500) * - marquee-separator-opacity: Separator opacity (default: 0.4) * - marquee-padding: Section padding (default: var(--space-4)) * - marquee-gap: Default gap between items (default: var(--space-8)) * ============================================================================= */ .marquee { --marquee-duration: var(--comp-marquee-duration, 30s); --marquee-direction: normal; position: relative; overflow: hidden; width: 100%; } .marquee__track { display: flex; align-items: center; width: max-content; /* CSS fallback animation (GSAP overrides this) */ animation: marquee-scroll var(--marquee-duration) linear infinite var(--marquee-direction); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Pause on hover (CSS fallback) */ .marquee:hover .marquee__track { animation-play-state: paused; } /* Gap variants */ .marquee--gap-xs .marquee__track { gap: var(--space-2); } .marquee--gap-sm .marquee__track { gap: var(--space-4); } .marquee--gap-md .marquee__track { gap: var(--space-6); } .marquee--gap-lg .marquee__track { gap: var(--comp-marquee-gap, var(--space-8)); } .marquee--gap-xl .marquee__track { gap: var(--space-12); } /* Items */ .marquee__item { flex-shrink: 0; display: flex; align-items: center; } .marquee__item--logo { opacity: var(--comp-marquee-logo-opacity, 0.7); transition: opacity var(--motion-duration-sm); } .marquee__item--logo:hover { opacity: var(--comp-marquee-logo-opacity-hover, 1); } .marquee__logo { height: var(--comp-marquee-logo-height, 40px); width: auto; object-fit: contain; filter: var(--comp-marquee-logo-filter, grayscale(100%)); transition: filter var(--motion-duration-sm); } .marquee__item--logo:hover .marquee__logo { filter: var(--comp-marquee-logo-filter-hover, grayscale(0%)); } .marquee__item--text { font-weight: var(--comp-marquee-text-weight, 500); white-space: nowrap; } .marquee__separator { flex-shrink: 0; opacity: var(--comp-marquee-separator-opacity, 0.4); padding: 0 var(--space-2); } /* ============================================================================= * Marquee Variants * * Additional component tokens: * - marquee-fade-start: Fade mask start % (default: 10%) * - marquee-fade-end: Fade mask end % (default: 90%) * - marquee-announcement-weight: Announcement text weight (default: 600) * - marquee-announcement-spacing: Letter spacing (default: 0.05em) * - marquee-dark-brightness: Logo brightness in dark mode (default: 2) * ============================================================================= */ /* Default - clean, minimal */ .marquee--default { padding: var(--comp-marquee-padding, var(--space-4)) 0; } /* Faded - gradient mask on edges */ .marquee--faded { padding: var(--comp-marquee-padding, var(--space-4)) 0; mask-image: linear-gradient( to right, transparent 0%, black var(--comp-marquee-fade-start, 10%), black var(--comp-marquee-fade-end, 90%), transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, black var(--comp-marquee-fade-start, 10%), black var(--comp-marquee-fade-end, 90%), transparent 100% ); } /* Announcement - full-width banner style */ .marquee--announcement { background: var(--primary); color: var(--on-primary); padding: var(--space-3) 0; } .marquee--announcement .marquee__item--text { font-size: var(--text-sm); font-weight: var(--comp-marquee-announcement-weight, 600); text-transform: uppercase; letter-spacing: var(--comp-marquee-announcement-spacing, 0.05em); } .marquee--announcement .marquee__separator { opacity: 0.6; } /* Bordered - with top/bottom borders */ .marquee--bordered { padding: var(--comp-marquee-padding, var(--space-4)) 0; border-top: 1px solid var(--ctx-border, var(--border-default)); border-bottom: 1px solid var(--ctx-border, var(--border-default)); } /* Dark variant */ .marquee--dark { background: var(--surface-dark-default, var(--gray-900)); color: var(--on-surface-dark, var(--white)); padding: var(--comp-marquee-padding, var(--space-4)) 0; } .marquee--dark .marquee__logo { filter: grayscale(100%) brightness(var(--comp-marquee-dark-brightness, 2)); } .marquee--dark .marquee__item--logo:hover .marquee__logo { filter: grayscale(0%) brightness(1); } /* ============================================================================= * Marquee Badge & Icon Items * * Component tokens: * - marquee-badge-gap: Gap between icon and text (default: var(--space-2)) * - marquee-badge-icon-size: Icon size in badges (default: 1.25rem) * - marquee-badge-text-weight: Text weight (default: 500) * - marquee-icon-size: Icon size for icon-only items (default: 2rem) * - marquee-icon-opacity: Icon opacity (default: 0.7) * - marquee-icon-opacity-hover: Icon opacity on hover (default: 1) * ============================================================================= */ /* Badge item (icon + text) */ .marquee__item--badge { display: flex; align-items: center; gap: var(--comp-marquee-badge-gap, var(--space-2)); } .marquee__item--badge .icon { width: var(--comp-marquee-badge-icon-size, 1.25rem); height: var(--comp-marquee-badge-icon-size, 1.25rem); flex-shrink: 0; color: var(--primary); /* Brand color - scheme-independent */ } .marquee__badge-text { font-weight: var(--comp-marquee-badge-text-weight, 500); white-space: nowrap; } /* Icon-only item */ .marquee__item--icon { display: flex; align-items: center; justify-content: center; } .marquee__item--icon .icon { width: var(--comp-marquee-icon-size, 2rem); height: var(--comp-marquee-icon-size, 2rem); color: var(--primary); /* Brand color - scheme-independent */ opacity: var(--comp-marquee-icon-opacity, 0.7); transition: opacity var(--motion-duration-sm, 0.2s); } .marquee__item--icon:hover .icon { opacity: var(--comp-marquee-icon-opacity-hover, 1); } /* Dark variant overrides for badges/icons */ .marquee--dark .marquee__item--badge .icon { color: var(--primary-light, var(--primary)); } .marquee--dark .marquee__item--icon .icon { opacity: var(--comp-marquee-icon-opacity, 0.8); } /* Announcement variant - badges inherit colors */ .marquee--announcement .marquee__item--badge .icon { color: currentColor; } /* ============================================================================= * Split Text Animation Helpers * For use with GSAP SplitType * * Component tokens: * - typewriter-cursor-width: Cursor width (default: 2px) * - typewriter-cursor-color: Cursor color (default: currentColor) * ============================================================================= */ /* Initial state for split text (hidden until GSAP animates) */ [data-split] .line, [data-split] .word, [data-split] .char { opacity: 0; } /* Wrapper for line overflow hidden effect */ [data-split="lines"] > div { overflow: hidden; } /* Typewriter cursor */ [data-typewriter] { border-right: var(--comp-typewriter-cursor-width, 2px) solid var(--comp-typewriter-cursor-color, currentColor); } /* Scramble text - monospace for stability */ [data-scramble] { font-variant-numeric: tabular-nums; } /* ============================================================================= * Scroll-Driven Animation Helpers * ============================================================================= */ /* Container for scrub animations */ [data-scrub] { position: relative; } /* Initial state for scrub elements */ [data-scrub-opacity], [data-scrub-scale] { will-change: opacity, transform; } /* Parallax elements need will-change for performance */ [data-parallax], [data-parallax-rotate], [data-parallax-scale] { will-change: transform; } /* ========================================================================== COLLECTIONS MODULE Generic module for glossaries, directories, comparisons, etc. ========================================================================== */ /* ----------------------------------------------------------------------------- Collection Archive -------------------------------------------------------------------------- */ .collection-archive { padding: var(--section-padding-y, 4rem) 0; } .collection-archive__header { margin-bottom: var(--space-8); } .collection-archive__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--font-weight-bold); color: var(--ctx-text); margin-bottom: 0.5rem; } .collection-archive__description { font-size: var(--body-large-font-size); color: var(--ctx-text-muted); max-width: 65ch; } .collection-archive__count { font-size: var(--body-small-font-size); color: var(--ctx-text-muted); margin-top: 0.5rem; } .collection-archive__controls { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: var(--space-8); align-items: flex-start; } .collection-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .collection-archive__grid--2 { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } .collection-archive__grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .collection-archive__grid--4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .collection-archive__empty { text-align: center; padding: var(--space-12) var(--space-4); color: var(--ctx-text-muted); } .collection-archive__empty-icon { font-size: var(--text-5xl); margin-bottom: var(--space-4); opacity: 0.5; } .collection-archive__empty-text { font-size: var(--body-large-font-size); } /* Archive variants */ .collection-archive--glossary .collection-archive__grid { gap: 1rem; } .collection-archive--directory .collection-archive__grid { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } .collection-archive--comparison .collection-archive__grid { grid-template-columns: 1fr; max-width: 900px; } /* ----------------------------------------------------------------------------- Collection Card -------------------------------------------------------------------------- */ .collection-card { display: flex; flex-direction: column; background: var(--ctx-bg-elevated); border: 1px solid var(--ctx-border); border-radius: var(--radius-lg, 0.75rem); overflow: hidden; transition: transform var(--motion-duration-sm), box-shadow var(--motion-duration-sm), border-color var(--motion-duration-sm); } .collection-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .collection-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .collection-card__image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ctx-bg-section); } .collection-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-duration-md); } .collection-card:hover .collection-card__image img { transform: scale(1.05); } .collection-card__content { flex: 1; display: flex; flex-direction: column; padding: var(--space-5); } .collection-card__badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--label-medium-font-size); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin-bottom: 0.5rem; } .collection-card__title { font-size: var(--body-large-font-size); font-weight: var(--font-weight-semibold); color: var(--ctx-text); margin-bottom: 0.5rem; line-height: var(--line-height-tight); } .collection-card__excerpt { font-size: var(--body-small-font-size); color: var(--ctx-text-muted); line-height: var(--line-height-normal); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .collection-card__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--ctx-border); font-size: var(--label-large-font-size); color: var(--ctx-text-muted); } .collection-card__meta-item { display: flex; align-items: center; gap: 0.25rem; } .collection-card__meta-item svg { width: 14px; height: 14px; opacity: 0.7; } .collection-card__arrow { display: flex; align-items: center; gap: 0.25rem; font-size: var(--body-small-font-size); font-weight: var(--font-weight-medium); color: var(--primary); margin-top: auto; padding-top: var(--space-4); } .collection-card__arrow svg { width: 16px; height: 16px; transition: transform var(--motion-duration-sm); } .collection-card:hover .collection-card__arrow svg { transform: translateX(4px); } /* Card variants */ /* Compact variant - minimal spacing */ .collection-card--compact { border-radius: var(--radius-md, 0.5rem); } .collection-card--compact .collection-card__content { padding: var(--space-4); } .collection-card--compact .collection-card__title { font-size: var(--body-medium-font-size); } .collection-card--compact .collection-card__excerpt { -webkit-line-clamp: 2; } /* Featured variant - highlighted */ .collection-card--featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .collection-card--featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary); } /* Glossary variant - term-focused */ .collection-card--glossary { background: var(--ctx-bg-elevated); } .collection-card--glossary .collection-card__content { padding: var(--space-4) var(--space-5); } .collection-card--glossary .collection-card__title { font-size: var(--body-medium-font-size); font-weight: var(--font-weight-semibold); } .collection-card--glossary .collection-card__excerpt { font-size: var(--label-large-font-size); -webkit-line-clamp: 2; } /* Directory variant - profile-focused */ .collection-card--directory { flex-direction: row; } .collection-card--directory .collection-card__image { width: 120px; min-width: 120px; aspect-ratio: 1; border-radius: 50%; margin: 1.25rem; margin-right: 0; } .collection-card--directory .collection-card__content { padding: var(--space-5); } /* Horizontal variant */ .collection-card--horizontal { flex-direction: row; } .collection-card--horizontal .collection-card__image { width: 200px; min-width: 200px; aspect-ratio: 4 / 3; } .collection-card--horizontal .collection-card__content { justify-content: center; } /* ----------------------------------------------------------------------------- Collection Single -------------------------------------------------------------------------- */ .collection-single { padding: var(--section-padding-y, 4rem) 0; } .collection-single__header { margin-bottom: var(--space-8); } .collection-single__badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--label-large-font-size); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin-bottom: 0.75rem; } .collection-single__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--font-weight-bold); color: var(--ctx-text); line-height: var(--line-height-tight); margin-bottom: var(--space-4); } .collection-single__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; color: var(--ctx-text-muted); font-size: var(--body-small-font-size); } .collection-single__meta-item { display: flex; align-items: center; gap: 0.375rem; } .collection-single__meta-item svg { width: 16px; height: 16px; opacity: 0.7; } .collection-single__image { margin-bottom: var(--space-8); border-radius: var(--radius-lg, 0.75rem); overflow: hidden; } .collection-single__image img { width: 100%; height: auto; display: block; } .collection-single__content { max-width: 75ch; } .collection-single__content h2 { font-size: var(--headline-small-font-size); font-weight: var(--font-weight-semibold); color: var(--ctx-text); margin: var(--space-8) 0 var(--space-4); } .collection-single__content h3 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--ctx-text); margin: var(--space-6) 0 var(--space-3); } .collection-single__content p { color: var(--ctx-text-muted); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); } .collection-single__content ul, .collection-single__content ol { margin: var(--space-4) 0; padding-left: var(--space-6); color: var(--ctx-text-muted); } .collection-single__content li { margin-bottom: 0.5rem; line-height: var(--line-height-normal); } .collection-single__content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .collection-single__content a:hover { text-decoration: none; } /* Single sidebar layout */ .collection-single__layout { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .collection-single__layout { grid-template-columns: 1fr 300px; } } .collection-single__sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .collection-single__sidebar-box { background: var(--ctx-bg-elevated); border: 1px solid var(--ctx-border); border-radius: var(--radius-lg, 0.75rem); padding: var(--space-5); } .collection-single__sidebar-title { font-size: var(--body-small-font-size); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ctx-text-muted); margin-bottom: var(--space-4); } /* Related items */ .collection-single__related { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--ctx-border); } .collection-single__related-title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--ctx-text); margin-bottom: 1.5rem; } .collection-single__related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } /* Prev/Next navigation */ .collection-single__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--ctx-border); } .collection-single__nav-item { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); background: var(--ctx-bg-elevated); border: 1px solid var(--ctx-border); border-radius: var(--radius-md, 0.5rem); text-decoration: none; transition: border-color var(--motion-duration-sm), background var(--motion-duration-sm); } .collection-single__nav-item:hover { border-color: var(--primary); background: var(--ctx-bg-section); } .collection-single__nav-item--next { text-align: right; } .collection-single__nav-label { font-size: var(--label-medium-font-size); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ctx-text-muted); margin-bottom: 0.25rem; } .collection-single__nav-title { font-size: var(--label-large-font-size); font-weight: var(--font-weight-medium); color: var(--ctx-text); line-height: var(--line-height-tight); } /* ----------------------------------------------------------------------------- Alphabetical List (Glossary style) -------------------------------------------------------------------------- */ .collection-alpha { display: flex; flex-direction: column; gap: 2rem; } .collection-alpha__group { scroll-margin-top: 100px; } .collection-alpha__letter { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--space-4); } .collection-alpha__letter-badge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary); color: var(--on-primary, #fff); font-size: var(--text-xl); font-weight: var(--font-weight-bold); border-radius: var(--radius-md, 0.5rem); } @media (min-width: 640px) { .collection-alpha__letter-badge { width: 48px; height: 48px; font-size: var(--headline-small-font-size); } } .collection-alpha__letter-line { flex: 1; height: 1px; background: var(--ctx-border); } .collection-alpha__letter-count { font-size: var(--label-large-font-size); color: var(--ctx-text-muted); } .collection-alpha__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; } .collection-alpha__items--list { grid-template-columns: 1fr; gap: 0.5rem; } /* Alphabetical list item (compact) */ .collection-alpha__item { display: flex; align-items: center; gap: 0.75rem; padding: var(--space-3) var(--space-4); background: var(--ctx-bg-elevated); border: 1px solid var(--ctx-border); border-radius: var(--radius-md, 0.5rem); text-decoration: none; color: var(--ctx-text); transition: border-color var(--motion-duration-sm), background var(--motion-duration-sm); } .collection-alpha__item:hover { border-color: var(--primary); background: var(--ctx-bg-section); } .collection-alpha__item-title { font-weight: var(--font-weight-medium); flex: 1; } .collection-alpha__item-arrow { color: var(--primary); opacity: 0; transform: translateX(-4px); transition: opacity var(--motion-duration-sm), transform var(--motion-duration-sm); } .collection-alpha__item:hover .collection-alpha__item-arrow { opacity: 1; transform: translateX(0); } .collection-alpha__item-arrow svg { width: 16px; height: 16px; } /* ----------------------------------------------------------------------------- Collection Filters -------------------------------------------------------------------------- */ .collection-filters { display: flex; flex-direction: column; gap: 1rem; } /* Letter filter (A-Z) */ .collection-filters__letters { display: flex; flex-wrap: wrap; gap: 0.375rem; } .collection-filters__letter { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: var(--label-large-font-size); font-weight: var(--font-weight-semibold); color: var(--ctx-text); background: var(--ctx-bg-elevated); border: 1px solid var(--ctx-border); border-radius: var(--radius-sm, 0.25rem); text-decoration: none; transition: all var(--motion-duration-xs); } @media (min-width: 640px) { .collection-filters__letter { width: 36px; height: 36px; font-size: var(--body-small-font-size); } } .collection-filters__letter:hover { border-color: var(--primary); color: var(--primary); } .collection-filters__letter--active { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); } .collection-filters__letter--disabled { opacity: 0.4; pointer-events: none; } /* Category filter */ .collection-filters__categories { display: flex; flex-wrap: wrap; gap: 0.5rem; } .collection-filters__category { display: inline-flex; align-items: center; gap: 0.375rem; padding: var(--space-2) var(--space-4); font-size: var(--body-small-font-size); font-weight: var(--font-weight-medium); color: var(--ctx-text); background: var(--ctx-bg-elevated); border: 1px solid var(--ctx-border); border-radius: var(--radius-full); text-decoration: none; transition: all var(--motion-duration-xs); } .collection-filters__category:hover { border-color: var(--primary); color: var(--primary); } .collection-filters__category--active { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); } .collection-filters__category-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 0.375rem; font-size: var(--label-medium-font-size); font-weight: var(--font-weight-semibold); background: rgba(0, 0, 0, 0.1); border-radius: var(--radius-full); } .collection-filters__category--active .collection-filters__category-count { background: rgba(255, 255, 255, 0.2); } /* Dropdown filter */ .collection-filters__dropdown { position: relative; } .collection-filters__dropdown-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--body-small-font-size); color: var(--ctx-text); background: var(--ctx-bg-elevated); border: 1px solid var(--ctx-border); border-radius: var(--radius-md, 0.5rem); cursor: pointer; transition: border-color var(--motion-duration-xs); } .collection-filters__dropdown-trigger:hover { border-color: var(--ctx-border-hover, var(--ctx-border)); } .collection-filters__dropdown-trigger svg { width: 16px; height: 16px; opacity: 0.6; transition: transform var(--motion-duration-sm); } .collection-filters__dropdown[open] .collection-filters__dropdown-trigger svg { transform: rotate(180deg); } .collection-filters__dropdown-menu { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; z-index: 50; background: var(--ctx-bg-elevated); border: 1px solid var(--ctx-border); border-radius: var(--radius-md, 0.5rem); box-shadow: var(--shadow-md); max-height: 300px; overflow-y: auto; } .collection-filters__dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); font-size: var(--body-small-font-size); color: var(--ctx-text); text-decoration: none; transition: background var(--motion-duration-xs); } .collection-filters__dropdown-item:hover { background: var(--ctx-bg-section); } .collection-filters__dropdown-item--active { color: var(--primary); font-weight: var(--font-weight-medium); } /* ----------------------------------------------------------------------------- Collection Search -------------------------------------------------------------------------- */ .collection-search { max-width: 400px; } .collection-search__input-wrapper { position: relative; display: flex; align-items: center; } .collection-search__icon { position: absolute; left: 1rem; color: var(--ctx-text-muted); pointer-events: none; } .collection-search__icon svg { width: 20px; height: 20px; } .collection-search__input { width: 100%; padding: 0.75rem 2.75rem 0.75rem 2.75rem; font-size: var(--label-large-font-size); color: var(--ctx-text); background: var(--ctx-bg-elevated); border: 1px solid var(--ctx-border); border-radius: var(--radius-md, 0.5rem); transition: border-color var(--motion-duration-xs), box-shadow var(--motion-duration-xs); } .collection-search__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.1); } .collection-search__input::placeholder { color: var(--ctx-text-muted); } .collection-search__clear { position: absolute; right: 0.5rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--ctx-text-muted); background: transparent; border: none; border-radius: var(--radius-sm, 0.25rem); cursor: pointer; transition: color var(--motion-duration-xs), background var(--motion-duration-xs); } .collection-search__clear:hover { color: var(--ctx-text); background: var(--ctx-bg-section); } .collection-search__clear svg { width: 16px; height: 16px; } .collection-search__results { margin-top: 0.5rem; font-size: var(--label-large-font-size); color: var(--ctx-text-muted); } /* Search expanded variant */ .collection-search--expanded { max-width: 100%; } .collection-search--expanded .collection-search__input { padding: 1rem 3rem 1rem 3.25rem; font-size: var(--body-medium-font-size); } /* ----------------------------------------------------------------------------- Collection Breadcrumbs (override for context) -------------------------------------------------------------------------- */ .collection-breadcrumbs { margin-bottom: 1.5rem; } /* ----------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 767px) { .collection-archive__controls { flex-direction: column; } .collection-search { max-width: 100%; } .collection-filters__letters { justify-content: center; } .collection-archive__grid { grid-template-columns: 1fr; } .collection-alpha__items { grid-template-columns: 1fr; } .collection-card--horizontal, .collection-card--directory { flex-direction: column; } .collection-card--horizontal .collection-card__image, .collection-card--directory .collection-card__image { width: 100%; min-width: auto; } .collection-card--directory .collection-card__image { width: 80px; margin: var(--space-4) auto 0; } .collection-single__nav { grid-template-columns: 1fr; } .collection-single__nav-item--next { text-align: left; } } /* ============================================================================= * M3 TYPOGRAPHY UTILITY CLASSES * Material Design 3 type scale utilities * Tokens injected from config.php via assets.php * ============================================================================= */ /* Display Scale */ .text-display-large { font-size: var(--display-large-font-size, 3.5rem); line-height: var(--display-large-line-height, 1.1); letter-spacing: var(--display-large-letter-spacing, -0.02em); font-weight: var(--display-large-font-weight, 700); } .text-display-medium { font-size: var(--display-medium-font-size, 2.75rem); line-height: var(--display-medium-line-height, 1.15); letter-spacing: var(--display-medium-letter-spacing, -0.015em); font-weight: var(--display-medium-font-weight, 700); } .text-display-small { font-size: var(--display-small-font-size, 2.25rem); line-height: var(--display-small-line-height, 1.2); letter-spacing: var(--display-small-letter-spacing, -0.01em); font-weight: var(--display-small-font-weight, 600); } /* Headline Scale */ .text-headline-large { font-size: var(--headline-large-font-size, 2rem); line-height: var(--headline-large-line-height, 1.25); letter-spacing: var(--headline-large-letter-spacing, -0.01em); font-weight: var(--headline-large-font-weight, 600); } .text-headline-medium { font-size: var(--headline-medium-font-size, 1.75rem); line-height: var(--headline-medium-line-height, 1.3); letter-spacing: var(--headline-medium-letter-spacing, -0.005em); font-weight: var(--headline-medium-font-weight, 600); } .text-headline-small { font-size: var(--headline-small-font-size, 1.5rem); line-height: var(--headline-small-line-height, 1.35); letter-spacing: var(--headline-small-letter-spacing, 0); font-weight: var(--headline-small-font-weight, 600); } /* Title Scale */ .text-title-large { font-size: var(--title-large-font-size, 1.375rem); line-height: var(--title-large-line-height, 1.4); letter-spacing: var(--title-large-letter-spacing, 0); font-weight: var(--title-large-font-weight, 600); } .text-title-medium { font-size: var(--title-medium-font-size, 1.125rem); line-height: var(--title-medium-line-height, 1.45); letter-spacing: var(--title-medium-letter-spacing, 0.01em); font-weight: var(--title-medium-font-weight, 500); } .text-title-small { font-size: var(--title-small-font-size, 1rem); line-height: var(--title-small-line-height, 1.5); letter-spacing: var(--title-small-letter-spacing, 0.01em); font-weight: var(--title-small-font-weight, 500); } /* Body Scale */ .text-body-large { font-size: var(--body-large-font-size, 1.125rem); line-height: var(--body-large-line-height, 1.6); letter-spacing: var(--body-large-letter-spacing, 0.01em); font-weight: var(--body-large-font-weight, 400); } .text-body-medium { font-size: var(--body-medium-font-size, 1rem); line-height: var(--body-medium-line-height, 1.6); letter-spacing: var(--body-medium-letter-spacing, 0.015em); font-weight: var(--body-medium-font-weight, 400); } .text-body-small { font-size: var(--body-small-font-size, 0.875rem); line-height: var(--body-small-line-height, 1.5); letter-spacing: var(--body-small-letter-spacing, 0.02em); font-weight: var(--body-small-font-weight, 400); } /* Label Scale */ .text-label-large { font-size: var(--label-large-font-size, 0.875rem); line-height: var(--label-large-line-height, 1.4); letter-spacing: var(--label-large-letter-spacing, 0.02em); font-weight: var(--label-large-font-weight, 500); } .text-label-medium { font-size: var(--label-medium-font-size, 0.75rem); line-height: var(--label-medium-line-height, 1.4); letter-spacing: var(--label-medium-letter-spacing, 0.03em); font-weight: var(--label-medium-font-weight, 500); } .text-label-small { font-size: var(--label-small-font-size, 0.6875rem); line-height: var(--label-small-line-height, 1.4); letter-spacing: var(--label-small-letter-spacing, 0.03em); font-weight: var(--label-small-font-weight, 500); }