/* ████████╗ ██████╗ ██╗ ██╗███████╗███╗ ██╗ ███████╗██╗ ██╗██████╗ ██████╗ ██████╗ ████████╗███████╗██████╗ ╚══██╔══╝██╔═══██╗██║ ██╔╝██╔════╝████╗ ██║ ██╔════╝╚██╗██╔╝██╔══██╗██╔═══██╗██╔══██╗╚══██╔══╝██╔════╝██╔══██╗ ██║ ██║ ██║█████╔╝ █████╗ ██╔██╗ ██║ █████╗ ╚███╔╝ ██████╔╝██║ ██║██████╔╝ ██║ █████╗ ██████╔╝ ██║ ██║ ██║██╔═██╗ ██╔══╝ ██║╚██╗██║ ██╔══╝ ██╔██╗ ██╔═══╝ ██║ ██║██╔══██╗ ██║ ██╔══╝ ██╔══██╗ ██║ ╚██████╔╝██║ ██╗███████╗██║ ╚████║ ███████╗██╔╝ ██╗██║ ╚██████╔╝██║ ██║ ██║ ███████╗██║ ██║ ╚═╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═══╝ ╚══════╝╚═╝ ╚═╝╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝ ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ Token Exporter Design System | Crafted with ❤️ by Nate Mills ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ ╔═══[ PLAYER SELECT ]══════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ ║ ║ ███╗ ██╗ █████╗ ████████╗███████╗ ███╗ ███╗██╗██╗ ██╗ ███████╗ ║ ║ ████╗ ██║██╔══██╗╚══██╔══╝██╔════╝ ████╗ ████║██║██║ ██║ ██╔════╝ ║ ║ ██╔██╗ ██║███████║ ██║ █████╗ ██╔████╔██║██║██║ ██║ ███████╗ ║ ║ ██║╚██╗██║██╔══██║ ██║ ██╔══╝ ██║╚██╔╝██║██║██║ ██║ ╚════██║ ║ ║ ██║ ╚████║██║ ██║ ██║ ███████╗ ██║ ╚═╝ ██║██║███████╗███████╗███████║ ║ ║ ╚═╝ ╚═══╝╚═╝ ╚═╝ ╚═╝ ╚══════╝ ╚═╝ ╚═╝╚═╝╚══════╝╚══════╝╚══════╝ ║ ║ ║ ║ ┌──[ CREATOR STATS ]─────────────────────────────────────────────────────────┐ ║ ║ │ LEVEL: SENIOR+ | CLASS: FIGMA EXPERT | XP: █ █ █ █ █ █ █ MAX │ ║ ║ │ SENIOR UI DESIGNER | DESIGN SYSTEMS ARCHITECT | AI-ASSISTED DEVELOPMENT │ ║ ║ └────────────────────────────────────────────────────────────────────────────┘ ║ ║ ║ ║ [STATUS] ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ [WIZARD] ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════════════════════╝ ================================================================================== [SYSTEM LINK ESTABLISHED] : [DESIGN CONCEPTS] <===> [CODE CONCEPTS] ================================================================================== This guide translates design terminology into its corresponding code implementation, providing a shared language for designers and developers. It follows the principles of Atomic Design. [ATOMIC DESIGN] [FIGMA TERMINOLOGY] [CODING TERMINOLOGY (CSS/HTML)] ---------------------------------------------------------------------------------- ATOMS STYLES FOUNDATION / TOKENS (Color, Text, Grid) The absolute source of truth for the brand. Defined in the `:root` block as CSS Custom Properties (Variables). e.g., --brand-primary ATOMS AUTO LAYOUT UTILITY CLASSES (Spacing, Alignment) Single-purpose helper classes that apply one specific style from the foundation. e.g., .flex, .p-4, .text-center MOLECULES COMPONENTS COMPONENTS (SIMPLE) / CLASSES (e.g., Button, Input) A combination of foundational styles and structure to create a simple, reusable element defined by a class. e.g., .btn ORGANISMS COMPONENT SETS COMPONENTS (COMPLEX) / CLASSES (e.g., Token Card, A distinct section of the interface, Empty State) composed of multiple simpler components. e.g., .token-summary-card TEMPLATES PAGES / FRAMES LAYOUT STYLES The highest-level structure that arranges organisms and molecules on the screen. e.g., .guide-container, .guide-sidebar */ /* 1. Import Open Props - Our foundation design tokens */ @import url("../vendor/open-props/open-props.min.css"); @import url("../vendor/open-props/normalize.min.css"); @import url("../vendor/open-props/buttons.min.css"); /* ========================================================================== BASE STYLES ========================================================================== */ html { font-size: 100%; /* Respects user browser settings, 1rem = 16px */ } body { font-size: var(--font-size-0); } :root { /* ========================= VERSION & METADATA ========================= */ --system-version: "4.0.0"; --system-updated: "2025-01-11"; --system-stage: "production"; /* ========================= PLUGIN DIMENSIONS (from code.js) ========================= */ --plugin-width: 340px; --plugin-height: 480px; /* ╔══════════════════════════════════════════════════════════════════╗ ║ CSS CUSTOM PROPERTIES & TOKENS ║ ║ ║ ║ Organization: ║ ║ 1. Primitive Tokens (Raw Values) ║ ║ 2. Semantic Tokens (Contextual Aliases) ║ ║ 3. Theme Definitions (Light/Dark/Custom) ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ╔══════════════════════════════════════════════════════════════════╗ ║ 1. PRIMITIVE TOKENS ║ ║ Raw values - The foundation of our system ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ========================= COLOR PRIMITIVES - Raw Values ========================= */ /* Lime/Chartreuse Scale */ --color-lime-300: #E6FF7A; --color-lime-400: #D2FF37; /* Primary brand lime */ --color-lime-500: #BFFF00; /* Darker lime */ --color-lime-600: #9C0; /* Yellow Scale */ --color-yellow-300: #FF6; --color-yellow-400: #EF0; /* Bright yellow */ --color-yellow-500: #FFD700; /* Gold */ /* Pink Scale */ --color-pink-300: #FFB6C1; --color-pink-400: #FF1493; /* Hot pink / Deep pink */ --color-pink-500: #FF69B4; /* Light pink */ /* Accent Colors */ --color-green-400: #0F8; /* Matrix green */ --color-cyan-400: #00BFFF; /* Deep sky blue */ --color-cyan-500: #00D1FF; /* Bright cyan */ /* Base Colors */ --color-black: #000; --color-white: #FFF; --color-near-black: #1E1E1E; /* RGB values for opacity mixing */ --color-lime-400-rgb: 210, 255, 55; --color-yellow-400-rgb: 238, 255, 0; --color-pink-400-rgb: 255, 20, 147; --color-black-rgb: 0, 0, 0; --color-white-rgb: 255, 255, 255; /* ========================= NEUTRAL PALETTE (DUAL SCALE) ========================= */ /* Warm Scale (For Dark Theme) */ --gray-warm-0: #f0f0f0; --gray-warm-1: #ccc; --gray-warm-2: #a0a0a0; --gray-warm-3: #999; --gray-warm-4: #666; --gray-warm-5: #444; --gray-warm-6: #3a3a3a; --gray-warm-7: #2a2a2a; --gray-warm-8: #1e1e1e; --gray-warm-9: #121212; /* Cool Scale (For Light Theme) */ --gray-cool-0: #FFF; --gray-cool-1: #F7F8FA; --gray-cool-2: #E2E8F0; --gray-cool-3: #A0AEC0; --gray-cool-4: #718096; --gray-cool-5: #4A5568; --gray-cool-6: #2D3748; --gray-cool-7: #1A202C; --gray-cool-8: #171923; --gray-cool-9: #1A1D23; /* RGB values for opacity mixing */ --gray-warm-0-rgb: 240, 240, 240; --gray-warm-7-rgb: 42, 42, 42; --gray-warm-8-rgb: 30, 30, 30; /* ========================= FUNCTIONAL PALETTE ========================= */ /* Category colors for token types */ --value-color: #00D1FF; /* Color values */ --value-text: #B48CFF; /* Text/String values */ --value-number: #FFB86C; /* Numeric values */ --value-state: #FF74BC; /* Boolean/State values */ /* Error colors */ --red-6: #ff5252; --red-6-rgb: 255, 82, 82; /* RGB values for opacity mixing */ --value-color-rgb: 0, 209, 255; --value-text-rgb: 180, 140, 255; --value-number-rgb: 255, 184, 108; --value-state-rgb: 255, 116, 188; /* ========================= TYPOGRAPHY ========================= */ --font-sans: 'Inter', -apple-system, blinkmacsystemfont, sans-serif; --font-mono: 'Monaco', 'Menlo', monospace; /* ========================= OPACITY SCALE ========================= */ --opacity-0: 0; --opacity-5: 0.05; --opacity-10: 0.1; --opacity-20: 0.2; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-80: 0.8; --opacity-90: 0.9; --opacity-100: 1; /* ========================= GLASS EFFECT TOKENS ========================= */ /* Dark glass effects (for dark backgrounds) */ --glass-dark-0: rgb(0, 0, 0, 0); /* 0% opacity, use with blur only */ --glass-dark-5: rgb(0, 0, 0, 0.05); /* 5% opacity, use with 2px blur */ --glass-dark-10: rgb(0, 0, 0, 0.1); /* 10% opacity, use with 4px blur */ --glass-dark-20: rgb(0, 0, 0, 0.2); /* 20% opacity, use with 8px blur */ --glass-dark-40: rgb(0, 0, 0, 0.4); /* 40% opacity, use with 12px blur */ --glass-dark-60: rgb(0, 0, 0, 0.6); /* 60% opacity, use with 16px blur */ --glass-dark-80: rgb(0, 0, 0, 0.8); /* 80% opacity, use with 20px blur */ /* Light glass effects (for light backgrounds) */ --glass-light-0: rgb(255, 255, 255, 0); /* 0% opacity, use with blur only */ --glass-light-5: rgb(255, 255, 255, 0.05); /* 5% opacity, use with 2px blur */ --glass-light-10: rgb(255, 255, 255, 0.1); /* 10% opacity, use with 4px blur */ --glass-light-20: rgb(255, 255, 255, 0.2); /* 20% opacity, use with 8px blur */ --glass-light-40: rgb(255, 255, 255, 0.4); /* 40% opacity, use with 12px blur */ --glass-light-60: rgb(255, 255, 255, 0.6); /* 60% opacity, use with 16px blur */ --glass-light-80: rgb(255, 255, 255, 0.8); /* 80% opacity, use with 20px blur */ /* Blur values for glass effects */ --glass-blur-subtle: 2px; --glass-blur-light: 4px; --glass-blur-medium: 8px; --glass-blur-strong: 12px; --glass-blur-heavy: 16px; --glass-blur-max: 20px; /* Glass morphism opacities */ --opacity-glass-10: 0.1; --opacity-glass-60: 0.6; --opacity-overlay-80: 0.8; --opacity-backdrop: 0.85; /* ========================= ICON DESIGN TOKENS ========================= */ /* Icon sizing tokens */ --icon-2xs: var(--size-2); --icon-xs: var(--size-3); --icon-sm: var(--size-4); --icon-md: var(--size-5); --icon-lg: var(--size-6); --icon-xl: var(--size-7); --icon-xlg: var(--size-8); /* 48px - NEW */ --icon-xxl: var(--size-9); --icon-3xl: var(--size-12); --icon-4xl: var(--size-15); --icon-5xl: 160px; /* Custom typography tokens for edge cases */ --font-size-0-5: 0.85rem; /* Between --font-size-0 (0.75rem) and --font-size-1 (1rem) */ --font-size-responsive-tiny: clamp(0.45rem, 2.2vw, 0.65rem); /* Responsive tiny text */ /* Icon stroke weight tokens */ --icon-stroke-hairline: 1; --icon-stroke-thin: 1.5; --icon-stroke-regular: 2; --icon-stroke-bold: 2.5; --icon-stroke-heavy: 3; /* Icon SVG definitions as custom properties (source of truth) */ --icon-svg-type: url("data:image/svg+xml;utf8,"); --icon-svg-hash: url("data:image/svg+xml;utf8,"); --icon-svg-toggle-right: url("data:image/svg+xml;utf8,"); /* ========================= CONTENT WIDTHS ========================= */ --content-xs: 320px; --content-sm: 640px; --content-md: 768px; --content-lg: 1024px; --content-xl: 1280px; --content-prose: 65ch; /* ========================= BLUR VALUES ========================= */ --blur-sm: blur(4px); --blur-md: blur(8px); --blur-lg: blur(16px); --blur-xl: blur(24px); /* ========================= STROKE WEIGHTS ========================= */ --stroke-thin: var(--border-size-1); /* Thin stroke weight */ --stroke-regular: var(--border-size-2); /* Regular stroke weight */ --stroke-thick: var(--border-size-3); /* ========================= LAYOUT & COMPONENT TOKENS ========================= */ /* Touch target minimums (Apple HIG) */ --touch-target-min: 44px; /* Component heights */ --component-height-sm: 40px; --component-height-md: 48px; --component-height-lg: 60px; --component-height-xl: 80px; --component-height-xxl: 120px; /* Grid column widths */ --grid-col-label: 100px; /* Label column in token grids */ --grid-col-label-sm: 90px; /* Smaller screens */ --grid-col-label-xs: 85px; /* Extra small screens */ /* Animation offsets */ --animation-offset-sm: 15px; --animation-offset-md: 30px; /* Divider thickness */ --divider-thin: 1px; --divider-thick: 2px; --divider-heavy: 3px; /* Progress indicators */ --progress-height-sm: 8px; --progress-height-md: 12px; --progress-height-lg: 18px; /* Card minimum heights */ --card-min-height-sm: 80px; --card-min-height-md: 120px; --card-min-height-lg: 200px; --card-min-height-xl: 300px; --card-min-height-xxl: 400px; --card-min-height-tall: 500px; --card-min-height-ultra: 520px; /* Icon dimensions for specific use cases */ --icon-menu: 24px; --icon-button: 32px; --icon-avatar: 56px; --icon-feature: 64px; /* Border thickness for specific components */ --border-focus-ring: 2px; --border-card: 1px; --border-button: 1px; /* Layout spacing for components */ --inset-sm: 6px; --inset-md: 10px; /* ========================= MISC PRIMITIVES ========================= */ --color-backdrop-rgb: 0, 0, 0; /* Black for dark theme */ --scale-sm: 1.05; /* ╔══════════════════════════════════════════════════════════════════╗ ║ 2. SEMANTIC TOKENS (ALIASES) ║ ║ Contextual usage of primitives - The "how" & "when" ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ========================= BRAND SEMANTICS - Unified Theme Colors ========================= */ --brand-primary: #D2FF37; /* Lime - Primary brand color */ --brand-secondary: #FF1493; /* Deep Pink - Secondary color */ --brand-text-dark: var(--color-near-black); /* Text on light backgrounds */ /* ========================= GRADIENTS ========================= */ --brand-gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--color-cyan-500) 100%); --brand-gradient-secondary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); --brand-gradient-accent: linear-gradient(135deg, var(--brand-secondary) 0%, var(--color-cyan-500) 100%); --brand-gradient-highlight: linear-gradient(135deg, var(--brand-primary) 0%, var(--color-yellow-400) 100%); /* ========================= CORE GRADIENTS (Simplified to 4) ========================= */ /* Core gradient tokens - all horizontal (90deg) for consistency */ --gradient-primary: linear-gradient(90deg, var(--brand-primary) 0%, var(--color-cyan-500) 100%); /* Lime to cyan */ --gradient-secondary: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); /* Lime to pink/lime */ --gradient-accent: linear-gradient(90deg, var(--brand-secondary) 0%, var(--color-cyan-500) 100%); /* Pink to cyan (dark mode) */ --gradient-highlight: linear-gradient(90deg, var(--brand-primary) 0%, var(--color-yellow-400) 100%); /* Lime to yellow */ /* Legacy aliases for backwards compatibility */ --gradient-primary-90: var(--gradient-primary); --gradient-accent-90: var(--gradient-accent); --gradient-highlight-90: var(--gradient-highlight); /* RGB semantic aliases for mixing */ --brand-primary-rgb: 210, 255, 55; /* Lime RGB */ --brand-secondary-rgb: 255, 20, 147; /* Deep Pink RGB */ /* ========================= SURFACE & BORDER COLORS ========================= */ --surface-1: var(--gray-warm-8); --surface-2: var(--gray-warm-7); --surface-3: var(--gray-warm-6); --surface-4: var(--gray-warm-5); --color-background-primary: var(--gray-warm-8); --color-background-secondary: var(--gray-warm-7); --color-background-tertiary: var(--gray-warm-6); --color-background-disabled: var(--gray-warm-7); --color-background-code: var(--gray-warm-8); --color-background-default: var(--gray-warm-8); /* Same as primary */ --color-background-subtle: var(--gray-warm-7); /* Same as secondary */ --color-backdrop: rgb(var(--color-backdrop-rgb), var(--opacity-backdrop)); --color-border-default: var(--gray-warm-5); --color-border-subtle: var(--gray-warm-6); --color-border-interactive-focus: var(--brand-primary); /* ========================= TEXT & CONTENT COLORS ========================= */ --color-text-default: var(--gray-warm-0); --color-text-secondary: var(--gray-warm-1); --color-text-muted: var(--gray-warm-1); --color-text-on-brand: var(--brand-text-dark); --color-text-error: var(--red-6); /* ========================= INTERACTIVE & STATUS COLORS ========================= */ --color-status-success: var(--brand-primary); --color-status-warning: var(--value-number); /* Optional, for future use */ --color-status-error: var(--color-text-muted); /* For "not applicable" state */ /* Interactive surface states */ --surface-hover: rgb(var(--gray-warm-0-rgb, 255, 255, 255), 0.05); --surface-active: rgb(var(--gray-warm-0-rgb, 255, 255, 255), 0.1); /* ========================= SEMANTIC SPACING ========================= */ --spacing-xs: var(--size-1); --spacing-sm: var(--size-2); --spacing-md: var(--size-4); --spacing-lg: var(--size-6); --spacing-xl: var(--size-8); /* ========================= COMPONENT TOKENS - DARK THEME DEFAULTS ========================= */ /* Button tokens */ --btn-primary-bg: var(--gradient-highlight-90); --btn-primary-text: var(--gray-warm-9); --btn-primary-hover-filter: brightness(1.1); --btn-primary-focus-ring: var(--focus-ring); --btn-secondary-bg: transparent; --btn-secondary-text: var(--gray-warm-1); --btn-secondary-border: var(--gray-warm-5); --btn-secondary-hover-text: var(--brand-secondary); --btn-secondary-hover-border: var(--brand-secondary); --btn-secondary-hover-bg: rgb(var(--brand-secondary-rgb), 0.1); --btn-tertiary-bg: transparent; --btn-tertiary-text: var(--color-text-default); /* Changed from secondary for better contrast */ --btn-tertiary-border: transparent; /* No border for text-only tertiary */ --btn-tertiary-hover-text: var(--brand-secondary); --btn-tertiary-hover-bg: transparent; --btn-icon-bg: var(--white-alpha-10); --btn-icon-text: var(--color-text-secondary); --btn-icon-border: var(--white-alpha-20); --btn-icon-hover-bg: var(--white-alpha-20); --btn-icon-hover-border: var(--brand-secondary); --btn-icon-hover-shadow: 0 0 12px rgb(var(--brand-secondary-rgb), 0.3), 0 4px 8px rgb(var(--brand-secondary-rgb), 0.1); /* Card tokens */ --card-bg: var(--surface-2); --card-border: var(--color-border-subtle); --card-text: var(--color-text-default); /* Badge tokens */ --badge-bg: transparent; --badge-border: var(--brand-primary); --badge-text: var(--brand-primary); --badge-secondary-bg: transparent; --badge-secondary-border: var(--brand-secondary); /* Component section tokens */ --component-section-bg: transparent; --component-section-border: var(--color-border-subtle); /* Token stat tokens */ --token-stat-bg: var(--surface-3); --token-stat-border: var(--color-border-subtle); --token-stat-active-bg: var(--surface-2); --token-stat-active-border: var(--brand-primary); /* Theme toggle tokens */ --sun-icon-color: rgb(255, 255, 255, 0.3); --moon-icon-color: rgb(0, 0, 0, 0.1); --theme-toggle-bg: var(--gray-warm-8); --theme-toggle-gradient: var(--gradient-accent-90); /* Pink to turquoise for dark mode */ /* FAQ tokens */ --faq-bg: var(--surface-2); --faq-border: var(--color-border-subtle); --faq-question-color: var(--color-text-default); --faq-answer-color: var(--color-text-secondary); /* Empty state tokens */ --empty-state-bg: var(--surface-2); --empty-state-border: var(--color-border-default); --empty-state-text: var(--color-text-muted); /* Progress tokens */ --progress-bg: var(--surface-3); --progress-fill: var(--gradient-primary-90); /* Use horizontal gradient for progress bars */ /* Gradient text tokens */ --gradient-text-bg: var(--brand-gradient-lime); --token-count-bg: var(--brand-gradient-lime); /* Code block tokens */ --code-bg: var(--surface-2); --code-border: var(--color-border-subtle); --code-text: var(--color-text-default); /* Navigation tokens */ --nav-bg: var(--surface-2); --nav-border: var(--color-border-subtle); --nav-link-color: var(--color-text-secondary); --nav-link-hover-color: var(--brand-secondary); --nav-link-hover-bg: var(--surface-hover); --nav-link-active-color: var(--brand-secondary); --nav-link-active-bg: var(--surface-1); /* Header tokens */ --header-bg: var(--color-background-secondary); --header-border: var(--color-border-subtle); /* Section tokens */ --section-bg: var(--surface-1); /* Token summary tokens */ --token-summary-bg: var(--surface-2); --token-summary-border: var(--color-border-subtle); --token-label-color: var(--color-text-secondary); --count-color: var(--color-text-default); /* Hero tokens */ --hero-bg: var(--surface-1); --hero-title-color: var(--color-text-default); /* Footer tokens */ --footer-bg: var(--surface-2); --footer-border: var(--color-border-subtle); /* Example label tokens */ --example-label-color: var(--brand-primary); --spacing-2xl: var(--size-10); /* Component-specific spacing */ --spacing-card: var(--size-3); --spacing-section: var(--size-10); --spacing-input: var(--size-2) var(--size-3); --spacing-button: var(--size-2) var(--size-3); /* ========================= COMPONENT-SPECIFIC SEMANTIC TOKENS (DARK THEME) ========================= */ /* Section headers */ --section-title-icon-color: currentcolor; --guide-main-title-color: var(--color-text-default); /* Navigation */ --nav-link-hover-bg: var(--surface-hover); --nav-link-hover-color: var(--brand-secondary); --nav-link-active-color: var(--brand-secondary); --nav-link-active-bg: var(--surface-1); --nav-underline-color: var(--brand-primary); /* FAQ */ --faq-toggle-color: var(--brand-secondary); /* Skeleton loader */ --skeleton-pulse-bg: var(--surface-3); /* Hero */ --hero-bg-pattern: /* Color glows */ radial-gradient(circle at 20% 50%, rgb(210, 255, 55, 0.08) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgb(238, 255, 0, 0.04) 0%, transparent 40%), /* Diagonal line pattern */ repeating-linear-gradient( 45deg, transparent, transparent 10px, rgb(210, 255, 55, 0.02) 10px, rgb(210, 255, 55, 0.02) 20px ); /* Unified container styling for dark theme */ --container-bg: var(--surface-2); --container-border: var(--color-border-subtle); /* Token sections */ --token-section-bg: transparent; --token-section-border: var(--container-border); --token-header-bg: var(--surface-3); --token-item-bg: var(--container-bg); --token-item-border: var(--container-border); /* Type scale */ --type-scale-bg: var(--container-bg); --type-scale-border: var(--container-border); --type-scale-code-color: var(--color-text-default); --type-scale-details-color: var(--color-text-secondary); /* Examples and previews */ --example-container-bg: var(--container-bg); --example-container-border: var(--container-border); --preview-bg: var(--surface-3); --preview-border: var(--color-border-subtle); /* Components */ --compact-card-bg: var(--surface-2); --compact-card-border: var(--color-border-subtle); --tech-stack-bg: var(--surface-2); --tech-item-bg: transparent; --faq-section-bg: var(--surface-2); --faq-item-bg: var(--surface-2); --stat-card-bg: var(--surface-2); --guideline-card-bg: var(--surface-2); /* Playground */ --playground-bg: var(--surface-2); --playground-controls-bg: var(--surface-3); --playground-border: var(--color-border-subtle); /* Tables */ --table-bg: var(--surface-2); --table-header-bg: var(--surface-3); --table-hover-bg: var(--surface-3); /* Panels */ --info-panel-bg: var(--surface-3); --info-panel-border: var(--color-border-subtle); /* Motion demos */ --motion-demo-bg: var(--surface-2); --motion-demo-border: var(--color-border-subtle); --motion-track-bg: var(--surface-3); --motion-btn-bg: var(--surface-3); --motion-btn-hover-bg: var(--surface-4); /* Footer */ --footer-attribution-color: var(--color-text-default); /* Design sections */ --design-section-bg: var(--surface-2); --design-section-border: var(--color-border-subtle); /* Tabs */ --tab-active-color: var(--brand-primary); --tab-active-border: var(--brand-primary); /* Checkerboard Pattern */ --checkerboard-color-1: var(--surface-3); --checkerboard-color-2: var(--surface-4); --checkerboard-size: var(--size-4); /* 20px for desktop */ --checkerboard-size-mobile: var(--size-2); /* 10px for mobile */ /* Mobile menu */ --mobile-menu-hover-border: var(--brand-primary); --mobile-menu-hover-color: var(--brand-primary); /* Theme toggle */ --theme-toggle-bg: var(--gray-warm-8); /* Glass morphism surfaces */ --surface-glass-dark: rgb(30, 30, 30, 0.6); /* Dark glass with 60% opacity */ --surface-overlay-heavy: rgb(42, 42, 42, 0.95); /* Heavy overlay 95% opacity */ /* Pattern colors */ --color-pattern-default: var(--color-border-default); /* For decorative patterns */ /* ========================= COMPONENT SIZES ========================= */ --component-height-xs: var(--size-6); --component-height-sm: var(--size-7); --component-height-md: var(--size-8); --component-height-lg: var(--size-9); --component-height-xl: var(--size-10); --component-height-xxl: 140px; /* ========================= Z-INDEX LAYERS ========================= */ --layer-base: var(--layer-1); --layer-card: var(--layer-2); --layer-dropdown: var(--layer-3); --layer-modal: var(--layer-4); --layer-notification: var(--layer-5); /* ========================= SEMANTIC OPACITY ========================= */ --opacity-disabled: var(--opacity-60); --opacity-hover: var(--opacity-80); --opacity-overlay: var(--opacity-10); /* ========================= ALPHA VARIANTS ========================= */ --brand-primary-alpha-10: rgb(var(--brand-primary-rgb), 0.1); --brand-primary-alpha-20: rgb(var(--brand-primary-rgb), 0.2); --value-color-alpha-10: rgb(var(--value-color-rgb), 0.1); --value-text-alpha-10: rgb(var(--value-text-rgb), 0.1); --value-number-alpha-10: rgb(var(--value-number-rgb), 0.1); --value-state-alpha-10: rgb(var(--value-state-rgb), 0.1); --value-color-alpha-20: rgb(var(--value-color-rgb), 0.2); --value-text-alpha-20: rgb(var(--value-text-rgb), 0.2); --value-number-alpha-20: rgb(var(--value-number-rgb), 0.2); --value-state-alpha-20: rgb(var(--value-state-rgb), 0.2); /* Black & White Alpha Tokens */ --black-alpha-05: rgb(0, 0, 0, 0.05); --black-alpha-10: rgb(0, 0, 0, 0.1); --black-alpha-20: rgb(0, 0, 0, 0.2); --black-alpha-30: rgb(0, 0, 0, 0.3); --black-alpha-50: rgb(0, 0, 0, 0.5); --white-alpha-05: rgb(255, 255, 255, 0.05); --white-alpha-10: rgb(255, 255, 255, 0.1); --white-alpha-20: rgb(255, 255, 255, 0.2); --white-alpha-30: rgb(255, 255, 255, 0.3); --white-alpha-50: rgb(255, 255, 255, 0.5); /* ========================= TRANSITIONS ========================= */ --transition-fast: all var(--animation-duration-2) var(--ease-3); --transition-medium: all var(--animation-duration-3) var(--ease-3); --transition-slow: all var(--animation-duration-4) var(--ease-3); /* ========================= GLASS EFFECT SEMANTIC ALIASES ========================= */ /* Glass panels by intensity */ --glass-panel-zero: var(--glass-dark-0); /* 0% opacity, blur only */ --glass-panel-subtle: var(--glass-dark-20); /* 20% opacity, 8px blur */ --glass-panel-medium: var(--glass-dark-40); /* 40% opacity, 12px blur */ --glass-panel-strong: var(--glass-dark-60); /* 60% opacity, 16px blur */ /* ========================= FOCUS STATES ========================= */ --focus-ring: 0 0 0 3px rgb(var(--brand-primary-rgb), 0.2); --focus-ring-error: 0 0 0 3px rgb(var(--red-6-rgb), 0.2); /* ========================= SHADOWS ========================= */ --shadow-brand: 0 4px 15px rgb(var(--brand-primary-rgb), 0.15); --shadow-brand-hover: 0 6px 20px rgb(var(--brand-primary-rgb), 0.25); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ THEME DEFINITIONS ║ ║ ║ ║ Dark theme is the default (defined in :root above) ║ ║ Light theme overrides are defined below ║ ╚══════════════════════════════════════════════════════════════════╝ */ [data-theme="light"] { /* ╔══════════════════════════════════════════════════════════════════╗ ║ LIGHT THEME - CHARTREUSE FLOW DESIGN ║ ║ Cool Gray Monochromatic Base + Chartreuse/Pink Accents ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ========================= BRAND COLORS - Same as dark theme (unified palette) ========================= */ /* Brand colors inherited from :root - no overrides needed */ /* Using unified color palette across both themes */ /* Additional brand tokens for light mode */ --brand-primary-dark: #1E1E1E; /* Pure black for high contrast */ --brand-primary-dark-rgb: 30, 30, 30; /* Black RGB */ /* ========================= SURFACE HIERARCHY - COOL GRAY ========================= */ --surface-1: var(--gray-cool-0); --surface-2: var(--gray-cool-1); --surface-3: var(--gray-cool-2); --surface-4: var(--gray-cool-3); /* ========================= BACKGROUND COLORS ========================= */ --color-background-primary: var(--gray-cool-0); --color-background-secondary: var(--gray-cool-1); --color-background-tertiary: var(--gray-cool-2); --color-background-disabled: var(--gray-cool-2); --color-background-code: var(--gray-cool-1); --color-background-default: var(--gray-cool-0); --color-background-subtle: var(--gray-cool-1); /* ========================= TEXT COLORS ========================= */ --color-text-default: var(--gray-cool-9); --color-text-secondary: var(--gray-cool-5); --color-text-muted: var(--gray-cool-4); --color-text-heading: var(--gray-cool-9); --color-text-brand: var(--gray-cool-9); --color-text-label: var(--gray-cool-9); --color-text-navigation: var(--gray-cool-9); --color-text-on-brand: var(--brand-primary-dark); /* Black text on lime backgrounds for WCAG */ --color-text-error: #DC2626; /* Error text */ --color-text-interactive: #FF1493; /* Interactive pink */ /* ========================= BORDER COLORS ========================= */ --color-border-default: var(--gray-cool-2); --color-border-subtle: var(--gray-cool-1); --color-border-muted: var(--gray-cool-3); --color-border-interactive-focus: #FF1493; /* Pink focus borders */ /* ========================= INTERACTIVE STATES ========================= */ --surface-hover: rgb(0, 0, 0, 0.02); /* Very subtle hover */ --surface-active: rgb(0, 0, 0, 0.04); /* Subtle active state */ /* ========================= SHADOWS - FLAT DESIGN (NO SHADOWS) ========================= */ --shadow-1: 0 1px 2px rgb(0, 0, 0, 0.05); --shadow-2: 0 2px 4px rgb(0, 0, 0, 0.08); --shadow-3: 0 4px 8px rgb(0, 0, 0, 0.12); --shadow-4: 0 8px 16px rgb(0, 0, 0, 0.16); --shadow-5: 0 12px 24px rgb(0, 0, 0, 0.20); --shadow-brand: 0 4px 15px rgb(var(--brand-secondary-rgb), 0.15); --shadow-brand-hover: 0 6px 20px rgb(var(--brand-secondary-rgb), 0.25); /* ========================= FOCUS STATES ========================= */ --focus-ring: 0 0 0 3px rgb(255, 20, 147, 0.15); /* Pink focus ring for secondary/tertiary */ --focus-ring-primary: 0 0 0 3px rgb(210, 255, 55, 0.25); /* Lime focus ring for primary buttons */ --focus-ring-error: 0 0 0 3px rgb(220, 38, 38, 0.15); /* ========================= ALPHA VARIANTS ========================= */ --brand-primary-alpha-10: rgb(204, 255, 0, 0.1); /* Chartreuse 10% */ --brand-primary-alpha-20: rgb(204, 255, 0, 0.2); /* Chartreuse 20% */ --brand-secondary-alpha-10: rgb(255, 20, 147, 0.1); /* Pink 10% */ --brand-secondary-alpha-20: rgb(255, 20, 147, 0.2); /* Pink 20% */ /* Category colors alpha */ --value-color-alpha-10: rgb(0, 209, 255, 0.1); --value-text-alpha-10: rgb(180, 140, 255, 0.1); --value-number-alpha-10: rgb(255, 184, 108, 0.1); --value-state-alpha-10: rgb(255, 116, 188, 0.1); /* ========================= STATUS COLORS ========================= */ --color-status-success: #10B981; /* Green for success */ --color-status-warning: #F59E0B; /* Amber for warning */ --color-status-error: #DC2626; /* Red for error */ /* ========================= CATEGORY COLORS (VIBRANT FOR LIGHT MODE) ========================= */ --value-color: #00D1FF; /* Color values - Keep original vibrancy */ --value-text: #B48CFF; /* Text values - Keep original vibrancy */ --value-number: #FFB86C; /* Numeric values - Keep original vibrancy */ --value-state: #FF74BC; /* State values - Keep original vibrancy */ /* ========================= MISC OVERRIDES ========================= */ --color-backdrop-rgb: 255, 255, 255; /* White backdrop */ --color-backdrop: rgb(255, 255, 255, 0.85); /* White overlay */ /* Checkerboard pattern */ --color-checkerboard-1: var(--gray-cool-1); --color-checkerboard-2: var(--gray-cool-2); /* Glass morphism (not used in flat design) */ --glass-light-10: rgb(255, 255, 255, 0.1); --glass-light-60: rgb(255, 255, 255, 0.6); --glass-light-80: rgb(255, 255, 255, 0.8); --glass-light-95: rgb(255, 255, 255, 0.95); /* Opacity scale (same as dark theme) */ --opacity-disabled: 0.6; --opacity-hover: 0.8; --opacity-overlay: 0.1; /* ========================= COMPONENT TOKENS - LIGHT THEME OVERRIDES ========================= */ /* Button tokens */ --btn-primary-bg: var(--brand-primary); --btn-primary-text: var(--brand-primary-dark); --btn-primary-hover-filter: brightness(0.95); --btn-primary-focus-ring: var(--focus-ring-primary, var(--focus-ring)); --btn-secondary-bg: transparent; --btn-secondary-text: var(--color-text-secondary); --btn-secondary-border: var(--color-border-default); --btn-secondary-hover-text: var(--brand-secondary); --btn-secondary-hover-border: var(--brand-secondary); --btn-secondary-hover-bg: rgb(255, 20, 147, 0.1); --btn-tertiary-bg: transparent; --btn-tertiary-text: var(--color-text-default); /* Changed from secondary for better contrast */ --btn-tertiary-border: transparent; /* No border for text-only tertiary */ --btn-tertiary-hover-text: var(--brand-secondary); /* Pink on hover in light mode */ --btn-tertiary-hover-bg: transparent; --btn-icon-bg: var(--white-alpha-05); /* Lighter glass effect for light mode */ --btn-icon-text: var(--color-text-secondary); /* Neutral color, not brand secondary */ --btn-icon-border: var(--color-border-default); /* Match secondary button border */ --btn-icon-hover-bg: var(--white-alpha-10); /* Slightly stronger glass on hover */ --btn-icon-hover-border: var(--brand-secondary); --btn-icon-hover-shadow: 0 0 12px rgb(var(--brand-secondary-rgb), 0.3); /* Glow only, no drop shadow */ /* Card tokens */ --card-bg: var(--surface-2); --card-border: var(--color-border-subtle); --card-text: var(--color-text-default); /* Badge tokens */ --badge-bg: transparent; --badge-border: var(--brand-secondary); --badge-text: var(--brand-secondary); --badge-secondary-bg: rgb(255, 20, 147, 0.1); --badge-secondary-border: var(--brand-secondary); /* Component section tokens */ --component-section-bg: transparent; --component-section-border: var(--color-border-default); /* Token stat tokens */ --token-stat-bg: var(--surface-3); --token-stat-border: var(--color-border-default); --token-stat-active-bg: var(--surface-1); --token-stat-active-border: var(--color-border-default); /* Theme toggle tokens */ --sun-icon-color: rgb(255, 255, 255, 0.3); --moon-icon-color: rgb(0, 0, 0, 0.1); --theme-toggle-bg: var(--brand-primary); /* FAQ tokens */ --faq-bg: var(--surface-2); --faq-border: var(--color-border-default); --faq-question-color: var(--color-text-default); --faq-answer-color: var(--color-text-secondary); /* Empty state tokens */ --empty-state-bg: var(--surface-1); --empty-state-border: var(--color-border-default); --empty-state-text: var(--color-text-muted); /* Progress tokens */ --progress-bg: var(--surface-3); --progress-fill: var(--brand-gradient-primary); /* Gradient text tokens */ --gradient-text-bg: var(--brand-gradient-primary); --token-count-bg: var(--brand-gradient-primary); /* Code block tokens */ --code-bg: var(--surface-2); --code-border: var(--color-border-subtle); --code-text: var(--color-text-default); /* Navigation tokens */ --nav-bg: var(--surface-2); --nav-border: var(--color-border-subtle); --nav-link-color: var(--color-text-secondary); --nav-link-hover-color: var(--brand-secondary); --nav-link-hover-bg: var(--surface-hover); --nav-link-active-color: var(--brand-secondary); --nav-link-active-bg: var(--surface-1); /* Header tokens */ --header-bg: var(--color-background-secondary); --header-border: var(--color-border-subtle); /* Section tokens */ --section-bg: var(--surface-1); /* Token summary tokens */ --token-summary-bg: var(--surface-2); --token-summary-border: var(--color-border-subtle); --token-label-color: var(--color-text-secondary); --count-color: var(--color-text-default); /* Hero tokens */ --hero-bg: var(--surface-1); --hero-title-color: var(--color-text-default); /* Footer tokens */ --footer-bg: var(--surface-2); --footer-border: var(--color-border-subtle); /* Example label tokens */ --example-label-color: var(--color-text-default); /* Token display specific overrides for light theme */ --token-name-color: var(--color-text-default); /* Use black for better contrast on light */ --token-value-color: var(--color-text-secondary); /* ========================= COMPONENT-SPECIFIC SEMANTIC TOKENS ========================= */ /* Section headers */ --section-title-icon-color: var(--color-text-muted); --guide-main-title-color: var(--color-text-default); /* Navigation */ --nav-link-hover-bg: var(--gray-cool-1); --nav-link-hover-color: var(--brand-secondary); --nav-link-active-color: var(--brand-secondary); --nav-link-active-bg: rgb(var(--brand-secondary-rgb), 0.1); --nav-underline-color: var(--brand-secondary); /* FAQ */ --faq-toggle-color: var(--brand-secondary); /* Skeleton loader */ --skeleton-pulse-bg: var(--gray-cool-2); /* Hero */ --hero-bg-pattern: none; /* Unified container styling - all use same colors for consistency */ --container-bg: var(--gray-cool-0); --container-border: var(--gray-cool-2); /* Token sections */ --token-section-bg: var(--container-bg); --token-section-border: var(--container-border); --token-header-bg: var(--gray-cool-1); --token-item-bg: var(--container-bg); --token-item-border: var(--container-border); /* Type scale */ --type-scale-bg: var(--container-bg); --type-scale-border: var(--container-border); --type-scale-code-color: var(--color-text-default); --type-scale-details-color: var(--color-text-secondary); /* Examples and previews */ --example-container-bg: var(--container-bg); --example-container-border: var(--container-border); --preview-bg: var(--gray-cool-1); --preview-border: var(--gray-cool-3); /* Components */ --compact-card-bg: var(--white-alpha-05); /* Match icon button glass effect */ --compact-card-border: var(--gray-cool-2); --tech-stack-bg: var(--gray-cool-0); --tech-item-bg: transparent; --faq-section-bg: var(--gray-cool-0); --faq-item-bg: var(--gray-cool-0); --stat-card-bg: var(--gray-cool-0); --guideline-card-bg: var(--gray-cool-0); /* Playground */ --playground-bg: var(--gray-cool-0); --playground-controls-bg: var(--gray-cool-1); --playground-border: var(--gray-cool-2); /* Tables */ --table-bg: var(--gray-cool-0); --table-header-bg: var(--gray-cool-1); --table-hover-bg: var(--gray-cool-1); /* Panels */ --info-panel-bg: var(--gray-cool-1); --info-panel-border: var(--gray-cool-2); /* Motion demos */ --motion-demo-bg: var(--gray-cool-0); --motion-demo-border: var(--gray-cool-2); --motion-track-bg: var(--gray-cool-1); --motion-btn-bg: var(--gray-cool-1); --motion-btn-hover-bg: var(--gray-cool-2); /* Footer - already defined above */ --footer-attribution-color: var(--color-text-muted); /* Design sections */ --design-section-bg: white; --design-section-border: var(--gray-cool-2); /* Tabs */ --tab-active-color: var(--brand-secondary); --tab-active-border: var(--brand-secondary); /* Checkerboard */ --checkerboard-color-1: var(--gray-cool-2); --checkerboard-color-2: var(--gray-cool-1); /* Mobile menu */ --mobile-menu-hover-border: var(--brand-secondary); --mobile-menu-hover-color: var(--brand-secondary); /* Theme toggle */ --theme-toggle-bg: var(--brand-primary); /* Glass morphism surfaces */ --surface-glass-dark: rgb(0, 0, 0, 0.05); /* Light glass with 5% opacity */ --surface-overlay-heavy: rgb(0, 0, 0, 0.9); /* Heavy overlay 90% opacity */ /* Pattern colors */ --color-pattern-default: var(--color-border-default); /* For decorative patterns */ /* Theme toggle gradient - horizontal for light mode */ --theme-toggle-gradient: var(--gradient-highlight-90); /* Lime to yellow for light mode */ /* Glass effect semantic aliases for light theme */ --glass-panel-zero: var(--glass-light-0); /* 0% opacity, blur only */ --glass-panel-subtle: var(--glass-light-10); /* 10% opacity, 4px blur */ --glass-panel-medium: var(--glass-light-20); /* 20% opacity, 8px blur */ --glass-panel-strong: var(--glass-light-40); /* 40% opacity, 12px blur */ /* Component-specific overrides for light theme */ /* Theme toggle icon */ .sun-container svg { stroke: black; } /* FAQ Hover States - Use Pink */ .faq-item:hover { border-color: rgb(var(--brand-secondary-rgb), 0.3); background: rgb(var(--brand-secondary-rgb), 0.02); } .faq-item.open .faq-question { color: var(--brand-secondary); /* Pink in light mode */ } /* Tertiary Button Hover - Should be Pink */ .btn-tertiary:hover:not(:disabled) { color: var(--brand-secondary); /* Pink, not lime */ } /* Profile Card Fixes */ .profile-card .ascii-art, .profile-card .ascii-art-mobile { color: var(--brand-secondary); /* Pink in light mode */ text-shadow: none; /* Remove glow for readability */ } .profile-card .code-container { background: var(--white-alpha-05); /* Light glass effect */ border-color: var(--color-border-subtle); } .profile-card .string { color: var(--brand-secondary); /* Pink instead of lime */ } .profile-card .status-dot { background: var(--brand-secondary); /* Pink status dot */ } .profile-card .cursor { background: var(--brand-secondary); /* Pink cursor */ } /* Badge Secondary in Profile Section */ .profile-card .badge.secondary { background: var(--brand-secondary); color: white; border-color: var(--brand-secondary); } /* Tech Item Icons */ .tech-item h3 i, .tech-item h3 [data-icon] { color: var(--brand-secondary); /* Pink in light mode */ } /* Compact Card Icons */ .compact-card h3 i, .compact-card h3 [data-icon] { color: var(--brand-secondary); /* Pink in light mode */ } /* About Modal Feature Icons - Pink in light mode */ .about-modal-features .feature-icon { color: var(--brand-secondary); } /* Additional component overrides from consolidated sections */ /* Badges */ .badge.neutral { background-color: var(--surface-2); color: var(--color-text-primary); border-color: var(--color-border-default); } /* Code blocks */ .table code, code { background: var(--surface-2); color: var(--color-text-primary); } /* Mobile menu */ .mobile-menu { background: var(--surface-1); border-color: var(--color-border-subtle); } /* Collection items */ .collection-item { background: var(--surface-1); border-color: var(--color-border-subtle); } /* Token stats */ .token-stat { background: var(--surface-2); border-color: var(--color-border-default); } /* Empty states */ .empty-state { background: var(--surface-1); border-color: var(--color-border-subtle); color: var(--color-text-secondary); } .empty-state-title { color: var(--color-text-emphasis); } .empty-state-subtitle { color: var(--color-text-secondary); } /* Component body sections */ .component-body { background: var(--surface-1); } /* Progress elements */ .liquid-progress { background: var(--surface-2); border-color: var(--color-border-default); } /* Progress flow demo fixes */ .te-progress-percent, .te-status-label { text-shadow: none; } .te-glass-status { background: var(--glass-panel-medium); backdrop-filter: blur(var(--glass-blur-medium)); border: var(--border-size-1) solid var(--surface-3); box-shadow: 0 4px 16px rgb(0, 0, 0, 0.1); } .te-progress-track { background: var(--surface-3); box-shadow: inset 0 var(--border-size-1) var(--border-size-2) rgb(0, 0, 0, 0.1); } .liquid-progress__inner { background: var(--surface-1); } /* Theme preview containers */ .theme-preview-dark { border-color: var(--color-border-default); } /* State dividers */ .state-divider { border-color: var(--color-border-subtle); } /* State header */ .state-header { background: var(--surface-2); } /* Preview animations */ .animation-example { background: var(--surface-1); border-color: var(--color-border-subtle); } /* Tech info panel */ .tech-info-panel { background: var(--surface-2); border-color: var(--color-border-subtle); } /* Playground code section */ .playground-code { background: var(--surface-2); border-top-color: var(--color-border-default); } /* Range inputs */ .control-range { background: var(--surface-1); border-color: var(--color-border-default); } .control-track { background: var(--color-background-tertiary); } /* Table borders */ .table th, .table td { border-bottom-color: var(--color-border-subtle); } /* Icon grid items */ .icon-grid-item { background: var(--surface-1); border-color: var(--color-border-subtle); } /* Form elements */ input[type="text"], input[type="number"], select, textarea { background: var(--surface-1); border-color: var(--color-border-default); color: var(--color-text-default); } /* Modal overlays */ .modal-backdrop { background: rgb(0, 0, 0, 0.3); } /* Shadows preview */ .shadow-demo { background: var(--surface-1); } /* ASCII art */ .ascii-art { color: var(--color-text-primary); } /* Stats Container & Enhanced Cards - Consistent Light Mode */ .stats-container-glass { background: var(--glass-panel-subtle); /* 10% white opacity */ backdrop-filter: blur(4px); border-color: var(--color-border-default); } .enhanced-card { background: var(--glass-panel-subtle); /* 10% white opacity */ backdrop-filter: blur(4px); border-color: var(--color-border-default); box-shadow: none; /* Remove shadows in light mode for flat design */ } /* Hover state removed - stats container is non-interactive */ /* Removed hover effect - cards are not interactive */ /* Remove colored borders for cards in light mode */ .challenge-card, .solution-card, .impact-card { border-color: var(--color-border-default); } /* Stats specific light mode adjustments */ .stat-item { background: transparent; border: none; } .stat-icon { color: var(--color-text-muted); opacity: 0.7; } .stat-number { background: none; -webkit-text-fill-color: unset; background-clip: unset; color: var(--color-text-emphasis); } /* Override the gradient bar on cards */ .enhanced-card::before { opacity: 0.3; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ DARK THEME OVERRIDES ║ ║ Consolidated dark mode specific styles ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Dark theme gradients now defined in :root as defaults */ /* Dark Theme Component Overrides */ [data-theme="dark"] .theme-toggle:hover { box-shadow: 0 2px 8px rgb(0, 0, 0, 0.3), 0 4px 16px rgb(0, 0, 0, 0.15); } [data-theme="dark"] .moon-container svg { stroke: var(--color-text-default); } [data-theme="dark"] .sun-container svg { stroke: rgb(255, 255, 255, 0.3); } /* Dark theme alpha swatch removed - now using themed tokens */ /* Dark theme mock toggle moved to consolidated section */ /* Dark theme toggle thumb moved to consolidated section */ /* Dark theme ref swatch moved to consolidated section */ /* ╔══════════════════════════════════════════════════════════════════╗ ║ BASE COMPONENT STYLES ║ ║ Icons, Buttons, Cards, Forms, etc. ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ========================= ICON BASE CLASSES (RESPONSIVE & ACCESSIBLE) ========================= */ .icon { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-md); /* Default size */ height: var(--icon-md); flex-shrink: 0; } .icon svg { width: 100%; height: 100%; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; fill: none; } [data-icon] svg { width: 100%; height: 100%; stroke: currentcolor; stroke-width: var(--icon-stroke-regular); stroke-linecap: round; stroke-linejoin: round; fill: none; } /* Icon size variants */ .icon--xs { width: var(--icon-xs); height: var(--icon-xs); } .icon--sm { width: var(--icon-sm); height: var(--icon-sm); } .icon--md { width: var(--icon-md); height: var(--icon-md); } /* default */ .icon--lg { width: var(--icon-lg); height: var(--icon-lg); } .icon--xl { width: var(--icon-xl); height: var(--icon-xl); } .icon--xlg { width: var(--icon-xlg); height: var(--icon-xlg); } /* Icon stroke variants - see utility classes below */ /* Force consistent stroke width in icon showcase to fix thin icons */ /* Simple stroke weight classes - for demo cards only */ .icon-weight-card.hairline [data-icon] svg { stroke-width: var(--icon-stroke-hairline); } .icon-weight-card.thin [data-icon] svg { stroke-width: var(--icon-stroke-thin); } .icon-weight-card.bold [data-icon] svg { stroke-width: var(--icon-stroke-bold); } .icon-weight-card.heavy [data-icon] svg { stroke-width: var(--icon-stroke-heavy); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ FOUNDATION UTILITY CLASSES ║ ║ Layout, Spacing, Typography, Colors, Display ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ========================= SPACING & LAYOUT UTILITIES ========================= */ /* Consistent vertical rhythm utilities */ .section-spacing-sm { margin-bottom: var(--size-6); } .section-spacing-md { margin-bottom: var(--size-8); } .section-spacing-lg { margin-bottom: var(--size-10); } /* Content width utilities */ .content-max-width { max-width: 80ch; } .content-wide { max-width: 100ch; } /* ========================================================================== MOBILE OPTIMIZATION SYSTEM ========================================================================== */ /* ========================= MOBILE SPACING UTILITIES ========================= */ /* Apply mobile-optimized spacing across all breakpoints */ @media (width <= 768px) { /* Responsive spacing adjustments using existing size tokens */ .section-spacing-sm { margin-bottom: var(--size-4); } .section-spacing-md { margin-bottom: var(--size-6); } .section-spacing-lg { margin-bottom: var(--size-8); } } /* ========================= MOBILE TOUCH TARGET ENFORCEMENT ========================= */ /* Ensure minimum touch targets on interactive elements */ @media (width <= 768px) { /* Buttons */ .btn:not(.btn-icon), button:not(.btn-icon) { min-height: 44px; /* Apple HIG minimum touch target */ min-width: 44px; } /* Icon buttons have their own explicit sizing */ .btn-icon { min-height: unset; min-width: unset; } /* Form controls */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], select, textarea { min-height: 44px; font-size: max(16px, var(--font-size-1)); /* Prevent iOS zoom */ } /* Clickable elements */ a.btn:not(.btn-icon), .clickable, .card-clickable, .list-item-clickable { min-height: 44px; display: flex; align-items: center; } /* Icon buttons */ .icon-button { min-width: 44px; min-height: 44px; padding: var(--size-1); } } /* ========================= MOBILE TYPOGRAPHY SYSTEM ========================= */ @media (width <= 768px) { /* Responsive typography adjustments */ h1, .h1 { font-size: calc(var(--font-size-6) * 0.75); } h2, .h2 { font-size: calc(var(--font-size-5) * 0.8); } h3, .h3 { font-size: calc(var(--font-size-4) * 0.85); } } /* ========================= RESPONSIVE SPACING MIXINS ========================= */ /* Automatically apply mobile spacing to common patterns */ @media (width <= 768px) { /* Cards and containers */ .card, .token-card, .content-card { padding: var(--size-2); } /* Sections */ .section, .guide-section, .content-section { /* padding handled by child elements */ margin-bottom: var(--size-8); } /* Forms */ .form-group { margin-bottom: var(--size-3); } .form-control { padding: var(--size-1) var(--size-2); } /* Buttons */ .btn { padding: var(--size-1) var(--size-2); } /* Lists */ .list-spaced > li { margin-bottom: var(--size-1); } /* Grid gaps */ .grid, .token-grid, .card-grid { gap: var(--size-3); } } /* Section divider */ .section-divider { height: 1px; background: var(--surface-3); margin: var(--size-10) 0; opacity: 0.5; } /* Hero section special case */ .hero-section { padding: 0; /* Hero manages its own padding */ } /* Remove any inherited borders from the overview section */ #overview.content-section.hero-section { border: none; background: transparent; border-radius: 0; } /* Icon label utility */ .icon-label { display: inline-flex; align-items: center; gap: var(--size-1); } /* * Why use utility classes? * -------------------------- * These classes allow us to apply single, token-based styles directly in * the HTML. This is essential for the design system guide, as it removes * hardcoded inline `style` attributes and keeps all styling logic within * the CSS, our single source of truth. This approach is inspired by * modern utility-first frameworks like Tailwind CSS. */ /* Accessibility Utilities */ .sr-only { position: absolute; width: var(--border-size-1); height: var(--border-size-1); padding: 0; margin: calc(-1 * var(--border-size-1)); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Background Color Utilities */ .bg-brand-primary { background-color: var(--brand-primary); } .bg-brand-secondary { background-color: var(--brand-secondary); } .bg-brand-text-dark { background-color: var(--brand-text-dark); } .bg-surface-1 { background-color: var(--surface-1); } .bg-surface-2 { background-color: var(--surface-2); } .bg-surface-3 { background-color: var(--surface-3); } .bg-gray-0 { background-color: var(--color-text-default); } .bg-gray-1 { background-color: var(--surface-2); } .bg-gray-2 { background-color: var(--color-background-tertiary); } .bg-gray-3 { background-color: var(--surface-3); } .bg-gray-4 { background-color: var(--surface-4); } .bg-gray-5 { background-color: var(--color-border-default); } .bg-gray-6 { background-color: var(--color-text-secondary); } .bg-gray-7 { background-color: var(--color-text-primary); } .bg-gray-8 { background-color: var(--color-background-primary); } .bg-gray-9 { background-color: var(--color-text-default); } .bg-transparent { background-color: transparent; } .bg-value-color { background-color: var(--value-color); } .bg-value-text { background-color: var(--value-text); } .bg-value-number { background-color: var(--value-number); } .bg-value-state { background-color: var(--value-state); } .bg-color-background-primary { background-color: var(--color-background-primary); } .bg-color-background-secondary { background-color: var(--color-background-secondary); } .bg-color-background-tertiary { background-color: var(--color-background-tertiary); } .bg-color-background-disabled { background-color: var(--color-background-disabled); } .bg-color-border-default { background-color: var(--color-border-default); } .bg-color-border-interactive-focus { background-color: var(--color-border-interactive-focus); } .bg-brand-gradient-primary { background: var(--brand-gradient-primary); } /* Alpha Background Utilities */ .bg-brand-primary-alpha-10 { background-color: var(--brand-primary-alpha-10); } .bg-brand-primary-alpha-20 { background-color: var(--brand-primary-alpha-20); } .bg-value-color-alpha-10 { background-color: var(--value-color-alpha-10); } .bg-value-text-alpha-10 { background-color: var(--value-text-alpha-10); } .bg-value-number-alpha-10 { background-color: var(--value-number-alpha-10); } .bg-value-state-alpha-10 { background-color: var(--value-state-alpha-10); } /* Text Color Utilities */ .text-brand-primary { color: var(--brand-primary); } .text-color-default { color: var(--color-text-default); } .text-color-secondary { color: var(--color-text-secondary); } .text-color-muted { color: var(--color-text-muted); } .text-color-on-brand { color: var(--color-text-on-brand); } .text-color-error { color: var(--color-text-error); } .text-body-sm { font-size: var(--font-size-0); line-height: var(--font-lineheight-3); } .text-gradient-brand { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Dimension Utilities (Width & Height) */ .w-1 { width: var(--size-1); } .h-1 { height: var(--size-1); } .w-2 { width: var(--size-2); } .h-2 { height: var(--size-2); } .w-3 { width: var(--size-3); } .h-3 { height: var(--size-3); } .w-4 { width: var(--size-4); } .h-4 { height: var(--size-4); } .w-6 { width: var(--size-6); } .h-6 { height: var(--size-6); } .w-8 { width: var(--size-8); } .h-8 { height: var(--size-8); } .w-full { width: 100%; } .h-full { height: 100%; } .w-auto { width: auto; } .h-auto { height: auto; } /* Spacing Utilities (Margin & Padding) */ .m-0 { margin: 0; } .m-auto { margin: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-2 { margin-bottom: var(--size-2); } .mb-3 { margin-bottom: var(--size-3); } .mb-4 { margin-bottom: var(--size-4); } .mb-6 { margin-bottom: var(--size-6); } .mb-8 { margin-bottom: var(--size-8); } .mt-4 { margin-top: var(--size-4); } .p-0 { padding: 0; } .p-4 { padding: var(--size-4); } .p-6 { padding: var(--size-6); } .py-2 { padding-top: var(--size-2); padding-bottom: var(--size-2); } .px-4 { padding-left: var(--size-4); padding-right: var(--size-4); } /* Border-Radius Utilities */ .rounded-1 { border-radius: var(--radius-1); } .rounded-2 { border-radius: var(--radius-2); } .rounded-3 { border-radius: var(--radius-3); } .rounded-full { border-radius: var(--radius-round); } /* Shadow Utilities */ .shadow-2 { box-shadow: var(--shadow-2); } .shadow-3 { box-shadow: var(--shadow-3); } .shadow-4 { box-shadow: var(--shadow-4); } /* Font Family Utilities */ .font-sans { font-family: var(--font-sans); } .font-mono { font-family: var(--font-mono); } /* Flexbox & Grid Utilities */ .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .gap-2 { gap: var(--size-2); } .gap-3 { gap: var(--size-3); } .gap-4 { gap: var(--size-4); } .gap-6 { gap: var(--size-6); } /* Sizing & Positioning */ .absolute { position: absolute; } .relative { position: relative; } .inset-0 { inset: 0; } .z-1 { z-index: var(--layer-base); } /* z-index: 1 */ .z-2 { z-index: var(--layer-card); } /* z-index: 2 */ .z-3 { z-index: var(--layer-dropdown); } /* z-index: 3 */ .z-4 { z-index: var(--layer-modal); } /* z-index: 4 */ .z-5 { z-index: var(--layer-notification); } /* z-index: 5 */ /* Text Alignment & Sizing */ .text-center { text-align: center; } .text-size-8 { font-size: var(--font-size-8); } .text-size-0 { font-size: var(--font-size-0); } /* NEW: Dedicated class for token descriptions */ .token-description-code { font-family: var(--font-mono); color: var(--color-text-muted); font-size: var(--font-size-0); } /* Overflow */ .overflow-hidden { overflow: hidden; } /* Additional Gap Utilities */ .gap-1 { gap: var(--size-1); } .gap-5 { gap: var(--size-5); } /* Visibility Utilities */ .state-hidden { display: none !important; } /* Additional Flex Utilities */ .flex-between { display: flex; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-end { justify-content: flex-end; } /* Common Component Patterns */ .flex-center-gap-2 { display: flex; align-items: center; gap: var(--size-2); } .flex-center-gap-3 { display: flex; align-items: center; gap: var(--size-3); } .flex-center-gap-4 { display: flex; align-items: center; gap: var(--size-4); } /* Centered Card Layout - Used by icon cards */ .card-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-2); padding: var(--size-4); background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); min-height: 120px; width: 100%; box-sizing: border-box; overflow: hidden; } /* Common Background Patterns - Consolidate duplicates */ .example-container, .type-scale-item, .token-item, .spacing-demo-card, .motion-demo-item, .token-usage, .pattern-content pre, .state-documentation, .token-card, .usage-examples, .usage-section-light { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); } /* Secondary Pattern - surface with larger radius */ .architecture-layer { background: var(--surface-1); padding: var(--size-4); border-radius: var(--radius-3); border: var(--border-size-1) solid var(--color-border-default); } /* Layout and Sizing */ .flex-between-center { display: flex; justify-content: space-between; align-items: center; } .example-container-tall { height: calc(var(--size-10) * 11); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } /* Live Example Container for Modal - DEPRECATED */ /* Modal Demo Container */ .example-container-modal { height: auto; min-height: 520px; display: flex; align-items: center; justify-content: center; position: relative; padding: var(--size-8) var(--size-4); overflow: visible; background: var(--surface-1); border-radius: var(--radius-2); } /* Demo mode - show modal card directly without backdrop */ .example-container-modal .about-modal.is-example { position: static; opacity: 1; visibility: visible; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .example-container-modal .about-modal.is-example .about-modal-backdrop { display: none; } /* Vortex modal in demo */ .example-container-modal .about-modal.is-example.show .about-modal-container { transform: scale(1); opacity: 1; } .example-container-modal .about-modal.is-example:not(.show) .about-modal-container { transform: scale(0.95); opacity: 0.3; pointer-events: none; } /* Clean modal in demo */ .example-container-modal .about-modal.is-example.show .about-modal-content { transform: scale(1); opacity: 1; } .example-container-modal .about-modal.is-example:not(.show) .about-modal-content { transform: scale(0.95); opacity: 0.3; pointer-events: none; } /* Make demo buttons full width */ .example-wrapper .btn-secondary { width: 100%; margin-top: var(--size-4); } /* Add transition for smooth demo */ .about-modal-content { transition: transform 0.3s ease, opacity 0.3s ease; } /* Modal demo controls use standard button styles */ .list-style-none { max-height: none; } /* ========================= COMPONENT HELPERS ========================= */ /* Overrides default full-width for specific use cases */ .btn-inline { width: auto; display: inline-flex; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ UNIFIED BUTTON SYSTEM ║ ║ Primary, Secondary, Icon, and Ghost Buttons ║ ╚══════════════════════════════════════════════════════════════════╝ */ .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; font-family: var(--font-sans); font-weight: 600; text-decoration: none; line-height: 1; white-space: nowrap; border-radius: var(--radius-2); border: var(--border-size-1) solid transparent; cursor: pointer; user-select: none; transition: var(--transition-fast); text-shadow: none; box-shadow: none; } .btn [data-icon] { text-shadow: none; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 0 0 4px rgb(var(--brand-primary-rgb), 0.1); border-color: var(--brand-primary); } /* Enhanced primary button focus ring */ .btn-primary:focus-visible { box-shadow: var(--btn-primary-focus-ring), 0 0 0 4px rgb(var(--brand-primary-rgb), 0.15), 0 4px 12px rgb(var(--brand-primary-rgb), 0.3); transform: translateY(-1px); } /* --- SIZES --- */ .btn-sm { font-size: var(--font-size-0); height: var(--component-height-sm); padding: 0 var(--size-3); gap: var(--size-1); } .btn-sm .icon, .btn-sm [data-icon] { width: var(--icon-xs); height: var(--icon-xs); } .btn-md { font-size: var(--font-size-1); height: var(--component-height-md); padding: 0 var(--size-4); gap: var(--size-2); } .btn-md .icon, .btn-md [data-icon] { width: var(--icon-sm); height: var(--icon-sm); } .btn-lg { font-size: var(--font-size-2); height: var(--component-height-lg); padding: 0 var(--size-5); gap: var(--size-3); } .btn-lg .icon, .btn-lg [data-icon] { width: var(--icon-md); height: var(--icon-md); } /* --- ICON-ONLY BUTTON --- */ .btn-icon { padding: 0; border-radius: 50%; background: var(--glass-panel-subtle); /* Using glass-10 for consistency */ color: var(--btn-icon-text); border: var(--border-size-1) solid var(--btn-icon-border); backdrop-filter: blur(4px); transition: var(--transition-fast); } .btn-icon:hover:not(:disabled) { background: var(--btn-icon-hover-bg); border-color: var(--btn-icon-hover-border); color: var(--btn-icon-hover-border); transform: rotate(12deg) scale(1.08) translateY(-2px); box-shadow: var(--btn-icon-hover-shadow), 0 6px 16px rgb(var(--brand-primary-rgb), 0.2); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .btn-icon:active:not(:disabled) { transform: rotate(0) scale(0.95); } .btn-icon.btn-sm { width: var(--component-height-sm); height: var(--component-height-sm); } .btn-icon.btn-md { width: var(--component-height-md); height: var(--component-height-md); } .btn-icon.btn-lg { width: var(--component-height-lg); height: var(--component-height-lg); } /* Icon size overrides for icon-only buttons, using tokens */ .btn-icon.btn-sm .icon, .btn-icon.btn-sm [data-icon] { width: var(--icon-sm); height: var(--icon-sm); } .btn-icon.btn-md .icon, .btn-icon.btn-md [data-icon] { width: var(--icon-md); height: var(--icon-md); } .btn-icon.btn-lg .icon, .btn-icon.btn-lg [data-icon] { width: var(--icon-lg); height: var(--icon-lg); } /* --- ICON STROKE WEIGHT DIFFERENTIATION --- */ /* Default stroke for all buttons with text */ /* Icons in buttons inherit from icon system base rules */ /* Icon stroke now handled by semantic stroke system */ /* Icon-only buttons use thin stroke */ .btn-icon [data-icon] svg { stroke-width: var(--icon-stroke-thin); } /* --- VARIANTS & STATES --- */ .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } .btn-primary:hover:not(:disabled) { transform: translateY(calc(-1 * var(--border-size-1))) scale(1.02); filter: var(--btn-primary-hover-filter); /* Enhanced glow with pulsing effect */ box-shadow: 0 4px 12px rgb(var(--brand-primary-rgb), 0.4), 0 0 20px rgb(var(--brand-primary-rgb), 0.15); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); animation: subtle-pulse-glow 2s infinite; } .btn-primary:active:not(:disabled) { transform: translateY(0); filter: brightness(0.95); } .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); } .btn-secondary:hover:not(:disabled) { border-color: var(--btn-secondary-hover-border); color: var(--btn-secondary-hover-text); background: var(--btn-secondary-hover-bg); transform: translateY(-1px) scale(1.02); box-shadow: 0 4px 12px rgb(var(--brand-secondary-rgb), 0.15), 0 2px 8px rgb(0, 0, 0, 0.08); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .btn-secondary:active:not(:disabled) { background: rgb(var(--brand-secondary-rgb), 0.2); transform: scale(0.98); border-color: var(--brand-secondary); } .btn-tertiary { background: var(--btn-tertiary-bg); color: var(--btn-tertiary-text); border-color: var(--btn-tertiary-border); } .btn-tertiary:hover:not(:disabled) { background: var(--btn-tertiary-hover-bg); color: var(--btn-tertiary-hover-text); border-color: transparent; } .btn-tertiary:active:not(:disabled) { background: rgb(var(--brand-secondary-rgb), 0.1); transform: scale(0.98); color: var(--brand-secondary); } /* --- DISABLED STATE (Applies to all) --- */ .btn:disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; transform: none !important; box-shadow: none !important; filter: none !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ GUIDELINE CARDS ║ ║ Feature Cards for Design Guidelines ║ ╚══════════════════════════════════════════════════════════════════╝ */ .guidelines-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-xl), 1fr)); gap: var(--card-gap-standard); } .guideline-card { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-5); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--size-4); transition: all var(--transition-fast); } /* Hover state removed - guideline cards are non-interactive */ .guideline-card-header { display: flex; align-items: center; gap: var(--size-3); } .guideline-icon-wrapper { width: var(--size-10); height: var(--size-10); border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .guideline-title { font-size: var(--font-size-3); color: var(--color-text-default); margin: 0; } .guideline-description { color: var(--color-text-secondary); line-height: var(--font-lineheight-3); margin: 0; flex-grow: 1; } .guideline-footer { border-top: var(--border-size-1) solid var(--color-border-default); padding-top: var(--size-3); } .guideline-footer-title { font-size: var(--font-size-0); color: var(--color-text-muted); margin-bottom: var(--size-2); text-transform: uppercase; letter-spacing: var(--font-letterspacing-1); } .guideline-pills { display: flex; flex-wrap: wrap; gap: var(--size-2); } /* Variant-specific styles */ .guideline-card.primary .guideline-icon-wrapper { background: var(--brand-gradient-primary); } .guideline-card.primary .guideline-icon-wrapper [data-icon] { color: var(--brand-text-dark); } .guideline-card.secondary .guideline-icon-wrapper { background: var(--color-background-tertiary); border: var(--border-size-1) solid var(--color-border-default); } .guideline-card.secondary .guideline-icon-wrapper [data-icon] { color: var(--color-text-secondary); } .guideline-card.tertiary .guideline-icon-wrapper { background: transparent; border: var(--border-size-1) dashed var(--color-border-default); } .guideline-card.tertiary .guideline-icon-wrapper [data-icon] { color: var(--color-text-muted); } /* --- V8 BUTTON DOCUMENTATION STYLES --- */ .guide-container .section { margin-bottom: var(--size-9); } .main-section-title { /* Typography inherited from .text-heading-xl class */ color: var(--color-text-default); display: flex; align-items: center; gap: var(--size-3); } .main-section-title [data-icon] { width: var(--icon-lg); /* Use design token for larger icon */ height: var(--icon-lg); } .guide-container .section-description { margin-top: var(--size-2); color: var(--color-text-secondary); max-width: 65ch; } .subsection { margin-bottom: var(--size-7); } .subsection-title { font-size: var(--font-size-3); font-weight: var(--font-weight-6); margin-bottom: var(--size-5); color: var(--color-text-default); } /* Button showcase - using grid for consistent sizing */ .button-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-sm), 1fr)); align-items: center; gap: var(--card-gap-standard); padding: var(--size-3); background: var(--color-background-primary); border-radius: var(--radius-2); } /* Badge showcase - using flex for inline display */ .badge-showcase { display: flex; gap: var(--size-6); /* Increased gap between badge groups */ align-items: center; flex-wrap: wrap; justify-content: center; /* Center align badges in container */ width: 100%; } /* Grid Alignment Rules for Varying Heights */ .variants-grid.align-top { align-items: start; } .variants-grid.align-top .example-container { align-items: flex-start; justify-content: flex-start; height: auto; min-height: 80px; } .variants-grid.align-center { align-items: center; } .variants-grid.align-center .example-container { align-items: center; justify-content: center; } .variants-grid.align-stretch { align-items: stretch; } .variants-grid.align-stretch .example-container { height: 100%; align-items: center; justify-content: center; } /* ADDED: New rule for the badge groups */ .badge-group { display: inline-flex; flex-wrap: wrap; /* Allow badges inside the group to wrap if needed */ gap: var(--size-3); /* Increased for better visual separation within groups */ align-items: center; } .icon-only-showcase { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-5); padding: var(--size-3); background: var(--color-background-primary); border-radius: var(--radius-2); } .usage-guidelines { background: var(--brand-primary-alpha-10); border: var(--border-size-1) solid var(--brand-primary-alpha-20); border-radius: var(--radius-2); padding: var(--size-5); margin-top: var(--size-5); } .usage-guidelines h4 { color: var(--brand-primary); margin-bottom: var(--size-2); } .usage-guidelines ul { list-style: none; padding: 0; } .usage-guidelines li { position: relative; padding-left: var(--size-5); margin-bottom: var(--size-2); color: var(--color-text-secondary); } .usage-guidelines li::before { content: '→'; position: absolute; left: 0; color: var(--brand-primary); } /* STATE COMPARISON MATRIX */ .state-comparison-container { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-4); margin: 0 0 var(--guide-subsection-gap); overflow-x: auto; } .state-comparison-grid { display: grid; grid-template-columns: var(--grid-col-label) repeat(5, minmax(0, 1fr)); gap: var(--size-3); align-items: center; } /* Desktop grid visibility */ .desktop-grid { display: grid; } .mobile-grid { display: none; } /* Responsive breakpoint for smaller desktop - switch earlier to prevent overflow */ @media (width <= 1024px) { .state-comparison-grid { grid-template-columns: 90px repeat(5, minmax(0, 1fr)); font-size: var(--font-size-0); gap: var(--size-1); } } @media (width <= 900px) { .state-comparison-grid { grid-template-columns: 85px repeat(5, minmax(0, 1fr)); font-size: var(--font-size-0); gap: var(--size-1); } } @media (width <= 768px) { /* Hide desktop grid on mobile */ .desktop-grid { display: none; } /* Adjust state comparison container margins on mobile */ .state-comparison-container { margin: 0 0 var(--guide-subsection-gap); } /* Show mobile grids */ .mobile-grid { display: grid; } /* First mobile grid: Default + Hover (3 columns) */ .mobile-grid-1 { grid-template-columns: 90px repeat(2, auto); margin-bottom: var(--size-4); } /* Second mobile grid: Active + Focus (3 columns) */ .mobile-grid-2 { grid-template-columns: 90px repeat(2, auto); } } /* State divider for mobile grids only */ @media (width <= 768px) { .state-divider { border-color: var(--color-border-default); margin: var(--size-4) 0; border-top: none; } } /* Hide state divider on desktop */ @media (width > 768px) { .state-divider { display: none; } } .state-header { font-size: var(--font-size-0); text-transform: uppercase; letter-spacing: var(--font-letterspacing-1); color: var(--color-text-muted); text-align: center; padding: var(--size-2); background: var(--color-background-primary); border-radius: var(--radius-1); } .state-label { font-size: var(--font-size-0); font-weight: var(--font-weight-6); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--font-letterspacing-2); text-align: right; padding-right: var(--size-2); } .state-cell { display: flex; justify-content: center; align-items: center; min-height: 48px; } .force-hover.btn-primary { transform: translateY(calc(-1 * var(--border-size-1))); filter: var(--btn-primary-hover-filter); } .force-active.btn-primary { transform: translateY(0); filter: brightness(0.95); } .force-hover.btn-secondary { border-color: var(--btn-secondary-hover-border); color: var(--btn-secondary-hover-text); background: var(--btn-secondary-hover-bg); } .force-active.btn-secondary { background: rgb(var(--brand-secondary-rgb), 0.2); transform: scale(0.98); border-color: var(--brand-secondary); } .force-hover.btn-tertiary { background: var(--btn-tertiary-hover-bg); color: var(--btn-tertiary-hover-text); border-color: transparent; } .force-active.btn-tertiary { background: rgb(var(--brand-secondary-rgb), 0.1); transform: scale(0.98); color: var(--brand-secondary); } .force-hover.btn-icon { background: var(--btn-icon-hover-bg); border-color: var(--btn-icon-hover-border); color: var(--btn-icon-hover-border); transform: rotate(15deg); } .force-active.btn-icon { transform: rotate(0) scale(0.95); } .force-focus { box-shadow: var(--focus-ring); } .force-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none !important; box-shadow: none !important; filter: none !important; } /* ========================================================================== COMPONENT DOCUMENTATION SYSTEM Use these markers to identify component scope and purpose ========================================================================== */ /* @docs-only-start - Components only for guide showcase */ /* Portfolio hero, cyber-banner, tech stack grid, FAQ section, etc. These components are for the design system guide showcase only. They are NOT used in the plugin and should not be included in ui.html */ /* @docs-only-end */ /* @plugin-only-start - Components used in Figma plugin */ /* Token summary, collection items, export section, modals, etc. These are the core components that power the actual Figma plugin */ /* @plugin-only-end */ /* @future-feature-start - Reserved for roadmap */ /* Theme switcher, advanced animations, AI integration, etc. */ /* @future-feature-end */ /* @experimental-start - Use at your own risk */ /* Beta features under active development */ /* @experimental-end */ /* ========================================================================== ACCESSIBILITY UTILITIES ========================================================================== */ /* Screen reader only text */ .sr-only { position: absolute; width: var(--border-size-1); height: var(--border-size-1); padding: 0; margin: calc(-1 * var(--border-size-1)); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== Base Icon Styles for Lucide ========================================================================== */ /* Prevent icon flicker by setting initial state */ [data-icon]:not(:has(svg)) { width: 1em; height: 1em; vertical-align: middle; color: inherit; opacity: 0; display: inline-block; } /* After icons are processed */ [data-icon] svg { width: 1em; height: 1em; stroke-width: var(--icon-stroke-regular); /* Default stroke weight */ vertical-align: middle; color: inherit; opacity: 1; transition: opacity 0.15s ease; } /* Glass effect utility */ .surface-glass { background: var(--glass-panel-subtle); backdrop-filter: blur(var(--glass-blur-medium)); border: var(--border-size-1) solid var(--surface-3); } /* Utility classes for explicit control - higher specificity */ .icon--hairline [data-icon] svg { stroke-width: var(--icon-stroke-hairline) !important; } .icon--thin [data-icon] svg { stroke-width: var(--icon-stroke-thin) !important; } .icon--bold [data-icon] svg { stroke-width: var(--icon-stroke-bold) !important; } .icon--heavy [data-icon] svg { stroke-width: var(--icon-stroke-heavy) !important; } /* Alert & Success icons use default stroke weight */ :root { /* Spacing & Radius Mapping */ /* Input Mapping */ } /* --- Component-Specific Theming --- */ @keyframes subtle-shift { from { transform: translate(0, 0); } to { transform: translate(20px, 20px); } } /* FIX: Tightens line-height and adds margin */ .hero-main-title { line-height: 1.1; margin-bottom: var(--size-4); letter-spacing: -0.02em; font-weight: var(--font-weight-7); } /* ========================================================================== PHASE 3: PORTFOLIO ENHANCEMENT & STORYTELLING ========================================================================== */ /* * Portfolio Components * Creating compelling case study elements * * "Stories unfold here, * Design decisions revealed, * Impact crystallized." */ /* @docs-only-start */ /* New wrapper for consistent padding and spacing */ .portfolio-content { max-width: var(--content-xl); /* Uses content-xl token */ margin-left: auto; margin-right: auto; padding: var(--size-8) var(--size-6) 0; /* Add top padding to separate from hero */ margin-top: var(--size-4); /* Positive margin to separate from hero */ position: relative; z-index: 2; } /* Mobile: Match header padding for visual consistency */ @media (width <= 768px) { .portfolio-content { padding: var(--size-8) var(--size-4) 0; /* Match mobile header's 20px horizontal padding */ } } /* ========================================================================== PAGE LAYOUT CORRECTION Fixes unwanted border and background on the main portfolio content wrapper. ========================================================================== */ .portfolio-content { border: none; background-color: transparent; border-radius: 0; /* Restore original padding and margin that might be overridden */ padding: var(--size-8) var(--size-6) 0; margin-top: var(--size-4); } @media (width <= 768px) { .portfolio-content { padding: var(--size-8) var(--size-4) 0; } } .intro-group { display: flex; flex-direction: column; gap: var(--size-3); /* Sets space between stats and cards */ margin: 0 auto var(--size-6) auto; position: relative; z-index: var(--layer-card); /* CLEAN SOLUTION: Normal document flow after hero section */ margin-top: var(--size-8); /* Standard section spacing */ /* Centering styles */ max-width: calc(var(--content-lg) + var(--size-8) * 2); /* ~1200px with padding */ } /* Impact stats */ .impact-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-sm), 1fr)); gap: var(--size-3); padding: var(--size-4); background: var(--color-background-secondary); border-radius: var(--radius-3); border: var(--border-size-1) solid var(--color-border-default); } .stat-item { text-align: center; padding: var(--size-1) var(--size-3) var(--size-5) var(--size-3); /* Reduced top/side padding, increased bottom */ } .stat-number { font-size: var(--font-size-6); font-weight: var(--font-weight-8); background: var(--brand-gradient-primary); -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: var(--size-1); display: inline-block; } .stat-suffix { font-size: var(--font-size-2); font-weight: var(--font-weight-5); vertical-align: super; opacity: 1; margin-left: var(--border-size-2); } .stat-label { font-size: var(--font-size-1); color: var(--color-text-secondary); line-height: 1.2; text-align: center; /* FLEXIBLE TEXT: Allow wrapping to prevent overflow */ white-space: normal; word-break: break-word; hyphens: auto; max-width: 100%; padding: 0 var(--size-1); } /* Compact cards - duplicate removed, see line 2840 for definition */ .compact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size-sidebar-width), 1fr)); gap: var(--size-3); } .compact-card h3 { color: var(--color-text-default); font-size: var(--font-size-2); margin-bottom: var(--size-2); display: flex; align-items: center; gap: var(--size-2); } .compact-card h3 [data-icon] { color: var(--brand-primary); } .section-title { color: var(--color-text-default); font-size: var(--font-size-4); font-weight: var(--font-weight-6); margin-bottom: var(--size-2); display: flex; align-items: center; gap: var(--size-2); } .section-title [data-icon] { color: var(--color-text-muted); /* Muted text instead of lime */ width: 1em; height: 1em; } /* Section title icons use semantic tokens */ .section-title [data-icon] { color: var(--section-title-icon-color); } .section-subtitle { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-0); margin: 0; } /* Built With Section */ .tech-stack-grid, .faq-section, .profile-card { margin-bottom: var(--size-6); /* Vertical space between sections */ } .tech-item { background: transparent; /* Remove grey fill */ border: var(--border-size-1) solid var(--color-border-default); /* Match FAQ border */ border-radius: var(--radius-2); padding: var(--size-3); text-align: center; font-family: var(--font-mono); font-size: var(--font-size-0); transition: all 0.3s var(--ease-3); cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--size-2); } .tech-item:hover { border-color: var(--color-border-default); background: var(--surface-hover); z-index: 10; } .tech-item i { width: var(--icon-lg); height: var(--icon-lg); color: var(--color-text-default); opacity: 0.8; transition: all 0.2s var(--ease-3); } /* Theme-aware hover colors */ [data-theme="light"] .tech-item:hover svg { color: var(--brand-secondary); /* Pink in light mode */ opacity: 1; transform: scale(1.1); } [data-theme="dark"] .tech-item:hover svg { color: var(--brand-primary); /* Lime in dark mode */ opacity: 1; transform: scale(1.1); } /* Dark mode: FAQ toggles use brand-primary (lime) */ [data-theme="dark"] { --faq-toggle-color: var(--brand-primary); } .tech-info-panel { background: var(--color-background-tertiary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-4); margin-top: var(--size-3); flex-grow: 1; /* Allows the panel to fill available space */ display: flex; align-items: center; justify-content: center; text-align: center; } .tech-info-content { opacity: 0; transition: opacity 0.3s var(--ease-3); display: flex; flex-direction: column; align-items: center; gap: var(--size-2); } .tech-info-content.active { display: flex; /* Changed from block */ opacity: 1; } .tech-info-title { display: flex; align-items: center; gap: var(--size-2); font-weight: var(--font-weight-6); font-size: var(--font-size-2); /* Increased size */ color: var(--color-text-default); } .tech-info-title [data-icon], .tech-info-title svg { /* Added svg for new logos */ width: var(--icon-md); height: var(--icon-md); } .tech-info-description { color: var(--color-text-secondary); font-size: var(--font-size-1); /* Increased size */ line-height: var(--font-lineheight-3); max-width: 45ch; /* Constrains line length for readability */ } .tech-item.active { border-color: var(--brand-secondary); background: rgb(var(--brand-secondary-rgb), 0.05); } /* @docs-only-start */ /* ========================================================================== ASCII Developer Profile Card (v2) ========================================================================== */ .profile-card { background: var(--color-background-primary); border: var(--border-size-2) solid var(--color-border-subtle); border-radius: var(--radius-3); padding: var(--size-9) var(--size-6) var(--size-6) var(--size-6); position: relative; overflow: hidden; transition: all 0.3s ease; display: flex; align-items: stretch; max-width: calc(var(--content-lg) + var(--size-8) * 2); /* ~1200px */ width: 100%; gap: var(--size-6); margin: var(--size-8) auto; } .profile-card:hover { border-color: var(--brand-primary); box-shadow: 0 0 40px rgb(var(--brand-primary-rgb), 0.3); transform: translateY(calc(-1 * var(--border-size-2))); } .profile-card .ascii-container { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: left; z-index: 1; padding-right: var(--size-6); min-width: var(--plugin-width); height: 100%; } .profile-card .ascii-art, .profile-card .ascii-art-mobile { white-space: pre; color: var(--brand-primary); text-shadow: 0 0 10px rgb(var(--brand-primary-rgb), 0.5); animation: subtle-glow 3s ease-in-out infinite; text-align: left; font-family: 'Courier New', monospace; } .profile-card .ascii-art { font-size: clamp(8px, 2.2vw, 10px); line-height: 1.4; } .profile-card .ascii-art-mobile { display: none; } .profile-card .code-section { flex: 1; display: flex; z-index: 1; height: 100%; } .profile-card .code-container { width: 100%; background: rgb(var(--black-rgb), var(--opacity-50)); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-5); position: relative; height: 100%; min-height: 400px; /* Fixed minimum height to prevent container growth */ display: flex; flex-direction: column; } .profile-card .terminal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; padding-bottom: var(--size-2); } .profile-card .terminal-title { color: var(--color-text-muted); font-size: var(--font-size-0); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--font-letterspacing-2); position: relative; transition: all 0.3s ease; cursor: pointer; } .profile-card .terminal-status { display: flex; gap: var(--size-2); align-items: center; } .profile-card .status-dot { width: var(--size-2); height: 8px; border-radius: 50%; background: var(--brand-primary); animation: status-blink 2s infinite; } .profile-card .code-block { font-family: var(--font-mono); font-size: var(--font-size-0); line-height: 1.2; position: relative; flex: 1; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; display: flex; flex-direction: column; justify-content: center; } .profile-card .code-line { position: relative; line-height: 1.2; display: block; margin: 0; padding: 0; } /* Reduce spacing for empty lines */ .profile-card .code-line:empty { line-height: 0.8; min-height: 0.8em; } .profile-card .comment { color: var(--color-text-muted); font-style: italic; } .profile-card .keyword { color: var(--value-state); } .profile-card .variable { color: var(--value-color); } .profile-card .string { color: var(--brand-primary); } .profile-card .punctuation { color: var(--color-text-default); } .profile-card .function { color: var(--value-number); } .profile-card .number { color: var(--value-text); } .profile-card .cursor { display: inline-block; width: calc(var(--size-2) + var(--border-size-2)); height: 18px; /* Slightly adjusted for better centering */ background: var(--brand-primary); animation: cursor-blink 1s step-end infinite; margin-left: var(--border-size-2); /* The vertical-align, position, and top properties are no longer needed */ } /* Animations for new component */ @keyframes status-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes subtle-glow { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } } @keyframes cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Custom Profile Card breakpoint - wrap earlier to prevent cutoff */ @media (width <= 1200px) { .profile-card { flex-direction: column; gap: var(--size-3); padding: var(--size-8) var(--size-4) var(--size-4) var(--size-4); } .profile-card .ascii-container { border-right: none; padding-right: 0; min-width: auto; overflow-x: hidden; max-width: 100%; justify-content: center; } .profile-card .ascii-art { display: none; } .profile-card .ascii-art-mobile { display: block; font-size: var(--font-size-responsive-tiny); /* Increased mobile scaling */ line-height: 1.15; } .profile-card .code-block { text-align: left; } /* Mobile spacing now handled by content container */ .profile-card .ascii-art-mobile { margin-bottom: var(--size-4); /* Space between ASCII and badge */ } } /* ========================================================================== Profile Card Enhancements - Glow & Glitch Effects ========================================================================== */ /* No glow effects for now - clean ASCII art */ .prompt { font-family: var(--font-mono); font-size: var(--font-size-1); color: var(--color-text-muted); } .glitch-button { background: var(--gradient-accent); border: none; cursor: pointer; padding: var(--size-2) var(--size-4); border-radius: var(--radius-2); font-weight: var(--font-weight-6); transition: var(--transition-fast); } .profile-card .ascii-art { text-shadow: none; animation: none; } .profile-card .ascii-art-mobile { text-shadow: none; animation: none; } @keyframes subtle-pulse { 0%, 100% { text-shadow: 0 0 5px currentcolor, 0 0 10px currentcolor, 0 0 20px currentcolor; } 50% { text-shadow: 0 0 8px currentcolor, 0 0 15px currentcolor, 0 0 30px currentcolor; } } /* Remove system status indicator glows for cleaner look */ .profile-card .ascii-art [OK], .profile-card .ascii-art [ACT], .profile-card .ascii-art [INIT], .profile-card .ascii-art [SYNC], .profile-card .ascii-art [LOAD], .profile-card .ascii-art [EXEC] { color: var(--terminal-green, var(--brand-primary)); text-shadow: none; } /* Progress Bar Enhancement */ .profile-card .ascii-art:contains("━") { position: relative; } /* Terminal Title Glitch Effect - Auto-playing every 8 seconds */ .profile-card .terminal-title.auto-glitch { animation: glitch-sequence 8s infinite; } @keyframes glitch-sequence { 0%, 87.5% { transform: translate(0); } 87.6%, 88.0% { transform: translate(calc(-1 * var(--border-size-1)), var(--border-size-1)); } 88.1%, 88.5% { transform: translate(var(--border-size-1), calc(-1 * var(--border-size-1))); } 88.6%, 89.0% { transform: translate(calc(-1 * var(--border-size-1)), calc(-1 * var(--border-size-1))); } 89.1%, 89.5% { transform: translate(var(--border-size-1), var(--border-size-1)); } 89.6%, 100% { transform: translate(0); } } .profile-card .terminal-title:hover { animation: glitch 0.3s infinite; } .profile-card .terminal-title::before, .profile-card .terminal-title::after { content: attr(data-text); position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; } .profile-card .terminal-title:hover::before { animation: glitch-1 0.3s infinite; color: var(--neon-cyan); opacity: 0.8; } .profile-card .terminal-title:hover::after { animation: glitch-2 0.3s infinite; color: var(--neon-pink); opacity: 0.8; } @keyframes glitch { 0%, 100% { transform: translate(0); } 20% { transform: translate(calc(-1 * var(--border-size-1)), var(--border-size-1)); } 40% { transform: translate(var(--border-size-1), calc(-1 * var(--border-size-1))); } 60% { transform: translate(calc(-1 * var(--border-size-1)), calc(-1 * var(--border-size-1))); } 80% { transform: translate(var(--border-size-1), var(--border-size-1)); } } @keyframes glitch-1 { 0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); } 25% { clip-path: inset(0 0 50% 0); transform: translate(calc(-1 * var(--border-size-2)), var(--border-size-2)); } 50% { clip-path: inset(50% 0 0 0); transform: translate(var(--border-size-2), calc(-1 * var(--border-size-2))); } 75% { clip-path: inset(0 0 0 0); transform: translate(calc(-1 * var(--border-size-2)), calc(-1 * var(--border-size-2))); } } @keyframes glitch-2 { 0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); } 25% { clip-path: inset(50% 0 0 0); transform: translate(var(--border-size-2), var(--border-size-2)); } 50% { clip-path: inset(0 0 50% 0); transform: translate(calc(-1 * var(--border-size-2)), calc(-1 * var(--border-size-2))); } 75% { clip-path: inset(0 0 0 0); transform: translate(var(--border-size-2), calc(-1 * var(--border-size-2))); } } /* Creator Name Glitch Effect */ .profile-card .creator-badge .name { position: relative; transition: all 0.3s ease; cursor: pointer; color: var(--brand-primary); } .profile-card .creator-badge .name:hover { animation: glitch 0.3s infinite; } .profile-card .creator-badge .name::before, .profile-card .creator-badge .name::after { content: attr(data-text); position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; } .profile-card .creator-badge .name:hover::before { animation: glitch-1 0.3s infinite; color: var(--neon-cyan); opacity: 0.8; } .profile-card .creator-badge .name:hover::after { animation: glitch-2 0.3s infinite; color: var(--neon-pink); opacity: 0.8; } /* Enhanced Status Dot Animation - No Glow */ .profile-card .status-dot { background: var(--brand-primary); animation: status-pulse 2s infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.2); } } /* Code Section Line Height and Wrapping Fixes - Updated with responsive approach */ .profile-card .code-line { /* Styles moved to main .code-line rule above for consistency */ } .profile-card .code-block { /* Styles moved to main .code-block rule above for consistency */ } /* Improve spacing consistency */ .profile-card .code-container { padding: var(--size-3); gap: var(--size-2); } .profile-card .control-panel { margin-top: var(--size-1); padding-top: 0; } /* Profile card uses standard button styles */ /* Profile Card Responsive Fixes */ @media (width <= 1200px) { .profile-card .code-container { max-width: 100%; overflow-x: auto; } .profile-card .code-block { min-width: 0; word-wrap: break-word; } .profile-card .terminal-header .terminal-title { font-size: var(--font-size-0-5); /* 0.85rem */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (width <= 900px) { .profile-card { grid-template-columns: 1fr; gap: var(--size-6); /* Increased gap for better mobile spacing */ padding-top: var(--size-4); /* Add top padding to push badge down */ } .profile-card .ascii-art { display: none; } .profile-card .ascii-art-mobile { display: block; font-size: var(--font-size-responsive-tiny); /* Increased mobile scaling - better fills space */ max-width: 100%; overflow: hidden; } .profile-card .code-section { min-height: auto; } } /* Custom Properties for Effects */ :root { --terminal-green: #00FF41; --neon-cyan: #0FF; --neon-pink: #FF10F0; } .effects-subsection { margin-bottom: var(--size-6); padding: var(--size-4); } /* @docs-only-end */ /* @docs-only-end */ /* AGGRESSIVE DIAGNOSTIC - Test if light theme tokens work */ /* ========================================================================== PHASE 4: ADVANCED FEATURES & INTERACTIONS ========================================================================== */ /* * Interactive Components * Living, breathing design system elements * * "Interaction sparks joy, * Components dance with purpose, * Experience blooms bright." */ /* Component Playground */ .component-playground { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); overflow: hidden; margin: var(--size-6) 0; } .playground-controls { background: var(--color-background-tertiary); padding: var(--size-4); border-bottom: var(--border-size-1) solid var(--color-border-default); display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-sm), 1fr)); gap: var(--size-4); } .playground-controls label { display: flex; flex-direction: column; gap: var(--size-2); font-size: var(--font-size-1); color: var(--color-text-secondary); } .playground-controls input[type="color"] { width: 100%; height: var(--size-8); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); cursor: pointer; background: var(--color-background-primary); } .playground-controls input[type="range"] { width: 100%; height: var(--size-6); appearance: none; background: transparent; } .playground-controls input[type="range"]::-webkit-slider-track { width: 100%; height: var(--size-1); background: var(--color-background-secondary); border-radius: var(--radius-1); } .playground-controls input[type="range"]::-webkit-slider-thumb { appearance: none; width: var(--size-4); height: var(--size-4); background: var(--brand-primary); border-radius: var(--radius-round); cursor: pointer; transition: transform var(--animation-duration-2) var(--ease-3), box-shadow var(--animation-duration-2) var(--ease-3); } .playground-controls input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 0 var(--size-2) rgb(var(--brand-primary-rgb), 0.1); } .playground-preview { padding: var(--size-8); display: flex; align-items: center; justify-content: center; min-height: 200px; } .playground-code { background: var(--color-background-primary); padding: var(--size-4); border-top: var(--border-size-1) solid var(--color-border-default); } .playground-code pre { margin: 0; overflow-x: auto; } .playground-code code { font-family: var(--font-mono); font-size: var(--font-size-1); color: var(--color-text-default); } /* Micro-interactions */ .interactive-element { transition: transform var(--animation-duration-2) var(--ease-3); cursor: pointer; } .interactive-element:hover { transform: translateY(calc(-1 * var(--border-size-2))); } .interactive-element:active { transform: translateY(0); } /* Animated Icons */ .animated-icon { display: inline-block; transition: transform var(--animation-duration-3) var(--ease-spring-3); } .animated-icon:hover { transform: rotate(15deg) scale(1.1); } /* Navigation Enhancements */ .nav-links a { position: relative; overflow: hidden; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--border-size-2); background: var(--brand-primary); transform: translateX(-100%); transition: transform var(--animation-duration-3) var(--ease-3); } .nav-links a:hover::after { transform: translateX(0); } /* Nav underline uses semantic tokens */ .nav-links a::after { background: var(--nav-underline-color); } /* Liquid Progress Enhancement */ .liquid-progress { --progress-size: 120px; position: relative; width: var(--progress-size); height: var(--progress-size); border-radius: 50%; background: var(--color-background-primary); border: var(--border-size-3) solid var(--color-border-default); box-shadow: inset 0 0 20px var(--black-alpha-50), 0 0 30px rgb(var(--brand-primary-rgb), 0.15); overflow: hidden; } /* ADDED: New rule to fix text contrast */ #modular-percentage-container { color: var(--brand-text-dark); font-size: var(--font-size-4); font-weight: var(--font-weight-7); position: absolute; left: 50%; transform: translateX(-50%); transition: bottom var(--animation-duration-3) var(--ease-3); bottom: 15px; /* Default position */ } .liquid-progress-inner { position: absolute; inset: 6px; border-radius: 50%; background: var(--color-background-primary); overflow: hidden; } .liquid-wave { position: absolute; top: 75%; left: -50%; width: 200%; height: 200%; background: var(--brand-gradient-primary); border-radius: 45%; animation: wave-animation 4s linear infinite; opacity: 0.9; } .liquid-wave:nth-child(2) { animation-duration: 6s; animation-direction: reverse; opacity: 0.5; } /* ========================================================================== GUIDE-SPECIFIC & PORTFOLIO STYLES ========================================================================== */ /* Overview section handles its own padding via .portfolio-content */ #overview { padding: 0 !important; } /* Remove padding from sections that contain their own wrapper */ #overview + .content-section { padding: 0; } /* Content section children handle their own horizontal spacing .content-section .token-category, .content-section .component-section:not(:has(.table-responsive)) { margin-left: var(--size-6); margin-right: var(--size-6); } */ /* Creates a large gap above the Foundation section for clear separation */ #colors.content-section { margin-top: var(--size-6); } /* @docs-only-start */ /* Example Container System - Improved wrapper pattern */ .example-wrapper { display: flex; flex-direction: column; gap: var(--size-1); margin-bottom: var(--size-4); height: 100%; } .example-container { padding: var(--size-4); /* Consistent padding */ transition: all var(--animation-duration-2) var(--ease-3); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; /* ADDED: Allows the container to fill vertical space */ min-height: 80px; /* Ensure consistent minimum height */ } .example-label { font-size: var(--font-size-0); font-weight: var(--font-weight-6); color: var(--example-label-color); text-transform: uppercase; letter-spacing: var(--font-letterspacing-2); padding-left: var(--size-1); } /* Button below card in example wrapper */ .example-wrapper > .btn { align-self: stretch; margin-top: var(--size-1); width: 100%; max-width: 100%; } /* Fallback for existing structure without wrapper */ .example-label + .example-container { margin-top: var(--size-1); } /* --- Component: System Table (NEW) --- */ .table-responsive { width: 100%; margin: 0 auto; margin-bottom: var(--size-6); overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); background: var(--color-background-secondary); /* Enhanced shadow for better depth */ box-shadow: var(--shadow-1); } .table { width: 100%; border-collapse: collapse; color: var(--color-text-secondary); table-layout: auto; } .table th, .table td { padding: var(--size-3) var(--size-4); text-align: left; border-bottom: var(--border-size-1) solid var(--color-border-default); line-height: var(--font-lineheight-3); font-size: var(--font-size-1); } .table thead th { color: var(--color-text-default); font-weight: var(--font-weight-6); font-size: var(--font-size-2); /* Smaller for better hierarchy */ background-color: var(--color-background-primary); /* Subtle background */ vertical-align: middle; white-space: nowrap; line-height: var(--font-lineheight-2); position: sticky; top: 0; z-index: var(--layer-2); } /* Column width optimization for better balance */ .table thead th:nth-child(1) { width: 15%; /* More balanced first column width */ } .table thead th:nth-child(2) { width: 25%; /* Consistent middle column */ } .table thead th:nth-child(3) { width: 60%; /* Main content column */ } .table thead th [data-icon] { color: var(--color-text-muted); /* Changed from brand-primary to grey */ margin-right: var(--size-2); vertical-align: middle; stroke-width: var(--icon-stroke-thin); /* Thinner stroke */ width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; } /* Enhanced header icon container */ .table thead th span { display: inline-flex; align-items: center; gap: var(--size-1); /* Reduced from var(--size-2) for tighter spacing */ font-weight: var(--font-weight-6); } /* Subtle row hover state for better readability */ .table tbody tr { transition: background-color var(--animation-duration-2) var(--ease-3); } .table tbody tr:hover { background-color: var(--color-background-primary); } /* Zebra striping for better readability */ .table tbody tr:nth-child(even) { background-color: rgb(var(--brand-primary-rgb), 0.02); } /* Icon Category Grid - Vertical Alignment */ .icon-category-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-2); padding: var(--size-3); text-align: center; } .icon-category-item .icon { margin-bottom: var(--size-1); } .icon-category-item code { font-size: var(--font-size-0); color: var(--color-text-muted); } .table strong { color: var(--color-text-default); /* Make bold text white */ } .table code { background: var(--color-background-primary); padding: var(--size-1) var(--size-2); border-radius: var(--radius-1); font-family: var(--font-mono); font-size: var(--font-size-0); color: var(--color-text-muted); } .link-brand { color: var(--brand-secondary); text-decoration: underline; text-decoration-color: var(--brand-secondary); text-decoration-thickness: var(--border-size-1); text-underline-offset: var(--border-size-2); font-weight: normal; transition: all var(--transition-fast); } .link-brand:hover { color: var(--brand-secondary); text-decoration-color: var(--brand-secondary); } .link-primary { color: var(--brand-primary); text-decoration: none; transition: var(--transition-fast); } .link-primary:hover { text-decoration: underline; } .token-exporter-logo { display: inline-block; width: var(--icon-xxl); height: var(--icon-xxl); } .token-exporter-logo svg { width: 100%; height: 100%; } .token-exporter-logo.large { width: var(--icon-3xl); height: var(--icon-3xl); } .token-exporter-logo.xl { width: var(--icon-xxl); height: var(--icon-xxl); } /* --- Component: Badge (NEW) --- */ .badge { display: inline-flex; align-items: center; gap: var(--size-1); padding: var(--size-1) var(--size-1); border-radius: var(--radius-2); font-family: var(--font-mono); font-size: var(--font-size-0); font-weight: var(--font-weight-5); line-height: 1.2; letter-spacing: var(--font-letterspacing-1); border: var(--border-size-1) solid transparent; /* Base border */ } /* Position variant for absolute positioning */ .badge.absolute { position: absolute; top: var(--size-6); left: var(--size-4); z-index: var(--layer-card); } /* --- Color Variants --- */ .badge.brand { background-color: var(--badge-bg); color: var(--badge-text); border-color: var(--badge-border); } /* Brand secondary - uses secondary color in light mode for better contrast */ .badge.brand-secondary { background-color: transparent; color: var(--brand-secondary); border-color: var(--brand-secondary); } [data-theme="light"] .badge.brand { color: var(--brand-secondary); border-color: var(--brand-secondary); } /* Brand inverted - filled background */ .badge.brand-inverted { background-color: var(--brand-primary); color: var(--color-text-on-brand); border-color: var(--brand-primary); } [data-theme="light"] .badge.brand-inverted { background-color: var(--brand-secondary); color: var(--color-white); border-color: var(--brand-secondary); } /* Secondary variant */ .badge.secondary { background-color: var(--badge-secondary-bg); color: var(--badge-text); border-color: var(--badge-secondary-border); } .badge.neutral { background-color: var(--color-background-tertiary); color: var(--color-text-secondary); border-color: var(--color-border-default); } /* Category variants with white text and colored icon */ .badge.cyan, .badge.purple, .badge.orange, .badge.pink { color: var(--color-text-default); /* Set text/number to white */ } .badge.color { background-color: var(--value-color-alpha-10); } .badge.text { background-color: var(--value-text-alpha-10); } .badge.number { background-color: var(--value-number-alpha-10); } .badge.state { background-color: var(--value-state-alpha-10); } /* Map color class names to category badges */ .badge.cyan { background-color: var(--value-color-alpha-10); } .badge.purple { background-color: var(--value-text-alpha-10); } .badge.orange { background-color: var(--value-number-alpha-10); } .badge.pink { background-color: var(--value-state-alpha-10); } /* Target only the icon within the badge to be colored */ .badge.color [data-icon] { color: var(--value-color); } .badge.text [data-icon] { color: var(--value-text); } .badge.number [data-icon] { color: var(--value-number); } .badge.state [data-icon] { color: var(--value-state); } /* Also apply to badges with color names */ .badge.cyan [data-icon], .badge.cyan .icon { color: var(--value-color); } .badge.purple [data-icon], .badge.purple .icon { color: var(--value-text); } .badge.orange [data-icon], .badge.orange .icon { color: var(--value-number); } .badge.pink [data-icon], .badge.pink .icon { color: var(--value-state); } /* --- Size Variants --- */ .badge.small { padding: 2px var(--size-1); font-size: var(--font-size-00); gap: calc(var(--size-1) / 2); } .badge.small [data-icon], .badge.small .icon { width: 1em; /* Match text height */ height: 1em; /* Match text height */ flex-shrink: 0; } /* Default badge (medium) */ .badge [data-icon], .badge .icon { width: 1em; /* Match text height */ height: 1em; /* Match text height */ flex-shrink: 0; } .badge.large { padding: var(--size-1) var(--size-1); font-size: var(--font-size-1); gap: var(--size-2); } .badge.large [data-icon], .badge.large .icon { width: 1em; /* Match text height */ height: 1em; /* Match text height */ flex-shrink: 0; } .badge i [data-icon] svg { width: 100%; height: 100%; } /* ======================================== ICON CONTAINER FIX (BADGE COMPONENT) ======================================== */ .badge .icon { display: inline-flex; align-items: center; justify-content: center; } .badge .icon svg { width: 100%; height: 100%; } @keyframes subtle-shift { from { transform: translate(0, 0); } to { transform: translate(20px, 20px); } } /* Content wrapper - Vertically centered, responsive */ .hero-content-wrapper { position: relative; z-index: 1; max-width: var(--content-md); width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; /* Remove margin auto - parent flexbox handles centering */ flex: 1; /* Take available space for proper centering */ /* Add padding to account for mobile header and provide breathing room */ padding-top: calc(var(--size-10) + var(--size-4)); /* Mobile header height + extra spacing */ padding-bottom: var(--size-4); height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; /* Center content */ padding: 8vh 0 4vh; /* Add bottom padding for scroll cue */ } /* ================================================================= BRAND LOCKUP COMPONENT Maps to existing context-specific styles ================================================================= */ /* Base brand lockup structure */ .brand-lockup { /* Structure defined by context */ } /* Context: Sidebar */ [data-brand-context="sidebar"] .brand-logo { width: var(--icon-lg); height: var(--icon-lg); flex-shrink: 0; } [data-brand-context="sidebar"] .brand-title { color: var(--color-text-default); margin: 0; font-weight: var(--font-weight-6); font-size: var(--font-size-2); white-space: nowrap; } [data-brand-context="sidebar"] .brand-tagline { display: none; } /* Context: Hero */ [data-brand-context="hero"] .brand-lockup { text-align: center; } [data-brand-context="hero"] .brand-logo { margin-bottom: var(--size-2); animation: gentle-float 3s ease-in-out infinite; display: inline-block; } [data-brand-context="hero"] .brand-title { font-size: clamp(2.5rem, 8vw, var(--font-size-7)); font-weight: var(--font-weight-7); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-default); margin-top: 0; margin-bottom: var(--size-4); white-space: nowrap; max-width: 100vw; overflow: hidden; text-overflow: ellipsis; } [data-brand-context="hero"] .brand-tagline { display: none; /* Hero uses separate .hero-tagline */ } /* Context: Footer */ [data-brand-context="footer"] .brand-logo { width: var(--size-15); height: var(--component-height-lg); flex-shrink: 0; } [data-brand-context="footer"] .brand-title { font-size: var(--font-size-5); font-weight: var(--font-weight-700); line-height: 1.1; color: white; margin: 0; text-shadow: 0 var(--border-size-2) var(--size-1) var(--black-alpha-30); } [data-brand-context="footer"] .brand-tagline { font-size: var(--font-size-3); color: var(--brand-primary); line-height: 1.2; margin: 0; white-space: nowrap; font-weight: var(--font-weight-500); } /* Light theme overrides */ /* Mobile header context */ [data-brand-context="mobile-header"] .brand-logo { width: var(--icon-md); /* Match hamburger size */ height: var(--icon-md); } [data-brand-context="mobile-header"] .brand-title { font-size: var(--font-size-2); font-weight: var(--font-weight-7); color: var(--color-text-default); } [data-brand-context="mobile-header"] .brand-tagline { display: none; } /* Original hero logo preserved for reference */ .hero-logo { margin-bottom: var(--size-2); animation: gentle-float 3s ease-in-out infinite; } @keyframes gentle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Hero title with TIGHT line height */ .hero-main-title { font-size: calc(var(--font-size-8) * 1.2); font-weight: var(--font-weight-7); line-height: 1.1; /* FIX: Tighter line height */ letter-spacing: -0.02em; color: var(--brand-primary); margin-top: 0; margin-bottom: var(--size-4); /* FIX: Adds space between title and subtitle */ } /* Tagline with improved hierarchy */ .hero-tagline { font-size: clamp(1.125rem, 4vw, var(--font-size-3)); /* Responsive with 18px minimum */ color: var(--color-text-secondary); max-width: 60ch; margin: 0 auto var(--size-3); /* Center with auto margins */ line-height: var(--font-lineheight-3); padding: 0 var(--size-4); } /* Description with proper spacing */ .hero-description { color: var(--color-text-muted); max-width: 50ch; margin: 0 auto var(--size-5); line-height: var(--font-lineheight-3); padding: 0 var(--size-4); font-size: var(--font-size-1); } /* GROUP A: Introduction Block (Top) */ .hero-intro-group { flex-shrink: 0; text-align: center; margin-bottom: var(--size-6); /* Add space between intro and CTA */ } /* GROUP C: Bottom Block */ .hero-bottom { flex-shrink: 0; text-align: center; /* Center content */ display: flex; flex-direction: column; align-items: center; /* Center items */ gap: var(--size-4); /* 16px - Base gap between social and attribution */ position: relative; /* For pseudo-element positioning */ margin-top: var(--size-6); /* Add space above footer content */ } /* Optional: Subtle separator above personal section */ .hero-bottom::before { content: ''; position: absolute; top: calc(var(--size-4) * -1 / 2); /* Position halfway in the gap */ width: 60px; height: 1px; background: rgb(var(--color-text-muted-rgb), 0.2); border-radius: 1px; } .hero-bottom p { color: var(--color-text-muted); /* Use proper muted text color */ font-size: var(--font-size-0); /* Normal size */ margin: 0; } /* GROUP B: Call-to-Action Block (Middle) - Closer to main content */ .hero-cta-group { flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin: var(--size-4) 0 var(--size-8) 0; /* More space before social icons */ } /* Legacy hero-footer styles (for backwards compatibility) */ .hero-footer { margin-top: var(--size-6); text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--size-4); } /* CTA Button container */ .figma-cta { margin: var(--size-2) 0; } /* Attribution text */ .hero-footer p { color: var(--color-text-muted); font-size: var(--font-size-00); /* REDUCED - Significantly smaller text */ margin: 0; } .hero-footer .heart { color: var(--value-state); animation: heartbeat 1.5s ease-in-out infinite; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Impact stats */ .impact-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-sm), 1fr)); gap: var(--size-3); padding: var(--size-4); /* Glassmorphism styles */ background: var(--surface-glass-dark); /* Use semantic glass token */ backdrop-filter: var(--blur-lg); /* Safari support */ border-radius: var(--radius-3); border: var(--border-size-1) solid var(--white-alpha-10); /* Subtle edge highlight */ } .stat-item { text-align: center; padding: var(--size-1) var(--size-3) var(--size-5) var(--size-3); display: flex; flex-direction: column; align-items: center; justify-content: center; } .stat-number { font-size: var(--font-size-8); font-weight: var(--font-weight-8); background: var(--brand-gradient-primary); -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: var(--size-1); display: inline-block; } .stat-suffix { font-size: var(--font-size-2); font-weight: var(--font-weight-5); vertical-align: super; opacity: 1; margin-left: var(--border-size-2); } .stat-label { font-size: var(--font-size-1); color: var(--color-text-secondary); line-height: 1.2; text-align: center; /* FLEXIBLE TEXT: Allow wrapping to prevent overflow */ white-space: normal; word-break: break-word; hyphens: auto; max-width: 100%; padding: 0 var(--size-1); } /* Compact cards */ .compact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size-sidebar-width), 1fr)); gap: var(--size-3); margin-bottom: var(--size-6); } .compact-card { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-4); } .compact-card h3 { color: var(--color-text-default); font-size: var(--font-size-3); font-weight: var(--font-weight-6); margin-bottom: var(--size-2); display: flex; align-items: center; gap: var(--size-2); } .compact-card h3 i { color: var(--brand-primary); width: var(--icon-lg); height: var(--icon-lg); flex-shrink: 0; } .compact-card p { color: var(--color-text-secondary); font-size: var(--font-size-1); line-height: var(--font-lineheight-3); margin: 0; } .content-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-3); align-items: stretch; margin-bottom: var(--size-6); } @media (width <= 900px) { .content-grid-2col { grid-template-columns: 1fr; } } /* Built With Section */ .tech-stack-grid { background: transparent; border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-6); margin-bottom: var(--size-6); display: flex; flex-direction: column; min-height: 520px; } .tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--size-2); margin-top: 0; /* Remove top margin for optical alignment with FAQ questions */ margin-bottom: var(--size-3); } @media (width <= 900px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } } @media (width <= 768px) { .tech-grid { grid-template-columns: repeat(4, 1fr); /* 4x2 grid on mobile */ gap: var(--size-2); /* Tighter gap for mobile */ } /* Adjust tech item sizing for 4-column layout */ .tech-item { padding: var(--size-2); font-size: var(--font-size-0); /* Better readability on mobile */ } .tech-item svg { width: var(--icon-md); height: var(--icon-md); } } .tech-item [data-icon], .tech-item svg { width: var(--icon-lg); height: var(--icon-lg); color: var(--color-text-default); fill: currentcolor; overflow: visible; } /* Monochrome tech items - preserve structure but use single color */ .tech-item svg { overflow: visible !important; } /* For SVGs that are meant to be filled (like GitHub, Open Props, VS Code, Manus) */ .tech-item[data-tech="github"] svg path, .tech-item[data-tech="openprops"] svg path, .tech-item[data-tech="vscode"] svg path, .tech-item[data-tech="claude"] svg path, .tech-item[data-tech="aistudio"] svg path, .tech-item[data-tech="manus"] svg path { fill: currentcolor; } /* For SVGs that are meant to be stroked (like Figma) */ .tech-item[data-tech="figma"] svg path { stroke: currentcolor; fill: none; } /* Preserve duotone structure in monochrome by keeping opacity */ .tech-item svg [opacity] { /* Keep original opacity values */ } .tech-item svg [fill-opacity] { /* Keep original fill-opacity values */ } .tech-item svg [stroke-opacity] { /* Keep original stroke-opacity values */ } /* Keep Lucide icons as outlines in tech items */ .tech-item [data-icon] { fill: none !important; stroke: currentcolor; } /* Specific fix for Lucide logo SVG to preserve its duotone fill design */ .tech-item[data-tech="lucide"] svg { fill: none !important; stroke: none !important; } /* Light mode: Small Lucide uses text colors by default */ .tech-item[data-tech="lucide"] svg path { fill: var(--color-text-default) !important; stroke: none !important; } .tech-item[data-tech="lucide"] svg path:nth-child(2) { fill: var(--color-text-muted) !important; stroke: none !important; opacity: 0.5; /* Ensure duotone effect */ } /* Light mode: On hover, Lucide uses brand-secondary */ .tech-item[data-tech="lucide"]:hover svg path { fill: var(--brand-secondary) !important; } .tech-item[data-tech="lucide"]:hover svg path:nth-child(2) { opacity: 0.5; } /* Dark mode: Small Lucide logo uses text colors by default */ [data-theme="dark"] .tech-item[data-tech="lucide"] svg path { fill: var(--color-text-default) !important; } [data-theme="dark"] .tech-item[data-tech="lucide"] svg path:nth-child(2) { fill: var(--color-text-muted) !important; opacity: 0.5; } /* Only on hover should it use brand-primary */ [data-theme="dark"] .tech-item[data-tech="lucide"]:hover svg path { fill: var(--brand-primary) !important; } [data-theme="dark"] .tech-item[data-tech="lucide"]:hover svg path:nth-child(2) { opacity: 0.5; } .info-panel-a .title svg { fill: currentcolor; } /* Specific fix for Lucide icons to remain outline */ .info-panel-a .title [data-icon] svg { fill: none !important; stroke: currentcolor; } /* Allow fill for Lucide logo specifically - don't force fill:none */ .info-panel-a .title[data-tech="lucide"] svg { /* Remove the fill:none restriction for Lucide logo */ } /* Final "Built With" Info Panel (Concept A) */ .info-panel-a { background: var(--surface-1); border: var(--border-size-1) solid var(--color-border-subtle); border-radius: var(--radius-2); padding: var(--size-6); flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--size-4); transition: all 0.3s var(--ease-3); min-height: 300px; } .info-panel-a .title { display: flex; flex-direction: column; align-items: center; gap: var(--size-3); font-size: var(--font-size-4); font-weight: var(--font-weight-7); color: var(--color-text-default); opacity: 0; transform: translateY(var(--animation-offset-sm)); animation: content-fade-in 0.4s var(--ease-3) forwards; } .info-panel-a .title [data-icon], .info-panel-a .title svg { width: var(--icon-xxl); height: var(--icon-xxl); color: var(--brand-secondary); } /* Dark mode: use brand-primary for info panel icon */ [data-theme="dark"] .info-panel-a .title [data-icon], [data-theme="dark"] .info-panel-a .title svg { color: var(--brand-primary); } /* Ensure Lucide gets the color applied */ [data-theme="dark"] .info-panel-a .title[data-tech="lucide"] svg { color: var(--brand-primary); } /* Apply brand secondary to all SVG paths in info panel - respect original rendering style */ .info-panel-a .title svg { overflow: visible !important; } /* For fill-based logos (GitHub, Open Props, VS Code, Claude, AI Studio, Manus) */ .info-panel-a .title[data-tech="github"] svg path, .info-panel-a .title[data-tech="openprops"] svg path, .info-panel-a .title[data-tech="vscode"] svg path, .info-panel-a .title[data-tech="claude"] svg path, .info-panel-a .title[data-tech="aistudio"] svg path, .info-panel-a .title[data-tech="manus"] svg path { fill: var(--brand-secondary); stroke: none; } /* Dark mode: fill-based logos use brand-primary */ [data-theme="dark"] .info-panel-a .title[data-tech="github"] svg path, [data-theme="dark"] .info-panel-a .title[data-tech="openprops"] svg path, [data-theme="dark"] .info-panel-a .title[data-tech="vscode"] svg path, [data-theme="dark"] .info-panel-a .title[data-tech="claude"] svg path, [data-theme="dark"] .info-panel-a .title[data-tech="aistudio"] svg path, [data-theme="dark"] .info-panel-a .title[data-tech="manus"] svg path { fill: var(--brand-primary); } /* For stroke-based logos (Figma) */ .info-panel-a .title[data-tech="figma"] svg path { stroke: var(--brand-secondary); fill: none; } /* Dark mode: Figma logo uses brand-primary */ [data-theme="dark"] .info-panel-a .title[data-tech="figma"] svg path { stroke: var(--brand-primary); } /* General rule: any SVG in info panel with fill="none" should remain stroke-based */ .info-panel-a .title svg[fill="none"] path { stroke: var(--brand-secondary) !important; fill: none !important; } /* Dark mode: stroke-based SVGs use brand-primary */ [data-theme="dark"] .info-panel-a .title svg[fill="none"] path { stroke: var(--brand-primary) !important; } /* For Lucide duotone logo - use brand colors */ .info-panel-a .title[data-tech="lucide"] svg path { fill: var(--brand-secondary) !important; stroke: none !important; } .info-panel-a .title[data-tech="lucide"] svg path:nth-child(2) { opacity: 0.5; } /* Dark mode: Lucide duotone uses brand-primary */ [data-theme="dark"] .info-panel-a .title[data-tech="lucide"] svg { stroke: none !important; } [data-theme="dark"] .info-panel-a .title[data-tech="lucide"] svg path { fill: var(--brand-primary) !important; stroke: none !important; stroke-width: 0 !important; } [data-theme="dark"] .info-panel-a .title[data-tech="lucide"] svg path:nth-child(2) { opacity: 0.5; } /* Additional specificity for dynamically generated content */ [data-theme="dark"] .info-panel-a [data-tech="lucide"] svg path { fill: var(--brand-primary) !important; } [data-theme="dark"] .info-panel-a [data-tech="lucide"] svg path:nth-child(2) { opacity: 0.5; } /* Target Lucide specifically if it's using the logo structure */ .info-panel-a .title svg[viewBox="0 0 24 22"] path { fill: var(--brand-secondary) !important; stroke: none !important; } .info-panel-a .title svg[viewBox="0 0 24 22"] path:nth-child(2) { opacity: 0.5; } [data-theme="dark"] .info-panel-a .title svg[viewBox="0 0 24 22"] path { fill: var(--brand-primary) !important; stroke: none !important; stroke-width: 0 !important; } [data-theme="dark"] .info-panel-a .title svg[viewBox="0 0 24 22"] path:nth-child(2) { opacity: 0.5; } .info-panel-a .description { font-size: var(--font-size-2); line-height: var(--line-height-3); color: var(--color-text-secondary); max-width: 40ch; margin-bottom: var(--size-2); opacity: 0; transform: translateY(var(--animation-offset-sm)); animation: content-fade-in 0.4s var(--ease-3) 0.1s forwards; } .info-panel-a .website-link { display: inline-flex; align-items: center; gap: var(--size-2); padding: var(--size-2) var(--size-3); font-size: var(--font-size-1); color: var(--color-text-secondary); text-decoration: none; transition: var(--transition-fast); opacity: 0; transform: translateY(var(--animation-offset-sm)); animation: content-fade-in 0.4s var(--ease-3) 0.2s forwards; /* Ghost button style */ background: transparent; border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); } .info-panel-a .website-link:hover { color: var(--btn-tertiary-hover-text); background: var(--btn-tertiary-hover-bg); border-color: transparent; } @keyframes content-fade-in { to { opacity: 1; transform: translateY(0); } } .tech-item.active { border-color: var(--brand-secondary); background: rgb(var(--brand-secondary-rgb), 0.05); } .tech-fallback { display: none; font-size: var(--font-size-3); } .fa-failed .tech-logo { display: none !important; } .fa-failed .tech-fallback { display: block; } @media (hover: none) { .tech-item { cursor: pointer; } } /* Horizontal Mobile Layout for Tech Grid */ .tech-grid-horizontal { display: flex; flex-direction: column; gap: var(--size-2); margin-top: 0; margin-bottom: var(--size-3); } .tech-item-horizontal { background: transparent; border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-3); display: flex; align-items: center; gap: var(--size-3); text-align: left; transition: all 0.2s var(--ease-3); } .tech-item-horizontal:hover { border-color: var(--color-border-default); background: var(--surface-hover); } .tech-item-horizontal i, .tech-item-horizontal [data-icon], .tech-item-horizontal svg { width: var(--icon-md); height: var(--icon-md); color: var(--color-text-default); fill: currentcolor; opacity: 0.8; transition: all 0.2s var(--ease-3); flex-shrink: 0; } .tech-item-horizontal:hover i, .tech-item-horizontal:hover [data-icon], .tech-item-horizontal:hover svg { color: var(--brand-secondary); opacity: 1; transform: scale(1.05); } .tech-item-horizontal h3 { font-size: var(--font-size-1); font-weight: var(--font-weight-6); color: var(--color-text-default); margin: 0; line-height: var(--font-lineheight-3); } .tech-item-horizontal.active { border-color: var(--brand-secondary); background: rgb(var(--brand-secondary-rgb), 0.05); } /* Apply same icon-specific styling to horizontal layout */ .tech-item-horizontal[data-tech="github"] svg path, .tech-item-horizontal[data-tech="openprops"] svg path, .tech-item-horizontal[data-tech="vscode"] svg path, .tech-item-horizontal[data-tech="claude"] svg path, .tech-item-horizontal[data-tech="aistudio"] svg path, .tech-item-horizontal[data-tech="manus"] svg path { fill: currentcolor; } .tech-item-horizontal[data-tech="figma"] svg path { stroke: currentcolor; fill: none; } .tech-item-horizontal [data-icon] { fill: none !important; stroke: currentcolor; } .tech-item-horizontal[data-tech="lucide"] svg { fill: none !important; stroke: none !important; } .tech-item-horizontal[data-tech="lucide"] svg path { fill: var(--color-text-default) !important; stroke: none !important; } .tech-item-horizontal[data-tech="lucide"] svg path:nth-child(2) { fill: var(--color-text-muted) !important; opacity: 0.5; } /* Mobile optimization for horizontal layout */ @media (width <= 768px) { .tech-grid-horizontal { gap: var(--size-2); } .tech-item-horizontal { padding: var(--size-2) var(--size-3); } .tech-item-horizontal h3 { font-size: var(--font-size-0); } .tech-item-horizontal i, .tech-item-horizontal [data-icon], .tech-item-horizontal svg { width: var(--icon-sm); height: var(--icon-sm); } } /* Flexbox wrapping variant for smaller screens */ .tech-grid-horizontal-wrap { display: flex; flex-wrap: wrap; gap: var(--size-2); margin-top: 0; margin-bottom: var(--size-3); } .tech-grid-horizontal-wrap .tech-item-horizontal { flex: 1 1 calc(50% - var(--size-1)); min-width: 200px; } @media (width <= 480px) { .tech-grid-horizontal-wrap .tech-item-horizontal { flex: 1 1 100%; min-width: auto; } } /* FAQ Section */ .faq-section { background: transparent; border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-6); overflow: visible; /* Allow hover borders to show */ display: flex; flex-direction: column; min-height: 520px; } .faq-item { background: var(--faq-bg); border: var(--border-size-1) solid var(--faq-border); border-radius: var(--radius-2); margin-bottom: var(--size-2); transition: all 0.3s var(--ease-3); } .faq-item:hover { border-color: rgb(var(--brand-secondary-rgb), 0.3); background: rgb(var(--brand-secondary-rgb), 0.02); } /* Dark mode: FAQ items use brand-primary for hover */ [data-theme="dark"] .faq-item:hover { border-color: rgb(var(--brand-primary-rgb), 0.3); background: rgb(var(--brand-primary-rgb), 0.02); } .faq-item:last-child { margin-bottom: var(--size-3); /* Ensure space for border */ } .faq-question { padding: var(--size-3); display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--faq-question-color); font-weight: var(--font-weight-6); transition: color 0.3s var(--ease-3); font-size: var(--font-size-1); gap: var(--size-4); } .faq-question [data-icon] { color: var(--faq-toggle-color); transition: all 0.3s var(--ease-3); font-size: var(--font-size-2); flex-shrink: 0; } .faq-item.open .faq-toggle { transform: rotate(45deg); color: var(--faq-toggle-color); } /* FAQ toggle icons use semantic tokens */ .faq-toggle { color: var(--faq-toggle-color); } .faq-item.open .faq-toggle { color: var(--faq-toggle-color); } .faq-answer { padding: 0 var(--size-3) 0 var(--size-3); color: var(--faq-answer-color); line-height: var(--font-lineheight-3); max-height: 0; overflow: hidden; opacity: 0; transition: all 0.3s var(--ease-3); } .faq-item.open .faq-answer { max-height: 800px; /* Increased to prevent clipping of longer content */ opacity: 1; padding: 0 var(--size-3) var(--size-3) var(--size-3); } /* Branded Figma CTA */ .figma-pill { display: inline-flex; align-items: center; gap: var(--size-2); padding: var(--size-2) var(--size-4); background: var(--brand-gradient-primary); color: var(--color-text-on-brand); border-radius: var(--radius-3); text-decoration: none; font-weight: var(--font-weight-6); font-size: var(--font-size-1); transition: all 0.3s var(--ease-3); box-shadow: 0 4px 15px rgb(var(--brand-primary-rgb), 0.15); } .figma-pill:hover { filter: brightness(1.1); transform: translateY(calc(-1 * var(--border-size-2))); box-shadow: 0 6px 20px rgb(var(--brand-primary-rgb), 0.25); } /* === MOBILE LAYOUT COMPARISON COMPONENT === */ .mobile-comparison-container { background: var(--surface-2); border-radius: var(--radius-3); padding: var(--size-6); margin: var(--size-6) 0; border: 1px solid var(--color-border-default); } .comparison-header { text-align: center; margin-bottom: var(--size-6); } .comparison-title { font-size: var(--font-size-4); font-weight: var(--font-weight-7); color: var(--color-text-default); margin-bottom: var(--size-2); display: flex; align-items: center; justify-content: center; gap: var(--size-2); } .comparison-description { color: var(--color-text-secondary); font-size: var(--font-size-1); line-height: var(--font-lineheight-3); } .comparison-layouts { display: flex; flex-direction: column; gap: var(--size-8); } /* Mobile viewport frames */ .mobile-frame { background: var(--gray-9); border-radius: var(--radius-4); padding: var(--size-2); position: relative; max-width: 320px; margin: 0 auto; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 0 0 1px var(--gray-7); } .mobile-frame::before { content: ''; position: absolute; top: var(--size-1); left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: var(--gray-6); border-radius: var(--radius-2); } .mobile-screen { background: var(--surface-1); border-radius: var(--radius-3); padding: var(--size-4); margin-top: var(--size-3); min-height: 200px; } .layout-label { text-align: center; margin-bottom: var(--size-4); font-weight: var(--font-weight-6); color: var(--color-text-default); display: flex; align-items: center; justify-content: center; gap: var(--size-2); } .layout-current { color: var(--red-6); } .layout-alternative { color: var(--green-6); } /* Current 4x2 grid layout */ .current-tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: var(--size-2); margin-bottom: var(--size-3); } .current-tech-item { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-1); min-height: 45px; text-align: center; transition: all var(--animation-duration-150) var(--ease-2); } .current-tech-item svg { width: 14px; height: 14px; margin-bottom: var(--size-1); opacity: 0.7; } .current-tech-item span { font-size: 10px; font-weight: var(--font-weight-5); color: var(--color-text-secondary); line-height: 1.2; } /* Alternative horizontal layout */ .alternative-tech-grid { display: flex; flex-direction: column; gap: var(--size-2); } .alternative-tech-item { display: flex; align-items: center; gap: var(--size-3); background: var(--surface-2); border: 1px solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-3); transition: all var(--animation-duration-150) var(--ease-2); } .alternative-tech-item svg { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.8; } .alternative-tech-item span { font-size: var(--font-size-1); font-weight: var(--font-weight-5); color: var(--color-text-default); } /* Comparison indicators */ .layout-indicator { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-7); font-size: 12px; color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .indicator-current { background: var(--red-6); } .indicator-alternative { background: var(--green-6); } .layout-pros-cons { margin-top: var(--size-3); padding-top: var(--size-3); border-top: 1px solid var(--color-border-default); } .pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-4); font-size: var(--font-size-0); } .pros-list, .cons-list { list-style: none; padding: 0; margin: 0; } .pros-list li::before { content: '✓'; color: var(--green-6); font-weight: var(--font-weight-7); margin-right: var(--size-2); } .cons-list li::before { content: '✗'; color: var(--red-6); font-weight: var(--font-weight-7); margin-right: var(--size-2); } .pros-cons-title { font-weight: var(--font-weight-6); color: var(--color-text-default); margin-bottom: var(--size-2); font-size: var(--font-size-1); } /* Responsive behavior */ @media (min-width: 768px) { .comparison-layouts { flex-direction: row; gap: var(--size-6); align-items: flex-start; } .mobile-frame { flex: 1; } } .section-title { color: var(--color-text-default); font-size: var(--font-size-4); margin-bottom: var(--size-2); display: flex; align-items: center; gap: var(--size-2); } .section-title [data-icon], .section-title svg { color: var(--color-text-muted); /* Muted text instead of lime */ } /* Section title icons and SVGs use semantic tokens */ .section-title [data-icon], .section-title svg { color: var(--section-title-icon-color); } .section-subtitle { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-0); margin: 0; } /* ASCII Art Profile Card */ .profile-card-ascii { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-6); margin: var(--size-8) var(--size-6); text-align: center; } .profile-card-ascii pre { margin: 0; color: var(--brand-primary); font-family: var(--font-mono); font-size: var(--font-size-00); line-height: 1.2; } .profile-code { text-align: left; font-family: var(--font-mono); font-size: var(--font-size-0); line-height: 1.6; margin-top: var(--size-4); } .code-comment { color: var(--color-text-muted); } .code-keyword { color: var(--value-state); } .code-variable { color: var(--value-color); } .code-string { color: var(--brand-primary); } .code-punctuation { color: var(--color-text-default); } .cursor-blink { animation: blink 1s step-end infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* @docs-only-end */ /* ========================================================================== PHASE 5: LAUNCH PREP & TECHNICAL EXCELLENCE ========================================================================== */ /* * Final Polish & Performance * Every detail matters, every byte counts * * "Polish brings the shine, * Performance keeps them engaged, * Excellence revealed." */ /* Community Engagement Section */ .community-engagement { background: var(--color-background-secondary); border-radius: var(--radius-3); padding: var(--size-8); margin: var(--size-8) 0; text-align: center; } .community-engagement h3 { color: var(--brand-primary); font-size: var(--font-size-4); margin-bottom: var(--size-6); } .community-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-md), 1fr)); gap: var(--card-gap-standard); max-width: var(--content-md); margin: 0 auto; } .community-link { display: flex; flex-direction: column; align-items: center; gap: var(--size-3); padding: var(--size-6); background: var(--color-background-tertiary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); text-decoration: none; color: var(--color-text-default); transition: transform var(--animation-duration-3) var(--ease-3), border-color var(--animation-duration-3) var(--ease-3), box-shadow var(--animation-duration-3) var(--ease-3); position: relative; overflow: hidden; } .community-link::before { content: ''; position: absolute; inset: 0; background: radial-gradient( circle at center, rgb(var(--brand-primary-rgb), 0.1) 0%, transparent 70% ); opacity: 0; transition: opacity var(--animation-duration-3) var(--ease-3); } .community-link:hover { transform: translateY(calc(-1 * var(--size-1))); border-color: var(--brand-primary); box-shadow: var(--shadow-4); } .community-link:hover::before { opacity: 1; } .community-link .icon { font-size: var(--font-size-6); display: block; } /* Performance Indicators */ .performance-badge { display: inline-flex; align-items: center; gap: var(--size-2); padding: var(--size-2) var(--size-3); background: var(--green-2); border: var(--border-size-1) solid var(--green-5); border-radius: var(--radius-2); font-size: var(--font-size-1); font-weight: var(--font-weight-6); color: var(--green-9); } /* Easter Eggs & Delighters */ .logo-easter-egg { cursor: pointer; transition: transform var(--animation-duration-3) var(--ease-spring-4); } .logo-easter-egg:hover { transform: rotate(360deg) scale(1.1); } /* Version Badge */ .version-badge { position: fixed; bottom: var(--size-4); right: var(--size-4); background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-1) var(--size-2); font-size: var(--font-size-00); font-family: var(--font-mono); color: var(--color-text-muted); opacity: 0.5; transition: opacity var(--animation-duration-2) var(--ease-3); } /* Safe area support for version badge */ @supports (bottom: env(safe-area-inset-bottom)) { .version-badge { bottom: max(var(--size-4), env(safe-area-inset-bottom, var(--size-4))); } } .version-badge:hover { opacity: 1; cursor: help; } /* Critical CSS Marker */ /* Above this line: Critical rendering path CSS */ /* Below this line: Enhancement CSS that can be lazy loaded */ /* Smooth scroll behavior */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* Parallax effects for portfolio */ .portfolio-section { transform-style: preserve-3d; } .parallax-element { transform: translateZ(var(--parallax-depth, 0)); transition: transform 0.6s var(--ease-3); } } /* Print styles for documentation */ @media print { .no-print { display: none !important; } body { background: white; color: black; } .card { break-inside: avoid; box-shadow: none; border: var(--border-size-1) solid var(--color-border-default); } } /* Component Philosophy: Contrast Creates Focus */ /* High contrast states for critical interactive elements */ .high-contrast-focus:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-background-primary), 0 0 0 6px var(--brand-primary); } /* Performance optimization utilities */ .gpu-accelerated, .card, .collection-item, .btn, .token-type-stat { will-change: transform; transform: translateZ(0); } .reduce-paint, .skeleton-pulse, .liquid-wave { contain: layout style paint; will-change: opacity, transform; } /* ========================================================================== LEGACY STYLES (Preserved from v2.7.2) ========================================================================== "Old patterns remain, Migration paths clearly marked, Progress without loss." */ /* Dark theme adjustments */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } /* Global inheritance */ html, body { color: var(--color-text-default); background-color: var(--color-background-primary); } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } select option { background: var(--color-background-secondary); color: var(--color-text-default); } /* Typography Scale - Systematic Hierarchy */ .text-heading-xxl { font-size: var(--font-size-8); font-weight: var(--font-weight-8); line-height: var(--font-lineheight-1); } .text-heading-xl { font-size: var(--font-size-7); font-weight: var(--font-weight-7); line-height: var(--font-lineheight-1); } .text-heading-lg { font-size: var(--font-size-6); font-weight: var(--font-weight-6); line-height: var(--font-lineheight-2); } .text-heading-md { font-size: 1.25rem; /* Reduced from 1.5rem to match mobile */ font-weight: var(--font-weight-6); line-height: var(--font-lineheight-2); } .text-heading-sm { font-size: var(--font-size-3); font-weight: var(--font-weight-6); line-height: var(--font-lineheight-3); } .text-body-lg { font-size: var(--font-size-2); font-weight: var(--font-weight-5); line-height: var(--font-lineheight-3); } .text-body-md { font-size: var(--font-size-1); font-weight: var(--font-weight-4); line-height: var(--font-lineheight-3); } .text-label { font-size: var(--font-size-0); font-weight: var(--font-weight-6); text-transform: uppercase; letter-spacing: var(--font-letterspacing-2); } .text-caption { font-size: var(--font-size-00); font-weight: var(--font-weight-5); } /* === STANDARDIZED TYPOGRAPHY SYSTEM === */ /* Consistent typography classes for the design guide */ .section-title-primary { font-size: var(--font-size-6); font-weight: 600; line-height: var(--font-lineheight-1); color: var(--color-text-primary); margin: 0; display: flex; align-items: center; gap: var(--size-3); } .section-title-secondary { font-size: var(--font-size-3); font-weight: 600; line-height: var(--font-lineheight-2); color: var(--color-text-primary); margin: 0; display: flex; align-items: center; gap: var(--size-3); } /* Icon styling for section titles */ .section-title-primary [data-icon], .section-title-primary i, .section-title-secondary [data-icon], .section-title-secondary i { color: var(--color-text-muted); width: 1em; height: 1em; stroke-width: var(--icon-stroke-regular); } .section-description { font-size: var(--font-size-2); line-height: var(--font-lineheight-3); color: var(--color-text-secondary); margin-top: var(--size-3); margin-bottom: 0; } /* === SCROLL CUE & ANIMATIONS === */ /* Hero scroll cue animation */ @keyframes gentle-bounce { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(8px); opacity: 1; } } /* Scroll cue styles */ .scroll-cue-container { position: fixed; bottom: 6vh; /* Desktop position - moved up higher */ left: calc(var(--size-sidebar-width) + (100vw - var(--size-sidebar-width)) / 2); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-2); cursor: pointer; transition: opacity 300ms ease; z-index: var(--layer-3); width: max-content; text-align: center; } /* Safe area support for scroll cue container */ @supports (bottom: env(safe-area-inset-bottom)) { .scroll-cue-container { bottom: max(6vh, calc(env(safe-area-inset-bottom, 0px) + 6vh)); /* Desktop safe area - match main rule */ } } .scroll-cue-container:hover { opacity: 0.7; } .scroll-indicator-text { font-size: var(--font-size-0); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; animation: fadeInUp 1s ease-out 0.5s both; } .scroll-indicator { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; animation: gentle-bounce 2s ease-in-out infinite; animation-delay: 1s; } .scroll-indicator svg { width: 24px; height: 24px; color: var(--color-text-muted); transition: color 300ms ease; } .scroll-cue-container:hover .scroll-indicator svg { color: var(--brand-primary); } .scroll-cue-container.hidden { opacity: 0; pointer-events: none; } /* Section animation keyframes */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(var(--animation-offset-md)); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes slideInBottom { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } /* Animation classes */ .animate-fade-up { opacity: 0; animation: fadeInUp 800ms ease-out forwards; } .animate-fade-left { opacity: 0; animation: fadeInLeft 800ms ease-out forwards; } .animate-fade-right { opacity: 0; animation: fadeInRight 800ms ease-out forwards; } .animate-scale { opacity: 0; animation: scaleIn 600ms ease-out forwards; } .animate-slide-up { opacity: 0; animation: slideInBottom 1000ms ease-out forwards; } /* Stagger delays */ .delay-1 { animation-delay: 100ms; } .delay-2 { animation-delay: 200ms; } .delay-3 { animation-delay: 300ms; } .delay-4 { animation-delay: 400ms; } .delay-5 { animation-delay: 500ms; } .delay-6 { animation-delay: 600ms; } /* Pause animations until in view */ .animate-on-scroll { animation-play-state: paused; } /* Respect motion preferences */ @media (prefers-reduced-motion: reduce) { .scroll-indicator { animation: none !important; } .scroll-indicator-text { animation: none !important; } .animate-fade-up, .animate-fade-left, .animate-fade-right, .animate-scale, .animate-slide-up { animation: none; opacity: 1; } } /* Responsive scroll cue */ @media (width <= 768px) { .scroll-cue-container { bottom: 0.25vh; /* Even lower on mobile - almost touching bottom */ left: 50%; /* Center on mobile */ transform: translateX(-50%); padding: var(--size-3); /* Larger touch target */ min-height: 44px; /* iOS minimum touch target */ } /* Safe area support for mobile scroll cue */ @supports (bottom: env(safe-area-inset-bottom)) { .scroll-cue-container { bottom: max(0.25vh, env(safe-area-inset-bottom, 0px)); /* Mobile safe area - very bottom */ } } } /* ===== COMPREHENSIVE SAFE AREA SUPPORT ===== */ /* Global safe area support for modern devices */ @supports (padding-bottom: env(safe-area-inset-bottom)) { /* Ensure main content respects safe areas */ .guide-content, .sidebar { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Utility class for any fixed positioned elements at the bottom */ .fixed-bottom { bottom: max(var(--size-4), env(safe-area-inset-bottom, var(--size-4))); } /* Modal overlays should extend to safe areas */ .progress-overlay, .about-modal, .menu-overlay { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Tooltips and dropdowns near bottom edge */ .tooltip-bottom, .dropdown-bottom { margin-bottom: env(safe-area-inset-bottom, 0px); } /* Ensure any bottom-positioned form elements respect safe areas */ .form-bottom, .action-bar { padding-bottom: env(safe-area-inset-bottom, 0px); } } /* Removed .content-wrapper - this class doesn't exist in HTML */ /* ADDED: New rules for global scrollbar styling */ /* For Webkit browsers like Chrome, Safari, Edge */ ::-webkit-scrollbar { width: var(--size-3); } ::-webkit-scrollbar-track { background: transparent; /* Makes the track invisible */ } ::-webkit-scrollbar-thumb { background-color: var(--color-text-primary); /* Subtle thumb color */ border-radius: var(--radius-4); border: 3px solid var(--color-background-primary); /* Creates padding around thumb */ } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-text-secondary); } /* Card Component */ .card { background: var(--card-bg); border-radius: var(--radius-3); padding: var(--card-padding-sm); box-shadow: none; transition: box-shadow var(--animation-duration-2) var(--ease-3); animation: var(--animation-slide-in-up); border: var(--border-size-1) solid var(--card-border); color: var(--card-text); contain: layout; } /* Cards in main sections should match plugin width */ .card-gallery .card, #cards-section .card, .forms-example-container .card, .variants-grid .card, #token-card .card { width: var(--plugin-width); max-width: var(--plugin-width); } /* Card Component Modifier for tighter spacing */ .card.is-compact { padding: var(--card-padding-sm); } .card.is-compact .section-title { margin-bottom: var(--size-2); } .card.is-compact .subtitle { margin-bottom: var(--size-3); } #main-ui { display: flex; flex-direction: column; gap: var(--size-3); /* Uses your design token for consistent spacing */ } /* Plugin UI Card Constraints */ #export-card-container .card { width: 100%; max-width: var(--plugin-width); } #quick-export-view .card, #advanced-filter-view .card { margin: 0; } .has-inner-structure { position: relative; overflow: visible; } /* Token Summary Card */ .token-summary { display: flex; flex-direction: column; justify-content: space-between; min-height: 194px; /* Enforces a consistent minimum height across all states */ background: var(--token-summary-bg); border: var(--border-size-1) solid var(--token-summary-border); text-align: center; padding: var(--size-4) var(--size-3) var(--size-3); } .token-summary .token-count-total { color: var(--color-text-primary); margin-bottom: var(--size-1); } .token-summary .token-label { color: var(--token-label-color); margin-bottom: var(--size-2); font-size: var(--font-size-2); font-weight: var(--font-weight-5); } .token-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); /* Force 4 columns always */ gap: var(--size-1); padding-top: var(--size-4); /* Prevent wrapping to 2x2 grid */ min-width: 0; overflow: hidden; } /* For very narrow plugin windows, make everything smaller but keep 4 columns */ @container (max-width: var(--guide-grid-min-width)) { .token-breakdown { gap: var(--size-1); /* Maintain 4 columns even on narrow screens */ } .token-type-stat { padding: var(--size-1); min-height: 50px; } .token-type-stat .count { font-size: var(--font-size-1); /* Smaller numbers */ } .token-type-stat .label { font-size: var(--font-size-00); /* Even smaller labels */ } } .token-type-stat { text-align: center; transition: background var(--animation-duration-2) var(--ease-3), border-color var(--animation-duration-2) var(--ease-3); cursor: default; padding: var(--size-2); border-radius: var(--radius-2); background: transparent; /* Default: no background */ border: none; /* Default: no border */ min-height: 90px; /* Increased to match card height consistency */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-1); /* Prevent individual stats from growing too large */ max-width: 80px; flex: 1 1 0; /* Equal width distribution */ } .token-type-stat .label { color: var(--color-text-muted); font-size: var(--font-size-0); line-height: 0.5; gap: var(--size-1); text-transform: none; /* Keep lowercase */ font-weight: var(--font-weight-4); /* Reduced from default */ } .token-type-stat .icon { margin-bottom: 0; transition: transform var(--animation-duration-2) var(--ease-spring-3); display: block; font-size: var(--font-size-4); } .token-type-stat .count { font-size: var(--font-size-3); font-weight: var(--font-weight-6); margin-bottom: var(--size-1); line-height: 1.8; color: var(--color-text-emphasis); /* Ensure count is visible */ } /* Token type colors */ .token-type-stat.color .icon { color: var(--value-color); } .token-type-stat.text .icon { color: var(--value-text); } .token-type-stat.states .icon { color: var(--value-state); } .token-type-stat.number .icon { color: var(--value-number); } /* Advanced mode interactions */ .advanced-mode .token-type-stat { cursor: pointer; } .advanced-mode .token-type-stat:not(.disabled):hover { background: var(--surface-hover); border-color: var(--color-border-default); } .advanced-mode .token-type-stat:hover .icon { transform: scale(1.1); } .advanced-mode .token-type-stat.active { background: var(--token-stat-active-bg); border-color: var(--token-stat-active-border); } .token-type-stat.disabled { opacity: 0.4; cursor: not-allowed; background: transparent; /* No box for disabled */ border: none; } /* Unselected state - outline only */ .token-type-stat:not(.active, .disabled) { background: transparent; border: none; } /* Advanced mode borders */ .advanced-mode .token-type-stat:not(.active, .disabled) { border: var(--border-size-1) solid var(--token-stat-border); } /* Active/selected state */ .token-type-stat.active { background: transparent; border: none; } /* Advanced mode active state */ .advanced-mode .token-type-stat.active { background: var(--token-stat-bg); border: var(--border-size-1) solid var(--token-stat-active-border); } /* Export Section */ .section-title { margin-bottom: var(--size-3); display: flex; align-items: center; gap: var(--size-2); } .section-title [data-icon="send"] { width: 1.2em; height: 1.2em; } .subtitle { color: var(--color-text-muted); margin-bottom: var(--size-4); } /* Form Elements */ .format-select-wrapper { position: relative; margin-bottom: var(--size-4); } /* Multi-Select Format Dropdown */ .format-select-container { position: relative; } .format-select-trigger { width: 100%; padding: var(--size-2) var(--size-3); height: var(--component-height-md); background: var(--color-background-tertiary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); font-weight: var(--font-weight-5); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background var(--animation-duration-2) var(--ease-3), border-color var(--animation-duration-2) var(--ease-3); } .format-select-trigger:hover { background: var(--surface-3); border-color: var(--color-border-hover); transform: scale(1.02); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .format-select-trigger:active { transform: scale(0.98); transition: all 0.1s; } .format-select-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); } .format-select-trigger[aria-expanded="true"] { border-color: var(--brand-primary); } .format-select-trigger[aria-expanded="true"] .icon-xs { transform: rotate(180deg); } .format-select-dropdown { position: absolute; bottom: calc(100% + var(--size-2)); left: 50%; transform: translateX(-50%); min-width: 200px; background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); box-shadow: var(--shadow-4); z-index: 20; max-height: none; overflow: visible; } .format-option { display: flex; align-items: center; padding: var(--size-2) var(--size-3); cursor: pointer; transition: background-color var(--animation-duration-2) var(--ease-3); } .format-option:hover { background-color: var(--surface-2); transform: translateX(4px); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .format-option:active { transform: translateX(2px) scale(0.98); transition: all 0.1s; } .format-checkbox { margin-right: var(--size-2); cursor: pointer; accent-color: var(--brand-primary); } /* Collection Items */ .collection-list { display: flex; flex-direction: column; gap: var(--size-2); max-height: 300px; overflow-y: auto; padding-right: var(--size-1); contain: layout style; } .collection-list.large-list { max-height: 400px; } .collection-list::-webkit-scrollbar { width: var(--size-1); } .collection-list::-webkit-scrollbar-track { background-color: transparent; } .collection-list::-webkit-scrollbar-thumb { background-color: var(--color-text-secondary); border-radius: var(--radius-1); } .collection-item { padding: var(--size-2) var(--size-3); background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); cursor: default; transition: all var(--animation-duration-2) var(--ease-3); display: flex; align-items: center; gap: var(--size-3); position: relative; min-height: 40px; } .advanced-mode .collection-item { cursor: pointer; } .collection-item:hover { background: var(--color-background-tertiary); border-color: var(--color-border-default); transform: translateY(-1px) scale(1.01); box-shadow: 0 4px 12px rgb(0, 0, 0, 0.08); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .collection-item:active { transform: translateY(0) scale(0.99); transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); } .collection-item.selected { background: color-mix(in srgb, var(--brand-primary) 5%, transparent); border-color: var(--brand-primary); } .collection-checkbox { width: var(--size-3); height: var(--size-3); border: var(--border-size-2) solid var(--color-border-default); border-radius: var(--radius-1); position: relative; transition: background var(--animation-duration-2) var(--ease-3), border-color var(--animation-duration-2) var(--ease-3); flex-shrink: 0; } .collection-item.selected .collection-checkbox { background: var(--brand-primary); border-color: var(--brand-primary); } .collection-item.selected .collection-checkbox::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-check'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); width: var(--size-2); height: var(--size-2); background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Dark mode checkbox contrast fix */ [data-theme="dark"] .collection-item.selected .collection-checkbox::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-check'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .collection-info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--border-size-2); /* Very tight gap */ } .collection-name { font-weight: var(--font-weight-5); font-size: var(--font-size-1); /* Smaller text */ line-height: 1.2; /* Tighter line height */ margin: 0; } .collection-count { color: var(--color-text-secondary); flex-shrink: 0; margin-right: var(--size-1); /* Small buffer from edge */ font-size: var(--font-size-0); /* Slightly bigger */ font-weight: var(--font-weight-5); } .collection-badge-group, .collection-pills { display: flex; gap: var(--size-1); flex-wrap: wrap; margin-top: var(--size-1); } /* Progress & Success States */ .progress-overlay { position: fixed; inset: 0; background: var(--color-backdrop); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: var(--layer-modal); padding: var(--size-6); backdrop-filter: blur(4px); } .progress-container { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-4); text-align: center; max-width: var(--size-sidebar-width); width: 90%; animation: var(--animation-scale-up); box-shadow: var(--shadow-2); } .success-icon { width: var(--size-10); height: var(--size-10); color: var(--brand-primary); margin: 0 auto var(--size-4); display: block; filter: drop-shadow(0 0 15px rgb(var(--brand-primary-rgb), 0.4)); animation: successPop 0.6s ease-out; } .success-title { margin-bottom: var(--size-2); } .success-subtitle { color: var(--color-text-secondary); margin-bottom: var(--size-5); } .action-buttons { display: flex; gap: var(--size-3); flex-direction: column; } /* Empty State */ .empty-state-icon { width: var(--size-10); height: var(--size-10); background: transparent; border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3); color: var(--brand-primary); } .empty-state-icon .token-exporter-logo { width: var(--size-8); height: var(--size-8); } .empty-state-header { margin-bottom: var(--size-4); /* Space before categories */ } .empty-state-title { font-weight: var(--font-weight-5); margin-bottom: var(--size-1); line-height: 1.2; } .empty-state-header { text-align: center; } .empty-state-categories { display: flex; justify-content: center; gap: var(--size-4); margin: var(--size-4) 0; width: 100%; box-sizing: border-box; } .empty-state-category { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--size-2); min-width: 60px; } /* Category icon colors */ .category-icon-cyan, .category-icon-purple, .category-icon-orange, .category-icon-pink { margin-bottom: var(--size-1); } .category-icon-cyan { color: var(--value-color); } .category-icon-purple { color: var(--value-text); } .category-icon-orange { color: var(--value-number); } .category-icon-pink { color: var(--value-state); } /* ========================================================================== PROGRESS LOADER - UNIFIED FLOW Replaces separate progress and success states ========================================================================== */ /* Main container */ .te-progress-loader { display: flex; flex-direction: column; align-items: center; gap: var(--size-4); width: 100%; max-width: var(--plugin-width); height: var(--guide-grid-min-width); margin: 0 auto; position: relative; justify-content: center; } /* Glassmorphism status box */ .te-glass-status { text-align: center; position: relative; z-index: var(--layer-card); /* FIX: This ensures the panel is on top */ background: var(--glass-panel-subtle); /* Use semantic glass token */ backdrop-filter: blur(var(--glass-blur-medium)); @supports not (backdrop-filter: blur(8px)) { background: rgb(0, 0, 0, 0.7); } border-radius: var(--radius-3); /* FIX: Reduced radius from previous step */ border: var(--border-size-1) solid rgb(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgb(0, 0, 0, 0.3), inset 0 var(--border-size-1) 0 rgb(255, 255, 255, 0.1); padding: var(--size-3); display: flex; flex-direction: column; gap: var(--size-2); align-items: center; min-width: 240px; transform: scale(0.9); transition: all var(--transition-fast); will-change: transform, opacity; } .te-progress-percent { font-family: var(--font-mono); font-weight: var(--font-weight-7); font-size: var(--font-size-4); color: var(--color-text-default); margin: 0; text-shadow: 0 var(--border-size-2) var(--size-1) rgb(0, 0, 0, 0.5); } /* Button refinement rules are correct */ .btn.btn-sm.btn-inline { font-size: var(--font-size-0); } .btn.btn-sm.btn-inline [data-icon] { width: var(--icon-xs); height: var(--icon-xs); } .te-progress-track { width: 200px; height: 12px; background: var(--surface-overlay-heavy); border-radius: var(--radius-round); overflow: hidden; box-shadow: inset 0 var(--border-size-2) var(--size-1) rgb(0, 0, 0, 0.3); } .te-progress-fill { width: 0%; height: 100%; background: var(--brand-gradient-primary); border-radius: var(--radius-round); position: relative; overflow: hidden; box-shadow: 0 0 10px rgb(var(--brand-primary-rgb), 0.5); will-change: width; transition: width 0.2s ease-out; } .te-progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgb(255, 255, 255, 0.8) 30%, rgb(255, 255, 255, 1) 50%, rgb(255, 255, 255, 0.8) 70%, transparent 100% ); animation: te-shimmer 1.8s infinite; border-radius: inherit; } @keyframes te-shimmer { 0% { transform: translateX(-200%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(200%); opacity: 0; } } /* Enhanced subtle pulse for buttons */ @keyframes subtle-pulse-glow { 0%, 100% { box-shadow: 0 4px 12px rgb(var(--brand-primary-rgb), 0.4), 0 0 20px rgb(var(--brand-primary-rgb), 0.15); } 50% { box-shadow: 0 4px 12px rgb(var(--brand-primary-rgb), 0.5), 0 0 25px rgb(var(--brand-primary-rgb), 0.25); } } .te-status-label { font-family: var(--font-mono); font-size: var(--font-size-2); font-weight: var(--font-weight-6); color: var(--color-text-default); margin: 0; text-shadow: 0 var(--border-size-2) var(--size-1) rgb(0, 0, 0, 0.5); } /* Icon grid */ .te-icon-grid { display: none; /* Icons removed from vortex animation per user request */ grid-template-columns: repeat(10, 1fr); position: absolute; inset: 0; padding: var(--size-3); gap: var(--size-1); will-change: transform; transition: opacity 0.5s ease-out; z-index: var(--layer-base); /* FIX: Explicitly set z-index to be behind the glass panel */ } .te-icon-grid.fade-out { opacity: 0; } .te-icon-cell { display: flex; align-items: center; justify-content: center; color: var(--color); animation: te-vortex-swirl 3s infinite ease-in-out; animation-delay: var(--delay); opacity: 0; filter: blur(var(--blur)); will-change: transform, opacity; } .te-icon-cell [data-icon] svg { width: 100%; height: 100%; stroke-width: var(--icon-stroke-regular); } @keyframes te-vortex-swirl { 0% { transform: translate(var(--x-start), var(--y-start)) scale(0) rotate(0deg); opacity: 0; filter: blur(4px); } 25% { transform: translate(calc(var(--x-start) * 0.5), calc(var(--y-start) * 0.5)) scale(0.6) rotate(90deg); opacity: 0.4; filter: blur(2px); } 50% { transform: translate(0, 0) scale(var(--scale, 1)) rotate(180deg); opacity: 1; filter: blur(0); } 75% { transform: translate(calc(var(--x-end) * 0.5), calc(var(--y-end) * 0.5)) scale(0.6) rotate(270deg); opacity: 0.4; filter: blur(2px); } 100% { transform: translate(var(--x-end), var(--y-end)) scale(0) rotate(360deg); opacity: 0; filter: blur(4px); } } /* Celebration container */ .te-celebration { position: absolute; inset: 0; pointer-events: none; z-index: var(--layer-notification); } /* Large success icon */ .te-success-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); color: var(--brand-primary); filter: drop-shadow(0 0 30px var(--brand-primary)); animation: te-success-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; } /* Confetti dots removed per user request - vortex animation preserved */ .te-success-icon [data-icon] { width: var(--icon-5xl); height: var(--icon-5xl); stroke-width: var(--icon-stroke-thin); } @keyframes te-success-pop { 0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; filter: blur(4px); } 30% { transform: translate(-50%, -50%) scale(1.2) rotate(15deg); opacity: 0.8; filter: blur(2px); } 60% { transform: translate(-50%, -50%) scale(0.95) rotate(-5deg); opacity: 1; filter: blur(0); } 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; filter: blur(0); } } /* Hide status during celebration */ .te-celebrating .te-glass-status { animation: te-fade-scale-out 0.4s forwards; } /* Easter egg toast notification */ .easter-egg-toast { position: fixed; top: var(--size-4); left: 50%; transform: translateX(-50%); background: var(--brand-primary); color: var(--gray-warm-9); padding: var(--size-3) var(--size-4); border-radius: var(--radius-3); font-weight: var(--font-weight-6); font-size: var(--font-size-1); box-shadow: 0 4px 20px rgb(var(--brand-primary-rgb), 0.4); z-index: 1000; animation: toast-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), toast-slide-out 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 2.7s forwards; will-change: transform, opacity; } @keyframes toast-slide-in { 0% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.9); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes toast-slide-out { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.9); } } /* Gentle wiggle animation for friendly error states */ @keyframes gentle-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } /* Error state container with friendly styling */ .error-state { border-radius: var(--radius-3); background: color-mix(in srgb, var(--color-text-error) 5%, transparent); border: var(--border-size-1) dashed var(--color-text-error); animation: error-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes error-entrance { 0% { opacity: 0; transform: scale(0.9) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes te-fade-scale-out { to { opacity: 0; transform: scale(0.8); } } .empty-state-action { color: var(--brand-primary); text-decoration: none; font-weight: var(--font-weight-5); display: inline-flex; align-items: center; gap: var(--size-2); transition: background var(--animation-duration-2) var(--ease-3), border-color var(--animation-duration-2) var(--ease-3), transform var(--animation-duration-2) var(--ease-3); padding: var(--size-2) var(--size-3); border-radius: var(--radius-2); border: var(--border-size-1) solid transparent; } .empty-state-action:hover { background: var(--brand-primary-alpha-10); border-color: var(--brand-primary); transform: translateY(calc(-1 * var(--border-size-1))); } @keyframes skeleton-breathe { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.02); } } /* ========================================================================== SMART SKELETON LOADER (V6 - PIXEL PERFECT FIX) ========================================================================== */ .token-summary.is-loading .skeleton-pulse { display: inline-block; background-color: var(--color-text-primary); color: transparent !important; border-radius: var(--radius-round); animation: skeleton-breathe 2.5s ease-in-out infinite; user-select: none; vertical-align: middle; } /* Skeleton loader uses semantic tokens with playful animation */ .token-summary.is-loading .skeleton-pulse { background-color: var(--skeleton-pulse-bg); /* Add a subtle shimmer effect to make loading more delightful */ position: relative; overflow: hidden; } .token-summary.is-loading .skeleton-pulse::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgb(255, 255, 255, 0.4), transparent); animation: skeleton-shimmer 1.5s infinite; } @keyframes skeleton-shimmer { 0% { left: -100%; } 100% { left: 100%; } } .token-summary.is-loading .token-count-total .skeleton-pulse { width: 120px; height: var(--font-size-7); margin-bottom: var(--size-1); } /* Styles for the smaller numbers in the breakdown */ .token-summary.is-loading .token-type-stat { gap: var(--size-2); /* 8px - slightly larger but more consistent */ } .token-summary.is-loading .token-breakdown .count.skeleton-pulse { width: var(--size-7); height: calc(var(--font-size-3) * 1.8); /* Match actual count height with line-height */ margin-bottom: var(--size-1); /* Match actual count margin */ } /* Prevent borders on loading state stats */ .token-type-stat.loading { border: none !important; background: transparent !important; } /* ========================================================================== Guide Footer ========================================================================== */ /* @docs-only-start */ /* Thin branded divider line */ .guide-footer { background: var(--footer-bg); padding: var(--size-6); border-top: var(--border-size-1) solid var(--footer-border); margin-top: var(--size-8); } .footer-content { max-width: calc(var(--content-lg) + var(--size-8) * 2); /* ~1200px */ margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--size-6); } .footer-brand { display: flex; align-items: center; gap: var(--size-4); } .footer-logo { width: 56px; height: 56px; flex-shrink: 0; } .footer-title { font-size: var(--font-size-4); font-weight: 600; color: var(--color-text-default); margin: 0; } .footer-tagline { font-size: var(--font-size-1); color: var(--color-text-secondary); margin-top: var(--size-1); } .footer-social-links { display: flex; gap: var(--size-3); } /* Figma CTA uses standard button styles */ .heart { color: var(--pink-5); } @media (width <= 768px) { .footer-content { flex-direction: column; text-align: center; } .footer-brand { flex-direction: column; gap: var(--size-2); margin-bottom: var(--size-4); } .figma-cta { margin-bottom: var(--size-4); } } .state-group-header { background: rgb(var(--brand-primary-rgb), 0.03); border: var(--border-size-1) solid rgb(210, 255, 55, 0.1); border-radius: var(--radius-3); padding: var(--size-4); margin-bottom: var(--size-4); } .state-group-title { color: var(--brand-primary); margin-bottom: var(--size-2); } .state-documentation { margin-top: var(--size-1); /* Small gap - attached to parent */ background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-3); } .state-documentation-title { color: var(--brand-primary); font-size: var(--font-size-1); font-weight: var(--font-weight-6); margin-bottom: var(--size-2); } /* Advanced toggle */ .advanced-toggle { text-align: center; margin-top: var(--size-3); } .advanced-filters { color: var(--color-text-muted); text-decoration: none; font-weight: var(--font-weight-5); transition: color var(--animation-duration-2) var(--ease-3); display: inline-flex; align-items: center; gap: var(--size-1); } .advanced-filters:hover { color: var(--brand-primary); } .advanced-filters i { font-size: var(--font-size-0); transition: transform var(--animation-duration-2) var(--ease-3); } .advanced-filters:hover i { transform: translateX(var(--border-size-2)); } /* Footer */ .footer-section { text-align: center; line-height: 1.4; margin: var(--size-3) 0 0; padding: var(--size-3); margin-top: auto; } .footer-section a { color: var(--color-text-muted); text-decoration: none; transition: color var(--animation-duration-2) var(--ease-3); } .footer-section a:hover { color: var(--brand-primary); } .footer-section .heart { display: inline-block; transition: transform var(--animation-duration-3) var(--ease-3); } .footer-section a:hover .heart { transform: scale(1.2); } /* Animations */ @keyframes pulse-glow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgb(var(--brand-primary-rgb), 0.3)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgb(210, 255, 55, 0.5)); } } @keyframes wave-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Focus States for Accessibility - STANDARDIZED */ .collection-item:focus-visible, .format-select:focus-visible, .search-input:focus-visible, .about-close:focus-visible, .footer-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Search Input - Additional component */ .search-input { width: 100%; padding: var(--size-2) var(--size-3) var(--size-2) var(--size-8); background: var(--color-background-tertiary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); font-size: var(--font-size-1); transition: border-color var(--animation-duration-2) var(--ease-3), box-shadow var(--animation-duration-2) var(--ease-3); color: var(--color-text-default); margin-bottom: var(--size-3); } .search-wrapper { position: relative; } .search-wrapper [data-icon="search"] { position: absolute; left: var(--size-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; } /* Performance optimizations */ .card, .collection-item, .btn, .token-type-stat { will-change: transform; } .progress-overlay, .about-modal { will-change: opacity, visibility; } /* Enhanced About Modal with Vortex Animation */ .about-modal-container { position: relative; width: 100%; max-width: 420px; /* Match Token Card empty state size */ min-height: 500px; background: rgb(0, 0, 0, 0.85); border-radius: var(--radius-4); overflow: hidden; display: flex; align-items: center; justify-content: center; } .vortex-background { position: absolute; inset: 0; z-index: var(--layer-base); } .te-icon-grid { display: grid; grid-template-columns: repeat(10, 1fr); position: absolute; inset: 0; padding: var(--size-3); gap: var(--size-1); opacity: 0.8; } .te-icon-cell { display: flex; align-items: center; justify-content: center; color: var(--color); animation: te-vortex-swirl 3s infinite ease-in-out; animation-delay: var(--delay); opacity: 0; filter: blur(var(--blur)); } .te-icon-cell i { width: 24px; height: 24px; } @keyframes te-vortex-swirl { 0% { transform: translate(var(--x-start), var(--y-start)) scale(0); opacity: 0; } 50% { transform: translate(0, 0) scale(var(--scale)); opacity: 1; filter: blur(0); } 100% { transform: translate(var(--x-end), var(--y-end)) scale(0); opacity: 0; filter: blur(var(--blur)); } } .about-modal-glass { position: relative; z-index: var(--layer-card); background: rgb(42, 42, 42, 0.6); backdrop-filter: var(--blur-xl); border-radius: var(--radius-4); border: var(--border-size-1) solid rgb(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgb(0, 0, 0, 0.3); padding: var(--size-8); max-width: 380px; width: 90%; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--size-6); } .btn-close { position: absolute; top: var(--size-3); right: var(--size-3); } .profile-group { display: flex; flex-direction: column; align-items: center; gap: var(--size-2); } /* Avatar styles removed - using features-focused modal instead */ .about-header { display: flex; flex-direction: column; align-items: center; gap: var(--size-1); } .about-name { font-size: var(--font-size-5); font-weight: var(--font-weight-700); margin-bottom: 0; color: var(--gray-warm-9); background-clip: text; } .about-title-wrapper { position: relative; height: var(--size-7); overflow: hidden; display: flex; align-items: center; justify-content: center; } .about-title-static, .about-title-hover { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; margin: 0; font-size: var(--font-size-1); color: var(--color-text-secondary); transition: transform var(--animation-duration-3) var(--ease-spring-3), opacity var(--animation-duration-3) var(--ease-3); white-space: nowrap; text-align: center; } .about-title-hover { transform: translate(-50%, 50%); opacity: 0; color: var(--brand-primary); } .about-title-wrapper:hover .about-title-static { transform: translate(-50%, -150%); opacity: 0; } .about-title-wrapper:hover .about-title-hover { transform: translate(-50%, -50%); opacity: 1; } .wizard-emoji { display: inline-block; vertical-align: middle; animation: magicSparkle 2s ease-in-out infinite; } @keyframes magicSparkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(15deg); } } .text-block { display: flex; flex-direction: column; gap: var(--size-4); } .about-description { color: var(--color-text-secondary); font-size: var(--font-size-1); line-height: 1.6; font-weight: var(--font-weight-4); } .about-mission { font-size: var(--font-size-1); line-height: 1.6; } .about-links { display: flex; justify-content: center; gap: var(--size-3); margin-top: auto; } /* About modal uses standard btn-icon styles */ /* About Modal - Features Focused Variant */ .about-modal-features .about-modal-content { position: relative; background: var(--surface-1); border-radius: var(--radius-3); padding: var(--size-4); max-width: var(--plugin-width); width: 100%; box-shadow: var(--shadow-6); } .about-modal-features .about-header { text-align: center; margin-bottom: var(--size-5); } .about-modal-features .app-icon { width: var(--size-9); height: var(--size-9); margin: 0 auto var(--size-3); display: flex; align-items: center; justify-content: center; } .about-modal-features .app-icon svg { width: 100%; height: 100%; } .about-modal-features .app-name { font-size: var(--font-size-5); font-weight: var(--font-weight-7); margin-bottom: var(--size-1); color: var(--color-text-default); } .about-modal-features .app-tagline { color: var(--color-text-secondary); font-size: var(--font-size-1); margin: 0; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .about-modal-features .features-list { margin-bottom: var(--size-5); } .about-modal-features .feature-item { display: flex; align-items: flex-start; gap: var(--size-3); margin-bottom: var(--size-3); } .about-modal-features .feature-icon { width: var(--size-5); height: var(--size-5); flex-shrink: 0; color: var(--brand-primary); /* Default: lime, overridden in light theme */ margin-top: 2px; } .about-modal-features .feature-text { font-size: var(--font-size-1); line-height: 1.5; color: var(--color-text-default); } .about-modal-features .about-footer { text-align: center; padding-top: var(--size-4); border-top: var(--border-size-1) solid var(--color-border-subtle); } .about-modal-features .creator-info { font-size: var(--font-size-0); color: var(--color-text-secondary); margin: 0; text-align: center; } .about-modal-features .creator-info a { color: var(--brand-secondary); text-decoration: none; font-weight: var(--font-weight-5); } .about-modal-features .creator-info a:hover { text-decoration: underline; } .about-modal-features .about-social { display: flex; justify-content: center; gap: var(--size-5); margin-bottom: var(--size-3); } .about-modal-features .about-modal-close { position: absolute; top: var(--size-3); right: var(--size-3); width: var(--size-7); height: var(--size-7); padding: 0; } /* ======================================================================== ACCESSIBILITY: REDUCED MOTION SUPPORT ======================================================================== */ /** * Comprehensive reduced-motion support for users with vestibular disorders * or motion sensitivity. Disables problematic animations while preserving * essential functionality and immediate feedback. */ @media (prefers-reduced-motion: reduce) { /* Disable all animations and transitions */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Specifically disable problematic animations */ .te-icon-cell, .wizard-emoji, .profile-card .terminal-title, .profile-card .creator-badge .name { animation: none !important; } /* Disable vortex animation completely */ .te-icon-grid, .vortex-background { animation: none !important; opacity: 0.1 !important; /* Keep barely visible for context */ } /* Preserve essential hover states but remove motion */ .btn:hover { transform: none !important; transition: color 0.01ms, background-color 0.01ms, border-color 0.01ms !important; } /* Disable cursor blinking for profile card */ .cursor { animation: none !important; opacity: 1 !important; } /* Keep typing animation but make it instant */ .code-line { animation-duration: 0.01ms !important; } } /* Specific alignment for stat suffix symbols */ .stat-suffix--plus { vertical-align: middle; /* Center align the + symbol */ } .stat-suffix--percent, .stat-suffix--times { vertical-align: baseline; /* Bottom align the % and × symbols */ } /* ========================================================================== HERO, FOOTER & MOBILE LAYOUT (REFACTORED) ========================================================================== */ .hero-footer { margin-top: var(--size-6); display: flex; flex-direction: column; align-items: center; gap: var(--size-4); } .social-links { display: flex; flex-direction: row; justify-content: center; gap: var(--size-3); } .footer-content { max-width: calc(var(--content-lg) + var(--size-8) * 2); /* ~1200px */ margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--size-8); flex-wrap: wrap; } .footer-actions { display: flex; align-items: center; gap: var(--size-4); } .footer-social-links { display: flex; flex-direction: row; gap: var(--size-3); } /* ========================================================================== FINAL HERO SECTION POLISH ========================================================================== */ /* FINAL HERO SECTION POLISH */ .portfolio-hero { position: relative; padding: var(--size-6) var(--size-6) var(--size-8); min-height: 100vh; display: flex; align-items: center; /* Center content vertically */ justify-content: center; /* Center content horizontally */ text-align: center; isolation: isolate; overflow: visible; /* Allow animations to start below viewport */ /* Create proper flex container for true centering */ flex-direction: column; } /* Hero pattern background - theme aware */ .portfolio-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; min-height: 100vh; /* Ensure pattern fills full viewport height */ background: var(--hero-bg-pattern); pointer-events: none; mask-composite: intersect; mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%), linear-gradient(to bottom, black 0%, black 70%, transparent 90%); mask-composite: source-in; } /* Remove the duplicate rule - pattern already defined above */ /* ========================================================================== COMPONENT-SPECIFIC FIXES ========================================================================== */ /* Empty State - Updated Definition */ .empty-state { background: var(--empty-state-bg); border: var(--border-size-1) dashed var(--empty-state-border); border-radius: var(--radius-3); color: var(--empty-state-text); text-align: center; display: flex; flex-direction: column; align-items: center; min-height: 360px; /* Comfortable height for content */ justify-content: space-between; /* Distributes content evenly */ box-sizing: border-box; /* Add delightful entrance animation */ animation: empty-state-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes empty-state-entrance { 0% { opacity: 0; transform: translateY(20px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Make the logo gently pulse to draw attention */ .empty-state .token-exporter-logo { animation: gentle-pulse 3s ease-in-out infinite; } @keyframes gentle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* When empty state is also a card, adjust padding */ .card.empty-state { padding: var(--size-6); } .empty-state-categories { display: flex; /* Changed from inline-flex for consistency */ justify-content: center; /* This is the key change */ gap: var(--size-1); /* Increased gap for better spacing */ margin: var(--size-4) 0; width: 100%; padding: 0 var(--size-4); box-sizing: border-box; } /* Add staggered animations for category icons */ .empty-state-category { animation: category-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; animation-fill-mode: forwards; } .empty-state-category:nth-child(1) { animation-delay: 0.1s; } .empty-state-category:nth-child(2) { animation-delay: 0.2s; } .empty-state-category:nth-child(3) { animation-delay: 0.3s; } .empty-state-category:nth-child(4) { animation-delay: 0.4s; } @keyframes category-bounce-in { 0% { opacity: 0; transform: translateY(30px) scale(0.3); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Add hover effect to category icons */ .empty-state-category:hover { transform: translateY(-2px) scale(1.1); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .empty-state-category:hover .icon { transform: rotate(10deg); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Enhanced token stat interactions */ .token-type-stat { transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .token-type-stat:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 2px 8px rgb(0, 0, 0, 0.1); } .token-type-stat:active { transform: translateY(0) scale(0.98); } .empty-state-category { display: flex; flex-direction: column; align-items: center; gap: var(--size-2); min-width: 60px; } .empty-state-category .icon { stroke-width: var(--icon-stroke-regular); font-size: var(--font-size-4); } .empty-state-category .text-label { text-align: center; text-transform: none; /* Keep lowercase */ } /* ========================================================================== GUIDE LAYOUT SYSTEM (FINAL) ========================================================================== */ /* --- Mobile Header & Menu Styles --- */ .mobile-header { display: none; /* Hidden on desktop by default */ } .mobile-menu { position: fixed; top: 0; right: 0; width: var(--size-sidebar-width); height: 100%; background: rgb(var(--color-backdrop-rgb), 0.95); backdrop-filter: var(--blur-lg); border-left: var(--border-size-1) solid var(--color-border-default); z-index: var(--layer-modal); transform: translateX(100%); transition: transform var(--transition-medium); overflow-y: auto; } .mobile-menu .menu-header { display: flex; align-items: center; justify-content: flex-end; height: var(--size-10); padding: 0 var(--size-4); border-bottom: var(--border-size-1) solid var(--color-border-default); } /* Animated Hamburger Icon */ .hamburger-icon { width: var(--icon-md); height: var(--icon-md); position: relative; display: block; } .hamburger-icon .line { width: 100%; height: var(--border-size-2); background-color: currentcolor; border-radius: var(--border-size-1); transition: all 0.3s var(--ease-3); transform-origin: center; position: absolute; left: 0; } /* Position lines with precise spacing */ .hamburger-icon .line-1 { top: 0; } .hamburger-icon .line-2 { top: 50%; transform: translateY(-50%); } .hamburger-icon .line-3 { bottom: 0; } /* Animated state when menu is open - applies to both header and close buttons */ .mobile-menu.open .hamburger-icon .line-1, .mobile-menu.open ~ header .hamburger-icon .line-1 { top: 50%; transform: translateY(-50%) rotate(45deg); } .mobile-menu.open .hamburger-icon .line-2, .mobile-menu.open ~ header .hamburger-icon .line-2 { opacity: 0; transform: translateY(-50%) scaleX(0); } .mobile-menu.open .hamburger-icon .line-3, .mobile-menu.open ~ header .hamburger-icon .line-3 { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); } /* Alternative selector for when menu is open - header is sibling */ body:has(.mobile-menu.open) .mobile-header .hamburger-icon .line-1 { top: 50%; transform: translateY(-50%) rotate(45deg); } body:has(.mobile-menu.open) .mobile-header .hamburger-icon .line-2 { opacity: 0; transform: translateY(-50%) scaleX(0); } body:has(.mobile-menu.open) .mobile-header .hamburger-icon .line-3 { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); } .mobile-nav-links { list-style: none; padding: var(--size-4); margin: 0; } .mobile-nav-links li { margin-bottom: var(--size-1); } .mobile-nav-links a { display: flex; align-items: center; gap: var(--size-2); padding: var(--size-2) var(--size-3); color: var(--color-text-secondary); text-decoration: none; border-radius: var(--radius-2); transition: all var(--animation-duration-2) var(--ease-3); } .mobile-nav-links a:hover { background: var(--color-background-tertiary); color: var(--brand-primary); } .mobile-nav-links a.active { color: var(--brand-primary); background: rgb(var(--brand-primary-rgb), 0.1); } /* Mobile nav uses semantic tokens */ .mobile-nav-links a:hover { background: var(--nav-link-hover-bg); color: var(--nav-link-hover-color); } .mobile-nav-links a.active { color: var(--nav-link-active-color); background: var(--nav-link-active-bg); } .mobile-nav-links [data-icon] { width: var(--icon-sm); height: var(--icon-sm); } .mobile-menu.open { transform: translateX(0); } .menu-overlay { position: fixed; inset: 0; background: rgb(var(--color-backdrop-rgb), 0.5); z-index: calc(var(--layer-modal) - 1); opacity: 0; transition: opacity var(--transition-medium); pointer-events: none; } .menu-overlay.open { opacity: 1; pointer-events: auto; } /* --- END: New Mobile Header & Menu Styles --- */ /* Prevent layout shift when scrollbar appears */ html { scroll-behavior: smooth; overflow-y: scroll; /* Fix navigation hiding content - add padding for sticky elements */ scroll-padding-top: calc(var(--size-10) + var(--size-4)); } body { background: var(--color-background-primary); overflow-x: hidden; max-width: 100vw; } /* Guide Layout */ .guide-container { display: block; min-height: 100vh; } .guide-sidebar { width: var(--size-sidebar-width); background: var(--color-background-secondary); border-right: var(--border-size-1) solid var(--color-border-default); position: fixed; top: 0; left: 0; height: 100vh; z-index: var(--layer-dropdown); display: flex; flex-direction: column; overflow-y: auto; transition: transform 0.3s var(--ease-3); } .guide-content { width: calc(100% - var(--size-sidebar-width)); margin-left: var(--size-sidebar-width); box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; min-width: 0; min-height: 100vh; overflow-x: hidden; } /* Theme-aware guide content background */ .guide-content { background: var(--color-background-primary); } /* Sidebar Header */ .guide-header { padding: var(--size-4); /* Comfortable padding */ background: var(--header-bg); border-bottom: var(--border-size-1) solid var(--header-border); display: flex; align-items: center; gap: var(--size-3); flex-shrink: 0; } /* Guide logo and title styles replaced by brand lockup component */ .guide-logo { width: var(--icon-lg); /* Standard size for clean look */ height: var(--icon-lg); flex-shrink: 0; } .guide-logo-link { display: flex; align-items: center; gap: 12px; /* Reduced from 16px for tighter spacing */ transition: opacity 200ms ease; } .guide-logo-link:hover { opacity: 0.8; } .guide-logo svg { width: 100%; height: 100%; } /* Sidebar Navigation */ .nav-wrapper { flex-grow: 1; overflow-y: auto; padding: var(--size-2) 0; } .nav-section { padding: var(--size-2) var(--size-4); /* Comfortable section padding */ } /* Add extra bottom padding to Foundation section for visual hierarchy */ .nav-section:first-of-type { padding-bottom: var(--size-3); /* 16px bottom padding for Foundation */ } .nav-section-title { color: var(--color-text-default); font-size: var(--font-size-1); font-weight: var(--font-weight-6); margin-bottom: var(--size-2); /* Reduced spacing below titles */ text-transform: uppercase; letter-spacing: var(--font-letterspacing-2); } .nav-links { list-style: none; padding: 0; margin: 0; } .nav-links li { margin-bottom: 0; /* Removed spacing between items */ } .nav-links a { display: flex; align-items: center; gap: var(--size-2); padding: var(--size-2) var(--size-3); /* Comfortable padding */ color: var(--color-text-secondary); text-decoration: none; border-radius: var(--radius-2); transition: all var(--animation-duration-2) var(--ease-3); font-size: var(--font-size-1); position: relative; } .nav-links a:hover { background: var(--color-background-tertiary); color: var(--brand-primary); } .nav-links a.active { color: var(--brand-primary); font-weight: var(--font-weight-6); } .nav-links a.active::before { content: ''; position: absolute; left: calc(-1 * var(--size-4)); top: 50%; transform: translateY(-50%); height: 60%; width: 3px; background: var(--brand-primary); } /* Nav links use semantic tokens */ .nav-links a:hover { background: var(--nav-link-hover-bg); color: var(--nav-link-hover-color); } .nav-links a.active { color: var(--nav-link-active-color); } .nav-links a.active::before { background: var(--nav-link-active-color); } .nav-links [data-icon] { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke-regular); } /* Sidebar Footer */ .sidebar-footer { padding: var(--size-2) var(--size-4); border-top: var(--border-size-1) solid var(--color-border-default); flex-shrink: 0; } /* Content Sections */ .content-section { margin-bottom: var(--size-10); scroll-margin-top: var(--size-6); /* Removed horizontal padding - child elements handle their own padding */ } #overview { padding: 0; /* Ensures hero has no padding */ overflow: visible; /* Allow animations to extend beyond bounds */ } .guide-main-title { font-size: calc(var(--font-size-8) * 1.2); font-weight: var(--font-weight-7); line-height: var(--font-lineheight-1); letter-spacing: -0.02em; color: var(--guide-main-title-color); /* Uses semantic token */ margin-bottom: 0; } .guide-subtitle { color: var(--color-text-default); text-transform: uppercase; font-weight: var(--font-weight-6); margin-top: var(--size-2); margin-bottom: var(--size-4); } .main-section-title { color: var(--color-text-default); margin-bottom: var(--size-3); display: flex; align-items: center; gap: var(--size-3); } .main-section-title [data-icon] { color: var(--color-text-muted); /* Muted text instead of lime */ width: 1em; height: 1em; stroke-width: var(--icon-stroke-regular); } /* Main section title icons use semantic tokens */ .main-section-title [data-icon] { color: var(--section-title-icon-color); } .section-description { color: var(--color-text-secondary); max-width: 80ch; margin: 0; line-height: var(--font-lineheight-4); } /* Token sections structure */ .token-section { margin-block: var(--size-8); padding: var(--size-6); background: var(--surface-1); border-radius: var(--radius-3); border: 1px solid var(--color-border-subtle); } /* Token sections use standard category-title and category-description styles */ /* Token sections use semantic tokens */ .token-section { background: var(--token-section-bg); border-color: var(--token-section-border); } /* Token sections inherit light mode styles from category elements */ /* Foundation Token & Component Styles */ /* Desktop: Larger horizontal padding for better content framing */ @media (width > 768px) { .token-category { margin-bottom: var(--size-10); /* Consistent spacing across all sections */ padding: var(--size-4) var(--size-6) var(--size-6) var(--size-6); /* Reduced top padding to match icons section */ background: var(--component-section-bg); border-radius: var(--radius-3); border: var(--border-size-1) solid var(--component-section-border); overflow: hidden; } /* Component sections that contain component-body get the same container styling */ .content-section:has(.component-body) { margin-bottom: var(--size-10); /* Consistent spacing across all sections */ padding: var(--size-4) var(--size-6) var(--size-6) var(--size-6); /* Reduced top padding to match icons section */ background: var(--component-section-bg); border-radius: var(--radius-3); border: var(--border-size-1) solid var(--component-section-border); overflow: hidden; } /* Figma to Code section needs container styling too */ .figma-to-code-section { margin-bottom: var(--size-10); /* Consistent spacing across all sections */ padding: var(--size-4) var(--size-6) var(--size-6) var(--size-6); /* Same padding as other containers */ background: var(--component-section-bg); border-radius: var(--radius-3); border: var(--border-size-1) solid var(--component-section-border); overflow: hidden; } } /* Mobile & Tablet: Consistent padding aligned with header */ @media (width <= 768px) { .token-category, .content-section:has(.component-body), .figma-to-code-section { margin-bottom: var(--size-10); /* Consistent spacing across all sections */ padding: var(--size-4); /* Match header padding (16px) */ background: var(--component-section-bg); border-radius: var(--radius-3); border: var(--border-size-1) solid var(--component-section-border); overflow: hidden; } } /* No special overrides needed - unified system handles all sections */ /* Container styling uses semantic tokens */ .token-category, .content-section:has(.component-body), .figma-to-code-section { background: var(--token-section-bg); border-color: var(--token-section-border); } /* Category and component headers now use unified system above */ .category-title, .component-title { color: var(--color-text-default); margin-bottom: var(--size-2); display: flex; align-items: center; gap: var(--size-3); } .category-title [data-icon], .component-title [data-icon] { color: var(--color-text-muted); /* Muted text instead of lime */ width: 1em; height: 1em; stroke-width: var(--icon-stroke-regular); margin-right: var(--size-1); } .example-subheader { color: var(--color-text-default); font-weight: var(--font-weight-6); margin-bottom: var(--size-3); margin-top: var(--size-6); font-size: var(--font-size-2); } .example-subheader:first-of-type { margin-top: 0; } .category-description, .component-description { color: var(--color-text-secondary); font-size: var(--font-size-1); margin: 0 0 var(--size-3) 0; } .tokens-grid { padding: 0; /* All padding handled by parent */ display: grid; gap: var(--size-4); } /* Typography section needs some top spacing since it doesn't have tabs */ .token-category .tokens-grid.text-grid { padding-top: var(--size-4); } /* Add spacing between type scale and font family boxes */ .token-category .tokens-grid.font-grid { margin-top: var(--size-4); } /* Icon category grid - 4 columns on desktop */ .icon-category-grid { grid-template-columns: repeat(4, 1fr) !important; } /* Icon category grid - 2 columns on mobile */ @media (width <= 768px) { .icon-category-grid { grid-template-columns: repeat(2, 1fr) !important; } } .color-grid, .shadow-grid { grid-template-columns: repeat(auto-fit, minmax(var(--size-sidebar-width), 1fr)); } .radius-grid { grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-sm), 1fr)); } .gray-scale-grid { grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-xs), 1fr)); } .text-grid, .animation-grid { grid-template-columns: 1fr; } .font-scale-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--size-4); } .type-scale-item { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-4); text-align: left; } .type-scale-info { margin-top: var(--size-2); display: flex; flex-direction: column; gap: var(--size-1); } .type-scale-info code { font-family: var(--font-mono); font-size: var(--font-size-0); color: var(--color-text-default); } .type-scale-details { font-size: var(--font-size-00); color: var(--color-text-muted); font-family: var(--font-mono); } /* Type scale uses semantic tokens */ .type-scale-item { background: var(--type-scale-bg); border-color: var(--type-scale-border); } .type-scale-info code { color: var(--type-scale-code-color); } .type-scale-details { color: var(--type-scale-details-color); } .spacing-grid { grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-sm), 1fr)); } .font-grid { grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-xl), 1fr)); } .token-item { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-4); display: flex; flex-direction: column; gap: var(--size-3); min-height: auto; /* Adjusted - no longer need extra height for button */ } /* Hover states removed - tokens are not interactive */ .token-info { flex-grow: 1; } .token-name { font-family: var(--font-mono); color: var(--color-text-default); margin-bottom: var(--size-2); font-size: var(--font-size-1); font-weight: var(--font-weight-6); } .token-value { font-family: var(--font-mono); color: var(--color-text-muted); margin-bottom: var(--size-3); font-size: var(--font-size-0); word-break: break-all; } .token-preview { margin-top: auto; /* Push preview to bottom for consistent alignment */ min-height: 48px; display: flex; align-items: center; justify-content: center; } /* Token items use semantic tokens */ .token-item { background: var(--token-item-bg); border-color: var(--token-item-border); } /* Light theme hover removed - tokens are not interactive */ .token-value { color: var(--token-value-color); } /* Example containers and previews use semantic tokens */ .example-container { background: var(--example-container-bg); border-color: var(--example-container-border); } .spacing-preview { background: var(--preview-bg); border-color: var(--preview-border); } .color-preview { border-color: var(--preview-border); } .gradient-preview { border: 1px solid var(--preview-border); } .shadow-preview { background: var(--example-container-bg); border-color: var(--example-container-border); } .radius-preview { background: var(--preview-bg); border-color: var(--preview-border); } .animation-preview { background: var(--preview-bg); border-color: var(--preview-border); } .icon-preview { background: var(--preview-bg); border-color: var(--preview-border); } /* Component sections use semantic tokens */ .compact-card { background: var(--compact-card-bg); border-color: var(--compact-card-border); } /* Removed tech-stack-grid and faq-section overrides to keep them transparent */ .faq-item { background: var(--faq-item-bg); border-color: var(--compact-card-border); border-bottom-color: var(--compact-card-border); } .state-comparison-container { background: var(--example-container-bg); border-color: var(--example-container-border); } .stat-card { background: var(--stat-card-bg); border-color: var(--compact-card-border); } .guideline-card { background: var(--guideline-card-bg); border-color: var(--compact-card-border); } .component-playground { background: var(--playground-bg); border-color: var(--playground-border); } .playground-controls { background: var(--playground-controls-bg); border-bottom-color: var(--playground-border); } .table-responsive { background: var(--table-bg); border-color: var(--playground-border); } .table thead th { background-color: var(--table-header-bg); } /* Dark mode table headers - use brand colors */ [data-theme="dark"] .table thead th { color: var(--brand-primary); /* Lime color for headers */ } [data-theme="dark"] .table thead th [data-icon] { color: var(--brand-primary); /* Lime icons to match */ stroke-width: var(--icon-stroke-thin); /* Thinner stroke for icons */ } .table tbody tr:hover { background-color: var(--table-hover-bg); } .info-panel-a { background: var(--info-panel-bg); border-color: var(--info-panel-border); } .tech-info-panel { background: var(--info-panel-bg); border-color: var(--info-panel-border); } /* Profile card maintains dark mode appearance in both themes */ /* Token copy button styles removed */ .alpha-preview { position: relative; width: 100%; height: var(--component-height-lg); border-radius: var(--radius-2); overflow: hidden; border: var(--border-size-1) solid var(--color-border-default); } .alpha-preview-color { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .checkerboard { background: repeating-conic-gradient( var(--checkerboard-color-1) 0% 25%, var(--checkerboard-color-2) 0% 50% ) 50% / var(--checkerboard-size) var(--checkerboard-size); width: 100%; height: 100%; position: relative; z-index: 0; } .color-preview { width: 100%; height: var(--component-height-lg); border-radius: var(--radius-2); border: var(--border-size-1) solid var(--color-border-default); position: relative; overflow: hidden; } .color-preview::after { content: attr(data-hex); position: absolute; bottom: var(--size-1); right: var(--size-1); background: rgb(0, 0, 0, 0.7); color: white; padding: var(--size-1) var(--size-2); border-radius: var(--radius-1); font-size: var(--font-size-00); font-family: var(--font-mono); display: none; } .text-preview { width: 100%; height: var(--component-height-lg); display: flex; align-items: center; justify-content: center; background: var(--color-background-tertiary); border-radius: var(--radius-2); border: var(--border-size-1) solid var(--color-border-default); color: var(--color-text-default); } .text-preview { background: var(--preview-bg); border-color: var(--preview-border); } .spacing-preview { background: var(--color-background-tertiary); border-radius: var(--radius-2); padding: var(--size-2); border: var(--border-size-1) solid var(--color-border-default); position: relative; } .spacing-bar { background: var(--brand-primary); border-radius: var(--radius-1); border: none; } /* Spacing Example Cards */ .spacing-example-card { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-6); margin-bottom: var(--size-4); } .spacing-example-card .example-title { font-size: var(--font-size-2); font-weight: var(--font-weight-6); margin-bottom: var(--size-4); color: var(--color-text-default); } .spacing-example-card .example-description { font-size: var(--font-size-0); color: var(--color-text-secondary); margin-top: var(--size-3); } .spacing-demo-row { display: flex; align-items: center; gap: var(--size-4); flex-wrap: wrap; } .spacing-demo-card { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); overflow: hidden; } .spacing-label { font-family: var(--font-mono); font-size: var(--font-size-00); color: var(--color-text-muted); } .demo-button { background: var(--color-background-tertiary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-1); font-size: var(--font-size-0); display: inline-flex; align-items: center; } .gradient-preview { width: 100%; height: var(--component-height-lg); border-radius: var(--radius-2); border: var(--border-size-1) solid var(--color-border-default); } .shadow-preview, .border-preview { width: 100%; height: var(--component-height-lg); background: var(--color-background-tertiary); border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; } /* Glass effect preview styles */ .glass-preview-container { width: 100%; height: 80px; position: relative; border-radius: var(--radius-2); overflow: hidden; background: var(--surface-2); } .glass-preview-bg { position: absolute; inset: 0; background-image: url('data:image/svg+xml,'); background-size: cover; background-position: center; } .glass-preview-panel { position: absolute; inset: 10px; border-radius: var(--radius-2); border: 1px solid rgb(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-0); font-weight: var(--font-weight-6); color: var(--color-text-default); } /* Glow effect preview styles */ .glow-preview { width: var(--component-height-lg); height: var(--component-height-lg); background: var(--surface-2); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; margin: 0 auto; } .glow-preview i { width: var(--size-5); height: var(--size-5); } .border-preview { width: 100%; height: 80px; border-style: solid; border-color: var(--brand-primary); background: transparent; display: flex; } .radius-preview { width: 100%; height: 80px; background: var(--surface-3); border: none; display: flex; align-items: center; justify-content: center; } /* Motion Demo Styles */ .motion-demo-item { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-4); display: flex; flex-direction: column; gap: var(--size-3); } .motion-description { font-size: var(--font-size-0); color: var(--color-text-muted); line-height: var(--font-lineheight-3); margin-top: var(--size-1); } .motion-demo { margin-top: auto; display: flex; justify-content: center; } .motion-demo-btn { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-3) var(--size-4); cursor: pointer; display: flex; align-items: center; gap: var(--size-2); font-size: var(--font-size-0); color: var(--color-text-secondary); transition: all 150ms var(--ease-3); position: relative; overflow: hidden; width: 120px; height: 48px; } .motion-demo-btn:hover { border-color: var(--brand-primary); color: var(--color-text-default); } .motion-demo-ball { width: var(--size-3); height: var(--size-3); background: var(--brand-primary); border-radius: var(--radius-round); position: absolute; left: var(--size-2); transition-property: transform; } .motion-demo-btn span { position: absolute; left: 50%; transform: translateX(-50%); font-weight: var(--font-weight-5); } /* Animation classes for demos */ .demo-ease-1 { transition-timing-function: var(--ease-1); } .demo-ease-3 { transition-timing-function: var(--ease-3); } .demo-ease-spring-3 { transition-timing-function: var(--ease-spring-3); } .demo-duration-1 { transition-duration: var(--animation-duration-1); } .demo-duration-2 { transition-duration: var(--animation-duration-2); } .demo-duration-3 { transition-duration: var(--animation-duration-3); } /* Motion demo uses semantic tokens */ .motion-demo-item { background: var(--motion-demo-bg); border-color: var(--motion-demo-border); } .motion-demo-btn { background: var(--motion-btn-bg); border-color: var(--motion-demo-border); } /* Motion Demo Styles - 2x3 Grid Layout */ .motion-demos-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-6); margin-top: var(--size-4); } .motion-column { display: flex; flex-direction: column; } .motion-column .example-subheader { margin: 0 0 var(--size-4) 0; padding: 0 var(--size-4); } .motion-column-grid { display: flex; flex-direction: column; gap: var(--size-4); } .motion-demo-container { display: flex; align-items: center; gap: var(--size-3); margin-top: auto; } .motion-demo-track { flex: 1; height: 48px; background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); position: relative; overflow: hidden; padding: var(--size-2); } .motion-play-btn { flex-shrink: 0; height: 48px; padding: 0 var(--size-4); background: transparent; border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; gap: var(--size-2); cursor: pointer; color: var(--color-text-secondary); transition: all var(--animation-duration-2) var(--ease-3); font-size: var(--font-size-1); font-weight: var(--font-weight-5); /* Match secondary button styling */ } .motion-play-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: rgb(var(--brand-primary-rgb), 0.1); } .motion-play-btn [data-icon] { width: var(--icon-xs); height: var(--icon-xs); } /* Update motion demo ball for new layout */ .motion-demo-track .motion-demo-ball { width: var(--size-4); height: var(--size-4); background: var(--brand-gradient-primary); border-radius: var(--radius-round); position: absolute; top: 50%; left: var(--size-2); transform: translateY(-50%); transition-property: transform; } /* Motion track and play button use semantic tokens */ .motion-demo-track { background: var(--motion-track-bg); border-color: var(--motion-demo-border); } .motion-play-btn { background: var(--motion-btn-bg); border-color: var(--motion-demo-border); } .motion-play-btn:hover { background: var(--motion-btn-hover-bg); } /* Interactive Motion Demos */ .motion-demo-category { margin-bottom: var(--size-8); } .motion-demo-category h3 { font-size: var(--font-size-3); font-weight: var(--font-weight-6); margin-bottom: var(--size-4); color: var(--color-text-default); } .motion-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--size-4); } .motion-demo-card { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-5); } .motion-demo-card h4 { font-size: var(--font-size-1); font-weight: var(--font-weight-5); margin-bottom: var(--size-2); color: var(--color-text-default); } .motion-demo-card p { font-size: var(--font-size-0); color: var(--color-text-subtle); margin-bottom: var(--size-4); } .motion-demo-box { height: 120px; background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-subtle); border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-bottom: var(--size-3); } .motion-element { width: var(--size-8); height: var(--size-8); background: var(--brand-gradient-primary); border-radius: var(--radius-2); position: relative; } .motion-play-button { display: flex; align-items: center; gap: var(--size-2); padding: var(--size-2) var(--size-4); background: var(--btn-primary-bg); color: var(--btn-primary-text); border: none; border-radius: var(--radius-2); font-size: var(--font-size-0); font-weight: var(--font-weight-5); cursor: pointer; transition: all var(--duration-150) var(--ease-3); width: 100%; justify-content: center; } .motion-play-button:hover { background: var(--btn-primary-hover); transform: translateY(-1px); } .motion-play-button i { width: var(--icon-xs); height: var(--icon-xs); } /* Animation Classes */ .animate-ease-3 { animation: slideRight 1s var(--ease-3); } .animate-ease-spring-3 { animation: slideRight 1s var(--ease-spring-3); } .animate-linear { animation: slideRight 1s linear; } .animate-duration-100 { animation: fadeScale var(--duration-100) var(--ease-3); } .animate-duration-150 { animation: fadeScale var(--duration-150) var(--ease-3); } .animate-duration-300 { animation: fadeScale var(--duration-300) var(--ease-3); } .animate-hover-lift { animation: hoverLift 0.5s var(--ease-3); } .animate-scale-in { animation: scaleIn 0.3s var(--ease-spring-3); } .animate-spinner { animation: spin 1s linear infinite; } /* Keyframes */ @keyframes slideRight { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes hoverLift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes scaleIn { from { transform: scale(0); } to { transform: scale(1); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Responsive design for motion demos */ @media (width <= 768px) { .motion-demos-container { grid-template-columns: 1fr; gap: var(--size-8); } } /* Token copy button styles removed - tokens are display only */ /* Responsive Border Grid */ .border-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--size-4); } @media (width <= 768px) { .border-grid { grid-template-columns: 1fr; } } /* Responsive Glass Effects Grid */ .glass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--size-4); } @media (width <= 768px) { .glass-grid { grid-template-columns: 1fr; } } /* Alpha Comparison Grid */ .alpha-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-6); padding: var(--size-4); } .alpha-group { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-4); } .alpha-group-title { font-size: var(--font-size-2); font-weight: var(--font-weight-6); margin-bottom: var(--size-4); text-align: center; color: var(--color-text-default); } .alpha-samples { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--size-3); } .alpha-sample { text-align: center; } .alpha-preview-large { width: 100%; height: 80px; border-radius: var(--radius-2); position: relative; overflow: hidden; margin-bottom: var(--size-2); border: var(--border-size-1) solid var(--color-border-default); } .alpha-preview-large .alpha-preview-color { position: absolute; inset: 0; } .alpha-info { display: flex; flex-direction: column; gap: var(--size-1); } .alpha-info code { font-size: var(--font-size-00); color: var(--color-text-muted); } .alpha-value { font-size: var(--font-size-1); font-weight: var(--font-weight-6); color: var(--color-text-default); } /* Responsive design for alpha grid */ @media (width <= 900px) { .alpha-comparison-grid { grid-template-columns: 1fr; } .alpha-samples { grid-template-columns: repeat(2, 1fr); } } @media (width <= 480px) { .alpha-samples { grid-template-columns: 1fr; } } /* Component Library Styles */ /* Progress overlay styles for guide examples */ .progress-overlay { background: var(--color-backdrop); backdrop-filter: blur(4px); } .progress-container { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-6); text-align: center; max-width: var(--guide-grid-min-width); width: 90%; } .success-icon { color: var(--brand-primary); margin-bottom: var(--size-4); display: block; animation: checkmarkAnimation 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes checkmarkAnimation { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 70% { transform: scale(1.1) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } .action-buttons { display: flex; gap: var(--size-3); flex-direction: column; } /* Advanced filters styles */ .advanced-filters { text-align: center; padding: var(--size-3); } .advanced-filters { color: var(--color-text-muted); text-decoration: none; transition: all var(--animation-duration-2) var(--ease-3); } .advanced-filters:hover { color: var(--brand-primary); } .advanced-filters [data-icon] { transition: transform var(--animation-duration-2) var(--ease-3); } .advanced-filters:hover [data-icon] { transform: translateX(var(--border-size-2)); } /* REMOVED duplicate .example-container - using the one at line 3621 */ .code-block { background: var(--code-bg); border: var(--border-size-1) solid var(--code-border); border-radius: var(--radius-2); padding: var(--size-4); margin-bottom: var(--size-4); overflow-x: auto; position: relative; } .code-block code { font-family: var(--font-mono); font-size: var(--font-size-0); color: var(--code-text); line-height: var(--font-lineheight-2); white-space: pre; } /* Code copy button styles removed */ /* Token usage display */ .token-usage { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-3); margin-top: var(--size-3); } .token-usage-title { color: var(--brand-primary); font-size: var(--font-size-1); font-weight: var(--font-weight-6); margin-bottom: var(--size-2); } .token-list { display: flex; flex-wrap: wrap; gap: var(--size-2); } .token-badge { background: var(--color-background-tertiary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-1); padding: var(--size-1) var(--size-2); font-family: var(--font-mono); font-size: var(--font-size-00); color: var(--color-text-secondary); } /* Unified variants grid - primary responsive container pattern */ .variants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--plugin-width)), 1fr)); gap: var(--size-4); margin-bottom: var(--size-4); align-items: stretch; } /* Ensure example containers in Cards section fill their grid cells */ #token-card .variants-grid .example-container { width: 100%; max-width: 100%; height: auto; min-height: auto; overflow: visible; padding: var(--size-4); box-sizing: border-box; } /* Responsive behavior for Cards section */ @media (width <= 768px) { #token-card .variants-grid { grid-template-columns: 1fr; gap: var(--size-3); } #token-card .variants-grid .example-container { padding: var(--size-3); } } /* Ensure cards fill their containers */ .example-container .card { width: 100%; } /* Pattern Section Styles */ .pattern-section { background: var(--color-background-secondary); border-radius: var(--radius-3); border: var(--border-size-1) solid var(--color-border-default); padding: var(--size-6); margin-bottom: var(--size-6); } .pattern-title { color: var(--brand-primary); margin-bottom: var(--size-3); display: flex; align-items: center; gap: var(--size-2); } .pattern-content { color: var(--color-text-secondary); line-height: var(--font-lineheight-3); } .pattern-content h4 { color: var(--color-text-default); margin-top: var(--size-4); margin-bottom: var(--size-2); } .pattern-content pre { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-3); overflow-x: auto; font-family: var(--font-mono); font-size: var(--font-size-0); color: var(--color-text-default); } .pattern-content code { background: var(--color-background-tertiary); padding: var(--size-1); border-radius: var(--radius-1); font-family: var(--font-mono); font-size: var(--font-size-0); } .heart { color: var(--value-state); display: inline-block; transition: transform var(--animation-duration-3) var(--ease-spring-4); } .about-description:hover .heart { transform: scale(1.2); } /* State groups with better hierarchy */ .state-group { margin-bottom: var(--size-8); /* Large gap between groups */ } .state-group-header { background: rgb(var(--brand-primary-rgb), 0.03); border: var(--border-size-1) solid rgb(210, 255, 55, 0.1); border-radius: var(--radius-3); padding: var(--size-4); margin-bottom: var(--size-4); } .state-group-title { color: var(--brand-primary); margin-bottom: var(--size-2); } .state-documentation { margin-top: var(--size-1); /* Small gap - attached to parent */ background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-3); } .state-documentation-title { color: var(--brand-primary); font-size: var(--font-size-1); font-weight: var(--font-weight-6); margin-bottom: var(--size-2); } /* ========================================================================== COMPONENT: ABOUT MODAL (V2 - REFACTORED) ========================================================================== */ .about-modal { position: fixed; inset: 0; background-color: rgb(var(--color-backdrop-rgb), var(--opacity-backdrop)); backdrop-filter: var(--blur-lg); z-index: var(--layer-notification); display: flex; align-items: center; justify-content: center; padding: var(--size-10) var(--size-4); /* More generous padding top/bottom */ opacity: 0; visibility: hidden; transition: opacity var(--transition-medium), visibility var(--transition-medium); } .about-modal.show { opacity: 1; visibility: visible; } .about-modal.is-example { position: static; z-index: var(--layer-base); /* Remove full-screen behavior for examples */ background: none; backdrop-filter: none; display: block; visibility: visible; opacity: 1; padding: 0; } /* Updated demo modal styles */ .example-container-modal .about-modal.is-example { position: relative; inset: auto; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; } /* Legacy support - hide old about-content */ .about-content { display: none; } .about-close { position: absolute; top: var(--size-3); right: var(--size-3); } .about-header { display: flex; flex-direction: column; gap: var(--size-1); padding-bottom: var(--size-3); margin-bottom: var(--size-2); border-bottom: var(--border-size-1) solid var(--color-border-default); } /* Duplicate styles removed - using consolidated rule above */ .wizard-emoji { display: inline-block; vertical-align: middle; } .about-description { color: var(--color-text-secondary); line-height: var(--font-lineheight-3); margin: 0; } .about-links { display: flex; justify-content: center; /* FIX: Centers icons */ gap: var(--size-3); margin-top: var(--size-2); } /* New grid layout for the export flow demo */ .export-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-4); align-items: stretch; /* Makes cards equal height */ } @media (width <= 900px) { .export-flow-grid { grid-template-columns: 1fr; gap: var(--size-3); } } /* ========================================================================== ABOUT MODAL CONCEPTS ========================================================================== */ /* Shared Modal Base */ .about-modal { position: fixed; inset: 0; z-index: var(--layer-notification); display: flex; align-items: center; justify-content: center; padding: var(--size-4); opacity: 0; visibility: hidden; transition: opacity var(--transition-medium), visibility var(--transition-medium); } .about-modal.show { opacity: 1; visibility: visible; } .about-modal-backdrop { position: absolute; inset: 0; background: rgb(var(--color-backdrop-rgb), var(--opacity-backdrop)); backdrop-filter: var(--blur-lg); } .about-modal-close { position: absolute; top: var(--size-3); right: var(--size-3); z-index: 10; } /* Clean Minimal Modal (Default) */ .about-modal-clean .about-modal-content, .about-modal-concept-1 .about-modal-content { position: relative; background: var(--surface-1); border-radius: var(--radius-3); padding: var(--size-8); max-width: var(--plugin-width); width: 100%; text-align: center; box-shadow: var(--shadow-6); } /* Legacy avatar styles removed */ .about-modal-clean .about-name, .about-modal-concept-1 .about-name { font-size: var(--font-size-5); font-weight: var(--font-weight-7); color: var(--color-text-primary); margin: 0 0 var(--size-1); } .about-modal-clean .about-role, .about-modal-concept-1 .about-role { font-size: var(--font-size-1); color: var(--color-text-secondary); margin: 0 0 var(--size-5); } .about-modal-clean .about-bio, .about-modal-concept-1 .about-bio { font-size: var(--font-size-1); line-height: var(--font-lineheight-3); color: var(--color-text-secondary); margin: 0 0 var(--size-6); } .about-modal-clean .about-social, .about-modal-concept-1 .about-social { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--size-3); max-width: 180px; margin: 0 auto; } /* Vortex Modal Styles */ .about-modal-vortex .about-modal-container, .about-modal-concept-2 .about-modal-container { position: relative; width: 100%; max-width: 420px; min-height: 500px; display: flex; align-items: center; justify-content: center; } .about-modal-vortex .about-modal-animation, .about-modal-concept-2 .about-modal-animation { position: absolute; inset: 0; background: var(--surface-1); border-radius: var(--radius-4); overflow: hidden; } .about-modal-vortex .vortex-grid, .about-modal-concept-2 .vortex-grid { position: absolute; inset: -50%; background-image: radial-gradient(circle at 50% 50%, var(--brand-primary) 0%, transparent 70%), repeating-linear-gradient( 0deg, transparent, transparent 40px, rgb(210, 255, 55, 0.03) 40px, rgb(210, 255, 55, 0.03) 80px ), repeating-linear-gradient( 90deg, transparent, transparent 40px, rgb(210, 255, 55, 0.03) 40px, rgb(210, 255, 55, 0.03) 80px ); animation: vortex-rotate 60s linear infinite; } @keyframes vortex-rotate { from { transform: rotate(0deg) scale(1.5); } to { transform: rotate(360deg) scale(1.5); } } .about-modal-vortex .about-modal-card, .about-modal-concept-2 .about-modal-card { position: relative; z-index: 1; padding: var(--size-8); max-width: 380px; width: 90%; text-align: center; } .about-modal-vortex .about-avatar-glow, .about-modal-concept-2 .about-avatar-glow { width: 120px; height: 120px; margin: 0 auto var(--size-5); border-radius: var(--radius-round); overflow: hidden; position: relative; box-shadow: 0 0 40px rgb(210, 255, 55, 0.5); } .about-modal-vortex .about-avatar-glow img, .about-modal-concept-2 .about-avatar-glow img { width: 100%; height: 100%; object-fit: cover; } .about-modal-vortex .about-name-gradient, .about-modal-concept-2 .about-name-gradient { font-size: var(--font-size-5); font-weight: var(--font-weight-7); background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 var(--size-1); } .about-modal-vortex .about-role-animated, .about-modal-concept-2 .about-role-animated { font-size: var(--font-size-1); color: var(--color-text-muted); margin: 0 0 var(--size-4); } .about-modal-vortex .about-divider, .about-modal-concept-2 .about-divider { width: 60px; height: 2px; background: var(--brand-primary); margin: 0 auto var(--size-4); } .about-modal-vortex .about-bio-glass, .about-modal-concept-2 .about-bio-glass { font-size: var(--font-size-1); line-height: var(--font-lineheight-3); color: var(--color-text-secondary); margin: 0 0 var(--size-6); } .about-modal-vortex .about-social-row, .about-modal-concept-2 .about-social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--size-3); max-width: 180px; margin: 0 auto; } /* Concept 3: Card with Brand Accent */ .about-modal-concept-3 .about-modal-frame { position: relative; max-width: 450px; width: 100%; } .about-modal-concept-3 .about-modal-panel { background: var(--surface-2); border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--shadow-5); } .about-modal-concept-3 .about-modal-header { background: var(--surface-3); padding: var(--size-3); text-align: right; } .about-modal-concept-3 .about-profile-section { padding: var(--size-6); text-align: center; background: linear-gradient(to bottom, var(--surface-3), transparent); } .about-modal-concept-3 .about-avatar-frame { width: 100px; height: 100px; margin: 0 auto var(--size-4); position: relative; } .about-modal-concept-3 .about-avatar-frame img { width: 100%; height: 100%; border-radius: var(--radius-round); object-fit: cover; position: relative; z-index: 1; } .about-modal-concept-3 .about-avatar-ring { position: absolute; inset: -4px; border-radius: var(--radius-round); background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); z-index: 0; } .about-modal-concept-3 .about-name-brand { font-size: var(--font-size-4); font-weight: var(--font-weight-6); color: var(--color-text-primary); margin: 0 0 var(--size-1); } .about-modal-concept-3 .about-role-brand { font-size: var(--font-size-1); color: var(--brand-primary); margin: 0; } .about-modal-concept-3 .about-content-section { padding: 0 var(--size-6) var(--size-6); } .about-modal-concept-3 .about-bio-brand { font-size: var(--font-size-1); line-height: var(--font-lineheight-3); color: var(--color-text-secondary); margin: 0 0 var(--size-5); text-align: center; } .about-modal-concept-3 .about-social-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--size-2); max-width: 180px; margin: 0 auto; } /* Mobile adjustments for all concepts */ @media (width <= 768px) { .about-modal { padding: var(--size-3); } .about-modal-concept-1 .about-modal-content, .about-modal-concept-2 .about-modal-card, .about-modal-concept-3 .about-modal-panel { padding: var(--size-6); } .about-modal-concept-1 .about-avatar, .about-modal-vortex .about-avatar-glow, .about-modal-concept-2 .about-avatar-glow { width: 100px; height: 100px; } .about-modal-concept-3 .about-avatar-frame { width: 80px; height: 80px; } } /* ========================================================================== RESPONSIVE LAYOUT ========================================================================== */ @media (width <= 1024px) { /* Simple single-column layout for mobile */ .guide-container { grid-template-columns: 1fr; } /* Hide sidebar completely - mobile menu handles navigation */ .guide-sidebar { display: none; } .guide-content { max-width: 100vw; width: 100%; margin-left: 0; padding: 0; padding-top: var(--size-10); box-sizing: border-box; } /* Show mobile header on mobile */ .mobile-header { display: flex; position: fixed; top: 0; left: 0; right: 0; height: var(--size-10); background: rgb(var(--color-backdrop-rgb), 0.8); backdrop-filter: var(--blur-lg); border-bottom: var(--border-size-1) solid var(--brand-primary); z-index: var(--layer-modal); padding: 0 var(--size-4); align-items: center; justify-content: space-between; transition: transform var(--transition-fast); } @supports not (backdrop-filter: blur(var(--border-size-1))) { .mobile-header { background: rgb(var(--color-backdrop-rgb), 0.95); } } .mobile-header.hidden { transform: translateY(-100%); } .header-brand { display: flex; align-items: center; gap: var(--size-2); } .mobile-header-logo { width: 40px; /* Match hamburger button size */ height: 40px; } .mobile-header-logo svg { width: 100%; height: 100%; } .header-title { font-size: 1.25rem; /* Fixed 20px to align with 40px logo */ font-weight: var(--font-weight-6); color: var(--color-text-default); line-height: 1; display: flex; flex-direction: column; justify-content: center; height: 40px; letter-spacing: -0.01em; } .header-title span { display: block; /* Each word on its own line */ line-height: 1; } .mobile-header-controls { display: flex; align-items: center; gap: var(--size-4); height: 100%; } /* Prevent theme toggle from stretching in mobile header */ .mobile-header-controls .theme-toggle { align-self: center; flex-shrink: 0; width: 82px !important; height: 38px !important; max-height: 38px !important; min-height: 38px !important; } /* Ensure theme toggle wrapper doesn't stretch */ .mobile-header-controls #theme-toggle { height: auto !important; display: flex; align-items: center; } .mobile-menu-toggle-right { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); color: var(--color-text-default); cursor: pointer; padding: var(--size-2); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-2); width: 40px; height: 40px; transition: all var(--animation-duration-2) var(--ease-3); } .mobile-menu-toggle-right:hover { border-color: var(--brand-primary); color: var(--brand-primary); } /* Mobile menu toggle uses semantic tokens */ .mobile-menu-toggle-right:hover { border-color: var(--mobile-menu-hover-border); color: var(--mobile-menu-hover-color); } .mobile-menu-toggle-right:active { background: var(--color-background-primary); } .mobile-menu-toggle-right [data-icon] { width: var(--icon-md); height: var(--icon-md); stroke-width: var(--icon-stroke-regular); } /* --- Mobile Grid Stacking for Components --- */ .variants-grid, .export-flow-grid, .color-grid, .shadow-grid, .radius-grid, .tokens-grid { grid-template-columns: 1fr; } .gray-scale-grid { grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-mobile-xs), 1fr)); } .spacing-grid { grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width-xs), 1fr)); } /* About Section */ .about-section { margin-left: calc(-1 * var(--size-4)); margin-right: calc(-1 * var(--size-4)); padding: var(--size-6) var(--size-4); } .about-content-grid { grid-template-columns: 1fr; text-align: center; } .about-links { justify-content: center; } /* Guide Footer */ .guide-footer { margin-left: 0; } .footer-content { flex-direction: column; align-items: center; gap: var(--size-4); text-align: center; } /* Copy buttons removed globally */ } /* --- Responsive Table ("Card" Layout on Mobile) --- */ @media (width <= 1024px) { .table-responsive { width: 100%; margin: 0 auto; border: none; background: transparent; } .table thead { display: none; } .table, .table tbody, .table tr, .table td { display: block; width: 100%; } .table tr { margin-bottom: var(--size-4); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); overflow: hidden; } .table td { text-align: right; position: relative; padding-left: 35%; border-bottom: var(--border-size-1) solid var(--color-border-default); } .table td:last-child { border-bottom: none; } .table td::before { content: attr(data-label); position: absolute; left: var(--size-3); width: calc(35% - var(--size-4)); text-align: left; font-weight: var(--font-weight-6); color: var(--brand-primary); /* Lime in both themes */ } /* Match icon size in mobile headers */ .table td[data-label]::before { display: flex; align-items: center; gap: var(--size-1); } } /* Mobile optimization for portfolio section */ @media (width <= 900px) { /* Hero section adjustments */ .portfolio-hero { padding: var(--size-4) var(--size-3); min-height: 100vh; margin-bottom: var(--size-6); /* Account for mobile header in flexbox layout */ padding-top: calc(var(--size-10) + var(--size-6)); /* Mobile header height + spacing */ } /* Content wrapper - maintain flex centering */ .hero-content-wrapper { /* Remove hardcoded padding - parent handles spacing */ padding-top: 0; padding-bottom: 0; } /* Mobile group spacing adjustments */ .hero-intro-group { margin-bottom: var(--size-4); /* Reduced spacing for mobile */ } .hero-cta-group { margin: var(--size-3) 0 var(--size-6) 0; /* More space before social icons on mobile */ } .hero-bottom { gap: var(--size-4); margin: 0; display: flex; flex-direction: column; align-items: center; } .hero-bottom p { margin: 0; } /* Text hierarchy improvements using existing tokens */ .hero-main-title { font-size: clamp(2rem, 7vw, var(--font-size-7)); /* Responsive font sizing */ line-height: 1.1; /* Maintain tight line height */ letter-spacing: -0.02em; /* Maintain letter spacing */ } /* Hero title optimization for mobile */ .guide-main-title { font-size: clamp(2rem, 8vw, 3.5rem); /* Responsive: 32px min, scales with viewport, 56px max */ white-space: nowrap; /* Force single line */ overflow: hidden; text-overflow: ellipsis; /* Graceful fallback if too long */ } .hero-tagline { font-size: clamp(1.125rem, 4vw, var(--font-size-3)); /* Responsive scaling maintained */ color: var(--color-text-secondary); /* Use semantic color */ padding: 0 var(--size-2); } .hero-description { font-size: var(--font-size-2); /* Increased for better mobile readability */ color: var(--color-text-muted); /* Use semantic muted color */ padding: 0 var(--size-2); } } /* ========================= RESPONSIVE TITLE ENHANCEMENT ========================= */ /* Mobile-first approach - title is always single-line now */ @media (min-width: 400px) and (max-width: 900px) { /* Social links responsive spacing */ .social-links { display: flex; gap: var(--size-4); } /* Remove manual margin overrides */ .figma-cta { margin: 0; } /* Impact stats - force 2x2 grid */ .impact-stats { grid-template-columns: repeat(2, 1fr); gap: var(--size-2); padding: var(--size-3); } /* Stat items */ .stat-item { padding: var(--size-1) var(--size-3) var(--size-5) var(--size-3); } .stat-number { font-size: var(--font-size-6); /* Keep readable */ } .stat-label { font-size: var(--font-size-0); /* Smaller on mobile to fit better */ /* Text can wrap on mobile */ white-space: normal; padding: 0 var(--size-1); } /* Compact cards */ .compact-card { padding: var(--size-3); } .compact-card h3 { gap: var(--size-1); } .compact-card h3 i { width: var(--icon-md); height: var(--icon-md); } } /* ========================================================================== HERO ANIMATION - Floating Token Icons ========================================================================== */ /* Animation-specific tokens */ :root { /* Opacity values */ --animation-opacity-visible: 0.7; --animation-opacity-dim: 0.5; /* Position offsets */ --animation-offset-top: calc(var(--size-15) * -1); /* -480px - ensures icons exit fully */ --animation-start-bottom: 120vh; /* Start well below viewport for smooth entry */ /* Sway distances for bubble animation */ --animation-sway-sm: var(--size-3); /* 10px */ --animation-sway-md: var(--size-5); /* 20px */ /* Blur effects */ --animation-blur-min: 1px; --animation-blur-max: 2px; /* Duration ranges (in seconds) */ --animation-duration-rise-min: 25; --animation-duration-rise-range: 15; --animation-duration-bubble-min: 20; --animation-duration-bubble-range: 15; --animation-duration-parallax-min: 20; --animation-duration-parallax-range: 10; --animation-duration-parallax-slow-min: 35; --animation-duration-parallax-slow-range: 10; /* Scale values */ --animation-scale-small: 0.7; --animation-scale-normal: 1; } /* Animation container */ .hero-animation-canvas { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* Floating icon styles */ .icon-float { position: absolute; display: flex; align-items: center; justify-content: center; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: backwards; /* Apply first keyframe during delay */ will-change: transform, opacity; /* Let animation handle initial positioning */ } /* Animation variations */ .icon-float.rise { animation-name: gentleRise; } .icon-float.bubble { animation-name: bubblingUp; } .icon-float.parallax { animation-name: parallaxAscent; } /* Rise animation - straight upward with rotation */ @keyframes gentleRise { 0% { transform: translateY(var(--animation-start-bottom)) rotate(0deg); opacity: 0; } 5% { opacity: var(--animation-opacity-visible); } 95% { opacity: var(--animation-opacity-visible); } 100% { transform: translateY(var(--animation-offset-top)) rotate(360deg); opacity: 0; } } /* Bubble animation - sway side to side while rising */ @keyframes bubblingUp { 0% { transform: translateY(var(--animation-start-bottom)) translateX(0) rotate(0deg); opacity: 0; } 5% { opacity: var(--animation-opacity-visible); } 25% { transform: translateY(75vh) translateX(calc(var(--animation-sway-md) * -1)) rotate(90deg); } 50% { transform: translateY(50vh) translateX(var(--animation-sway-md)) rotate(180deg); } 75% { transform: translateY(25vh) translateX(calc(var(--animation-sway-sm) * -1)) rotate(270deg); } 95% { opacity: var(--animation-opacity-visible); } 100% { transform: translateY(var(--animation-offset-top)) translateX(0) rotate(360deg); opacity: 0; } } /* Parallax animation - scale effect for depth */ @keyframes parallaxAscent { 0% { transform: translateY(var(--animation-start-bottom)) scale(var(--animation-scale-small)); opacity: 0; } 8% { opacity: var(--animation-opacity-visible); } 92% { opacity: var(--animation-opacity-visible); } 100% { transform: translateY(var(--animation-offset-top)) scale(var(--animation-scale-normal)); opacity: 0; } } /* Very small screens */ @media (width <= 480px) { .portfolio-hero { padding: var(--size-3) var(--size-2); min-height: 100vh; /* Adjust for smaller mobile header spacing */ padding-top: calc(var(--size-10) + var(--size-5)); /* Mobile header height + spacing */ } /* Content wrapper - maintain flex behavior */ .hero-content-wrapper { /* Let flexbox handle centering */ padding-top: 0; padding-bottom: 0; } .hero-bottom { gap: var(--size-4); /* 16px - Consistent spacing */ } /* Further font size adjustments for very small screens */ .hero-description { font-size: var(--font-size-1); /* Still readable on very small screens */ } .hero-footer p { font-size: var(--font-size-00); /* REDUCED - Significantly smaller text */ } .impact-stats { gap: var(--size-1); padding: var(--size-2); } .stat-number { font-size: var(--font-size-5); } .stat-label { font-size: var(--font-size-00); /* Even smaller on tiny screens */ line-height: 1.1; } .compact-cards { grid-template-columns: 1fr; } } /* ========================================================================== THEMING STRATEGY & FUTURE IMPLEMENTATIONS ========================================================================== */ /* * The design system is architected to support multiple themes. The default * theme is dark. A new theme can be created by applying a data-theme * attribute (e.g., ) and redefining the * semantic color tokens below. */ /* Token display uses semantic tokens */ .token-name { color: var(--token-name-color); } .token-value { color: var(--token-value-color); } /* ========================= LIGHT THEME COMPONENT OVERRIDES (DEPRECATED) Migrated to token-only theming approach All components now use semantic tokens that adapt to themes ========================= */ /* ========================= THEME VARIATIONS COMPONENT For displaying theme token comparisons ========================= */ /* Theme comparison grid */ .theme-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-4); } /* Theme preview containers */ .theme-preview-dark { background: var(--surface-1); color: var(--color-text-default); } .theme-preview-light { background: var(--surface-1); color: var(--color-text-default); border: 1px solid var(--color-border-subtle); } /* Token preview list */ .token-preview-list { display: flex; flex-direction: column; gap: var(--size-2); margin-bottom: var(--size-4); } .token-preview-item { display: flex; align-items: center; gap: var(--size-2); font-family: var(--font-mono); font-size: var(--font-size-0); } .token-name { flex: 1; } /* Color swatches */ .color-swatch { width: var(--size-5); height: var(--size-5); border-radius: var(--radius-1); border: 1px solid var(--color-border-subtle); } .color-swatch-inline { display: inline-block; width: var(--size-4); height: var(--size-4); border-radius: var(--radius-1); border: 1px solid var(--color-border-subtle); vertical-align: middle; } /* Swatch colors using actual tokens */ .color-swatch.brand-primary, .color-swatch-inline.brand-primary { background: var(--brand-primary); } .color-swatch.brand-secondary, .color-swatch-inline.brand-secondary { background: var(--brand-secondary); } .color-swatch.surface-1, .color-swatch-inline.surface-1 { background: var(--surface-1); } .color-swatch.text-default, .color-swatch-inline.text-default { background: var(--color-text-default); } /* Button preview area */ .button-preview { display: flex; gap: var(--size-2); } /* Token cell in table */ .token-cell { display: flex; align-items: center; gap: var(--size-2); } /* Theme comparison preview */ .theme-comparison-preview { position: relative; } .split-preview { display: flex; gap: var(--size-1); } .split-preview .color-preview { flex: 1; } /* Theme sample content */ .theme-sample-content { display: flex; align-items: center; gap: var(--size-2); margin-bottom: var(--size-2); } .theme-sample-content .color-preview { width: var(--size-5); height: var(--size-5); flex-shrink: 0; } /* ================================================================= FOOTER - CLEAN MINIMAL ================================================================= */ .footer-minimal { width: 100%; margin-top: var(--size-12); background: var(--surface-1); padding: var(--size-8) 0; } .footer-container { margin: 0 auto; padding: 0 var(--size-6); } /* Desktop Layout */ .footer-desktop { display: flex; flex-direction: column; gap: var(--size-8); } .footer-main-row { display: flex; justify-content: space-between; align-items: center; gap: var(--size-4); } /* Fix CTA button alignment */ .footer-main-row .btn { flex-shrink: 0; margin: 0; } .footer-bottom-row { display: flex; justify-content: space-between; align-items: center; padding-top: var(--size-6); border-top: 1px solid var(--color-border-subtle); } .footer-brand { display: flex; align-items: center; gap: var(--size-3); } .footer-logo { width: 56px; height: 56px; flex-shrink: 0; } .footer-text { display: flex; flex-direction: column; gap: var(--size-1); } .footer-title { font-size: var(--font-size-3); font-weight: var(--font-weight-6); line-height: 1.2; color: var(--color-text-default); margin: 0; } .footer-tagline { font-size: var(--font-size-0); color: var(--color-text-secondary); line-height: 1.2; margin: 0; } .footer-attribution { font-size: var(--font-size-0); color: var(--color-text-secondary); margin: 0; } .footer-heart { color: var(--pink-5); } .footer-social { display: flex; gap: var(--size-2); } /* Mobile Layout */ .footer-mobile { display: none; } .footer-brand-mobile { display: flex; flex-direction: column; align-items: center; gap: var(--size-2); text-align: center; margin-bottom: var(--size-6); } .footer-brand-mobile .footer-logo { width: 64px; height: 64px; } .footer-bottom-mobile { display: flex; flex-direction: column; align-items: center; gap: var(--size-4); padding-top: var(--size-6); border-top: 1px solid var(--color-border-subtle); } /* Responsive */ @media (width <= 768px) { .footer-desktop { display: none; } .footer-mobile { display: flex; flex-direction: column; align-items: center; } } /* ================================================================= ICON DOCUMENTATION STYLES ================================================================= */ /* Icon showcase grid - responsive layout */ .icon-showcase { display: flex; flex-direction: column; align-items: center; gap: var(--size-2); padding: var(--size-3); border: var(--border-size-1) solid var(--color-border-subtle); border-radius: var(--radius-2); background: var(--color-background-subtle); transition: all 0.2s ease; } .icon-showcase:hover { background: var(--color-background-default); border-color: var(--color-border-default); } .icon-display { display: flex; align-items: center; justify-content: center; width: var(--icon-xxl); height: var(--icon-xxl); border-radius: var(--radius-1); background: var(--color-background-default); } .icon-meta { text-align: center; } .icon-name { font-weight: 600; color: var(--color-text-default); } .icon-usage { color: var(--color-text-muted); } /* Icon size demonstration */ .icon-size-demo { display: flex; flex-direction: column; align-items: center; gap: var(--size-1); padding: var(--size-2); border-radius: var(--radius-1); transition: all 0.2s ease; } .icon-size-demo:hover { background: var(--color-background-subtle); } .size-label { font-weight: 500; margin-top: var(--size-1); } /* Code examples in guidelines */ .code-examples { display: flex; flex-direction: column; gap: var(--size-2); margin-top: var(--size-2); } .code-example { display: flex; flex-direction: column; gap: var(--size-1); } .code-example code { padding: var(--size-2); background: var(--color-background-code); border: var(--border-size-1) solid var(--color-border-subtle); border-radius: var(--radius-1); font-family: var(--font-mono); font-size: var(--font-size-1); overflow-x: auto; } /* Responsive design for icon documentation */ @media (width <= 900px) { .example-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--size-2); } .icon-showcase { padding: var(--size-2); } .icon-display { width: 40px; height: 40px; } } @media (width <= 480px) { .example-grid { grid-template-columns: 1fr !important; } .icon-size-demo { padding: var(--size-1); } } /* ========================================================================== GUIDE LAYOUT SPECIFICATION Layout standards and visual consistency rules for the Design System Guide Purpose: Ensures consistent layout, typography, and spacing across all documentation sections while maintaining separation from component styles. ========================================================================== */ /* ========================= GUIDE LAYOUT TOKENS ========================= */ :root { /* Layout Dimensions */ --size-sidebar-width: 280px; /* Semantic token for layout grid system */ /* Layout Spacing */ --guide-section-padding: var(--size-6); --guide-section-padding-mobile: var(--size-3); --guide-header-gap: var(--size-3); --guide-content-gap: var(--size-4); --guide-subsection-gap: var(--size-6); /* Icon Standards */ --guide-icon-size: var(--icon-lg); /* 24px - consistent header icons */ --guide-icon-size-mobile: var(--icon-md); /* 20px - mobile optimization */ /* Typography Scale */ --guide-section-title-size: var(--font-size-6); /* 2.5rem - main sections */ --guide-section-title-size-mobile: var(--font-size-5); /* 2rem - mobile */ --guide-subsection-title-size: var(--font-size-2); /* 1rem - subsections */ --guide-description-size: var(--font-size-1); /* 0.875rem - descriptions */ /* Grid Standards */ --guide-grid-min-width: 320px; /* Minimum card width */ --guide-grid-gap: var(--size-4); /* Standard grid gap */ --guide-grid-gap-small: var(--size-3); /* Condensed grid gap */ /* Card layout tokens for unified grid systems */ --card-min-width-xs: 150px; /* Extra small - color swatches */ --card-min-width-sm: var(--size-sidebar-width); /* 280px - compact cards */ --card-min-width-md: 250px; /* Medium cards */ --card-min-width-lg: var(--guide-grid-min-width); /* 320px - large cards */ --card-min-width-xl: 300px; /* Extra large cards */ --card-min-width-enhanced: var(--size-sidebar-width); /* Enhanced glass cards */ --card-gap-standard: var(--guide-grid-gap); /* var(--size-4) */ --card-gap-compact: var(--guide-grid-gap-small); /* var(--size-3) */ --card-gap-mobile: var(--size-2); /* Mobile spacing */ /* Mobile card width overrides */ --card-min-width-mobile-xs: 120px; /* Mobile extra small */ --card-min-width-mobile-sm: 150px; /* Mobile small */ /* Card padding tokens for consistent sizing */ --card-padding-sm: var(--size-4); /* Small cards: 16px */ --card-padding-md: var(--size-5); /* Medium cards: 20px */ --card-padding-lg: var(--size-6); /* Large cards: 24px */ --card-padding-xl: var(--size-7); /* Enhanced cards: 28px */ } /* ========================= SECTION STRUCTURE ========================= */ /* Main Section Container */ .content-section { margin-bottom: var(--guide-content-gap); position: relative; } /* ========= UNIFIED SECTION HEADER SYSTEM ========= */ /* Single header style for ALL sections - no special cases */ .section-header, .category-header, .component-header { padding: 0 0 var(--size-4) 0; margin-bottom: var(--size-6); background: transparent; border-bottom: var(--border-size-1) solid var(--token-section-border); text-align: left; } /* All section titles use consistent typography */ .section-header .section-title-primary, .category-header .section-title-primary, .component-header .section-title-primary { font-size: var(--font-size-5); margin: 0; } /* All section descriptions use consistent styling */ .section-header .section-description, .category-header .section-description, .component-header .section-description { margin: var(--size-2) 0 0 0; padding: 0; } /* Major Section Headers (Foundation & Components) */ .major-section-header { margin-top: var(--size-10); margin-bottom: var(--size-8); padding-bottom: var(--size-6); border-bottom: var(--border-size-2) solid var(--color-border-default); } .major-section-header h2 { font-size: clamp(2rem, 8vw, var(--font-size-8)); /* Responsive: 32px min, scales with viewport */ font-weight: var(--font-weight-7); color: var(--color-text-default); margin: 0; display: flex; align-items: center; gap: var(--size-4); } .major-section-header [data-icon] { color: var(--color-text-muted); width: var(--icon-xxl); height: var(--icon-xxl); } /* Mobile adjustments for major section headers */ @media (max-width: 768px) { .major-section-header { margin-top: var(--size-8); margin-bottom: var(--size-6); padding-bottom: var(--size-4); } .major-section-header h2 { gap: var(--size-3); } .major-section-header [data-icon] { width: var(--icon-xl); height: var(--icon-xl); } } /* Main Section Headers (Foundation & Components) Override */ .main-section-title { /* Typography from .text-heading-xl class */ } /* No content-section overrides needed - unified system handles all sections */ /* Section Body Container - inherits padding from token-category styles */ /* Table responsive needs horizontal padding since it extends full width */ .component-body:has(.table-responsive) { padding: 0 0 var(--guide-content-gap) 0; } /* ========================= TYPOGRAPHY HIERARCHY ========================= */ /* Main Section Titles */ .component-title, .main-section-title { /* Typography from .text-heading-xl class */ color: var(--color-text-default); display: flex; align-items: center; gap: var(--guide-header-gap); margin-bottom: var(--size-2); } /* Subsection Titles */ .example-subheader { font-size: var(--guide-subsection-title-size); font-weight: var(--font-weight-6); color: var(--color-text-default); margin: var(--guide-subsection-gap) 0 var(--size-3) 0; } /* Border section subheaders with brand color */ .border-weight-header, .border-radius-header { color: var(--brand-secondary); text-transform: uppercase; font-size: var(--font-size-1); font-weight: var(--font-weight-7); letter-spacing: 0.05em; margin-top: var(--size-6); margin-bottom: var(--size-4); padding-left: var(--guide-section-padding); } /* Descriptions */ .component-description, .section-description, .category-description { font-size: var(--guide-description-size); color: var(--color-text-secondary); line-height: var(--font-lineheight-3); margin-bottom: var(--size-3); max-width: 65ch; /* Optimal reading line length */ } /* ========================= STANDARDIZED ICONS ========================= */ /* Header Icons - Consistent Sizing */ .component-title [data-icon], .component-title .icon { width: var(--guide-icon-size); height: var(--guide-icon-size); color: var(--color-text-muted); /* Use semantic token for theme consistency */ flex-shrink: 0; stroke-width: var(--icon-stroke-regular); } /* Main Section Title Icons - Larger for hierarchy */ .main-section-title [data-icon], .main-section-title .icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--color-text-muted); /* Use semantic token for theme consistency */ flex-shrink: 0; stroke-width: var(--icon-stroke-regular); } /* Main section title icons with data-lucide use semantic tokens */ .main-section-title [data-icon], .main-section-title .icon { color: var(--section-title-icon-color); } /* Header icons use semantic tokens */ .category-title [data-icon], .category-title i, .text-heading-lg [data-icon], .text-heading-lg i, .component-title [data-icon], .component-title .icon { color: var(--section-title-icon-color); } /* Remove any inline styles that override the standard */ .component-title [style*="color"], .main-section-title [style*="color"] { color: var(--brand-primary) !important; } /* Subsection Icons */ .example-subheader .icon, .example-subheader [data-icon] { width: var(--icon-md); height: var(--icon-md); color: var(--brand-primary); margin-right: var(--size-2); } /* ========================= LAYOUT PATTERNS ========================= */ /* Standard Content Sections */ .subsection { margin-bottom: var(--guide-subsection-gap); } /* Grid Layouts */ /* Guide-specific variants grid override */ .guide-content .variants-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--guide-grid-min-width)), 1fr)); gap: var(--guide-grid-gap); margin-bottom: var(--guide-subsection-gap); padding: 0; } /* Compact Grid (for smaller items) */ .compact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size-sidebar-width), 1fr)); gap: var(--guide-grid-gap-small); margin-bottom: var(--guide-subsection-gap); } /* Example Wrappers */ .example-wrapper { position: relative; display: flex; flex-direction: column; } /* Hover removed - example containers are display only */ /* ========================= CONTENT ORGANIZATION ========================= */ /* Token Reference Lists */ .token-reference-list { display: flex; flex-direction: column; gap: var(--size-2); } .token-reference-item { display: flex; align-items: center; gap: var(--size-3); padding: var(--size-2); background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-1); transition: all 0.2s var(--ease-3); } .token-reference-item:hover { border-color: var(--brand-primary); background: rgb(210, 255, 55, 0.05); } .token-reference-item code { font-family: var(--font-mono); font-size: var(--font-size-0); color: var(--brand-primary); background: transparent; border: none; padding: 0; min-width: 120px; } .token-reference-item span { color: var(--color-text-secondary); font-size: var(--font-size-0); flex: 1; } /* ========================= RESPONSIVE DESIGN ========================= */ /* Tablet and Mobile */ @media (width <= 1024px) { :root { --guide-section-padding: var(--guide-section-padding-mobile); --guide-icon-size: var(--guide-icon-size-mobile); --guide-section-title-size: var(--guide-section-title-size-mobile); --guide-header-gap: var(--size-2); --guide-grid-gap: var(--size-3); } /* Main sections use responsive typography from classes */ .main-section-title { /* Typography from .text-heading-xl (responsive) */ } /* Mobile main section icons scale down appropriately */ .main-section-title [data-icon], .main-section-title .icon { width: var(--icon-md); height: var(--icon-md); } /* All headers now use unified system - no mobile overrides needed */ /* Component body padding now handled by main rule */ /* Ensure subsections and icons maintain padding on mobile */ .icons-showcase .variants-grid { padding: 0; grid-template-columns: 1fr; /* Single column on mobile */ } .variants-grid { grid-template-columns: 1fr; padding: 0; /* Padding handled by parent */ } .compact-cards { grid-template-columns: 1fr; gap: var(--size-2); } .component-description, .section-description, .category-description { max-width: none; /* Remove line length constraint on mobile */ } } /* Small Mobile */ @media (width <= 480px) { :root { --guide-section-padding: var(--size-3); --guide-content-gap: var(--size-3); --guide-subsection-gap: var(--size-4); } .example-container { padding: var(--size-3); } .token-reference-item { flex-direction: column; align-items: flex-start; gap: var(--size-1); } .token-reference-item code { min-width: unset; } } /* ========================= ACCESSIBILITY ========================= */ /* Focus States for Interactive Elements */ .example-container:focus-within, .token-reference-item:focus-within { outline: var(--border-size-2) solid var(--brand-primary); outline-offset: var(--border-size-2); } /* High Contrast Mode Support */ @media (prefers-contrast: high) { .component-title [data-icon], .main-section-title [data-icon] { stroke-width: var(--icon-stroke-bold); } .token-reference-item:hover { border-width: var(--border-size-2); } } /* Additional reduced-motion support for interactive elements */ @media (prefers-reduced-motion: reduce) { .example-container, .token-reference-item, .token-item, .collection-item { transition: none !important; transform: none !important; } /* Disable parallax and floating effects */ .hero-content, .impact-stats { animation: none !important; transform: none !important; } /* Keep shimmer effect but make it static */ .te-shimmer-overlay { animation: none !important; opacity: 0.1 !important; } } /* ========================= UTILITY CLASSES ========================= */ /* Force consistent icon treatment */ .guide-icon-standard { width: var(--guide-icon-size) !important; height: var(--guide-icon-size) !important; color: var(--brand-primary) !important; } /* Spacing utilities for edge cases */ .guide-spacing-none { margin-bottom: 0; } .guide-spacing-sm { margin-bottom: var(--size-2); } .guide-spacing-md { margin-bottom: var(--size-4); } .guide-spacing-lg { margin-bottom: var(--size-6); } /* Grid column overrides */ .guide-grid-single { grid-template-columns: 1fr !important; } .guide-grid-two { grid-template-columns: repeat(2, 1fr) !important; } .guide-grid-three { grid-template-columns: repeat(3, 1fr) !important; } /* ========================= ENHANCED STATS & PROJECT OVERVIEW SECTION ========================= */ /* === COMPONENT: Stats Container (_stats-container.html) === */ .stats-and-overview-container { display: flex; flex-direction: column; gap: var(--size-6); margin: auto; /* PEEKING EFFECT: Pull stats up to peek from bottom of hero */ margin-top: calc(-1 * var(--size-8)); /* Pull up by footer height to create peek */ margin-bottom: var(--size-8); position: relative; z-index: 1; /* Below mobile header */ } /* Stats Container Base Styles */ .stats-container-glass { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap-standard); padding: var(--size-6); border-radius: var(--radius-3); border: var(--border-size-1) solid transparent; transition: all var(--animation-duration-3) var(--ease-3); /* Glass effect matching icon buttons */ background: var(--glass-dark-10); /* 10% black opacity */ backdrop-filter: blur(4px); border-color: rgb(210, 255, 55, 0.2); } .stat-value { font-size: var(--font-size-7); font-weight: var(--font-weight-8); line-height: 1; } /* Hover state removed - stats container is non-interactive */ /* Individual Stat Items */ .stat-item { text-align: center; padding: var(--size-1) var(--size-1) var(--size-2) var(--size-1); /* Minimal padding like challenge cards */ } .stat-icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--brand-primary); margin-bottom: var(--size-2); display: block; opacity: 0.8; } /* Stat icon styles */ .stat-icon[data-icon] svg { stroke-width: var(--icon-stroke-thin); } .stat-number { font-size: var(--font-size-7); /* 3rem */ font-weight: var(--font-weight-8); line-height: 1; margin-bottom: var(--size-2); color: var(--color-text-emphasis); /* Default solid color */ } .stat-suffix { font-size: var(--font-size-4); /* 1.5rem */ font-weight: var(--font-weight-6); vertical-align: super; /* Default alignment, overridden by specific classes */ margin-left: var(--border-size-2); opacity: 1; } /* Specific alignment for stat suffix symbols - must come after general .stat-suffix */ .stat-suffix--plus { vertical-align: middle; /* Center align the + symbol */ } .stat-suffix--percent, .stat-suffix--times { vertical-align: baseline; /* Bottom align the % and × symbols */ } .stat-label { font-size: var(--font-size-0); /* Smaller to fit */ text-transform: uppercase; letter-spacing: 0.05em; /* Tighter spacing */ color: var(--color-text-secondary); /* SINGLE LINE: Stats labels must stay on one line */ white-space: nowrap; text-align: center; overflow: hidden; /* Prevent overflow */ text-overflow: ellipsis; /* Add ellipsis if needed */ max-width: 100%; /* Stay within container */ } /* === COMPONENT: Challenge Solution Grid (_challenge-solution-grid.html) === */ .challenge-solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap-standard); margin-bottom: var(--size-6); } /* Enhanced Cards - Consistent with Stats Container */ .enhanced-card { position: relative; padding: var(--card-padding-xl); border-radius: var(--radius-3); border: var(--border-size-1) solid transparent; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; /* Enhanced glass effect with better depth */ background: var(--glass-dark-10); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgb(0, 0, 0, 0.1), 0 8px 32px rgb(0, 0, 0, 0.05); } /* Hover state removed - these are non-interactive cards */ /* Card Variants - simplified without gradient bars */ .challenge-card { border-color: var(--value-state-alpha-20); } .solution-card { border-color: var(--brand-primary-alpha-20); } .impact-card { border-color: var(--value-color-alpha-20); } /* Dark mode: Solution card border matches icon color */ [data-theme="dark"] .solution-card { border-color: var(--value-text-alpha-20); } /* Card Content */ .card-icon-large { width: var(--icon-lg); height: var(--icon-lg); margin-bottom: var(--size-4); display: block; opacity: 0.8; } /* Card icon styles */ .card-icon-large[data-icon] svg { stroke-width: var(--icon-stroke-thin); } .challenge-card .card-icon-large { color: var(--value-state); } .solution-card .card-icon-large { color: var(--value-text); } .impact-card .card-icon-large { color: var(--value-color); } .card-title { font-size: var(--font-size-3); font-weight: var(--font-weight-6); margin-bottom: var(--size-2); } .card-content { color: var(--color-text-secondary); line-height: 1.6; } .card-actions { display: flex; gap: var(--size-2); margin-top: var(--size-3); } /* Responsive Design - Stats and Cards */ @media (width <= 900px) { /* Remove rigid responsive rules - auto-fit handles this */ } @media (width <= 768px) { .challenge-solution-grid { grid-template-columns: 1fr; gap: var(--card-gap-mobile); } /* Mobile stats positioning - enhanced peeking effect */ .stats-and-overview-container { margin-top: calc(-1 * var(--size-8)); /* Increased pullup for better peeking effect */ } /* Mobile stats grid - force 2x2 layout (no auto-fit to prevent 3x1 orphan) */ .stats-container-glass { grid-template-columns: repeat(2, 1fr); gap: var(--size-1) var(--size-4); /* Horizontal gap: size-1, Vertical gap: size-4 for more row spacing */ padding: var(--size-6) var(--size-3) var(--size-7) var(--size-3); /* Match enhanced card padding: 24px top, 28px bottom */ } /* Mobile stat labels - smaller text to fit single line */ .stat-label { font-size: var(--font-size-0); /* Smaller font: 0.75rem */ letter-spacing: 0.05em; /* Reduced letter spacing for more compact text */ padding: 0 var(--size-1); /* Reduce horizontal padding if needed */ } /* Mobile stat numbers - reduced font size for better fit */ .stat-number { font-size: var(--font-size-6); /* Significant reduction from desktop size */ } } /* Dark theme stat numbers - use solid color instead of broken gradient */ [data-theme="dark"] .stat-number { color: var(--brand-primary); /* Use solid lime color */ background: none; -webkit-text-fill-color: unset; } /* ================================================================= ENHANCED THEME TOGGLE COMPONENT ================================================================= */ .theme-toggle-container { padding: var(--size-3); /* Reduced padding */ border-top: var(--border-size-1) solid var(--color-border-default); } .theme-toggle-wrapper { display: flex; align-items: center; justify-content: space-between; gap: var(--size-3); } .theme-toggle-label { font-size: var(--font-size-1); font-weight: var(--font-weight-5); color: var(--color-text-default); /* Clear readable text */ min-width: 80px; text-align: left; } /* Enhanced Toggle Switch */ .theme-toggle { width: 82px; height: 38px; background: var(--theme-toggle-gradient); border-radius: 19px; position: relative; cursor: pointer; transition: all 0.3s ease; border: none; display: flex; align-items: center; justify-content: space-between; padding: 0; overflow: hidden; } /* Reset button styles for theme toggle */ button.theme-toggle { appearance: none; outline: none; box-shadow: none; text-shadow: none; font: inherit; color: inherit; line-height: normal; } /* Dark mode uses dark gradient */ /* Theme toggle gradient handled by semantic token */ .theme-toggle:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 12px rgb(0, 0, 0, 0.15), 0 8px 24px rgb(0, 0, 0, 0.08), 0 0 0 1px rgb(var(--brand-primary-rgb), 0.1); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } /* Dark theme hover moved to consolidated section */ /* Icon containers */ .icon-container { position: absolute; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; z-index: 3; } .icon-container svg { width: 16px; height: 16px; stroke-width: 2.5; transition: all 0.3s ease; } /* Icon positioning - optically centered */ .sun-container { left: 6px; } .moon-container { right: 6px; } /* Icon states with Scale & Spin animation */ .sun-container svg, .moon-container svg { transition: all 0.3s ease; } .sun-container svg { stroke: var(--sun-icon-color); transform: scale(0.9) rotate(-90deg); } .moon-container svg { stroke: var(--moon-icon-color); transform: scale(1.1); } /* Light mode - swap the transforms */ [data-theme="light"] .sun-container svg { transform: scale(1.1) rotate(90deg); } [data-theme="light"] .moon-container svg { transform: scale(0.9); } /* Light mode states moved to main light theme section */ /* Dark mode states moved to consolidated section */ /* Slider circle */ .slider { position: absolute; top: 3px; right: 3px; /* Start on right for dark mode (moon) */ width: 32px; height: 32px; background: var(--gray-cool-9); /* Dark circle for dark mode */ border-radius: 50%; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 2; box-shadow: 0 2px 8px rgb(0, 0, 0, 0.2), inset 0 1px 0 rgb(255, 255, 255, 0.1); } /* Light mode - move slider to left with enhanced animation */ [data-theme="light"] .slider { transform: translateX(-44px); /* Move to left (sun) */ background: white; /* White circle for light mode */ box-shadow: 0 2px 8px rgb(0, 0, 0, 0.15), inset 0 1px 0 rgb(255, 255, 255, 0.5); } /* Animations */ .sun-container.animate-once { animation: sunPulse 0.8s ease-out; } .moon-container.animate-once { animation: moonGlow 0.6s ease-out; } @keyframes sunPulse { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(45deg) scale(1.15); } 100% { transform: rotate(90deg) scale(1); } } @keyframes moonGlow { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.1); filter: brightness(1.3); } 100% { transform: scale(1); filter: brightness(1); } } /* Mobile header theme toggle - inherit desktop styles */ .mobile-header-toggle { /* Use exact same styles as desktop - no overrides */ } .header-controls { display: flex; align-items: center; gap: var(--size-4); /* Increased gap for better spacing between hamburger and toggle */ flex-shrink: 0; /* Prevent controls from shrinking */ } /* Ensure mobile header content doesn't overflow on very small screens */ @media (width <= 360px) { .mobile-header { padding: 0 var(--size-3); } /* Keep consistent gap between controls */ .header-controls { gap: var(--size-3); /* Increased from size-1 for better spacing */ } /* Extra spacing for hero bottom on very small screens */ .hero-bottom { gap: var(--size-5); /* 20px - Slightly more space for tiny screens */ } /* Theme toggle maintains desktop size on all devices */ /* Removed mobile-specific sizing */ } /* ========================================================================== Brand Lockup Component ========================================================================== */ /* Base styles - shared across all contexts */ .brand-logo svg { width: 100%; height: 100%; } .brand-title { margin: 0; color: var(--color-text-default); } .brand-tagline { margin: 0; color: var(--color-text-secondary); } /* Context: Sidebar */ [data-brand-context="sidebar"] { display: flex; align-items: center; gap: var(--size-3); } [data-brand-context="sidebar"] .brand-logo { width: var(--icon-xl); height: var(--icon-xl); flex-shrink: 0; } [data-brand-context="sidebar"] .brand-title { font-size: var(--font-size-3); font-weight: var(--font-weight-6); color: var(--color-text-default); } [data-brand-context="sidebar"] .brand-tagline { display: none; } /* Context: Mobile Header */ [data-brand-context="mobile-header"] { display: flex; align-items: center; gap: var(--size-2); } [data-brand-context="mobile-header"] .brand-logo { width: var(--icon-md); /* Match hamburger size */ height: var(--icon-md); } [data-brand-context="mobile-header"] .brand-title { font-size: var(--font-size-2); font-weight: var(--font-weight-6); color: var(--color-text-default); } [data-brand-context="mobile-header"] .brand-tagline { display: none; } /* Context: Hero */ [data-brand-context="hero"] { text-align: center; } [data-brand-context="hero"] .brand-logo { width: var(--icon-xxl); height: var(--icon-xxl); margin: 0 auto var(--size-2) auto; animation: gentle-float 3s ease-in-out infinite; display: block; } [data-brand-context="hero"] .brand-title { font-size: calc(var(--font-size-8) * 1.2); font-weight: var(--font-weight-7); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-default); margin-bottom: var(--size-4); } [data-brand-context="hero"] .brand-tagline { font-size: var(--font-size-3); color: var(--color-text-secondary); margin-bottom: var(--size-2); } /* Hero light theme */ /* Context: Footer */ [data-brand-context="footer"] { display: flex; align-items: center; gap: var(--size-3); } [data-brand-context="footer"] .brand-logo { width: var(--size-15); height: var(--component-height-lg); flex-shrink: 0; } [data-brand-context="footer"] .brand-title { font-size: var(--font-size-5); font-weight: var(--font-weight-7); line-height: 1.1; color: white; margin-bottom: var(--size-1); } [data-brand-context="footer"] .brand-tagline { font-size: var(--font-size-1); font-weight: var(--font-weight-3); line-height: 1.3; color: rgb(255, 255, 255, 0.7); } [data-brand-context="footer"] .brand-tagline::after { content: "."; } /* Footer mobile specific */ .footer-mobile [data-brand-context="footer"] { flex-direction: column; text-align: center; gap: var(--size-1); } /* Responsive adjustments for hero on mobile */ @media (width <= 768px) { [data-brand-context="hero"] .brand-title { font-size: var(--font-size-7); } } /* ========================================================================== GLOBAL SECTION LAYOUTS - Concept 4 Standard Consistent section styling based on the approved Concept 4 design. White backgrounds with floating cards, light grey borders, clean layouts. ========================================================================== */ /* Global section container - replaces inconsistent section styles */ .design-section { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-6); margin-bottom: var(--size-8); } /* Design sections use semantic tokens */ .design-section { background: var(--design-section-bg); border-color: var(--design-section-border); } /* Section headers - consistent across all sections */ /* Section header styles moved to unified location above */ /* Section content wrapper */ .section-content { position: relative; } /* Tab navigation for sections with multiple views */ .section-tabs { display: flex; gap: var(--size-1); border-bottom: var(--border-size-2) solid var(--color-border-default); margin-bottom: var(--size-6); overflow-x: auto; scrollbar-width: none; } .section-tabs::-webkit-scrollbar { display: none; } /* Border color override moved to main .section-tabs definition */ /* Tab buttons - clean without box shadows */ .tab-button { background: transparent; border: none; padding: var(--size-3) var(--size-4); cursor: pointer; color: var(--color-text-secondary); font-size: var(--font-size-1); font-weight: var(--font-weight-5); display: flex; align-items: center; gap: var(--size-2); border-bottom: var(--border-size-3) solid transparent; margin-bottom: calc(-1 * var(--border-size-2)); transition: all var(--animation-duration-2) var(--ease-3); white-space: nowrap; box-shadow: none !important; } .tab-button:hover { color: var(--color-text-default); background: transparent; } .tab-button.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); } .tab-button:focus { outline: var(--border-size-2) solid var(--brand-primary); outline-offset: 2px; box-shadow: none !important; } /* Token cards - floating white cards in sections */ .token-card { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-4); text-align: center; } .token-card { background: var(--design-section-bg); border-color: var(--design-section-border); } /* Token grid layouts */ .token-grid { display: grid; gap: var(--size-4); margin-bottom: var(--size-6); } .token-grid-4col { grid-template-columns: repeat(4, 1fr); } .token-grid-3col { grid-template-columns: repeat(3, 1fr); } .token-grid-2col { grid-template-columns: repeat(2, 1fr); } /* Usage examples section - light outline in light mode */ .usage-examples { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-4); margin-top: var(--size-4); } .usage-examples { background: var(--design-section-bg); border-color: var(--design-section-border); } .usage-examples h4 { font-size: var(--font-size-1); color: var(--color-text-muted); margin-bottom: var(--size-3); text-transform: uppercase; letter-spacing: var(--font-letterspacing-2); } /* Fix category title icon colors - grey not green */ .category-title [data-icon], .category-title i { color: var(--color-text-muted) !important; } .category-title [data-icon], .category-title i { color: var(--section-title-icon-color); } /* Color System specific adjustments within token-category */ .token-category .color-system-container { padding: 0; /* All padding handled by parent token-category */ } /* Remove extra layout-container styles since we're using token-category */ .token-category .layout-container { background: transparent; border: none; padding: 0; margin: 0; border-radius: 0; } /* Subsection styling for nested content within token-category */ .token-category .subsection { margin-bottom: var(--size-8); } .token-category .subsection:last-child { margin-bottom: 0; } .subsection-title { font-size: var(--font-size-3); font-weight: var(--font-weight-6); color: var(--color-text-default); margin-bottom: var(--size-2); display: flex; align-items: center; gap: var(--size-2); } .subsection-title [data-icon], .subsection-title i { color: var(--color-text-muted); width: 1em; height: 1em; } .subsection-title [data-icon], .subsection-title i { color: var(--section-title-icon-color); } .subsection-description { font-size: var(--font-size-1); color: var(--color-text-secondary); margin-bottom: var(--size-4); } /* Icons Section Styles */ .icons-showcase { padding: 0; } /* Icons showcase variants-grid - responsive sections grid */ .icons-showcase .variants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); padding: 0; margin: 0; gap: var(--size-6); } /* Mobile: Allow 2-column layout for icon sections */ @media (width <= 768px) { .icons-showcase .variants-grid { grid-template-columns: repeat(2, 1fr); /* Force 2 columns */ gap: var(--size-3); } /* Ensure containers adapt to smaller space */ .icons-showcase .example-container { padding: var(--size-3); } } /* Icon section wrappers */ .icons-showcase .example-wrapper { margin-bottom: 0; } /* Icon containers - fill parent width */ .icons-showcase .example-container { width: 100%; padding: var(--size-4); margin: 0; box-sizing: border-box; overflow: hidden; /* Prevent content from clipping */ } /* Ensure all icon grids fill width */ .icons-showcase .icons-grid-responsive, .icons-showcase .icon-sizes-grid, .icons-showcase .icon-weights-grid { width: 100%; box-sizing: border-box; } /* Responsive icon grid: 4 columns desktop, 2 mobile */ .icons-grid-responsive { display: grid; grid-template-columns: repeat(4, 1fr); /* Default 4 columns */ gap: var(--size-4); width: 100%; } /* Ensure proper columns at different breakpoints */ @media (width <= 768px) { .icons-grid-responsive { grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */ gap: var(--size-3); } } /* Icon size XXL for better visibility */ .icon--xxl { width: var(--icon-xlg); /* 48px for desktop */ height: var(--icon-xlg); } /* Note: Removed forced thin stroke on xxl icons - let them use default stroke */ .icon--xxxl { width: var(--icon-3xl); height: var(--icon-3xl); } /* Stroke widths handled by icon system base rules and component overrides */ /* Icon card thin stroke handled via icon--xxl class */ .icon-card, .icon-size-card, .icon-weight-card { /* Shared centered card layout */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-2); padding: var(--size-4); background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); min-height: 120px; width: 100%; box-sizing: border-box; overflow: hidden; } .icon-card { transition: var(--transition-fast); } /* Removed hover state - icon cards are not interactive */ /* Variable Types section keeps both label and code */ .icon-card .icon-label { font-size: var(--font-size-1); font-weight: var(--font-weight-5); color: var(--color-text-default); } .icon-card code { font-size: var(--font-size-0); color: var(--color-text-muted); } /* Icon showcase categories should use thin stroke */ .icon-card .icon--xxl[data-icon] svg { stroke-width: var(--icon-stroke-thin); } /* Category-specific icon colors using tokens */ .category-cyan { color: var(--value-color); } .category-purple { color: var(--value-text); } .category-orange { color: var(--value-number); } .category-pink { color: var(--value-state); } /* Size variations showcase - responsive grid */ .icon-sizes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--size-4); /* Removed margin-bottom to fix double padding */ } @media (width <= 900px) { .icon-sizes-grid { grid-template-columns: repeat(3, 1fr); } } @media (width <= 768px) { .icon-sizes-grid { grid-template-columns: repeat(2, 1fr); gap: var(--size-3); } } /* .icon-size-card styles now shared with .icon-card */ .icon-size-card code { font-size: var(--font-size-0); color: var(--color-text-muted); } .icon-size-card .size-value { font-size: var(--font-size-1); font-weight: var(--font-weight-5); color: var(--color-text-default); } /* Force proper icon sizing in icon showcase */ .icon-size-card [data-icon] { display: block; stroke: currentcolor; fill: none; } /* Ensure icon sizes are visible */ .icon-sizes-grid [data-icon][style*="--icon-xs"] { width: var(--icon-xs) !important; height: var(--icon-xs) !important; } .icon-sizes-grid [data-icon][style*="--icon-sm"] { width: var(--icon-sm) !important; height: var(--icon-sm) !important; } .icon-sizes-grid [data-icon][style*="--icon-md"] { width: var(--icon-md) !important; height: var(--icon-md) !important; } .icon-sizes-grid [data-icon][style*="--icon-lg"] { width: var(--icon-lg) !important; height: var(--icon-lg) !important; } .icon-sizes-grid [data-icon][style*="--icon-xl"] { width: var(--icon-xl) !important; height: var(--icon-xl) !important; } /* Weight variations showcase - responsive grid matching size variations */ .icon-weights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-4); /* Removed margin-bottom to fix double padding */ } @media (width <= 768px) { .icon-weights-grid { grid-template-columns: 1fr; gap: var(--size-3); } } /* .icon-weight-card styles now shared with .icon-card */ .icon-weight-card code { font-size: var(--font-size-0); color: var(--color-text-muted); } .icon-weight-card .weight-value { font-size: var(--font-size-1); font-weight: var(--font-weight-5); color: var(--color-text-default); } /* Force proper stroke width in weight showcase */ .icon-weight-card [data-icon] { display: block; stroke: currentcolor; fill: none; } /* Icon notes for documentation */ .icon-note { margin-top: var(--size-3); padding: var(--size-3); background: var(--color-background-tertiary); border-radius: var(--radius-2); border-left: var(--border-size-3) solid var(--brand-primary); } .icon-note p { margin: 0; font-size: var(--font-size-0); color: var(--color-text-secondary); } /* Panel visibility for tabbed sections */ /* Consolidated tab panel rules */ .tab-panel { display: none; width: 100%; box-sizing: border-box; animation: fadeInStagger 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .tab-panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Staggered animation for multiple elements */ @keyframes fadeInStagger { 0% { opacity: 0; transform: translateY(12px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Responsive adjustments */ @media (width <= 1200px) { .token-grid-4col { grid-template-columns: repeat(2, 1fr); } .token-grid-3col { grid-template-columns: repeat(2, 1fr); } } @media (width <= 768px) { .design-section { padding: var(--size-4); margin-bottom: var(--size-6); } .token-grid-4col, .token-grid-3col, .token-grid-2col { grid-template-columns: 1fr; } .section-tabs { gap: 0; } .tab-button { padding: var(--size-2) var(--size-3); font-size: var(--font-size-0); } } /* ========================================================================== DYNAMIC DOCUMENTATION SECTIONS Reusable CSS for dynamically generated design system documentation ========================================================================== */ .design-section { margin: var(--size-8) 0; } .design-section__header { margin-bottom: var(--size-6); text-align: center; } .design-section__title { font-size: var(--font-size-6); font-weight: var(--font-weight-7); color: var(--brand-primary); margin-bottom: var(--size-2); } .design-section__description { font-size: var(--font-size-2); color: var(--color-text-secondary); max-width: 80ch; margin: 0 auto; } /* Tab Navigation - duplicate removed, defined at line ~10893 */ /* Tab button - duplicate removed, defined at line ~10909 */ /* Token Grid */ .token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--size-4); margin-bottom: var(--size-6); } .token-card { background: var(--color-background-secondary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-4); display: flex; flex-direction: column; gap: var(--size-3); transition: all var(--animation-duration-2) var(--ease-3); cursor: pointer; } .token-card:hover { border-color: var(--brand-primary); transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 24px rgb(var(--brand-primary-rgb), 0.15), 0 4px 12px rgb(0, 0, 0, 0.1); transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); } .token-preview { width: 100%; height: 80px; border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-6); } .token-info { display: flex; flex-direction: column; gap: var(--size-1); } .token-name { font-family: var(--font-mono); font-size: var(--font-size-0); color: var(--color-text-muted); } .token-value { font-size: var(--font-size-2); font-weight: var(--font-weight-6); color: var(--color-text-default); } .token-description { font-size: var(--font-size-1); color: var(--color-text-secondary); } /* Responsive adjustments */ @media (width <= 768px) { .design-section__title { font-size: var(--font-size-5); } .token-grid { grid-template-columns: 1fr; } .section-tabs { gap: 0; } .tab-button { padding: var(--size-2) var(--size-3); font-size: var(--font-size-0); } } /* ========================================================================== END OF TOKEN EXPORTER DESIGN SYSTEM v4.0.8 "Code complete, system whole, From tokens to components bright, Excellence achieved." ========================================================================== */ /* ========================================================================== GUIDE: COLOR SYSTEM V4 IMPLEMENTATION ========================================================================== */ /* Main container matching v4 */ .layout-container { max-width: 1400px; margin: 0 auto; padding: var(--size-6); background: var(--color-background-secondary); border-radius: var(--radius-3); margin-bottom: var(--size-8); } .layout-container { background: var(--design-section-bg); border-color: var(--design-section-border); } .layout-header { text-align: left; margin-bottom: var(--size-6); padding-bottom: var(--size-4); border-bottom: var(--border-size-1) solid var(--color-border-default); } .layout-title { font-size: var(--font-size-6); font-weight: var(--font-weight-7); color: var(--color-text-default); margin-bottom: var(--size-2); display: flex; align-items: center; justify-content: flex-start; gap: var(--size-3); } /* Fix icon color to grey */ .layout-title i, .layout-title [data-icon] { color: var(--color-text-muted); width: var(--icon-lg); height: var(--icon-lg); } .layout-title i, .layout-title [data-icon] { color: var(--section-title-icon-color); } .layout-description { font-size: var(--font-size-2); color: var(--color-text-secondary); max-width: 80ch; margin: 0; line-height: var(--font-lineheight-4); } /* Tab navigation - v4 style */ .tab-nav-final { display: flex; gap: var(--size-3); border-bottom: var(--border-size-2) solid var(--color-border-default); margin-bottom: var(--size-6); overflow-x: auto; scrollbar-width: none; } .tab-nav-final::-webkit-scrollbar { display: none; } .tab-clean { background: transparent; border: none; padding: var(--size-3) var(--size-4); cursor: pointer; color: var(--color-text-secondary); font-size: var(--font-size-1); font-weight: var(--font-weight-5); display: flex; align-items: center; gap: var(--size-2); border-bottom: var(--border-size-3) solid transparent; margin-bottom: calc(-1 * var(--border-size-2)); transition: all var(--animation-duration-2) var(--ease-3); white-space: nowrap; box-shadow: none !important; backdrop-filter: none !important; } /* Dark mode unselected tabs - using semantic token */ [data-theme="dark"] .tab-clean { color: var(--color-text-secondary); } .tab-clean:hover { color: var(--color-text-primary); } .tab-clean.active { color: var(--tab-active-color); border-bottom-color: var(--tab-active-border); } /* Focus state - no ring */ .tab-clean:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-primary), 0 0 0 4px rgb(var(--brand-primary-rgb), 0.1); border-radius: var(--radius-2); } /* Remove default focus */ .tab-clean:focus:not(:focus-visible) { outline: none; } /* Color sections */ .color-section { margin-bottom: var(--size-8); width: 100%; box-sizing: border-box; } /* Color subsections (for nested sections like brand) */ .color-subsection { margin-bottom: var(--size-5); } .color-subsection:last-child { margin-bottom: 0; } .subsection-title { font-size: var(--font-size-2); font-weight: var(--font-weight-6); color: var(--color-text-secondary); margin-bottom: var(--size-3); letter-spacing: 0.02em; } /* Color System Overview */ .color-overview-section { padding: var(--size-4); } .overview-intro { margin-bottom: var(--size-6); } .color-architecture { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--size-4); margin-bottom: var(--size-6); } /* .architecture-layer - styles consolidated to line ~1936 */ .architecture-layer h4 { color: var(--brand-secondary); margin-bottom: var(--size-2); } .architecture-layer p { margin: 0; font-size: var(--font-size-0); } .architecture-layer code { background: var(--surface-2); padding: var(--size-1); border-radius: var(--radius-1); font-size: var(--font-size-00); } .theme-demo { background: var(--surface-1); padding: var(--size-4); border-radius: var(--radius-3); border: var(--border-size-1) solid var(--color-border-default); } .theme-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-4); margin-top: var(--size-4); } .theme-sample { text-align: center; } .sample-label { font-size: var(--font-size-0); color: var(--color-text-secondary); margin-bottom: var(--size-2); } .sample-colors { display: flex; gap: var(--size-2); justify-content: center; } .color-chip { width: var(--size-7); height: var(--size-7); border-radius: var(--radius-2); border: var(--border-size-1) solid var(--color-border-default); } .section-title { font-size: var(--font-size-3); margin-bottom: var(--size-4); color: var(--color-text-default); } .color-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-4); margin-bottom: 0; width: 100%; } .color-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-4); margin-bottom: 0; width: 100%; } .color-grid-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--size-4); margin-bottom: 0; /* Remove bottom margin - section handles spacing */ width: 100%; } /* Make alpha and utilities sections switch to 3 columns sooner */ @media (width <= 1400px) { .tab-panel[data-panel="alpha"] .color-grid-4col, .tab-panel[data-panel="utilities"] .color-grid-4col { grid-template-columns: repeat(3, 1fr); } } .color-card { background: transparent; border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-4); text-align: center; width: 100%; box-sizing: border-box; min-width: 0; overflow: visible; transition: border-color 0.2s ease; cursor: default; /* No hover functionality currently */ } /* Hover state removed - no current functionality */ .color-card:has(.alpha-swatch) { background: transparent; overflow: visible; /* Fix to show checkerboard properly */ } .color-swatch { width: 100%; height: 100px; border-radius: var(--radius-2); margin-bottom: var(--size-3); position: relative; transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: inset 0 1px 0 rgb(255, 255, 255, 0.1), 0 2px 4px rgb(0, 0, 0, 0.1); } /* Ensure gradient and brand swatches have proper dimensions */ .color-grid-2col .color-swatch { width: 100%; height: 120px; /* Fixed height for consistent appearance */ min-height: 120px; } /* Hover state removed - no current functionality */ /* Square gradient swatches for directional variants */ .gradient-swatch-square { aspect-ratio: 1; height: auto; max-height: 80px; } /* Gradient card standardization */ .color-card.gradient-card { background: transparent !important; /* Match other cards */ } /* Ensure gradient swatches fill their containers */ .gradient-card .color-swatch { width: 100%; height: 120px; min-height: 120px; } /* Compact gradient directional variants */ .gradient-directional-variant { padding: var(--size-2); } .gradient-directional-variant .color-swatch { height: var(--component-height-lg); margin-bottom: var(--size-1); } .gradient-directional-variant .color-details { gap: 0; /* Remove redundant spacing */ } /* Hide redundant degree text for directional variants */ .gradient-directional-variant .hex { display: none; } /* ======================================== TEXT/UTILITY CARDS - NEW DESIGN ======================================== */ /* Text utility cards with "Aa" preview */ .text-utility-card .color-swatch { background: var(--color-background-primary); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-5); font-weight: 600; border: 1px solid var(--color-border-default); height: 100px; margin-bottom: var(--size-3); border-radius: var(--radius-2); position: relative; } /* Low contrast solution - use tertiary background */ .text-utility-card.low-contrast .color-swatch { background: var(--color-background-tertiary); } /* Split background solution for very low contrast */ .text-utility-card.split-background .color-swatch { background: linear-gradient(to right, var(--color-background-primary) 50%, var(--color-background-tertiary) 50%); } /* Angle badge for gradient swatches - Updated design without white box */ .angle-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Remove white box, use text shadow for visibility */ background: transparent; color: rgb(0, 0, 0, 0.8); text-shadow: 0 0 4px rgb(255, 255, 255, 0.8), 0 0 8px rgb(255, 255, 255, 0.6); padding: 0; border-radius: 0; font-size: 20px; font-weight: 600; backdrop-filter: none; border: none; box-shadow: none; } /* Compact label for gradients */ .gradient-label-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-size-0); margin-bottom: var(--size-1); } /* Token name styling */ .color-details .token-name { font-size: var(--font-size-00); display: block; } /* Checkerboard pattern for alpha swatches */ .alpha-swatch { background: repeating-conic-gradient( var(--checkerboard-color-1) 0% 25%, var(--checkerboard-color-2) 0% 50% ) 50% / var(--checkerboard-size) var(--checkerboard-size); position: relative; z-index: 1; overflow: visible; } /* Mobile-specific alpha swatch checkerboard scaling */ @media (width <= 768px) { .alpha-swatch { background: repeating-conic-gradient( var(--checkerboard-color-1) 0% 25%, var(--checkerboard-color-2) 0% 50% ) 50% / var(--checkerboard-size-mobile) var(--checkerboard-size-mobile); } /* Fix mobile font sizes for color details */ .color-details .hex { font-size: var(--font-size-0) !important; } .color-details { align-items: flex-start; /* Better alignment on mobile */ } .ref-info span { font-size: var(--font-size-0); font-weight: var(--font-weight-6); } } /* Dark theme alpha swatch moved to consolidated section */ .alpha-swatch::after { content: ''; position: absolute; inset: 0; background: inherit; background-image: none; border-radius: inherit; } /* Alpha color overlay for showing color on checkerboard */ .alpha-color-overlay { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; /* Ensure overlay is above checkerboard */ } /* Text color card with split design */ .text-color-card { padding: 0; overflow: hidden; } .text-color-split { display: flex; flex-direction: column; height: 100%; } .text-preview { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--size-4); min-height: var(--component-height-lg); position: relative; font-weight: 600; } .text-example { font-size: var(--font-size-5); line-height: 1; margin-bottom: var(--size-2); } .text-variant-label { font-size: var(--font-size-0); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; } .text-color-card .color-swatch { height: 40px; margin-bottom: 0; border-radius: 0; } .text-color-card .color-details { padding: var(--size-3) var(--size-4); } /* Adjust grid for text color variations */ .text-color-card:has(.text-preview) { grid-column: span 1; } /* Color System Overview Styles */ .color-overview-section { padding: var(--size-4) 0; } .overview-intro { margin-bottom: var(--size-6); } .overview-intro h3 { font-size: var(--font-size-4); margin-bottom: var(--size-3); } .color-architecture { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--size-4); margin-bottom: var(--size-6); } .architecture-layer { background: var(--surface-2); padding: var(--size-4); border-radius: var(--radius-3); border: var(--border-size-1) solid var(--color-border-default); } .architecture-layer h4 { font-size: var(--font-size-2); color: var(--color-text-default); margin-bottom: var(--size-2); } .architecture-layer p { font-size: var(--font-size-1); color: var(--color-text-secondary); margin: 0; } .architecture-layer code { background: var(--surface-3); padding: 2px 6px; border-radius: var(--radius-1); font-size: var(--font-size-0); } .theme-demo { background: var(--surface-1); padding: var(--size-4); border-radius: var(--radius-3); } .theme-demo h4 { font-size: var(--font-size-2); margin-bottom: var(--size-2); } .theme-demo p { color: var(--color-text-secondary); margin-bottom: var(--size-3); } .theme-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-4); } .theme-sample { background: var(--surface-2); padding: var(--size-3); border-radius: var(--radius-2); text-align: center; } .light-sample { background: var(--gray-cool-9); } .dark-sample { background: var(--gray-warm-9); } .sample-label { font-size: var(--font-size-0); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--size-2); opacity: 0.7; } .light-sample .sample-label { color: var(--gray-cool-0); } .dark-sample .sample-label { color: var(--gray-warm-0); } .sample-colors { display: flex; gap: var(--size-2); justify-content: center; } .color-chip { width: 30px; height: 30px; border-radius: var(--radius-1); border: 1px solid rgb(0, 0, 0, 0.1); } /* Concept 1: Token Flow Styles */ .token-flow-diagram { padding: var(--size-4); background: var(--surface-1); border-radius: var(--radius-3); } .flow-section { margin-bottom: var(--size-4); text-align: center; } .flow-title { font-size: var(--font-size-2); font-weight: 600; margin-bottom: var(--size-3); color: var(--color-text-default); } .flow-tokens { display: flex; gap: var(--size-3); justify-content: center; flex-wrap: wrap; } .flow-token { background: var(--surface-2); padding: var(--size-3); border-radius: var(--radius-2); border: var(--border-size-1) solid var(--color-border-default); min-width: 140px; } .flow-token.primitive { border-color: var(--brand-primary); } .flow-token.semantic { border-color: var(--value-text); } .flow-token.component { border-color: var(--value-color); } .flow-token .token-preview { width: 40px; height: 40px; border-radius: var(--radius-round); margin: 0 auto var(--size-2); border: 1px solid var(--color-border-default); } .flow-token code { display: block; font-size: var(--font-size-0); margin-bottom: var(--size-1); } .token-mapping { font-size: var(--font-size-0); color: var(--color-text-muted); } .flow-arrow { font-size: var(--font-size-5); color: var(--color-text-muted); margin: var(--size-2) 0; } /* Concept 2: Theme Comparison Styles */ .theme-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-4); } .comparison-column { border-radius: var(--radius-3); overflow: hidden; border: var(--border-size-1) solid var(--color-border-default); } .comparison-header { padding: var(--size-3); text-align: center; font-size: var(--font-size-2); font-weight: 600; } .light-theme-preview .comparison-header { background: var(--gray-cool-8); color: var(--gray-cool-0); } .dark-theme-preview .comparison-header { background: var(--gray-warm-8); color: var(--gray-warm-0); } .comparison-content { padding: var(--size-4); } .light-theme-preview .comparison-content { background: var(--gray-cool-9); } .preview-card { padding: var(--size-3); margin-bottom: var(--size-3); } .preview-card h5 { font-size: var(--font-size-1); margin-bottom: var(--size-2); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; } .preview-card.light h5 { color: var(--gray-cool-1); } .preview-card.dark h5 { color: var(--gray-warm-1); } .surface-grid { display: flex; gap: var(--size-2); } .surface-sample { flex: 1; padding: var(--size-2); border-radius: var(--radius-1); font-size: var(--font-size-0); text-align: center; } /* Concept 3: Benefits Grid Styles */ .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--size-4); } .benefit-card { background: var(--surface-2); padding: var(--size-4); border-radius: var(--radius-3); text-align: center; border: var(--border-size-1) solid var(--color-border-default); } .benefit-icon { width: var(--component-height-lg); height: var(--component-height-lg); border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-5); margin: 0 auto var(--size-3); } .benefit-card h4 { font-size: var(--font-size-3); margin-bottom: var(--size-2); } .benefit-card p { color: var(--color-text-secondary); font-size: var(--font-size-1); margin-bottom: var(--size-3); } .benefit-example { background: var(--surface-3); padding: var(--size-2); border-radius: var(--radius-1); } .benefit-example code { font-size: var(--font-size-0); } /* Concept 4: Quick Start Styles */ .quickstart-layout { background: var(--surface-1); padding: var(--size-5); border-radius: var(--radius-3); } .quickstart-section { margin-bottom: var(--size-5); } .quickstart-section:last-child { margin-bottom: 0; } .quickstart-section h4 { display: flex; align-items: center; gap: var(--size-3); font-size: var(--font-size-3); margin-bottom: var(--size-3); } .step-number { width: 32px; height: 32px; background: var(--brand-primary); color: var(--color-text-on-brand); border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; font-weight: 700; } .quickstart-content { margin-left: calc(32px + var(--size-3)); } .quickstart-content p { color: var(--color-text-secondary); margin-bottom: var(--size-3); } .color-selection { display: flex; gap: var(--size-3); } .selected-color { padding: var(--size-3); border-radius: var(--radius-2); text-align: center; flex: 1; } .selected-color span { display: block; font-size: var(--font-size-1); margin-bottom: var(--size-1); } .selected-color code { font-size: var(--font-size-0); opacity: 0.8; } .semantic-mapping { background: var(--surface-2); padding: var(--size-3); border-radius: var(--radius-2); } .mapping-row { display: flex; align-items: center; gap: var(--size-3); margin-bottom: var(--size-2); } .mapping-row:last-child { margin-bottom: 0; } .mapping-row code { font-size: var(--font-size-0); background: var(--surface-3); padding: 2px 8px; border-radius: var(--radius-1); } .code-example { background: var(--surface-3); padding: var(--size-3); border-radius: var(--radius-2); font-size: var(--font-size-0); overflow-x: auto; } .color-details { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; /* Allow shrinking */ } /* Forms Example Styles */ .forms-example-container { display: flex; gap: var(--size-4); flex-wrap: wrap; } .forms-example-container .card { width: 100%; max-width: var(--plugin-width); min-height: auto; display: flex; flex-direction: column; } .forms-example-container .export-section, .forms-example-container .filter-section { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } @media (width <= 850px) { .forms-example-container { flex-direction: column; } .forms-example-container .card { width: 100%; max-width: var(--plugin-width); } } .filter-options { display: flex; flex-direction: column; gap: var(--size-2); } /* Footer button fixes */ .footer-main-row .btn-primary { width: auto; /* Hug content */ } @media (width <= 768px) { .footer-main-row .btn-primary { width: 100%; /* Full width on mobile */ } } .color-details code { font-size: var(--font-size-0); color: var(--color-text-default); word-break: normal; overflow-wrap: normal; display: block; width: 100%; line-height: 1.2; } .color-details .hex { font-size: var(--font-size-2); font-weight: var(--font-weight-6); color: var(--color-text-default); } .color-details .name { font-size: var(--font-size-1); color: var(--color-text-secondary); } /* Usage section */ .usage-section-light { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); padding: var(--size-4); } .usage-section-light { background: var(--design-section-bg); border-color: var(--design-section-border); } .usage-section-light h4 { font-size: var(--font-size-1); color: var(--color-text-muted); margin-bottom: var(--size-3); } .usage-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-6); } .usage-group { display: flex; align-items: center; gap: var(--size-3); flex-wrap: wrap; justify-content: center; } /* Glow demos */ .glow-demo { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; background: var(--color-background-primary); border-radius: var(--radius-2); margin-bottom: var(--size-3); } .glow-box-brand { width: var(--size-15); height: var(--component-height-lg); background: transparent; border: var(--border-size-2) solid var(--brand-secondary); border-radius: var(--radius-2); box-shadow: 0 0 20px var(--brand-secondary), 0 0 40px var(--brand-secondary), inset 0 0 20px var(--brand-secondary-alpha-20); } /* Glow documentation section */ .glow-documentation { background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--size-4); } .glow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-4); } .glow-item { display: flex; flex-direction: column; gap: var(--size-3); } .glow-demo-container { height: 120px; background: var(--color-background-secondary); border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; position: relative; } .glow-info h4 { font-size: var(--font-size-1); font-weight: var(--font-weight-6); margin-bottom: var(--size-2); } .glow-info code { display: block; font-size: var(--font-size-00); color: var(--color-text-muted); margin-bottom: var(--size-1); } .glow-info p { font-size: var(--font-size-0); color: var(--color-text-secondary); } /* Mock theme toggle */ .mock-theme-toggle { width: 82px; height: 38px; background: var(--theme-toggle-gradient); border-radius: 19px; position: relative; box-shadow: 0 0 20px rgb(210, 255, 55, 0.6), 0 0 40px rgb(239, 255, 0, 0.3); } /* Dark theme mock toggle moved to consolidated section */ .toggle-track { width: 100%; height: 100%; border-radius: 19px; position: relative; } .toggle-thumb { position: absolute; width: 30px; height: 30px; background: white; border-radius: 50%; top: 4px; right: 4px; transition: transform 0.3s ease; } /* Dark theme toggle thumb moved to consolidated section */ /* Brand element glow */ .brand-element-glow { padding: var(--size-3) var(--size-5); background: var(--brand-primary); color: var(--brand-text-dark); border-radius: var(--radius-2); font-weight: var(--font-weight-6); box-shadow: 0 0 40px rgb(210, 255, 55, 0.3); } /* Focus glow input */ .glow-input { padding: var(--size-2) var(--size-3); background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-1); color: var(--color-text-default); width: 200px; } .glow-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 var(--size-2) rgb(210, 255, 55, 0.1); } /* Plugin UI glow */ .plugin-ui-glow { padding: var(--size-3); } .mini-card { width: 100px; height: var(--component-height-lg); background: var(--color-background-primary); border: var(--border-size-1) solid var(--brand-primary); border-radius: var(--radius-2); animation: subtle-glow 3s ease-in-out infinite; } @keyframes subtle-glow { 0%, 100% { box-shadow: 0 0 10px rgb(210, 255, 55, 0.2); } 50% { box-shadow: 0 0 20px rgb(210, 255, 55, 0.4), 0 0 30px rgb(210, 255, 55, 0.2); } } /* Missing v4 classes for glow effects */ .mock-theme-toggle { width: 82px; height: 38px; background: var(--theme-toggle-gradient); border-radius: 19px; position: relative; box-shadow: 0 0 20px rgb(210, 255, 55, 0.6), 0 0 40px rgb(239, 255, 0, 0.3); } /* Dark theme mock toggle moved to consolidated section */ .toggle-track { width: 100%; height: 100%; border-radius: 19px; position: relative; } .toggle-thumb { position: absolute; width: 30px; height: 30px; background: white; border-radius: 50%; top: 4px; right: 4px; transition: transform 0.3s ease; } /* Dark theme toggle thumb moved to consolidated section */ /* Brand element glow */ .brand-element-glow { padding: var(--size-3) var(--size-5); background: var(--brand-primary); color: var(--brand-text-dark); border-radius: var(--radius-2); font-weight: var(--font-weight-6); box-shadow: 0 0 40px rgb(210, 255, 55, 0.3); } /* Focus glow input */ .glow-input { padding: var(--size-2) var(--size-3); background: var(--color-background-primary); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-1); color: var(--color-text-default); width: 200px; } .glow-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 var(--size-2) rgb(210, 255, 55, 0.1); } /* Plugin UI glow */ .plugin-ui-glow { padding: var(--size-3); } .mini-card { width: 100px; height: var(--component-height-lg); background: var(--color-background-primary); border: var(--border-size-1) solid var(--brand-primary); border-radius: var(--radius-2); animation: subtle-glow 3s ease-in-out infinite; } /* Desktop/Mobile layout visibility */ .mobile-layout { display: none; } .desktop-layout { display: block; width: 100%; box-sizing: border-box; } /* Mobile reference styles */ .mobile-reference { display: flex; flex-direction: column; gap: var(--size-2); margin-top: var(--size-2); } .ref-section { border: none; border-radius: var(--radius-2); padding: var(--size-3); margin-bottom: var(--size-3); } .ref-section:last-child { margin-bottom: 0; } .ref-title { font-size: var(--font-size-00); font-weight: var(--font-weight-5); color: var(--color-text-muted); margin-bottom: var(--size-2); text-transform: uppercase; letter-spacing: var(--font-letterspacing-2); padding-bottom: var(--size-2); border-bottom: 1px solid var(--color-border-default); margin-left: calc(var(--size-3) * -1); margin-right: calc(var(--size-3) * -1); padding-left: var(--size-3); padding-right: var(--size-3); } .ref-items { display: grid; grid-template-columns: 1fr; gap: var(--size-2); } .ref-item { display: flex; align-items: center; gap: var(--size-2); padding: var(--size-2); background: var(--color-background-secondary); border-radius: var(--radius-1); cursor: pointer; } .ref-swatch { width: 32px; height: 32px; border-radius: var(--radius-1); flex-shrink: 0; } .ref-swatch.alpha-swatch { background: repeating-conic-gradient( var(--checkerboard-color-1) 0% 25%, var(--checkerboard-color-2) 0% 50% ) 50% / 10px 10px; position: relative; } /* Dark theme ref swatch moved to consolidated section */ .ref-swatch.alpha-swatch::after { content: ''; position: absolute; inset: 0; background: inherit; background-image: none; border-radius: inherit; } /* Alpha color overlay for showing color on checkerboard */ .alpha-color-overlay { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; /* Ensure overlay is above checkerboard */ } .ref-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ref-info code { font-size: var(--font-size-0); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-family: var(--font-mono); margin: 0; padding: 0; line-height: 1.2; } .ref-info span { font-size: var(--font-size-0); font-weight: var(--font-weight-6); color: var(--color-text-default); margin: 0; padding: 0; line-height: 1.2; } /* Responsive */ @media (width <= 768px) { .desktop-layout { display: none; } .mobile-layout { display: block; } .color-grid-4col { grid-template-columns: repeat(2, 1fr); } .color-grid-2col { grid-template-columns: 1fr; /* Single column on mobile */ } .usage-grid-2col { grid-template-columns: 1fr; gap: var(--size-3); } .glow-grid { grid-template-columns: 1fr; } } /* ========================================================================= MOBILE RESPONSIVENESS FIXES Comprehensive fixes for small screens (320px - 768px) ========================================================================== */ /* 1. About Modal Mobile Fixes */ @media (width <= 768px) { /* Fix modal container padding and sizing */ .about-modal { padding: var(--size-2); } .about-modal-content, .about-modal-clean .about-modal-content, .about-modal-concept-1 .about-modal-content, .about-modal-features .about-modal-content { max-width: calc(100vw - var(--size-4)); width: 100%; padding: var(--size-5); margin: auto; max-height: calc(100vh - var(--size-4)); overflow-y: auto; } /* Fix social icons wrapping */ .about-social, .about-modal-clean .about-social, .about-modal-concept-1 .about-social, .about-modal-vortex .about-social-row, .about-modal-concept-2 .about-social-row, .about-modal-concept-3 .about-social-grid { flex-wrap: wrap; gap: var(--size-2); max-width: 100%; } /* Ensure bio text wraps properly */ .about-bio, .about-modal-clean .about-bio, .about-modal-concept-1 .about-bio, .about-modal-vortex .about-bio-glass, .about-modal-concept-2 .about-bio-glass, .about-modal-concept-3 .about-bio-brand { word-wrap: break-word; hyphens: auto; max-width: 100%; } /* Scale down avatars on small screens */ .about-avatar, .about-modal-clean .about-avatar, .about-modal-concept-1 .about-avatar, .about-modal-vortex .about-avatar-glow, .about-modal-concept-2 .about-avatar-glow { width: 80px; height: 80px; margin-bottom: var(--size-4); } .about-modal-concept-3 .about-avatar-frame { width: 70px; height: 70px; } /* Adjust font sizes */ .about-name, .about-modal-clean .about-name, .about-modal-concept-1 .about-name, .about-modal-vortex .about-name-gradient, .about-modal-concept-2 .about-name-gradient, .about-modal-concept-3 .about-name-brand { font-size: var(--font-size-4); } /* Fix vortex modal on mobile */ .about-modal-vortex .about-modal-container, .about-modal-concept-2 .about-modal-container { max-width: calc(100vw - var(--size-4)); min-height: auto; } .about-modal-concept-3 .about-modal-frame { max-width: calc(100vw - var(--size-4)); } } /* Ultra small screens (320px - 375px) */ @media (width <= 375px) { .about-modal-content, .about-modal-clean .about-modal-content, .about-modal-concept-1 .about-modal-content { padding: var(--size-4); } .about-avatar, .about-modal-clean .about-avatar, .about-modal-concept-1 .about-avatar, .about-modal-vortex .about-avatar-glow, .about-modal-concept-2 .about-avatar-glow { width: var(--component-height-lg); height: var(--component-height-lg); } } /* 2. Token Card Mobile Fixes */ @media (width <= 768px) { /* Fix token card container */ .card.token-summary, .token-summary { min-height: auto; padding: var(--size-4); } /* Scale down the main count */ .token-count-total, .token-summary .token-count-total { font-size: var(--font-size-6); margin-bottom: var(--size-1); } /* Keep token breakdown as 4 columns - never wrap */ .token-breakdown { grid-template-columns: repeat(4, 1fr) !important; gap: var(--size-1); padding-top: var(--size-3); } /* Adjust individual stat sizing */ .token-type-stat { padding: var(--size-2); min-height: auto; } .token-type-stat .icon { font-size: var(--font-size-3); margin-bottom: var(--size-1); } .token-type-stat .count { font-size: var(--font-size-2); line-height: 1.4; } .token-type-stat .label { font-size: var(--font-size-00); } } /* Ultra small screens - still keep 4 columns */ @media (width <= 375px) { .token-breakdown { grid-template-columns: repeat(4, 1fr) !important; gap: 2px; } .token-type-stat { padding: var(--size-1); } .token-type-stat .icon { font-size: var(--font-size-2); } /* About Modal Features - Small screens */ .about-modal-features .about-modal-content { padding: var(--size-4); } .about-modal-features .app-icon { width: var(--size-9); height: var(--size-9); } .about-modal-features .feature-text { font-size: var(--font-size-0); } } /* 3. Icon Grid Mobile Fixes */ /* 4. General Mobile Fixes */ @media (width <= 768px) { /* Fix main content padding */ .main-content { padding: 0; /* Remove double padding - sections handle their own */ } /* Fix section spacing */ .design-section { padding: var(--size-5) var(--size-3); margin-bottom: var(--size-5); } /* Fix container widths to prevent overflow */ .example-container { padding: var(--size-3); margin: 0 calc(-1 * var(--size-2)); } /* Ensure all cards respect viewport */ .card, .token-card, .component-card { max-width: 100%; overflow-x: hidden; } /* Fix table overflow */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Fix code blocks */ pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; } /* Fix images and media */ img, video, iframe { max-width: 100%; height: auto; } /* Fix navigation */ .nav { padding: var(--size-3); } .nav-links { gap: var(--size-2); flex-wrap: wrap; } /* Fix buttons in tight spaces */ .btn-group { flex-wrap: wrap; gap: var(--size-2); } /* Prevent horizontal scroll */ body { overflow-x: hidden; } /* Fix any absolute positioned elements */ [style*="position: absolute"] { max-width: 100vw; } } /* 5. Specific Component Mobile Fixes */ @media (width <= 768px) { /* Fix progress flow demo */ .progress-flow-card { padding: var(--size-4); } /* Fix footer */ .footer-content { flex-direction: column; gap: var(--size-4); text-align: center; } .footer-links { flex-wrap: wrap; justify-content: center; } /* Fix modals in general */ .modal-content { max-width: calc(100vw - var(--size-4)); max-height: calc(100vh - var(--size-8)); margin: var(--size-2); } /* Fix form elements */ .form-group { margin-bottom: var(--size-3); } input[type="text"], input[type="email"], textarea, select { width: 100%; min-width: 0; } /* Fix color swatches */ .color-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); } /* Fix color grid for utilities and gradients on mobile */ .color-grid-4col { grid-template-columns: repeat(2, 1fr); gap: var(--size-3); } /* Ensure swatches are visible on mobile */ .color-swatch { min-height: var(--component-height-lg); height: var(--component-height-lg); } /* Ensure alpha swatches show checkerboard pattern on mobile */ .alpha-swatch { position: relative; background: repeating-conic-gradient( var(--checkerboard-color-1) 0% 25%, var(--checkerboard-color-2) 0% 50% ) 50% / var(--checkerboard-size-mobile) var(--checkerboard-size-mobile); } /* Alpha color overlay for mobile */ .alpha-swatch .alpha-color-overlay { position: absolute; inset: 0; border-radius: inherit; } /* Adjust gradient square swatches for mobile */ .gradient-swatch-square { max-height: var(--component-height-lg); } /* Fix empty states */ .empty-state { padding: var(--size-4); } .empty-state-icon { font-size: var(--font-size-6); } } /* 6. Landscape Mobile Fixes */ @media (height <= 500px) and (orientation: landscape) { .about-modal-content { max-height: calc(100vh - var(--size-4)); overflow-y: auto; } .about-avatar, .about-modal-clean .about-avatar { width: 50px; height: 50px; } } /* 7. Container Query Fallbacks */ @supports not (container-type: inline-size) { @media (width <= 340px) { .token-breakdown { font-size: var(--font-size-0); } } } /* 8. Unified Mobile Padding System */ @media (width <= 768px) { /* Note: Section padding is now handled in the main section definitions above */ /* This provides clean CSS without !important overrides */ /* All headers use unified system with consistent mobile spacing */ .section-header, .category-header, .component-header { margin-bottom: var(--size-4); /* Slightly reduced spacing on mobile */ } /* Tab navigation mobile adjustment - Minimalist Outline */ .tab-nav-final { /* Remove bottom border on mobile */ border-bottom: none; /* Remove container background for minimalist look */ background: transparent; padding: var(--size-2); margin: 0 0 var(--size-4) 0; /* Enable smooth scrolling */ overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* Prevent wrapping */ flex-wrap: nowrap; } /* Hide scrollbar but keep functionality */ .tab-nav-final::-webkit-scrollbar { display: none; } /* Transform tabs into outline pills on mobile */ .tab-clean { /* Reset styles */ border: 2px solid var(--color-border-default); border-bottom: 2px solid var(--color-border-default); margin-bottom: 0; /* Pill styling */ background: transparent; border-radius: var(--radius-round); padding: var(--size-2) var(--size-4); color: var(--color-text-secondary); /* Ensure no shrinking */ flex-shrink: 0; /* Typography */ font-size: var(--font-size-1); font-family: var(--font-sans); font-weight: var(--font-weight-5); /* Remove any shadows */ text-shadow: none; box-shadow: none; /* Smooth transitions */ transition: all var(--animation-duration-2) var(--ease-3); } /* Active pill state */ .tab-clean.active { background: var(--brand-secondary); color: white; border-color: var(--brand-secondary); font-weight: var(--font-weight-6); } /* Hover state for pills - no outline effect */ /* Fix tab overflow in Color System - extend to edges for more space */ .section-tabs { position: relative; margin: 0 calc(-1 * var(--size-3)); /* Extend to container edges */ padding: 0 var(--size-3) var(--size-1) var(--size-3); /* Add scroll snap for better UX */ scroll-snap-type: x mandatory; /* Ensure tabs don't wrap */ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Ensure tab buttons don't shrink and maintain readable size */ .section-tabs .tab-button { scroll-snap-align: start; flex-shrink: 0; min-width: fit-content; white-space: nowrap; } } /* Fix mobile State Reference spacing */ @media (width <= 768px) { /* Reset code element spacing in mobile */ .ref-info code, .ref-info span { margin: 0 !important; padding: 0 !important; text-indent: 0 !important; } .mobile-reference { gap: var(--size-2); /* Reduce gap between sections */ } .ref-section { padding: var(--size-2); /* Reduce padding */ border: none; /* Ensure no border on mobile */ } .ref-title { /* Reset desktop negative margins first */ margin-left: 0; margin-right: 0; /* Then apply mobile-specific full-width extension */ display: block; width: calc(100% + (var(--size-2) * 2)); margin: 0 calc(var(--size-2) * -1) var(--size-2) calc(var(--size-2) * -1); padding: 0 var(--size-2) var(--size-2) var(--size-2); border-bottom: 1px solid var(--color-border-default); } .ref-items { gap: var(--size-1); /* Tighter spacing between items */ } /* Mobile overview styles */ .mobile-overview { padding: 0; } .mobile-overview .overview-intro { margin-bottom: var(--size-3); } .mobile-overview .text-label { font-size: var(--font-size-1); margin-bottom: var(--size-1); } .mobile-overview .architecture-layers { display: flex; flex-direction: column; gap: var(--size-2); } .mobile-overview .architecture-layer { padding: var(--size-2); background: var(--surface-2); border-radius: var(--radius-2); border: 1px solid var(--color-border-default); } .mobile-overview .architecture-layer strong { display: block; color: var(--color-text-primary); margin-bottom: var(--size-1); } .mobile-overview .architecture-layer p { margin: 0; font-size: var(--font-size-0); color: var(--color-text-muted); } .mobile-overview code { font-size: var(--font-size-00); background: var(--surface-3); padding: 2px 6px; border-radius: var(--radius-1); } .ref-item { padding: var(--size-1); /* Restore padding on all sides */ } } /* For very small screens, consider stacking tabs vertically */ @media (width <= 480px) { .section-tabs { /* Remove fade effect for vertical layout */ mask-image: none; /* Optional: uncomment to stack tabs vertically on very small screens flex-direction: column; gap: 0; */ } /* Optional: uncomment for vertical tab layout .tab-button { width: 100%; text-align: left; border-bottom: var(--border-size-1) solid var(--color-border-default); border-left: var(--border-size-3) solid transparent; } .tab-button.active, .tab-button[aria-selected="true"] { border-left-color: var(--brand-primary); border-bottom-color: var(--color-border-default); } */ } /* ================================================ INK SHADOW REMOVAL OVERRIDES Remove Open Props text shadow effects from all interactive elements ================================================ */ /* Remove text shadows from all buttons, pills, and tabs */ button, .btn, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, input[type="file"]::file-selector-button { text-shadow: none !important; box-shadow: var(--shadow-2), 0 0 0 var(--_highlight-size, 0) var(--_highlight, transparent) !important; } /* Tabs specifically - no shadows */ .tab-clean, .tab-button, .tab-pill { text-shadow: none !important; box-shadow: none !important; } /* Remove drop shadows from all buttons */ button, .btn, .btn-primary, .btn-secondary, .btn-tertiary, .btn-icon, .btn-icon-only, input[type="button"], input[type="submit"], input[type="reset"] { box-shadow: none !important; } /* Remove drop shadow from SVG icons inside buttons */ button svg, .btn svg, .tab-clean svg, .tab-button svg, input[type="button"] svg, input[type="submit"] svg, input[type="reset"] svg { filter: none !important; } /* Ensure our custom button styles don't have shadows */ .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success { text-shadow: none !important; } /* Remove any shadows from icon buttons */ .icon-button, [class*="btn-icon"] { text-shadow: none !important; } /* Clean up file input buttons specifically */ input[type="file"]::-webkit-file-upload-button, input[type="file"]::file-selector-button { text-shadow: none !important; } /* ========================================================================== FIGMA PLUGIN SPECIFIC FIXES ========================================================================== */ /* Figma renders animations differently - need slower timing */ .figma-plugin .te-icon-cell { animation-duration: 4s; /* Slower for better Figma performance */ animation-timing-function: ease-out; /* Smoother in Figma */ } /* Ensure proper spacing between cards in plugin context */ .figma-plugin #main-ui > * + * { margin-top: var(--size-3); } /* Fix icon visibility in Figma context */ .figma-plugin [data-icon] { visibility: visible !important; opacity: 1 !important; } /* Ensure animations aren't blocked by Figma's rendering */ .figma-plugin .te-progress-loader { will-change: auto; /* Let Figma handle optimization */ } /* Fix collection item icon colors in advanced mode */ .figma-plugin .collection-item .badge [data-icon] { color: inherit !important; } /* Ensure padding on export cards */ .figma-plugin #export-card-container { padding: 0; margin: 0; } /* Debug class for identifying rendering issues */ .figma-plugin.debug [data-icon]:not(:has(svg)) { background: red !important; min-width: 20px; min-height: 20px; display: inline-block; } /* ======================================================================== FILTER CARD CONSISTENCY Make filter cards look visually similar between guide and plugin ======================================================================== */ /* Ensure consistent filter card styling in plugin context */ .figma-plugin .filter-section { border-radius: var(--radius-3); background: var(--surface-2); border: var(--border-size-1) solid var(--color-border-default); } /* Match collection item styling between contexts */ .figma-plugin .collection-item { border-radius: var(--radius-3); background: var(--surface-1); border: var(--border-size-2) solid var(--color-border-subtle); transition: all var(--animation-duration-2) var(--ease-3); } .figma-plugin .collection-item:hover { background: var(--surface-2); border-color: var(--color-border-default); transform: translateY(-1px) scale(1.01); box-shadow: 0 4px 12px rgb(0, 0, 0, 0.08); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .figma-plugin .collection-item:active { transform: translateY(0) scale(0.99); transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Consistent selected state with lime highlighting */ .figma-plugin .collection-item.selected { background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-1)); border-color: var(--brand-primary); border-width: var(--border-size-2); } /* Dark mode adjustments for better contrast */ [data-theme="dark"] .figma-plugin .collection-item { background: var(--surface-2); } [data-theme="dark"] .figma-plugin .collection-item.selected { background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-2)); } /* Ensure consistent checkbox styling */ .figma-plugin .collection-checkbox { border-radius: var(--radius-1); width: 18px; height: 18px; min-width: 18px; border: var(--border-size-2) solid var(--color-border-default); } .figma-plugin .collection-item.selected .collection-checkbox { background: var(--brand-primary); border-color: var(--brand-primary); } /* Consistent spacing in plugin */ .figma-plugin .collection-list { gap: var(--size-2); padding: 0; } /* Ensure filter header matches */ .figma-plugin .filter-section h4 { font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); } /* ========================================== * FIGMA TO CODE FLOW DESIGN * ========================================== */ /* Figma to Code Flow Container */ .flow-container { display: grid; gap: var(--size-2); /* Tighter spacing between rows */ margin-top: var(--size-4); /* Add space after section description */ } .flow-row { display: grid; grid-template-columns: 1fr 50px 1fr; align-items: start; /* Top align content */ gap: var(--size-3); padding: var(--size-4); padding-left: calc(var(--size-8) + var(--size-2)); border: var(--border-size-1) solid var(--color-border-default); border-radius: var(--radius-2); position: relative; min-height: 80px; } /* All flow rows have no background */ .flow-row { background: transparent; } /* Atomic level label - styled as vertical badge */ .atomic-label { /* Badge base styles */ display: inline-flex; align-items: center; justify-content: center; padding: var(--size-2) var(--size-1); font-size: var(--font-size-0); /* Slightly larger */ font-weight: var(--font-weight-6); line-height: 1; text-decoration: none; white-space: nowrap; border-radius: var(--radius-1); border: var(--border-size-1) solid var(--color-border-subtle); transition: all 0.2s ease; /* Vertical orientation */ writing-mode: vertical-rl; text-orientation: mixed; text-transform: uppercase; letter-spacing: var(--font-letterspacing-1); /* Positioning */ position: absolute; left: var(--size-2); /* 8px from edge */ top: 50%; transform: translateY(-50%); height: calc(100% - var(--size-4)); /* Dynamic height with padding */ /* Colors matching badge system */ background: var(--color-background-tertiary); color: var(--color-text-muted); } .flow-item { display: flex; flex-direction: column; gap: var(--size-1); min-width: 0; /* Prevent text overflow */ } .flow-item strong { color: var(--color-text-primary); font-weight: var(--font-weight-5); font-size: var(--font-size-1); margin-bottom: var(--size-1); display: block; } .flow-item span { font-size: var(--font-size-0); /* Match badge text size */ color: var(--color-text-secondary); line-height: var(--font-lineheight-3); display: block; } /* Code examples - ensure badges don't stretch */ .code-examples { display: flex; flex-wrap: wrap; gap: var(--size-1); margin-top: var(--size-1); align-items: flex-start; } .code-examples .badge { width: auto; /* Ensure badges hug content */ flex-shrink: 0; /* Prevent badge compression */ font-size: var(--font-size-0); /* Ensure readable size */ } .flow-arrow { color: var(--color-text-muted); font-size: var(--font-size-3); /* Slightly smaller arrow */ opacity: 1; text-align: center; align-self: center; justify-self: center; display: flex; align-items: center; justify-content: center; width: 100%; } [data-theme="dark"] .flow-arrow { color: var(--brand-primary); opacity: 0.7; } /* Mobile Responsive */ @media (max-width: 768px) { .flow-row { grid-template-columns: 1fr 35px 1fr; gap: var(--size-2); padding: var(--size-3); padding-left: calc(var(--size-6) + var(--size-2)); min-height: 70px; align-items: start; /* Maintain top alignment on mobile */ } .atomic-label { font-size: var(--font-size-00); padding: var(--size-1); left: var(--size-1); /* 8px from edge on mobile */ height: calc(100% - var(--size-2)); } .flow-arrow { font-size: var(--font-size-2); } .code-examples { gap: var(--size-1); } .flow-item span { font-size: var(--font-size-0); /* Keep readable on mobile */ } .flow-item strong { font-size: var(--font-size-1); } }