/** * Collabstr Design System * ======================= * * This is the main entry point for the design system. * Import this file to get all design system styles. * * Usage in Django templates: * * * Or import specific parts as needed: * @import './tokens/_colors.css'; * @import './components/buttons/_button.css'; * * Structure: * 1. Tokens - Design tokens (colors, typography, spacing, etc.) * 2. Foundations - Base styles and utilities * 3. Layouts - Grid systems, containers, flexbox utilities * 4. Components - Reusable UI components */ /* ========================================================================== TOKENS Design tokens define the visual language: colors, typography, spacing, etc. These MUST be loaded first as other files depend on them. ========================================================================== */ /* --- ./tokens/_index.css --- */ /** * Design System Tokens * ==================== * * Design tokens define the visual language of the design system. * These are the foundational values that all components build upon. * * IMPORTANT: Tokens must be loaded before any other design system files. */ /* --- ./_colors.css --- */ /** * Design System - Color Tokens * * This file imports all color tokens from the organized color modules. * For direct imports, use the individual files in the colors/ directory. * * Structure: * - colors/_legacy.css - Backwards compatibility aliases * - colors/_primitives.css - Raw color scales * - colors/_platforms.css - Social media brand colors * - colors/_semantic.css - Purpose-based semantic tokens */ /* --- ./colors/_index.css --- */ /** * Design System - Color Tokens Index * * Imports all color token files in the correct order. * * Load Order: * 1. Legacy - Old variable names for backwards compatibility * 2. Primitives - Raw color scales (must be loaded before semantic) * 3. Platforms - Social media brand colors * 4. Semantic - Purpose-based tokens that reference primitives */ /* --- ./_legacy.css --- */ /** * Design System - Legacy Color Tokens * * Backwards compatibility aliases for existing codebase. * These map old variable names to new token values. * * DEPRECATION NOTICE: These are maintained for compatibility. * New code should use the semantic tokens from _semantic.css */ :root { /* ========================================================================== LEGACY BASIC COLORS ========================================================================== */ --black: #222; --lightGray: rgb(151, 163, 197); --green: #d6efe2; --red: #feedf2; --orange: #fbebd9; --blue: #eaeeff; --collabstrDark: #FF899B; /* ========================================================================== LEGACY GRAY SCALE (PascalCase) Maps to new kebab-case tokens ========================================================================== */ --Gray-100: var(--gray-100); --Gray-200: var(--gray-200); --Gray-300: var(--gray-300); --Gray-400: var(--gray-400); --Gray-500: var(--gray-500); --Gray-600: var(--gray-600); --Gray-700: var(--gray-700); --Gray-800: var(--gray-800); /* ========================================================================== LEGACY INDIGO ========================================================================== */ --Indigo-50: var(--indigo-50); /* ========================================================================== LEGACY STATUS ========================================================================== */ --Success-500: var(--green-500); /* Error with -main suffix (legacy inconsistency) */ --error-600-main: var(--red-600); /* ========================================================================== LEGACY BRAND COLORS These are now defined in _primitives.css, aliased here for reference ========================================================================== */ /* ========================================================================== LEGACY GRADIENT ========================================================================== */ --gradientText: linear-gradient( 90deg, rgb(255 132 160) 0%, rgb(251 102 157) 20%, rgb(179 45 194) 95%, rgb(136, 95, 183) 100% ); } /* --- ./_primitives.css --- */ /** * Design System - Primitive Color Tokens * * Raw color scales that define the color palette. * These are the building blocks for semantic tokens. */ :root { /* ========================================================================== BRAND PRIMARY (Pink) ========================================================================== */ --pink-25: #FFF8F6; --pink-50: #FFF2F0; --pink-100: #FFE7E6; --pink-200: #FDC7D3; --pink-300: #FFA8B6; --pink-400: #FF84A0; --pink-500: #FB669D; --pink-600: #FF4C8E; --pink-700: #FF2A79; --pink-800: #FF0471; --pink-900: #FF0091; /* ========================================================================== BRAND SECONDARY (Purple) ========================================================================== */ --brand-purple-400: #885FB7; --brand-purple-500: #B32DC2; --brand-purple-600: #9A25A6; /* ========================================================================== GRAY SCALE ========================================================================== */ --gray-25: #FDFDFD; --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #E9EAEB; --gray-300: #D5D7DA; --gray-400: #A4A7AE; --gray-500: #717680; --gray-600: #535862; --gray-700: #414651; --gray-800: #252B37; --gray-900: #181D27; /* ========================================================================== YELLOW ========================================================================== */ --yellow-25: #FFF9D5; --yellow-50: #FEF3AA; --yellow-100: #FFF29A; --yellow-200: #FEED80; --yellow-300: #FEE880; --yellow-400: #FEE480; --yellow-500: #FEDD80; --yellow-600: #FED164; --yellow-700: #FFC02D; --yellow-800: #F8B20E; --yellow-900: #E5A000; /* ========================================================================== BLUE ========================================================================== */ --blue-25: #F5FAFF; --blue-50: #EFF8FF; --blue-100: #D1E9FF; --blue-200: #B2DDFF; --blue-300: #84CAFF; --blue-400: #53B1FD; --blue-500: #2E90FA; --blue-600: #1570EF; --blue-700: #175CD3; --blue-800: #1849A9; --blue-900: #194185; /* ========================================================================== INDIGO ========================================================================== */ --indigo-25: #F5F8FF; --indigo-50: #EEF4FF; --indigo-100: #E0EAFF; --indigo-200: #C7D7FE; --indigo-300: #A4BCFD; --indigo-400: #8098F9; --indigo-500: #6172F3; --indigo-600: #444CE7; --indigo-700: #3538CD; --indigo-800: #2D31A6; --indigo-900: #2D3282; /* ========================================================================== PURPLE ========================================================================== */ --purple-25: #FAFAFF; --purple-50: #F4F3FF; --purple-100: #EBE9FE; --purple-200: #D9D6FE; --purple-300: #BDB4FE; --purple-400: #9B8AFB; --purple-500: #7A5AF8; --purple-600: #6938EF; --purple-700: #5925DC; --purple-800: #4A1FB8; --purple-900: #3E1C96; /* ========================================================================== GREEN ========================================================================== */ --green-25: #F6FEF9; --green-50: #ECFDF3; --green-100: #D1FADF; --green-200: #A6F4C5; --green-300: #6CE9A6; --green-400: #32D583; --green-500: #12B76A; --green-600: #039855; --green-700: #027A48; --green-800: #05603A; --green-900: #054F31; /* ========================================================================== ORANGE ========================================================================== */ --orange-25: #FFFAF5; --orange-50: #FFF6ED; --orange-100: #FFEAD5; --orange-200: #FDDCAB; --orange-300: #FEB273; --orange-400: #FD853A; --orange-500: #FB6514; --orange-600: #EC4A0A; --orange-700: #C4320A; --orange-800: #9C2A10; --orange-900: #7E2410; /* ========================================================================== RED ========================================================================== */ --red-25: #FFFBFA; --red-50: #FEF3F2; --red-100: #FEE4E2; --red-200: #FECDCA; --red-300: #FDA29B; --red-400: #F97066; --red-500: #F04438; --red-600: #D92D20; --red-700: #B42318; --red-800: #912018; --red-900: #7A271A; /* ========================================================================== BLACK & WHITE ========================================================================== */ --bw-black: #333; --bw-white: #FFF; } /* --- ./_platforms.css --- */ /** * Design System - Platform Color Tokens * * Brand colors for social media and third-party platforms. */ :root { /* ========================================================================== SOCIAL MEDIA PLATFORMS ========================================================================== */ --instagram: #d756ff; --tiktok: #ff5fa3; --youtube: #ff3232; --twitter: #1DA1F2; --twitch: #9146FF; --snapchat: #FFFC00; --amazon: #FF9900; --ugc: #222; /* ========================================================================== SEMANTIC PLATFORM ALIASES (--color-platform-* prefix) ========================================================================== */ --color-platform-instagram: var(--instagram); --color-platform-tiktok: var(--tiktok); --color-platform-youtube: var(--youtube); --color-platform-twitter: var(--twitter); --color-platform-twitch: var(--twitch); --color-platform-snapchat: var(--snapchat); --color-platform-amazon: var(--amazon); --color-platform-ugc: var(--ugc); } /* --- ./_semantic.css --- */ /** * Design System - Semantic Color Tokens * * Purpose-based color tokens that reference primitives. * Use these in components for consistent theming. */ :root { /* ========================================================================== SEMANTIC COLOR ALIASES (--color-* prefix) Canonical naming pattern: --color-{category}-{variant} ========================================================================== */ /* Brand Colors */ --color-brand-25: var(--pink-25); --color-brand-50: var(--pink-50); --color-brand-100: var(--pink-100); --color-brand-200: var(--pink-200); --color-brand-300: var(--pink-300); --color-brand-400: var(--pink-400); --color-brand-500: var(--pink-500); --color-brand-600: var(--pink-600); --color-brand-700: var(--pink-700); --color-brand-800: var(--pink-800); --color-brand-900: var(--pink-900); --color-brand-gradient: var(--gradientText); /* Brand Purple */ --color-brand-purple-400: var(--brand-purple-400); --color-brand-purple-500: var(--brand-purple-500); --color-brand-purple-600: var(--brand-purple-600); /* Neutral (Gray) */ --color-neutral-50: var(--gray-50); --color-neutral-100: var(--gray-100); --color-neutral-200: var(--gray-200); --color-neutral-300: var(--gray-300); --color-neutral-400: var(--gray-400); --color-neutral-500: var(--gray-500); --color-neutral-600: var(--gray-600); --color-neutral-700: var(--gray-700); --color-neutral-800: var(--gray-800); --color-neutral-900: var(--gray-900); /* Text */ --color-text-default: var(--bw-black); --color-text-subtle: var(--gray-600); --color-text-subtlest: var(--gray-500); --color-text-placeholder: var(--gray-400); --color-text-disabled: var(--gray-300); --color-text-inverse: var(--bw-white); --color-text-brand: var(--pink-500); --color-text-success: var(--green-700); --color-text-error: var(--red-600); --color-text-warning: var(--orange-600); --color-text-info: var(--blue-700); /* Background */ --color-bg-primary: var(--bw-white); --color-bg-secondary: var(--gray-100); --color-bg-tertiary: var(--gray-200); --color-bg-inverse: var(--bw-black); --color-bg-brand: var(--pink-500); --color-bg-brand-subtle: var(--pink-50); --color-bg-success: color-mix(in srgb, var(--green-700) 8%, transparent); --color-bg-error: color-mix(in srgb, var(--red-600) 8%, transparent); --color-bg-warning: color-mix(in srgb, var(--orange-600) 8%, transparent); --color-bg-info: color-mix(in srgb, var(--blue-700) 8%, transparent); /* Border */ --color-border-default: var(--gray-300); --color-border-subtle: var(--gray-200); --color-border-strong: var(--gray-700); --color-border-brand: var(--pink-400); --color-border-error: var(--red-600); --color-border-success: var(--green-700); --color-border-warning: var(--orange-300); --color-border-info: var(--blue-300); /* Error */ --color-error-25: var(--red-25); --color-error-50: var(--red-50); --color-error-100: var(--red-100); --color-error-200: var(--red-200); --color-error-300: var(--red-300); --color-error-400: var(--red-400); --color-error-500: var(--red-500); --color-error-600: var(--red-600); --color-error-700: var(--red-700); --color-error-800: var(--red-800); --color-error-900: var(--red-900); /* Success */ --color-success-25: var(--green-25); --color-success-50: var(--green-50); --color-success-100: var(--green-100); --color-success-200: var(--green-200); --color-success-300: var(--green-300); --color-success-400: var(--green-400); --color-success-500: var(--green-500); --color-success-600: var(--green-600); --color-success-700: var(--green-700); --color-success-800: var(--green-800); --color-success-900: var(--green-900); /* Warning */ --color-warning-25: var(--orange-25); --color-warning-50: var(--orange-50); --color-warning-100: var(--orange-100); --color-warning-200: var(--orange-200); --color-warning-300: var(--orange-300); --color-warning-400: var(--orange-400); --color-warning-500: var(--orange-500); --color-warning-600: var(--orange-600); --color-warning-700: var(--orange-700); --color-warning-800: var(--orange-800); --color-warning-900: var(--orange-900); /* Info */ --color-info-25: var(--blue-25); --color-info-50: var(--blue-50); --color-info-100: var(--blue-100); --color-info-200: var(--blue-200); --color-info-300: var(--blue-300); --color-info-400: var(--blue-400); --color-info-500: var(--blue-500); --color-info-600: var(--blue-600); --color-info-700: var(--blue-700); --color-info-800: var(--blue-800); --color-info-900: var(--blue-900); /* ========================================================================== ICON COLORS Semantic colors for icon elements across contexts ========================================================================== */ --color-icon-primary: var(--gray-700); --color-icon-secondary: var(--gray-500); --color-icon-tertiary: var(--gray-400); --color-icon-inverse: var(--bw-white); --color-icon-brand: var(--pink-500); --color-icon-success: var(--green-600); --color-icon-warning: var(--orange-600); --color-icon-error: var(--red-600); --color-icon-info: var(--blue-700); /* ========================================================================== INTERACTIVE STATE COLORS Colors for hover, active, and selected states on interactive elements ========================================================================== */ --color-interactive-hover: var(--gray-50); --color-interactive-active: var(--gray-100); --color-interactive-selected: var(--pink-50); --color-interactive-selected-hover: var(--pink-100); /* ========================================================================== OVERLAY COLORS Colors for modal backdrops and overlay layers ========================================================================== */ --color-overlay: rgba(0, 0, 0, 0.5); --color-overlay-light: rgba(0, 0, 0, 0.2); /* ========================================================================== COMPONENT TOKENS Per-component semantic variables so colors can be overridden at theme level. Reference these in component CSS instead of hardcoding color values. ========================================================================== */ /* Cards */ --card-bg: var(--bw-white); --card-bg-footer: var(--color-bg-secondary); --card-border: var(--color-border-default); --card-shadow: var(--shadow-md); /* Modals */ --modal-bg: var(--bw-white); --modal-backdrop: var(--color-overlay); --modal-shadow: var(--shadow-xl); /* Inputs */ --input-bg: var(--bw-white); --input-filled-bg: var(--color-bg-secondary); --input-border: var(--color-border-default); --input-border-focus: var(--color-border-strong); --input-color: var(--color-text-default); --input-placeholder: var(--color-text-placeholder); --input-bg-disabled: var(--color-neutral-100); --input-border-error: var(--color-border-error); --input-border-success: var(--color-border-success); --input-border-disabled: var(--color-border-subtle); /* Toasts */ --toast-bg: var(--bw-white); --toast-shadow: var(--shadow-xl); /* Navigation */ --nav-bg: var(--color-bg-primary); --nav-item-color: var(--color-text-subtle); --nav-item-color-active: var(--color-text-default); --nav-item-bg-hover: var(--color-bg-secondary); --nav-item-bg-active: var(--color-bg-brand-subtle); --nav-item-border-active: var(--color-brand-500); /* Tables */ --table-bg: var(--color-bg-primary); --table-bg-header: var(--color-bg-secondary); --table-bg-row-hover: var(--color-bg-secondary); --table-bg-row-stripe: var(--gray-50); --table-border: var(--color-border-subtle); --table-text-header: var(--color-text-subtlest); --ds-table-cards-gap: var(--color-bg-secondary); /* Dropdowns */ --dropdown-bg: var(--color-bg-primary); --dropdown-border: var(--color-border-default); --dropdown-shadow: var(--shadow-lg); --dropdown-item-color: var(--color-text-default); --dropdown-item-bg-hover: var(--color-bg-secondary); --dropdown-item-bg-active:var(--color-bg-secondary); /* Tooltips */ --tooltip-bg: var(--gray-900); --tooltip-color: var(--bw-white); --tooltip-shadow: var(--shadow-md); /* Tabs */ --tab-color: var(--color-text-subtle); --tab-color-active: var(--color-text-default); --tab-border-active: var(--color-brand-500); --tab-bg-hover: var(--color-bg-secondary); /* Platform Tile (creator onboarding Step 1) */ --platform-tile-bg: var(--color-bg-primary); --platform-tile-border: var(--color-border-default); --platform-tile-border-hover: var(--color-border-strong); --platform-tile-border-connected: var(--color-success-700); --platform-tile-border-error: var(--color-border-error); --platform-tile-follower-bg: var(--color-bg-secondary); --platform-tile-follower-color: var(--color-text-subtle); /* Social Auth (OAuth provider squares) */ --social-auth-height: var(--size-16); --social-auth-bg: var(--bw-white); --social-auth-bg-hover: var(--color-bg-secondary); --social-auth-border: var(--color-border-default); --social-auth-border-hover: var(--color-border-strong); --social-auth-filled-bg: var(--color-bg-secondary); --social-auth-filled-bg-hover: var(--color-bg-tertiary); --social-auth-filled-label: var(--color-text-subtle); /* Auth screens (sign up, log in, password reset) */ --auth-btn-disabled-bg: var(--gray-300); --auth-page-bg: var(--gray-50); /* Enrichment Overlay (creator onboarding transition) */ --enrichment-overlay-bg: var(--color-bg-primary); --enrichment-overlay-icon: var(--color-text-subtle); --enrichment-overlay-caption: var(--color-text-subtle); /* Progress Ring (creator onboarding Profile Score) */ --progress-ring-track: var(--color-neutral-200); --progress-ring-fill: var(--color-brand-400); --progress-ring-score: var(--color-text-default); --progress-ring-unit: var(--color-text-subtlest); /* Stat badge (creator onboarding benchmark pills) */ --badge-stat-bg: var(--indigo-50); --badge-stat-color: var(--color-text-subtle); --badge-stat-icon: var(--color-brand-500); /* Snapchat badge: its brand yellow is too light to carry the white other platform badges use, so this badge needs its own text color that does not follow the theme. */ --badge-snapchat-color: #000; /* Locked Card (creator onboarding achievement cards) */ --locked-card-bg: var(--color-bg-primary); --locked-card-unlock-bg: var(--color-bg-secondary); --locked-card-unlock-color: var(--color-text-subtlest); /* Creator Card (creator match cards) */ --creator-card-bg: transparent; --creator-card-bg-hover: var(--gray-50); --creator-card-border: var(--gray-200); --creator-card-media-bg: var(--color-bg-secondary); --creator-card-media-icon: var(--color-icon-tertiary); --creator-card-text: var(--gray-900); --creator-card-text-muted: var(--gray-500); --creator-card-hire-bg: var(--bw-white); --creator-card-hire-bg-hover: var(--gray-900); --creator-card-hire-border: var(--gray-900); --creator-card-hire-text: var(--gray-900); --creator-card-hire-text-hover: var(--bw-white); /* Past Creator Card (rehire surfaces) */ --creator-past-card-border: var(--gray-100); --creator-past-card-bg-hover: var(--gray-25); --creator-past-card-star: var(--yellow-500); --creator-past-card-star-empty: var(--gray-300); --creator-past-tile-media-bg: var(--color-bg-inverse); --creator-past-tile-scrim: var(--color-overlay); --creator-past-tile-text: var(--color-text-inverse); --creator-past-tile-star-empty: color-mix(in srgb, var(--bw-white) 35%, transparent); /* Media Grid (creator onboarding Step 2 portfolio) */ --media-grid-cell-bg: var(--color-bg-secondary); --media-grid-dropzone-bg: var(--color-bg-secondary); --media-grid-dropzone-border: var(--color-border-default); --media-grid-dropzone-border-hover: var(--color-brand-400); --media-grid-dropzone-color: var(--color-text-subtlest); --media-grid-dropzone-icon: var(--color-text-subtle); /* LP Hero (programmatic landing page) */ --lp-hero-overlay: color-mix(in srgb, var(--bw-black) 50%, transparent); --lp-hero-text: var(--bw-white); /* Rank Card (programmatic landing page hero) */ --rank-card-bg: var(--bw-white); --rank-card-border: var(--color-border-default); --rank-card-shadow: var(--shadow-lp-rank-card); --rank-card-first-border: var(--yellow-700); --rank-card-first-bg: var(--gray-50); --rank-card-rating-color: var(--yellow-700); /* Creator Panel (programmatic landing page listing) */ --creator-panel-bg: var(--bw-white); --creator-panel-border: var(--color-border-default); --creator-panel-border-subtle: var(--gray-100); --creator-panel-section-bg: var(--gray-50); --creator-panel-rate-blur: 5px; --creator-panel-shadow: var(--shadow-lp-creator-panel); /* Programmatic Landing Page Sections */ --lp-faq-divider: var(--gray-100); /* Metric Card (tracking dashboard summary cards) */ --metric-card-bg-cpm: var(--indigo-200); --metric-card-bg-spend: var(--purple-200); --metric-card-bg-engagements: var(--pink-200); /* Create Offer Modal (negotiate a package) -- the steps panel gradient and its muted text have no DS equivalent, so their values live here to stay themeable. */ --offer-modal-steps-bg: linear-gradient(to bottom, #222222 0%, #888888 100%); --offer-modal-steps-bg-stacked: linear-gradient(to right, #222222 0%, #888888 100%); --offer-modal-steps-text-subtle: #E0E0E0; } /* --- ./_typography.css --- */ /** * Design System - Typography Tokens * * This file defines all typography tokens for the Collabstr design system. */ :root { /* ========================================================================== FONT FAMILY ========================================================================== */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace; /* ========================================================================== FONT SIZE Using a modular scale (1.125 ratio) with 16px base ========================================================================== */ --font-size-4xs: 0.375rem; /* 06px */ --font-size-2xs: 0.625rem; /* 10px */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ --font-size-7xl: 4.5rem; /* 72px */ /* ========================================================================== FONT WEIGHT ========================================================================== */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* ========================================================================== LINE HEIGHT ========================================================================== */ --line-height-none: 1; --line-height-heading: 1.15; --line-height-compact: 1.2; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-copy: 1.4; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-body-copy: 1.65; --line-height-spacious: 1.7; --line-height-loose: 2; /* ========================================================================== LETTER SPACING ========================================================================== */ --letter-spacing-tighter: -0.05em; --letter-spacing-heading: -0.028em; --letter-spacing-tight: -0.025em; --letter-spacing-display: -0.02em; --letter-spacing-subtle-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* ========================================================================== TYPOGRAPHY PRESETS Combine size, weight, and line-height for common text styles ========================================================================== */ /* Display - Large hero text */ --text-display-lg: var(--font-weight-bold) var(--font-size-6xl)/var(--line-height-tight) var(--font-family-base); --text-display-md: var(--font-weight-bold) var(--font-size-5xl)/var(--line-height-tight) var(--font-family-base); --text-display-sm: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-tight) var(--font-family-base); /* Headings */ --text-heading-xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-tight) var(--font-family-base); --text-heading-lg: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-tight) var(--font-family-base); --text-heading-md: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-snug) var(--font-family-base); --text-heading-sm: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-snug) var(--font-family-base); --text-heading-xs: var(--font-weight-semibold) var(--font-size-base)/var(--line-height-snug) var(--font-family-base); /* Body */ --text-body-lg: var(--font-weight-normal) var(--font-size-lg)/var(--line-height-relaxed) var(--font-family-base); --text-body-md: var(--font-weight-normal) var(--font-size-base)/var(--line-height-relaxed) var(--font-family-base); --text-body-sm: var(--font-weight-normal) var(--font-size-sm)/var(--line-height-normal) var(--font-family-base); /* Labels & Captions */ --text-label-lg: var(--font-weight-medium) var(--font-size-sm)/var(--line-height-normal) var(--font-family-base); --text-label-md: var(--font-weight-medium) var(--font-size-xs)/var(--line-height-normal) var(--font-family-base); --text-label-sm: var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-normal) var(--font-family-base); --text-caption: var(--font-weight-normal) var(--font-size-xs)/var(--line-height-normal) var(--font-family-base); } /* --- ./_spacing.css --- */ /** * Design System - Spacing Tokens * * This file defines all spacing tokens for the Collabstr design system. * Based on a 4px base unit for consistent vertical rhythm. */ :root { /* ========================================================================== SPACING SCALE Base unit: 4px (0.25rem) ========================================================================== */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-18: 4.5rem; /* 72px */ --space-19: 4.75rem; /* 76px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ --space-44: 11rem; /* 176px */ --space-48: 12rem; /* 192px */ --space-52: 13rem; /* 208px */ --space-56: 14rem; /* 224px */ --space-60: 15rem; /* 240px */ --space-64: 16rem; /* 256px */ --space-72: 18rem; /* 288px */ --space-80: 20rem; /* 320px */ --space-96: 24rem; /* 384px */ /* ========================================================================== SEMANTIC SPACING Named tokens for common use cases ========================================================================== */ /* Component internal padding */ --space-component-xs: var(--space-1); /* 4px - tight elements */ --space-component-sm: var(--space-2); /* 8px - small components */ --space-component-md: var(--space-3); /* 12px - medium components */ --space-component-lg: var(--space-4); /* 16px - large components */ --space-component-xl: var(--space-6); /* 24px - extra large components */ /* Section spacing */ --space-section-xs: var(--space-8); /* 32px */ --space-section-sm: var(--space-12); /* 48px */ --space-section-md: var(--space-16); /* 64px */ --space-section-lg: var(--space-24); /* 96px */ --space-section-xl: var(--space-32); /* 128px */ /* Gap between elements */ --space-gap-xs: var(--space-1); /* 4px */ --space-gap-sm: var(--space-2); /* 8px */ --space-gap-md: var(--space-4); /* 16px */ --space-gap-lg: var(--space-6); /* 24px */ --space-gap-xl: var(--space-8); /* 32px */ /* ========================================================================== SIZING Common width/height values ========================================================================== */ --size-0: 0; --size-px: 1px; --size-0-5: 0.125rem; /* 2px */ --size-1: 0.25rem; /* 4px */ --size-2: 0.5rem; /* 8px */ --size-3: 0.75rem; /* 12px */ --size-4: 1rem; /* 16px */ --size-5: 1.25rem; /* 20px */ --size-6: 1.5rem; /* 24px */ --size-8: 2rem; /* 32px */ --size-10: 2.5rem; /* 40px */ --size-12: 3rem; /* 48px */ --size-14: 3.5rem; /* 56px */ --size-16: 4rem; /* 64px */ --size-20: 5rem; /* 80px */ --size-24: 6rem; /* 96px */ --size-32: 8rem; /* 128px */ --size-40: 10rem; /* 160px */ --size-48: 12rem; /* 192px */ --size-56: 14rem; /* 224px */ --size-64: 16rem; /* 256px */ /* Percentage sizes */ --size-1-2: 50%; --size-1-3: 33.333333%; --size-2-3: 66.666667%; --size-1-4: 25%; --size-3-4: 75%; --size-full: 100%; --size-screen: 100vw; --size-min: min-content; --size-max: max-content; --size-fit: fit-content; } /* --- ./_shadows.css --- */ /** * Design System - Shadow Tokens * * This file defines all shadow/elevation tokens for the Collabstr design system. * Legacy shadow names are preserved for backwards compatibility. */ :root { /* ========================================================================== LEGACY SHADOWS (preserved for backwards compatibility) ========================================================================== */ --lightBoxShadow: rgba(120, 120, 170, 0.15) 0 2px 16px 0; --mediumBoxShadow: rgba(120, 120, 170, 0.2) 0 2px 10px 0; --darkBoxShadow: rgba(120, 120, 170, 0.3) 0 2px 10px 0; /* ========================================================================== NEW SHADOW TOKENS Semantic elevation scale from subtle to pronounced ========================================================================== */ /* No shadow */ --shadow-none: none; /* Extra small - Subtle depth for small interactive elements */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Small - Buttons, input focus states */ --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* Medium - Cards, dropdowns (maps to legacy lightBoxShadow) */ --shadow-md: var(--lightBoxShadow); /* Large - Elevated cards, popovers */ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Extra large - Modals, dialogs */ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* 2XL - Highest elevation (toasts, notifications) */ --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Programmatic landing-page ranking card */ --shadow-lp-rank-card: 0 4px 6px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.2); --shadow-lp-creator-panel: 0 1px 4px rgba(0, 0, 0, 0.1); /* Inner shadow - For inset effects */ --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); /* ========================================================================== COLORED SHADOWS Brand-colored shadows for special emphasis ========================================================================== */ --shadow-brand-sm: 0 1px 3px 0 rgba(251, 102, 157, 0.2), 0 1px 2px -1px rgba(251, 102, 157, 0.2); --shadow-brand-md: 0 4px 6px -1px rgba(251, 102, 157, 0.2), 0 2px 4px -2px rgba(251, 102, 157, 0.2); --shadow-brand-lg: 0 10px 15px -3px rgba(251, 102, 157, 0.2), 0 4px 6px -4px rgba(251, 102, 157, 0.2); /* ========================================================================== FOCUS RINGS Accessible focus indicators ========================================================================== */ --ring-offset-width: 2px; --ring-offset-color: var(--bw-white); --ring-width: 2px; --ring-color: rgba(251, 102, 157, 0.5); /* Focus ring shadow (combine with box-shadow) */ --shadow-focus-ring: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) var(--ring-color); --shadow-focus-ring-brand: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) rgba(251, 102, 157, 0.5); --shadow-focus-ring-error: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) rgba(239, 68, 68, 0.5); } /* --- ./_borders.css --- */ /** * Design System - Border Tokens * * This file defines all border-related tokens for the Collabstr design system. */ :root { /* ========================================================================== BORDER RADIUS ========================================================================== */ --radius-none: 0; --radius-xs: 0.125rem; /* 2px */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px - Default for most components */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 2rem; /* 32px */ --radius-full: 9999px; /* Fully rounded (pills, circles) */ /* ========================================================================== BORDER WIDTH ========================================================================== */ --border-width-0: 0; --border-width-1: 1px; --border-width-2: 2px; --border-width-4: 4px; --border-width-8: 8px; /* Semantic border widths */ --border-width-thin: var(--border-width-1); --border-width-medium: var(--border-width-2); --border-width-thick: var(--border-width-4); /* ========================================================================== BORDER STYLES (as complete border shorthand) ========================================================================== */ /* Default borders */ --border-default: var(--border-width-1) solid var(--gray-300); --border-subtle: var(--border-width-1) solid var(--gray-200); --border-strong: var(--border-width-1) solid var(--gray-400); /* Brand borders */ --border-brand: var(--border-width-1) solid var(--pink-500); --border-brand-strong: var(--border-width-2) solid var(--pink-500); /* Status borders */ --border-success: var(--border-width-1) solid var(--green-500); --border-warning: var(--border-width-1) solid var(--orange-500); --border-error: var(--border-width-1) solid var(--red-500); --border-info: var(--border-width-1) solid var(--info-500); /* Focus/active borders */ --border-focus: var(--border-width-2) solid var(--pink-500); /* ========================================================================== OUTLINE ========================================================================== */ --outline-none: none; --outline-default: 2px solid var(--gray-400); --outline-brand: 2px solid var(--pink-500); --outline-offset: 2px; /* ========================================================================== DIVIDER ========================================================================== */ --divider-color: var(--gray-200); --divider-width: 1px; } /* --- ./_breakpoints.css --- */ /** * Design System - Breakpoint Tokens * * This file defines responsive breakpoints for the Collabstr design system. * Note: CSS custom properties can't be used in media queries directly, * but these values serve as documentation and can be used in JavaScript. * * For actual media queries, use these values directly: * @media (min-width: 640px) { ... } // sm * @media (min-width: 768px) { ... } // md * @media (min-width: 1024px) { ... } // lg * @media (min-width: 1280px) { ... } // xl * @media (min-width: 1536px) { ... } // 2xl */ :root { /* ========================================================================== BREAKPOINT VALUES Mobile-first approach: styles apply from this width and up ========================================================================== */ /* Extra small (default) - 0px to 639px */ --breakpoint-xs: 0px; /* Small - 640px and up (landscape phones, small tablets) */ --breakpoint-sm: 640px; /* Medium - 768px and up (tablets) */ --breakpoint-md: 768px; /* Large - 1024px and up (laptops, small desktops) */ --breakpoint-lg: 1024px; /* Extra large - 1280px and up (desktops) */ --breakpoint-xl: 1280px; /* 2X large - 1536px and up (large desktops) */ --breakpoint-2xl: 1536px; /* ========================================================================== CONTAINER MAX WIDTHS Maximum width of content containers at each breakpoint ========================================================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* Default max content width (matches existing #content max-width) */ --container-max: 1600px; /* ========================================================================== CONTENT WIDTHS Common content area widths ========================================================================== */ /* Narrow content (forms, auth pages) */ --content-narrow: 480px; /* Medium content (articles, detail pages) */ --content-medium: 720px; /* Wide content (dashboards, listings) */ --content-wide: 1200px; /* Full content (max width) */ --content-full: var(--container-max); } /* ========================================================================== MEDIA QUERY REFERENCE Copy these for use in your stylesheets ========================================================================== Mobile first (min-width): -------------------------- @media (min-width: 640px) { } sm - Small devices @media (min-width: 768px) { } md - Medium devices @media (min-width: 1024px) { } lg - Large devices @media (min-width: 1280px) { } xl - Extra large devices @media (min-width: 1536px) { } 2xl - 2X large devices Desktop first (max-width): -------------------------- @media (max-width: 1535px) { } Below 2xl @media (max-width: 1279px) { } Below xl @media (max-width: 1023px) { } Below lg @media (max-width: 767px) { } Below md @media (max-width: 639px) { } Below sm (mobile only) Legacy breakpoint (existing in codebase): ----------------------------------------- @media (max-width: 800px) { } Mobile breakpoint */ /* --- ./_animations.css --- */ /** * Design System - Animation Tokens * * This file defines all animation-related tokens for the Collabstr design system. */ :root { /* ========================================================================== DURATION ========================================================================== */ --duration-0: 0ms; --duration-75: 75ms; --duration-100: 100ms; --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-500: 500ms; --duration-700: 700ms; --duration-1000: 1000ms; /* Semantic durations */ --duration-instant: var(--duration-75); --duration-fast: var(--duration-150); --duration-normal: var(--duration-300); --duration-slow: var(--duration-500); --duration-slower: var(--duration-700); /* ========================================================================== EASING FUNCTIONS ========================================================================== */ /* Linear */ --ease-linear: linear; /* Standard easing */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Emphasized easing (more dramatic) */ --ease-in-emphasized: cubic-bezier(0.3, 0, 0.8, 0.15); --ease-out-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-in-out-emphasized: cubic-bezier(0.83, 0, 0.17, 1); /* Bounce/Spring */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Default (matches existing transition-duration: 0.3s in base.css) */ --ease-default: var(--ease-out); /* ========================================================================== TRANSITION PRESETS Complete transition shorthand values ========================================================================== */ /* All properties */ --transition-all-fast: all var(--duration-fast) var(--ease-out); --transition-all-normal: all var(--duration-normal) var(--ease-out); --transition-all-slow: all var(--duration-slow) var(--ease-out); /* Specific properties */ --transition-opacity: opacity var(--duration-normal) var(--ease-out); --transition-transform: transform var(--duration-normal) var(--ease-out); --transition-colors: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); --transition-shadow: box-shadow var(--duration-fast) var(--ease-out); /* Combined (common use cases) */ --transition-button: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); --transition-input: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); --transition-card: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); --transition-modal: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out-emphasized); } /* ========================================================================== KEYFRAME ANIMATIONS ========================================================================== */ /* Fade animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Slide animations */ @keyframes slideInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInUpCenter { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes slideInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* Scale animations */ @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes scaleOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } } /* Spin animation (loaders) */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Pulse animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Bounce animation */ @keyframes bounce { 0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } /* Shake animation (errors) */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } /* Shimmer animation (skeleton loading) */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Ping animation (notifications) */ @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } /* Sparkle animation (enrichment overlay) — gentle pulse + rotate */ @keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; } 50% { transform: scale(1.18) rotate(15deg); opacity: 1; } } /* Ring draw (progress ring) — animates the SVG stroke on render. --ring-circumference and --ring-offset are set inline per instance. */ @keyframes ringDraw { from { stroke-dashoffset: var(--ring-circumference); } to { stroke-dashoffset: var(--ring-offset); } } :root { /* Animation shorthand references */ --animate-fade-in: fadeIn var(--duration-normal) var(--ease-out); --animate-fade-out: fadeOut var(--duration-normal) var(--ease-out); --animate-slide-in-up: slideInUp var(--duration-normal) var(--ease-out); --animate-slide-in-up-center: slideInUpCenter var(--duration-normal) var(--ease-out); --animate-slide-in-down: slideInDown var(--duration-normal) var(--ease-out); --animate-scale-in: scaleIn var(--duration-normal) var(--ease-out); --animate-scale-out: scaleOut var(--duration-normal) var(--ease-out); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; --animate-shake: shake 0.5s ease-in-out; --animate-shimmer: shimmer 1.5s infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-sparkle: sparkle 1.6s var(--ease-in-out) infinite; } /* ========================================================================== REDUCED MOTION Respects the user's OS-level motion preference. Collapses all durations to near-zero so transitions complete instantly rather than removing them entirely, preserving state changes. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- ./_z-index.css --- */ /** * Z-Index Tokens * ============== * * Standardized z-index scale for consistent layering across the application. * Use these tokens instead of arbitrary z-index values to prevent stacking conflicts. * * Scale: * - Base (0-50): Default content, cards, relative positioning * - Dropdown (100): Dropdowns, select menus, autocomplete * - Sticky (200): Sticky headers, floating elements * - Fixed (300): Fixed navigation, sidebars * - Modal Backdrop (400): Modal overlays, dimmed backgrounds * - Modal (500): Modal dialogs, drawers * - Popover (600): Popovers, floating panels * - Tooltip (700): Tooltips, hints * - Toast (800): Toast notifications, snackbars * - Modal Top (1100): Modal sitting above legacy 1000-stack overlays * - Max (9999): Reserved for edge cases * * Usage: * .my-dropdown { z-index: var(--ds-z-dropdown); } * .my-modal { z-index: var(--ds-z-modal); } * .my-pre-expiry-modal { z-index: var(--ds-z-modal-top); } */ :root { /* ========================================================================== Z-Index Scale ========================================================================== */ /* Base level - default stacking */ --ds-z-base: 0; --ds-z-raised: 10; /* Dropdown level - menus, selects, autocomplete */ --ds-z-dropdown: 100; /* Sticky level - sticky headers, floating action buttons */ --ds-z-sticky: 200; /* Fixed level - fixed navigation, persistent sidebars */ --ds-z-fixed: 300; /* Modal backdrop - overlay behind modals */ --ds-z-modal-backdrop: 400; /* Modal level - modal dialogs, drawers, bottom sheets */ --ds-z-modal: 500; /* Popover level - popovers, floating panels, date pickers */ --ds-z-popover: 600; /* Tooltip level - tooltips, hints */ --ds-z-tooltip: 700; /* Toast level - notifications, snackbars, alerts */ --ds-z-toast: 800; /* Modal top - sits above legacy 1000-stack overlays (e.g. .footerModalOverlay) */ --ds-z-modal-top: 1100; /* Maximum level - use sparingly for edge cases */ --ds-z-max: 9999; /* ========================================================================== Legacy Aliases (for backwards compatibility) ========================================================================== */ --zIndexDropdown: var(--ds-z-dropdown); --zIndexSticky: var(--ds-z-sticky); --zIndexFixed: var(--ds-z-fixed); --zIndexModalBackdrop: var(--ds-z-modal-backdrop); --zIndexModal: var(--ds-z-modal); --zIndexPopover: var(--ds-z-popover); --zIndexTooltip: var(--ds-z-tooltip); --zIndexToast: var(--ds-z-toast); } /* ========================================================================== FOUNDATIONS Base styles and CSS reset. These establish baseline styling. ========================================================================== */ /* --- ./foundations/_index.css --- */ /** * Design System Foundations * ========================= * * Base styles and utilities that establish baseline styling. * These build upon tokens and provide foundational CSS. * * Contents: * - Reset: CSS normalization (optional, uncomment if needed) * - Base: Default element styling (headings, body text) * - Utilities: Helper classes for common patterns */ /* Optional: Uncomment if you want the full CSS reset */ /* @import './_reset.css'; */ /* --- ./_base.css --- */ /** * Design System - Base Element Styles * * Default styling for HTML elements using design tokens. * These are optional enhancements - the existing base.css handles core styles. */ /* ========================================================================== TYPOGRAPHY - HEADINGS ========================================================================== */ h1, .h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-default); } h2, .h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text-default); } h3, .h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); color: var(--color-text-default); } h4, .h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); color: var(--color-text-default); } h5, .h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-text-default); } h6, .h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-text-default); } /* ========================================================================== TYPOGRAPHY - BODY TEXT ========================================================================== */ p { color: var(--color-text-subtle); line-height: var(--line-height-relaxed); } .lead { font-size: var(--font-size-lg); color: var(--color-text-subtle); line-height: var(--line-height-relaxed); } small, .small { font-size: var(--font-size-sm); } .text-xs { font-size: var(--font-size-xs); } strong, b { font-weight: var(--font-weight-semibold); } /* ========================================================================== LINKS ========================================================================== */ a { /* color: var(--color-brand-500); */ /* text-decoration: none; */ transition: var(--transition-colors); } a:hover { /* color: var(--color-brand-600); */ } a:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; border-radius: var(--radius-xs); } /* Muted links */ .link-muted { color: var(--color-text-subtle); } .link-muted:hover { color: var(--color-text-default); } /* ========================================================================== LISTS ========================================================================== */ ul, ol { padding-left: var(--space-6); color: var(--color-text-subtle); } li { margin-bottom: var(--space-2); } li::marker { color: var(--color-neutral-400); } /* Unstyled list */ .list-none { list-style: none; padding-left: 0; } /* ========================================================================== CODE ========================================================================== */ code { font-family: var(--font-family-mono); font-size: 0.875em; background: var(--color-neutral-100); padding: var(--space-0-5) var(--space-1); border-radius: var(--radius-sm); color: var(--color-brand-600); } pre { font-family: var(--font-family-mono); font-size: var(--font-size-sm); background: var(--color-neutral-800); color: var(--color-neutral-100); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; } pre code { background: transparent; padding: 0; color: inherit; } /* ========================================================================== BLOCKQUOTE ========================================================================== */ blockquote { border-left: 4px solid var(--color-brand-500); padding-left: var(--space-4); margin-left: 0; font-style: italic; color: var(--color-text-subtle); } /* ========================================================================== HORIZONTAL RULE ========================================================================== */ hr { border: none; height: 1px; background: var(--divider-color); margin: var(--space-8) 0; } /* ========================================================================== SELECTION ========================================================================== */ /* ::selection { background: var(--color-brand-500); color: white; } */ /* ========================================================================== FOCUS STYLES ========================================================================== */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; } /* ========================================================================== GRADIENT TEXT UTILITY (matches legacy gradientText variable) ========================================================================== */ .gradient-text { background: var(--gradientText); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* --- ./_utilities.css --- */ /** * Design System - Utility Classes * * Single-purpose utility classes for common styling needs. * Use these for quick adjustments without writing custom CSS. */ /* ========================================================================== DISPLAY ========================================================================== */ .hidden { display: none !important; } .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } /* ========================================================================== FLEXBOX ========================================================================== */ .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-none { flex: none; } .flex-grow { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } /* ========================================================================== GAP ========================================================================== */ .gap-0 { gap: 0; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .gap-10 { gap: var(--space-10); } .gap-12 { gap: var(--space-12); } /* ========================================================================== MARGIN ========================================================================== */ .m-0 { margin: 0; } .m-auto { margin: auto; } .mx-auto { margin-left: auto; margin-right: auto; } /* Margin - All sides */ .m-1 { margin: var(--space-1); } .m-2 { margin: var(--space-2); } .m-3 { margin: var(--space-3); } .m-4 { margin: var(--space-4); } .m-6 { margin: var(--space-6); } .m-8 { margin: var(--space-8); } /* Margin - Top */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } /* Margin - Right */ .mr-0 { margin-right: 0; } .mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); } .mr-3 { margin-right: var(--space-3); } .mr-4 { margin-right: var(--space-4); } /* Margin - Bottom */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } /* Margin - Left */ .ml-0 { margin-left: 0; } .ml-1 { margin-left: var(--space-1); } .ml-2 { margin-left: var(--space-2); } .ml-3 { margin-left: var(--space-3); } .ml-4 { margin-left: var(--space-4); } .ml-auto { margin-left: auto; } /* ========================================================================== PADDING ========================================================================== */ .p-0 { padding: 0; } /* Padding - All sides */ .p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } /* Padding - Horizontal */ .px-1 { padding-left: var(--space-1); padding-right: var(--space-1); } .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } /* Padding - Vertical */ .py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } /* ========================================================================== WIDTH & HEIGHT ========================================================================== */ .w-full { width: 100%; } .w-screen { width: 100vw; } .w-auto { width: auto; } .w-fit { width: fit-content; } .max-w-full { max-width: 100%; } .h-full { height: 100%; } .h-screen { height: 100vh; } .h-auto { height: auto; } .min-h-screen { min-height: 100vh; } /* ========================================================================== TEXT ALIGNMENT ========================================================================== */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } /* ========================================================================== TEXT SIZE ========================================================================== */ .text-2xs { font-size: var(--font-size-2xs); } .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-base { font-size: var(--font-size-base); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-2xl { font-size: var(--font-size-2xl); } .text-3xl { font-size: var(--font-size-3xl); } .text-4xl { font-size: var(--font-size-4xl); } .text-5xl { font-size: var(--font-size-5xl); } /* ========================================================================== FONT WEIGHT ========================================================================== */ .font-light { font-weight: var(--font-weight-light); } .font-normal { font-weight: var(--font-weight-normal); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } /* ========================================================================== TEXT COLOR ========================================================================== */ .text-primary { color: var(--color-text-default); } .text-secondary { color: var(--color-text-subtle); } .text-tertiary { color: var(--color-text-subtlest); } .text-brand { color: var(--color-brand-500); } .text-success { color: var(--color-success-500); } .text-warning { color: var(--color-warning-500); } .text-error { color: var(--color-error-500); } .text-info { color: var(--color-info-500); } .text-white { color: white; } /* ========================================================================== BACKGROUND COLOR ========================================================================== */ .bg-white { background-color: white; } .bg-primary { background-color: var(--color-bg-primary); } .bg-secondary { background-color: var(--color-bg-secondary); } .bg-tertiary { background-color: var(--color-bg-tertiary); } .bg-brand { background-color: var(--color-brand-500); } .bg-brand-subtle { background-color: var(--color-bg-brand-subtle); } .bg-success { background-color: var(--color-bg-success); } .bg-warning { background-color: var(--color-bg-warning); } .bg-error { background-color: var(--color-bg-error); } .bg-info { background-color: var(--color-bg-info); } .bg-transparent { background-color: transparent; } /* ========================================================================== BORDER RADIUS ========================================================================== */ .rounded-none { border-radius: var(--radius-none); } .rounded-sm { border-radius: var(--radius-sm); } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-full { border-radius: var(--radius-full); } /* ========================================================================== SHADOWS ========================================================================== */ .shadow-none { box-shadow: var(--shadow-none); } .shadow-xs { box-shadow: var(--shadow-xs); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } .shadow-2xl { box-shadow: var(--shadow-2xl); } /* ========================================================================== OVERFLOW ========================================================================== */ .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-scroll { overflow: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } /* ========================================================================== POSITION ========================================================================== */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .static { position: static; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } /* ========================================================================== Z-INDEX ========================================================================== */ .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-auto { z-index: auto; } /* ========================================================================== CURSOR ========================================================================== */ .cursor-auto { cursor: auto; } .cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .cursor-wait { cursor: wait; } .cursor-grab { cursor: grab; } .cursor-grabbing { cursor: grabbing; } /* ========================================================================== POINTER EVENTS ========================================================================== */ .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } /* ========================================================================== USER SELECT ========================================================================== */ .select-none { user-select: none; } .select-text { user-select: text; } .select-all { user-select: all; } .select-auto { user-select: auto; } /* ========================================================================== OPACITY ========================================================================== */ .opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } /* ========================================================================== TRANSITIONS ========================================================================== */ .transition { transition: var(--transition-all-normal); } .transition-fast { transition: var(--transition-all-fast); } .transition-slow { transition: var(--transition-all-slow); } .transition-none { transition: none; } /* ========================================================================== ANIMATIONS ========================================================================== */ .animate-spin { animation: var(--animate-spin); } .animate-pulse { animation: var(--animate-pulse); } .animate-bounce { animation: var(--animate-bounce); } .animate-fade-in { animation: var(--animate-fade-in); } /* ========================================================================== TEXT UTILITIES ========================================================================== */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .whitespace-pre-wrap { white-space: pre-wrap; } .break-words { word-wrap: break-word; overflow-wrap: break-word; } .break-all { word-break: break-all; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } .underline { text-decoration: underline; } .line-through { text-decoration: line-through; } .no-underline { text-decoration: none; } /* ========================================================================== BORDERS ========================================================================== */ .border { border: var(--border-default); } .border-0 { border: none; } .border-t { border-top: var(--border-default); } .border-r { border-right: var(--border-default); } .border-b { border-bottom: var(--border-default); } .border-l { border-left: var(--border-default); } .border-subtle { border-color: var(--Gray-200); } .border-strong { border-color: var(--Gray-400); } .border-brand { border-color: var(--pink-500); } /* ========================================================================== VISIBILITY ========================================================================== */ .visible { visibility: visible; } .invisible { visibility: hidden; } /* ========================================================================== SCREEN READER ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* ========================================================================== TOOLTIP ========================================================================== */ /* tooltip */ .tooltip{ position: relative; display: flex; align-items: center; cursor: pointer; } .tooltip .tooltip-txt{ visibility: hidden; width: 230px; background-color: var(--black); color: white; font-weight: 400; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 1; top: 20px; left: -115px; font-size: 12px; box-shadow: var(--lightBoxShadow); } .tooltip:hover .tooltip-txt{ visibility: visible; } .tooltip-img{ width: 12px; height: 12px; margin-left: 4px; filter: brightness(0); opacity: 0.7; } .no-fee{ color: #00a700; } .no-fee span{ color: #B0AFAF; text-decoration: line-through; margin-right: 5px; } /* ========================================================================== LAYOUTS Grid systems, containers, and layout utilities. ========================================================================== */ /* --- ./layouts/_index.css --- */ /** * Design System Layouts * ===================== * * Layout utilities for page structure and component arrangement. * * Contents: * - Container: Width-constrained content wrappers * - Grid: CSS Grid-based layout system * - Flex: Flexbox utilities */ /* --- ./_container.css --- */ /** * Design System - Container Layout * * Content containers with max-width constraints. * Compatible with existing #content styles. */ /* ========================================================================== BASE CONTAINER ========================================================================== */ .ds-container { box-sizing: border-box; width: 100%; max-width: var(--container-max, 1600px); margin-left: auto; margin-right: auto; padding-left: var(--space-4); padding-right: var(--space-4); } /* ========================================================================== CONTAINER SIZES ========================================================================== */ .ds-container--xs { max-width: 480px; } .ds-container--sm { max-width: 640px; } .ds-container--md { max-width: 768px; } .ds-container--lg { max-width: 1024px; } .ds-container--xl { max-width: 1280px; } .ds-container--2xl { max-width: 1536px; } .ds-container--full { max-width: none; } /* ========================================================================== CONTAINER PADDING VARIANTS ========================================================================== */ .ds-container--flush { padding-left: 0; padding-right: 0; } .ds-container--tight { padding-left: var(--space-2); padding-right: var(--space-2); } .ds-container--relaxed { padding-left: var(--space-6); padding-right: var(--space-6); } .ds-container--spacious { padding-left: var(--space-8); padding-right: var(--space-8); } /* ========================================================================== RESPONSIVE CONTAINER PADDING ========================================================================== */ @media (min-width: 640px) { .ds-container { padding-left: var(--space-6); padding-right: var(--space-6); } } @media (min-width: 1024px) { .ds-container { padding-left: var(--space-8); padding-right: var(--space-8); } } /* ========================================================================== SECTION CONTAINER For full-width sections with centered content ========================================================================== */ .ds-section { width: 100%; padding-top: var(--space-section-md); padding-bottom: var(--space-section-md); } .ds-section--sm { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); } .ds-section--lg { padding-top: var(--space-section-lg); padding-bottom: var(--space-section-lg); } .ds-section--xl { padding-top: var(--space-section-xl); padding-bottom: var(--space-section-xl); } /* Section backgrounds */ .ds-section--gray { background: var(--color-bg-secondary); } .ds-section--dark { background: var(--color-neutral-800); color: white; } .ds-section--brand { background: var(--color-brand-500); color: white; } .ds-section--gradient { background: var(--gradientText); color: white; } /* ========================================================================== PAGE WRAPPER ========================================================================== */ .ds-page { display: flex; flex-direction: column; min-height: 100vh; } .ds-page__header { flex-shrink: 0; } .ds-page__main { flex: 1; } .ds-page__footer { flex-shrink: 0; } /* ========================================================================== CONTENT AREA For the main content within a page ========================================================================== */ .ds-content { padding-top: var(--space-6); padding-bottom: var(--space-12); } .ds-content--flush { padding-top: 0; padding-bottom: 0; } /* ========================================================================== PROSE / ARTICLE CONTAINER Optimized for reading long-form content ========================================================================== */ .ds-prose { max-width: 65ch; margin-left: auto; margin-right: auto; } .ds-prose > * + * { margin-top: var(--space-4); } .ds-prose > h1 + *, .ds-prose > h2 + *, .ds-prose > h3 + * { margin-top: var(--space-3); } .ds-prose > * + h1, .ds-prose > * + h2, .ds-prose > * + h3 { margin-top: var(--space-8); } /* ========================================================================== CENTERED CONTENT ========================================================================== */ .ds-center { display: flex; flex-direction: column; align-items: center; text-align: center; } .ds-center--horizontal { flex-direction: row; justify-content: center; } .ds-center--both { justify-content: center; } /* --- ./_grid.css --- */ /** * Design System - Grid Layout * * CSS Grid utilities for page layouts. */ /* ========================================================================== GRID CONTAINER ========================================================================== */ .ds-grid { display: grid; gap: var(--space-4); } /* ========================================================================== GRID COLUMNS ========================================================================== */ .ds-grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .ds-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ds-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ds-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ds-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ds-grid--cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* Auto-fill columns */ .ds-grid--auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .ds-grid--auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } /* Custom min widths for auto-fill */ .ds-grid--auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .ds-grid--auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .ds-grid--auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } /* ========================================================================== GRID GAP ========================================================================== */ .ds-grid--gap-0 { gap: 0; } .ds-grid--gap-1 { gap: var(--space-1); } .ds-grid--gap-2 { gap: var(--space-2); } .ds-grid--gap-3 { gap: var(--space-3); } .ds-grid--gap-4 { gap: var(--space-4); } .ds-grid--gap-5 { gap: var(--space-5); } .ds-grid--gap-6 { gap: var(--space-6); } .ds-grid--gap-8 { gap: var(--space-8); } .ds-grid--gap-10 { gap: var(--space-10); } .ds-grid--gap-12 { gap: var(--space-12); } /* Separate row/column gaps */ .ds-grid--gap-x-4 { column-gap: var(--space-4); } .ds-grid--gap-x-6 { column-gap: var(--space-6); } .ds-grid--gap-x-8 { column-gap: var(--space-8); } .ds-grid--gap-y-4 { row-gap: var(--space-4); } .ds-grid--gap-y-6 { row-gap: var(--space-6); } .ds-grid--gap-y-8 { row-gap: var(--space-8); } /* ========================================================================== GRID ITEM SPAN ========================================================================== */ .ds-col-span-1 { grid-column: span 1 / span 1; } .ds-col-span-2 { grid-column: span 2 / span 2; } .ds-col-span-3 { grid-column: span 3 / span 3; } .ds-col-span-4 { grid-column: span 4 / span 4; } .ds-col-span-5 { grid-column: span 5 / span 5; } .ds-col-span-6 { grid-column: span 6 / span 6; } .ds-col-span-full { grid-column: 1 / -1; } .ds-row-span-1 { grid-row: span 1 / span 1; } .ds-row-span-2 { grid-row: span 2 / span 2; } .ds-row-span-3 { grid-row: span 3 / span 3; } .ds-row-span-full { grid-row: 1 / -1; } /* ========================================================================== GRID ALIGNMENT ========================================================================== */ /* Align items */ .ds-grid--items-start { align-items: start; } .ds-grid--items-center { align-items: center; } .ds-grid--items-end { align-items: end; } .ds-grid--items-stretch { align-items: stretch; } /* Justify items */ .ds-grid--justify-start { justify-items: start; } .ds-grid--justify-center { justify-items: center; } .ds-grid--justify-end { justify-items: end; } .ds-grid--justify-stretch { justify-items: stretch; } /* Place items (shorthand) */ .ds-grid--place-center { place-items: center; } /* ========================================================================== RESPONSIVE GRID ========================================================================== */ /* Medium screens and up (768px) */ @media (min-width: 768px) { .md\:ds-grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .md\:ds-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:ds-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:ds-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:ds-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .md\:ds-col-span-1 { grid-column: span 1 / span 1; } .md\:ds-col-span-2 { grid-column: span 2 / span 2; } .md\:ds-col-span-3 { grid-column: span 3 / span 3; } .md\:ds-col-span-4 { grid-column: span 4 / span 4; } } /* Large screens and up (1024px) */ @media (min-width: 1024px) { .lg\:ds-grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .lg\:ds-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:ds-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:ds-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:ds-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:ds-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:ds-col-span-1 { grid-column: span 1 / span 1; } .lg\:ds-col-span-2 { grid-column: span 2 / span 2; } .lg\:ds-col-span-3 { grid-column: span 3 / span 3; } .lg\:ds-col-span-4 { grid-column: span 4 / span 4; } } /* Extra large screens (1280px) */ @media (min-width: 1280px) { .xl\:ds-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .xl\:ds-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .xl\:ds-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ========================================================================== COMMON GRID LAYOUTS ========================================================================== */ /* Sidebar layout */ .ds-grid--sidebar { grid-template-columns: 280px 1fr; } .ds-grid--sidebar-right { grid-template-columns: 1fr 280px; } @media (max-width: 1023px) { .ds-grid--sidebar, .ds-grid--sidebar-right { grid-template-columns: 1fr; } } /* Holy grail layout */ .ds-grid--holy-grail { grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; } /* Dashboard layout */ .ds-grid--dashboard { grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; } @media (max-width: 1023px) { .ds-grid--dashboard { grid-template-columns: 1fr; } } /* --- ./_flex.css --- */ /** * Design System - Flexbox Utilities * * Flexbox-based layout utilities for common patterns. */ /* ========================================================================== FLEX CONTAINER ========================================================================== */ .ds-flex { display: flex; } .ds-inline-flex { display: inline-flex; } /* ========================================================================== FLEX DIRECTION ========================================================================== */ .ds-flex--row { flex-direction: row; } .ds-flex--row-reverse { flex-direction: row-reverse; } .ds-flex--col { flex-direction: column; } .ds-flex--col-reverse { flex-direction: column-reverse; } /* ========================================================================== FLEX WRAP ========================================================================== */ .ds-flex--wrap { flex-wrap: wrap; } .ds-flex--nowrap { flex-wrap: nowrap; } .ds-flex--wrap-reverse { flex-wrap: wrap-reverse; } /* ========================================================================== JUSTIFY CONTENT ========================================================================== */ .ds-flex--justify-start { justify-content: flex-start; } .ds-flex--justify-center { justify-content: center; } .ds-flex--justify-end { justify-content: flex-end; } .ds-flex--justify-between { justify-content: space-between; } .ds-flex--justify-around { justify-content: space-around; } .ds-flex--justify-evenly { justify-content: space-evenly; } /* ========================================================================== ALIGN ITEMS ========================================================================== */ .ds-flex--items-start { align-items: flex-start; } .ds-flex--items-center { align-items: center; } .ds-flex--items-end { align-items: flex-end; } .ds-flex--items-stretch { align-items: stretch; } .ds-flex--items-baseline { align-items: baseline; } /* ========================================================================== ALIGN CONTENT ========================================================================== */ .ds-flex--content-start { align-content: flex-start; } .ds-flex--content-center { align-content: center; } .ds-flex--content-end { align-content: flex-end; } .ds-flex--content-between { align-content: space-between; } .ds-flex--content-around { align-content: space-around; } /* ========================================================================== GAP ========================================================================== */ .ds-flex--gap-0 { gap: 0; } .ds-flex--gap-1 { gap: var(--space-1); } .ds-flex--gap-2 { gap: var(--space-2); } .ds-flex--gap-3 { gap: var(--space-3); } .ds-flex--gap-4 { gap: var(--space-4); } .ds-flex--gap-5 { gap: var(--space-5); } .ds-flex--gap-6 { gap: var(--space-6); } .ds-flex--gap-8 { gap: var(--space-8); } .ds-flex--gap-10 { gap: var(--space-10); } .ds-flex--gap-12 { gap: var(--space-12); } /* ========================================================================== FLEX ITEM PROPERTIES ========================================================================== */ .ds-flex-1 { flex: 1 1 0%; } .ds-flex-auto { flex: 1 1 auto; } .ds-flex-initial { flex: 0 1 auto; } .ds-flex-none { flex: none; } .ds-flex-grow { flex-grow: 1; } .ds-flex-grow-0 { flex-grow: 0; } .ds-flex-shrink { flex-shrink: 1; } .ds-flex-shrink-0 { flex-shrink: 0; } /* ========================================================================== SELF ALIGNMENT ========================================================================== */ .ds-self-auto { align-self: auto; } .ds-self-start { align-self: flex-start; } .ds-self-center { align-self: center; } .ds-self-end { align-self: flex-end; } .ds-self-stretch { align-self: stretch; } /* ========================================================================== ORDER ========================================================================== */ .ds-order-first { order: -9999; } .ds-order-last { order: 9999; } .ds-order-none { order: 0; } .ds-order-1 { order: 1; } .ds-order-2 { order: 2; } .ds-order-3 { order: 3; } /* ========================================================================== RESPONSIVE FLEX ========================================================================== */ @media (min-width: 768px) { .md\:ds-flex--row { flex-direction: row; } .md\:ds-flex--col { flex-direction: column; } .md\:ds-flex--justify-start { justify-content: flex-start; } .md\:ds-flex--justify-between { justify-content: space-between; } .md\:ds-flex--items-center { align-items: center; } .md\:ds-flex--gap-4 { gap: var(--space-4); } .md\:ds-flex--gap-6 { gap: var(--space-6); } } @media (min-width: 1024px) { .lg\:ds-flex--row { flex-direction: row; } .lg\:ds-flex--col { flex-direction: column; } .lg\:ds-flex--justify-between { justify-content: space-between; } .lg\:ds-flex--gap-8 { gap: var(--space-8); } } /* ========================================================================== COMMON FLEX PATTERNS ========================================================================== */ /* Stack - Vertical flex with gap */ .ds-stack { display: flex; flex-direction: column; gap: var(--space-4); } .ds-stack--xs { gap: var(--space-1); } .ds-stack--sm { gap: var(--space-2); } .ds-stack--md { gap: var(--space-4); } .ds-stack--lg { gap: var(--space-6); } .ds-stack--xl { gap: var(--space-8); } /* Cluster - Horizontal flex with wrap */ .ds-cluster { display: flex; flex-wrap: wrap; gap: var(--space-4); } .ds-cluster--xs { gap: var(--space-1); } .ds-cluster--sm { gap: var(--space-2); } .ds-cluster--md { gap: var(--space-4); } .ds-cluster--lg { gap: var(--space-6); } /* Split - Two elements pushed to opposite ends */ .ds-split { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } /* Center - Perfectly centered content */ .ds-flex-center { display: flex; justify-content: center; align-items: center; } /* Inline - Horizontal inline elements with gap */ .ds-inline { display: flex; align-items: center; gap: var(--space-2); } .ds-inline--xs { gap: var(--space-1); } .ds-inline--sm { gap: var(--space-2); } .ds-inline--md { gap: var(--space-3); } .ds-inline--lg { gap: var(--space-4); } /* ========================================================================== SPACER Flexible spacer for pushing elements ========================================================================== */ .ds-spacer { flex: 1 1 auto; } .ds-spacer--fixed-sm { flex: 0 0 var(--space-4); } .ds-spacer--fixed-md { flex: 0 0 var(--space-8); } .ds-spacer--fixed-lg { flex: 0 0 var(--space-12); } /* ========================================================================== COMPONENTS Reusable UI components. ========================================================================== */ /* --- ./components/_index.css --- */ /** * Design System Components * ======================== * * Reusable UI components built with design tokens. * Each component is self-contained and follows the ds- naming convention. * * Components: * - Buttons: Primary actions, secondary actions, ghost buttons * - Inputs: Text fields, textareas, selects, checkboxes * - Cards: Content containers with variants * - Badges: Status indicators, labels * - Tags: Compact category/filter chips (removable) * - Alerts: Feedback messages (success, error, warning, info) * - Modals: Dialog overlays * - Avatars: User profile images with status indicators * - Loaders: Spinners, skeletons, progress bars * - Tables: Data display * - Navigation: Breadcrumbs, pagination, steps * - Tabs: View-switching tab bars (underline, pills, enclosed) * - Disclosure: Accordions, collapsible sections * - Dividers: Horizontal/vertical separators * - Dropdowns: Contextual action menus * - Tooltips: Hover/focus informational overlays * - Popovers: Rich contextual overlays with interactive content */ /* Buttons */ /* --- ./buttons/_button.css --- */ /** * Design System - Button Component * * A flexible button component with multiple variants, sizes, and states. * Backwards compatible with existing .btn class in base.css. */ /* ========================================================================== BASE BUTTON Extends the existing .btn class from base.css ========================================================================== */ .ds-btn[hidden] { display: none; } .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; padding: var(--space-3) var(--space-6); font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.25; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; border: var(--border-width-1) solid transparent; border-radius: var(--radius-md); cursor: pointer; user-select: none; transition: var(--transition-button); } .ds-btn:hover { transform: scale(1.03); } .ds-btn:active { transform: scale(0.98); } .ds-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring-brand); } .ds-btn:disabled, .ds-btn--disabled { cursor: not-allowed; pointer-events: none; } /* ========================================================================== VARIANTS ========================================================================== */ /* Primary - Main call to action */ .ds-btn--primary { background: var(--bw-black); color: white; box-shadow: var(--shadow-sm); } .ds-btn--primary:hover { background: var(--gray-700); box-shadow: var(--shadow-md); } .ds-btn--primary:active { background: var(--gray-900); box-shadow: var(--shadow-xs); } /* Brand - High-emphasis marketing action */ .ds-btn--brand { background: var(--color-brand-600); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); } .ds-btn--brand:hover { background: var(--color-brand-500); box-shadow: var(--shadow-md); } .ds-btn--brand:active { background: var(--color-brand-600); box-shadow: var(--shadow-xs); } /* Secondary - Less prominent action */ .ds-btn--secondary { background: var(--btn-secondary); color: var(--bw-black); border-color: var(--color-border-default); } .ds-btn--secondary:hover { background: var(--gray-200); border: var(--border-width-1) solid #333; } .ds-btn--secondary:active { background: var(--gray-200); border-color: #333; } /* Ghost - Minimal visual weight */ .ds-btn--ghost { background: transparent; color: var(--color-text-subtle); } .ds-btn--ghost:hover { background: var(--color-neutral-100); color: var(--color-text-default); } .ds-btn--ghost:active { background: var(--color-neutral-200); } /* Outline Brand - Outlined with brand color */ .ds-btn--outline-brand { background: transparent; border-color: var(--color-brand-500); color: var(--color-brand-500); } .ds-btn--outline-brand:hover { background: var(--color-bg-brand-subtle); } .ds-btn--outline-brand:active { background: var(--color-brand-100); } /* Danger - Destructive actions */ .ds-btn--danger { background: var(--color-error-500); color: white; } .ds-btn--danger:hover { background: var(--color-error-600); } .ds-btn--danger:active { background: var(--color-error-700); } .ds-btn--danger:focus-visible { box-shadow: var(--shadow-focus-ring-error); } /* Danger Outline */ .ds-btn--danger-outline { background: transparent; color: var(--color-error-500); border-color: var(--color-error-500); } .ds-btn--danger-outline:hover { background: var(--color-error-50); } /* Success */ .ds-btn--success { background: var(--color-success-500); color: white; } .ds-btn--success:hover { background: var(--color-success-600); } /* Inverse - for use on dark backgrounds */ .ds-btn--inverse { background: var(--bw-white); color: var(--bw-black); border-color: transparent; } .ds-btn--inverse:hover { background: var(--gray-100); } .ds-btn--inverse:active { background: var(--gray-200); } .ds-btn--inverse-outline { background: transparent; color: var(--bw-white); border-color: rgba(255, 255, 255, 0.4); } .ds-btn--inverse-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); } .ds-btn--inverse-ghost { background: transparent; color: var(--bw-white); border-color: transparent; } .ds-btn--inverse-ghost:hover { background: rgba(255, 255, 255, 0.1); } /* Link style */ .ds-btn--link { background: transparent; color: var(--color-brand-500); padding-left: 0; padding-right: 0; border-radius: 0; text-decoration: underline; } .ds-btn--link:hover { text-decoration: underline; } /* Blue link: for link buttons that should read as a neutral action rather than a brand one (e.g. revealing an optional field mid-checkout). */ .ds-btn--link.ds-btn--link-blue { color: var(--color-info-900); } /* ========================================================================== SIZES ========================================================================== */ .ds-btn--xs { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); gap: var(--space-1); } .ds-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); } /* Default size is already defined in .ds-btn */ .ds-btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--font-size-base); } .ds-btn--xl { padding: var(--space-5) var(--space-10); font-size: var(--font-size-lg); } /* ========================================================================== STATES ========================================================================== */ /* Disabled */ .ds-btn:disabled, .ds-btn--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } /* Loading */ .ds-btn--loading { position: relative; color: transparent !important; pointer-events: none; } .ds-btn--loading::after { content: ''; position: absolute; width: var(--size-4); height: var(--size-4); border: var(--border-width-2) solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); animation: var(--animate-spin); } .ds-btn--loading.ds-btn--primary::after, .ds-btn--loading.ds-btn--danger::after, .ds-btn--loading.ds-btn--success::after { border-color: white; border-right-color: transparent; } /* ========================================================================== WIDTHS ========================================================================== */ .ds-btn--full { width: 100%; } .ds-btn--auto { width: auto; } /* ========================================================================== ICON BUTTONS ========================================================================== */ .ds-btn--icon { padding: var(--space-3); aspect-ratio: 1; } .ds-btn--icon.ds-btn--xs { padding: var(--space-1-5); } .ds-btn--icon.ds-btn--sm { padding: var(--space-2); } .ds-btn--icon.ds-btn--lg { padding: var(--space-4); } /* ========================================================================== BUTTON ELEMENTS ========================================================================== */ .ds-btn__icon { flex-shrink: 0; width: 1em; height: 1em; } .ds-btn__icon--left { margin-right: var(--space-1); } .ds-btn__icon--right { margin-left: var(--space-1); } /* ========================================================================== BUTTON GROUP ========================================================================== */ .ds-btn-group { display: inline-flex; } .ds-btn-group > .ds-btn { border-radius: 0; } .ds-btn-group > .ds-btn:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .ds-btn-group > .ds-btn:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .ds-btn-group > .ds-btn:not(:first-child) { margin-left: -1px; } .ds-btn-group > .ds-btn:hover, .ds-btn-group > .ds-btn:focus { z-index: 1; } /* Form Elements */ /* --- ./inputs/_input.css --- */ /** * Design System - Form Input Components * * Form controls including text inputs, textareas, selects, checkboxes, and radios. * Backwards compatible with existing .input and .textarea classes. */ /* ========================================================================== FORM FIELD WRAPPER ========================================================================== */ .ds-form-field { margin-bottom: var(--space-4); } .ds-form-field--inline { display: flex; align-items: center; gap: var(--space-3); } /* Label plus a trailing control (a clear or remove affordance) on one row. Owns the label's bottom margin so the label text and the control stay vertically centred. */ .ds-form-field__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); } .ds-form-field__header .ds-label { margin-bottom: 0; } /* ========================================================================== LABELS ========================================================================== */ .ds-label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-default); margin-bottom: var(--space-2); } .ds-label--required::after { content: ' *'; color: var(--color-error-500); } /* Inline "(Optional)" qualifier: sits on the label's own row, de-emphasised. */ .ds-label__optional { font-weight: var(--font-weight-normal); color: var(--color-text-subtlest); } /* ========================================================================== TEXT INPUT ========================================================================== */ .ds-input { display: block; width: stretch; padding: var(--space-3) var(--space-4); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.5; color: var(--input-color); background-color: var(--input-bg); border: var(--border-width-2) solid var(--input-border); border-radius: var(--radius-md); transition: var(--transition-input); appearance: none; } .ds-input::placeholder { color: var(--color-text-placeholder); } .ds-input:hover:not(:disabled):not(:focus) { border-color: var(--color-border-strong); } .ds-input:focus { outline: none; border-color: var(--color-border-strong); } .ds-input:disabled { background-color: var(--color-neutral-100); color: var(--color-text-disabled); cursor: not-allowed; } /* Input Sizes */ .ds-input--sm { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); } .ds-input--lg { padding: var(--space-4) var(--space-5); font-size: var(--font-size-lg); } /* Input States */ .ds-input--error { border-color: var(--color-error-500); } .ds-input--error:focus { border-color: var(--color-error-500); } .ds-input--success { border-color: var(--input-border-success); } /* Loading — inline spinner on the right (e.g. resolving a public profile). Wrap the input in .ds-input-loading-wrap so the spinner can be positioned. */ .ds-input-loading-wrap { position: relative; display: block; } .ds-input--loading { padding-right: var(--space-10); } .ds-input-loading-wrap__spinner { position: absolute; top: 0; bottom: 0; right: var(--space-3); margin-block: auto; width: var(--size-4); height: var(--size-4); border: var(--border-width-2) solid var(--color-neutral-200); border-top-color: var(--color-brand-500); border-radius: var(--radius-full); animation: var(--animate-spin); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .ds-input-loading-wrap__spinner { animation: none; } } /* ========================================================================== TEXTAREA ========================================================================== */ .ds-textarea { display: block; width: stretch; min-height: 120px; padding: var(--space-3) var(--space-4); font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.5; color: var(--color-text-default); background-color: white; border: var(--border-width-1) solid var(--color-border-default); border-radius: var(--radius-md); resize: vertical; transition: var(--transition-input); } .ds-textarea::placeholder { color: var(--color-text-placeholder); } .ds-textarea:focus { outline: none; border-color: var(--color-border-strong); } .ds-textarea:disabled { background-color: var(--color-neutral-100); cursor: not-allowed; } .ds-textarea--error { border-color: var(--color-error-500); } /* ========================================================================== SELECT ========================================================================== */ .ds-select { display: block; width: 100%; padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4); font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.5; color: var(--color-text-default); background-color: white; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; background-size: 16px; border: var(--border-width-1) solid var(--color-border-default); border-radius: var(--radius-md); cursor: pointer; appearance: none; color-scheme: light; transition: var(--transition-input); } .ds-select:focus { outline: none; border-color: var(--color-border-strong); } .ds-select:disabled { background-color: var(--color-neutral-100); cursor: not-allowed; } .ds-select option { background-color: var(--color-bg-primary); color: var(--color-text-default); padding: var(--space-2) var(--space-3); } .ds-select option:checked { background-color: var(--color-neutral-100); color: var(--color-text-default); } .ds-select--error { border-color: var(--color-error-500); } /* ========================================================================== SELECT — MENU VARIANT (custom combobox) Opt-in alternative to the native */ .ds-range { -webkit-appearance: none; appearance: none; width: 100%; height: var(--space-0-5); border-radius: var(--radius-full); background: linear-gradient( to right, var(--color-text-default) var(--ds-range-fill, 0%), var(--color-border-default) var(--ds-range-fill, 0%) ); outline: none; } .ds-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-full); background: var(--color-text-default); cursor: pointer; } .ds-range::-moz-range-thumb { width: var(--space-4); height: var(--space-4); border: none; border-radius: var(--radius-full); background: var(--color-text-default); cursor: pointer; } .ds-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-focus-ring-brand); } .ds-range:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-focus-ring-brand); } .ds-range__label { display: block; margin-bottom: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-subtlest); } /* --- ./checklist/_checklist.css --- */ .ds-checklist { display: flex; flex-direction: column; gap: var(--space-1); } .ds-checklist.is-disabled { opacity: 0.5; pointer-events: none; } .ds-checklist__items { display: flex; flex-direction: column; gap: var(--space-1); max-height: 220px; margin-top: var(--space-2); overflow-y: auto; } .ds-checklist__row-label { display: inline-flex; align-items: center; gap: var(--space-2); } .ds-checklist__row { padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-out); } .ds-checklist__row:hover { background: var(--color-interactive-hover); } .ds-checklist__row--hidden { display: none; } /* Member cell: avatar + two-line name/email, no separate email column. Shared by the team table and any checklist that picks people (e.g. workspace access). */ .ds-team-member-cell { display: flex; align-items: center; gap: var(--space-3); } .ds-team-member-cell__name { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-text-default); } .ds-team-member-cell__email { font-size: var(--font-size-xs); color: var(--color-text-subtle); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .ds-checklist__footnote { margin: var(--space-2) 0 0; font-size: var(--font-size-xs); color: var(--color-text-subtlest); } .ds-checklist__empty { padding: var(--space-2) 0; font-size: var(--font-size-sm); color: var(--color-text-subtle); } /* --- ./required-pointer/_required-pointer.css --- */ /** * Design System - Required Pointer Component * * Inline "Required" marker placed inside a field label and revealed when a * submit attempt finds that field empty. Toggle the `hidden` attribute via JS. */ .ds-required-pointer { display: inline-flex; align-items: center; gap: var(--space-1-5); margin-left: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-warning-600); vertical-align: middle; } .ds-required-pointer[hidden] { display: none; } /* The tag outline is 16x11, so it carries its own size - matching the campaign builder's marker. */ .ds-required-pointer__icon { flex-shrink: 0; } /* Content Containers */ /* --- ./cards/_card.css --- */ /** * Design System - Card Component * * Flexible card component for displaying content in contained boxes. */ /* ========================================================================== BASE CARD ========================================================================== */ .ds-card { position: relative; display: flex; flex-direction: column; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: var(--transition-card); } /* ========================================================================== CARD VARIANTS ========================================================================== */ /* Outlined - No shadow, just border */ .ds-card--outlined { box-shadow: none; border: var(--border-default); } /* Flat - No shadow or border */ .ds-card--flat { box-shadow: none; background: var(--color-bg-secondary); } /* Elevated - More pronounced shadow */ .ds-card--elevated { box-shadow: var(--shadow-lg); } /* Interactive - Hoverable */ .ds-card--interactive { cursor: pointer; } .ds-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .ds-card--interactive:active { transform: translateY(0); } /* Featured - Brand accent */ .ds-card--featured { border-top: 3px solid var(--color-brand-500); } /* ========================================================================== CARD SECTIONS ========================================================================== */ .ds-card__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: var(--border-subtle); } .ds-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin: 0; } .ds-card__subtitle { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin-top: var(--space-1); } .ds-card__actions { display: flex; align-items: center; gap: var(--space-2); } .ds-card__body { flex: 1; padding: var(--space-6); } .ds-card__body--compact { padding: var(--space-4); } .ds-card__body--flush { padding: 0; } .ds-card__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-top: var(--border-subtle); background: var(--color-bg-secondary); } .ds-card__footer--centered { justify-content: center; } /* ========================================================================== CARD MEDIA ========================================================================== */ .ds-card__media { position: relative; overflow: hidden; } .ds-card__media img, .ds-card__media video { width: 100%; height: auto; display: block; } .ds-card__media--top { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .ds-card__media--cover { aspect-ratio: 16 / 9; } .ds-card__media--cover img { width: 100%; height: 100%; object-fit: cover; } .ds-card__media--square { aspect-ratio: 1; } .ds-card__media-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-4); color: white; } /* ========================================================================== CARD SIZES ========================================================================== */ .ds-card--sm .ds-card__header, .ds-card--sm .ds-card__footer { padding: var(--space-3) var(--space-4); } .ds-card--sm .ds-card__body { padding: var(--space-4); } .ds-card--lg .ds-card__header, .ds-card--lg .ds-card__footer { padding: var(--space-6) var(--space-8); } .ds-card--lg .ds-card__body { padding: var(--space-8); } /* ========================================================================== CARD GRID ========================================================================== */ .ds-card-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .ds-card-grid--2 { grid-template-columns: repeat(2, 1fr); } .ds-card-grid--3 { grid-template-columns: repeat(3, 1fr); } .ds-card-grid--4 { grid-template-columns: repeat(4, 1fr); } .ds-card-grid--list { display: flex; flex-direction: column; gap: var(--space-2-5); } @media (max-width: 768px) { .ds-card-grid--2, .ds-card-grid--3, .ds-card-grid--4 { grid-template-columns: 1fr; } } /* ========================================================================== STAT CARD (for metrics/stats) ========================================================================== */ .ds-stat-card { padding: var(--space-6); background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .ds-stat-card__label { font-size: var(--font-size-sm); color: var(--color-text-subtlest); margin-bottom: var(--space-1); } .ds-stat-card__value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-default); } .ds-stat-card__change { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); margin-top: var(--space-2); } .ds-stat-card__change--up { color: var(--color-success-500); } .ds-stat-card__change--down { color: var(--color-error-500); } /* ========================================================================== LINK SPANNER (clickable card overlay) Compatible with existing .link-spanner class ========================================================================== */ .ds-card__link { position: absolute; inset: 0; z-index: 1; } /* Ensure interactive elements above the link */ .ds-card__actions, .ds-card [role="button"], .ds-card button, .ds-card a:not(.ds-card__link) { position: relative; z-index: 2; } /* ========================================================================== LOCKED VARIANT (creator onboarding achievement cards) A muted, outlined achievement card showing a Locked badge and a "To unlock…" criteria row in the footer. ========================================================================== */ .ds-card--locked { box-shadow: none; border: var(--border-default); background: var(--locked-card-bg); } /* Muted body content so the card reads as not-yet-earned */ .ds-card--locked .ds-card__title { color: var(--color-text-subtle); } .ds-card--locked .ds-card__body { color: var(--color-text-subtlest); } /* Footer unlock-criteria row: lock icon + "To unlock…" text */ .ds-card__unlock { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--locked-card-unlock-bg); border-radius: var(--radius-md); font-size: var(--font-size-xs); color: var(--locked-card-unlock-color); line-height: var(--line-height-normal); } .ds-card__unlock-icon { width: var(--size-4); height: var(--size-4); flex-shrink: 0; color: var(--locked-card-unlock-color); } .ds-card__unlock-icon svg { width: 100%; height: 100%; } /* ========================================================================== CREATOR CARD (creator match rows) ========================================================================== */ .ds-card--creator { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3-5); border: var(--border-width-1) solid var(--creator-card-border); border-radius: var(--radius-lg); background: var(--creator-card-bg); box-shadow: none; cursor: pointer; color: inherit; text-decoration: none; transition: var(--transition-colors); } .ds-card--creator:hover { background: var(--creator-card-bg-hover); } .ds-card__creator-media { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--space-18); height: var(--space-24); overflow: hidden; border-radius: var(--radius-md); background: var(--creator-card-media-bg); color: var(--creator-card-media-icon); } .ds-card__creator-media img { width: 100%; height: 100%; object-fit: cover; } .ds-card__creator-media svg { width: var(--size-8); height: var(--size-8); } .ds-card__creator-info { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; } .ds-card__creator-header { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--creator-card-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-card__creator-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--creator-card-text); } .ds-card__creator-location { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: var(--font-size-xs); color: var(--creator-card-text-muted); white-space: nowrap; } .ds-card__creator-location svg { flex-shrink: 0; width: var(--size-3); height: var(--size-3); } .ds-card__creator-platforms { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); min-width: 0; } .ds-card__creator-platform { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--creator-card-text-muted); white-space: nowrap; } .ds-card__creator-platform svg { flex-shrink: 0; width: var(--size-3); height: var(--size-3); } .ds-card__creator-badges { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .ds-card__creator-aside { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--space-8); flex-shrink: 0; } .ds-card__creator-pricing, .ds-card__creator-price-label { font-size: var(--font-size-xs); color: var(--creator-card-text-muted); white-space: nowrap; } .ds-card__creator-price { font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); color: var(--creator-card-text); white-space: nowrap; } .ds-card__creator-hire { display: inline-block; padding: var(--space-2) var(--space-4); border: var(--border-width-1) solid var(--creator-card-hire-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--creator-card-hire-text); background: var(--creator-card-hire-bg); white-space: nowrap; transition: var(--transition-colors); } .ds-card--creator:hover .ds-card__creator-hire { background: var(--creator-card-hire-bg-hover); color: var(--creator-card-hire-text-hover); } @media (max-width: 768px) { .ds-card--creator { flex-wrap: wrap; align-items: flex-start; } .ds-card__creator-location { display: block; overflow: hidden; text-overflow: ellipsis; } .ds-card__creator-location svg { vertical-align: text-bottom; } .ds-card__creator-platforms { gap: var(--space-1) var(--space-2); } .ds-card__creator-aside { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; } } /* ========================================================================== PAST CREATOR CARD (rehire surfaces) A ds-card--creator stacked for a narrow rail: avatar + details on top, the surface's CTA buttons on their own row underneath. Not a link -- the name is, and the buttons act -- so it gets no cursor or hover affordance of its own beyond a row tint. ========================================================================== */ .ds-card--creator-past { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); border: none; border-bottom: var(--border-width-1) solid var(--creator-past-card-border); border-radius: var(--radius-none); cursor: default; } .ds-card--creator-past:hover { background: var(--creator-past-card-bg-hover); } .ds-card--creator-past:last-child { border-bottom: none; } .ds-card--creator-past .ds-card__creator-past-main { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; } .ds-card--creator-past .ds-card__creator-media { width: var(--size-12); height: var(--size-12); border-radius: var(--radius-full); } .ds-card--creator-past .ds-card__creator-info { gap: var(--space-1); } .ds-card--creator-past .ds-card__creator-header, .ds-card--creator-tile .ds-card__creator-header { display: flex; align-items: center; gap: var(--space-1-5); } .ds-card--creator-past .ds-card__creator-name, .ds-card--creator-tile .ds-card__creator-name { overflow: hidden; text-overflow: ellipsis; color: var(--creator-card-text); text-decoration: none; } .ds-card--creator-past .ds-card__creator-name:hover, .ds-card--creator-tile .ds-card__creator-name:hover { text-decoration: underline; } .ds-card--creator-past .ds-card__creator-rating, .ds-card--creator-tile .ds-card__creator-rating { display: flex; align-items: center; gap: var(--space-px); color: var(--creator-past-card-star); } .ds-card--creator-past .ds-card__creator-star svg, .ds-card--creator-tile .ds-card__creator-star svg { display: block; width: var(--size-3); height: var(--size-3); fill: currentColor; stroke: currentColor; } .ds-card--creator-past .ds-card__creator-star--empty, .ds-card--creator-tile .ds-card__creator-star--empty { color: var(--creator-past-card-star-empty); } .ds-card--creator-past .ds-card__creator-meta, .ds-card--creator-tile .ds-card__creator-meta { font-size: var(--font-size-xs); line-height: var(--line-height-snug); color: var(--creator-card-text-muted); overflow: hidden; text-overflow: ellipsis; } .ds-card--creator-past .ds-card__creator-actions, .ds-card--creator-tile .ds-card__creator-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .ds-card--creator-past .ds-card__creator-actions .ds-btn, .ds-card--creator-tile .ds-card__creator-actions .ds-btn { flex: 1 1 auto; padding-left: var(--space-2); padding-right: var(--space-2); } /* ========================================================================== PAST CREATOR TILE (brand home row) The same markup as ds-card--creator-past, laid out like the Explore listing tiles beneath it (COL-2663 mockup): no card chrome, a rounded 3/4 photo with the name and rating overlaid on a bottom scrim, then the package line and a stacked column of CTAs. ========================================================================== */ .ds-card--creator-tile { flex-direction: column; align-items: stretch; /* A floor, not the whole gap: .ds-card__creator-actions' margin-top:auto still pushes it to the bottom of the tile, but every row shares one stretched height (align-items: stretch on the rail), so the tallest tile's auto margin can otherwise collapse to 0 -- wrapping a long meta line onto a second row would then butt straight into the buttons below it. */ gap: var(--space-2); padding: 0; border: none; border-radius: var(--radius-none); background: transparent; /* Nothing to clip on a chrome-less tile, and .ds-card's overflow: hidden would cut the label's tooltip wherever it cannot be promoted to the top layer. */ overflow: visible; cursor: default; } .ds-card--creator-tile:hover { background: transparent; } /* One grid instead of a forked partial: the info block dissolves into it so the header and rating land on the photo's bottom rows while the meta line stays below. The fixed row before the meta is the overlay's bottom inset, so it holds whether or not a rating renders. */ .ds-card--creator-tile .ds-card__creator-past-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto var(--space-3) auto; } .ds-card--creator-tile .ds-card__creator-media { position: relative; grid-row: 1 / 5; grid-column: 1; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: var(--radius-md); background: var(--creator-past-tile-media-bg); } .ds-card--creator-tile .ds-card__creator-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--creator-past-tile-scrim) 0%, transparent 50%); } .ds-card--creator-tile .ds-card__creator-info { display: contents; } .ds-card--creator-tile .ds-card__creator-header, .ds-card--creator-tile .ds-card__creator-rating { grid-column: 1; z-index: 1; padding: 0 var(--space-3); } .ds-card--creator-tile .ds-card__creator-header { grid-row: 2; } .ds-card--creator-tile .ds-card__creator-name { font-weight: var(--font-weight-semibold); color: var(--creator-past-tile-text); } .ds-card--creator-tile .ds-card__creator-rating { grid-row: 3; } .ds-card--creator-tile .ds-card__creator-star--empty { color: var(--creator-past-tile-star-empty); } /* One line on every tile: the deliverable gives way to an ellipsis so the price and date always stay visible -- "Instagram Photo Feed Post" would otherwise wrap one tile taller than the rest. The full name is in the ds-tooltip wrapping the label; the wrapper needs min-width: 0 to shrink. */ .ds-card--creator-tile .ds-card__creator-meta { grid-row: 5; grid-column: 1; display: flex; gap: var(--space-1); padding-top: var(--space-2); white-space: nowrap; } .ds-card--creator-tile .ds-card__creator-deliverable { min-width: 0; } .ds-card--creator-tile .ds-card__creator-deliverable-label { overflow: hidden; text-overflow: ellipsis; } .ds-card--creator-tile .ds-card__creator-terms { flex-shrink: 0; } .ds-card--creator-tile .ds-card__creator-actions { flex-direction: column; margin-top: auto; } /* --- ./option-cards/_option-card.css --- */ /** * Design System - Option Card Component * * Visually rich selectable cards for single-select (radio) or * multi-select (checkbox) choice inputs. * * Usage: * * * Variants: --row (horizontal icon+text), --tile (vertical stacked) * Single-select: use type="radio" on the input */ /* ========================================================================== BASE ========================================================================== */ .ds-option-card { position: relative; display: flex; align-items: center; gap: var(--space-4); width: calc(100% - 26px); padding: var(--space-4) 0 var(--space-4) var(--space-5); background: var(--color-bg-primary); border: 2px solid var(--color-border-default); border-radius: var(--radius-lg); cursor: pointer; user-select: none; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .ds-option-card:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); } .ds-option-card.is-selected { border-color: var(--bw-black); background: var(--color-bg-subtle); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-black) 8%, transparent); } /* Hidden native input */ .ds-option-card__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* ========================================================================== ICON ========================================================================== */ .ds-option-card__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .ds-option-card.is-selected .ds-option-card__icon { background: var(--color-bg-tertiary); color: var(--color-text-default); } .ds-option-card__icon svg { width: 20px; height: 20px; } /* ========================================================================== BODY ========================================================================== */ .ds-option-card__body { flex: 1; min-width: 0; } .ds-option-card__label { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-default); line-height: 1.3; } .ds-option-card__sub { display: block; font-size: var(--font-size-sm); color: var(--color-text-subtlest); margin-top: var(--space-1); line-height: 1.4; } .ds-option-card__eyebrow { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-brand); margin-bottom: var(--space-0-5); } /* ========================================================================== CHECK INDICATOR ========================================================================== */ .ds-option-card__check { flex-shrink: 0; width: 22px; height: 22px; margin-right: var(--space-5); border: 2px solid var(--color-border-default); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: transparent; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .ds-option-card__check svg { width: 12px; height: 12px; } .ds-option-card.is-selected .ds-option-card__check { background: var(--bw-black); border-color: var(--bw-black); color: var(--bw-white); margin-right: var(--space-5); } /* ========================================================================== SINGLE-SELECT (RADIO) — round indicator ========================================================================== */ .ds-option-card--radio .ds-option-card__check { border-radius: var(--radius-full); margin-right: var(--space-5); } /* Radio inner dot instead of checkmark */ .ds-option-card--radio .ds-option-card__check svg { display: none; } .ds-option-card--radio.is-selected .ds-option-card__check::after { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--bw-white); } /* ========================================================================== MULTI-SELECT (CHECKBOX) — square indicator (default, explicit modifier) ========================================================================== */ .ds-option-card--checkbox .ds-option-card__check { border-radius: var(--radius-sm); } /* ========================================================================== TILE VARIANT — vertical stacked (icon on top, check in corner) ========================================================================== */ /* The base width: calc(100% - 26px) compensates for the row variant's content-box padding; the tile's symmetric padding would push it past its grid column instead. */ .ds-option-card--tile { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-3); padding: var(--space-5); box-sizing: border-box; width: 100%; } .ds-option-card--tile .ds-option-card__check { position: absolute; top: var(--space-3); right: var(--space-3); margin-right: 0; } .ds-option-card--tile .ds-option-card__icon { width: 48px; height: 48px; } /* ========================================================================== CENTERED VARIANT — symmetric padding, label and check centered in row ========================================================================== */ .ds-option-card--centered { padding: var(--space-4) var(--space-5); width: 100%; box-sizing: border-box; } .ds-option-card--centered .ds-option-card__body { display: flex; align-items: center; gap: var(--space-2); } .ds-option-card--centered .ds-option-card__label { display: inline; } .ds-option-card--centered .ds-option-card__check { margin: 0; } .ds-option-card--centered.is-selected .ds-option-card__check { margin: 0; } /* ========================================================================== DISABLED — locked option (e.g. a free-tier gated choice) ========================================================================== */ /* No pointer-events:none here (unlike .ds-btn--disabled) — consumers can still handle clicks on a locked card, e.g. to route to an upgrade page. */ .ds-option-card.is-disabled { cursor: not-allowed; opacity: 0.5; } .ds-option-card.is-disabled:hover { border-color: var(--color-border-default); background: var(--color-bg-primary); } .ds-option-card.is-disabled .ds-option-card__input { cursor: not-allowed; } /* ========================================================================== SIZES ========================================================================== */ .ds-option-card--sm { padding: var(--space-3) var(--space-4); gap: var(--space-3); } .ds-option-card--sm .ds-option-card__icon { width: 36px; height: 36px; } .ds-option-card--sm .ds-option-card__icon svg { width: 16px; height: 16px; } .ds-option-card--sm .ds-option-card__label { font-size: var(--font-size-sm); } .ds-option-card--sm .ds-option-card__check, .ds-option-card--sm.is-selected .ds-option-card__check { margin-right: 0; } /* ========================================================================== PILL VARIANT — horizontal compact filter chips ========================================================================== */ .ds-option-card--pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-default); cursor: pointer; user-select: none; white-space: nowrap; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); /* reset base styles */ width: auto; box-shadow: none; } .ds-option-card--pill:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); } .ds-option-card--pill.is-selected { background: var(--bw-black); border-color: var(--bw-black); color: var(--bw-white); box-shadow: none; } .ds-option-card--pill .ds-option-card__icon { width: 18px; height: 18px; background: none; border-radius: 0; color: inherit; flex-shrink: 0; } .ds-option-card--pill .ds-option-card__icon svg { width: 15px; height: 15px; } .ds-option-card--pill .ds-option-card__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: inherit; line-height: 1; } .ds-option-card--pill .ds-option-card__dismiss { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.2); color: inherit; margin-left: var(--space-1); flex-shrink: 0; cursor: pointer; border: none; padding: 0; line-height: 1; } .ds-option-card--pill .ds-option-card__dismiss svg { width: 10px; height: 10px; } /* Hide dismiss button when not selected */ .ds-option-card--pill .ds-option-card__dismiss { display: none; } .ds-option-card--pill.is-selected .ds-option-card__dismiss { display: inline-flex; } /* Pill group wrapper */ .ds-option-card-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ========================================================================== SUB-PANEL — disclosure region under an option card for follow-up questions ========================================================================== */ .ds-option-card-subpanel { display: none; width: 100%; } .ds-option-card-subpanel.is-open { display: block; } .ds-option-card-subpanel__question { margin-bottom: var(--space-4); } .ds-option-card-subpanel__question:last-child { margin-bottom: 0; } .ds-option-card-subpanel__label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin-bottom: var(--space-2); } /* ========================================================================== GRID LAYOUT HELPER ========================================================================== */ .ds-option-card-grid { display: grid; gap: var(--space-3); } .ds-option-card-grid--2 { grid-template-columns: repeat(2, 1fr); width: 100%; } .ds-option-card-grid--3 { grid-template-columns: repeat(3, 1fr); } .ds-option-card-list { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; } .ds-option-card-list__heading { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin-bottom: var(--space-3); } /* --- ./platform-tile/_platform-tile.css --- */ /** * Design System - Platform Tile * * Selectable platform connect tile for the creator onboarding "Connect" step. * Extends ds-option-card--tile. Default state shows a full-colour brand logo + * platform name; the --connected variant stacks the creator's avatar, a follower-count * badge, the @handle and a green border once a handle is resolved. * * Used by: Step 1 connect grid, "Choose a Platform" modal. * * Usage: * * * */ /* ========================================================================== BASE — extends ds-option-card--tile, centered content ========================================================================== */ .ds-platform-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; min-height: 104px; padding: var(--space-5) var(--space-4); background: var(--platform-tile-bg); border: var(--border-width-2) solid var(--platform-tile-border); border-radius: var(--radius-lg); cursor: pointer; user-select: none; text-align: center; box-sizing: border-box; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .ds-platform-tile:hover { border-color: var(--platform-tile-border-hover); } .ds-platform-tile--sm { gap: var(--space-1-5); min-height: var(--size-14); padding: var(--space-2); } .ds-platform-tile--sm .ds-platform-tile__logo { width: var(--size-5); height: var(--size-5); } .ds-platform-tile--sm .ds-platform-tile__name { font-size: var(--font-size-sm); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-platform-tile:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring-brand); } /* ========================================================================== DEFAULT CONTENT — brand logo + platform name ========================================================================== */ .ds-platform-tile__logo { width: var(--size-8); height: var(--size-8); object-fit: contain; flex-shrink: 0; } .ds-platform-tile__name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-default); line-height: var(--line-height-tight); } /* ========================================================================== CONNECTED — avatar + follower badge + @handle + green border ========================================================================== */ .ds-platform-tile--connected { border-color: var(--platform-tile-border-connected); } .ds-platform-tile--connected:hover { border-color: var(--platform-tile-border-connected); } /* Connected-tile column order: avatar (top) -> follower badge -> @handle */ .ds-platform-tile__avatar { flex-shrink: 0; } /* Centered gray pill below the avatar: outlined platform mark + follower count */ .ds-platform-tile__follower-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--platform-tile-follower-bg); color: var(--platform-tile-follower-color); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-none); white-space: nowrap; } .ds-platform-tile__follower-count { font-weight: var(--font-weight-medium); } .ds-platform-tile__follower-badge .ds-social-icon { width: var(--size-3); height: var(--size-3); color: var(--color-text-subtle); } .ds-platform-tile__handle { max-width: 100%; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-default); line-height: var(--line-height-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== LOADING — spinner replaces the logo while the handle resolves ========================================================================== */ .ds-platform-tile--loading { cursor: progress; pointer-events: none; } .ds-platform-tile--loading .ds-platform-tile__name { color: var(--color-text-subtle); } /* ========================================================================== ERROR — red border for a handle that could not be resolved ========================================================================== */ .ds-platform-tile--error { border-color: var(--platform-tile-border-error); } .ds-platform-tile--error:hover { border-color: var(--platform-tile-border-error); } /* ========================================================================== DISABLED — coming-soon tiles that cannot be selected ========================================================================== */ .ds-platform-tile--disabled { cursor: not-allowed; opacity: 0.6; pointer-events: none; } /* --- ./social-icon/_social-icon.css --- */ /** * Social Icon * =========== * * Renders a platform glyph from the shared SVG sprite via . * Two variants per platform live in the sprite: -color (brand artwork) and -filled * (official monochrome Bootstrap glyph). filled uses currentColor, so the icon is * tintable through `color`. * * * * */ .ds-social-icon { display: inline-block; width: var(--size-5); height: var(--size-5); flex-shrink: 0; color: inherit; vertical-align: middle; } .ds-social-icon--sm { width: var(--size-4); height: var(--size-4); } .ds-social-icon--md { width: var(--size-5); height: var(--size-5); } .ds-social-icon--lg { width: var(--size-8); height: var(--size-8); } /* --- ./social-auth/_social-auth.css --- */ /** * Social Auth * =========== * * OAuth provider buttons rendered as equal icon-only squares. Each provider is * a plain button; the OAuth flow is triggered programmatically on click * (Apple: AppleID.auth.signIn(); Google: a google.accounts.oauth2 token-client * popup -- never google.accounts.id.prompt(), which can be silently suppressed). * *
* * *
*/ .ds-social-auth { display: flex; align-items: stretch; gap: var(--space-3); width: 100%; } .ds-social-auth__btn { position: relative; overflow: hidden; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; height: var(--social-auth-height); padding: var(--space-2) var(--space-4); background: var(--social-auth-bg); border: var(--border-width-1) solid var(--social-auth-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .ds-social-auth__btn:hover { background: var(--social-auth-bg-hover); border-color: var(--social-auth-border-hover); } .ds-social-auth__btn:focus-visible { outline: var(--border-width-2) solid var(--social-auth-border-hover); outline-offset: var(--space-0-5); } .ds-social-auth__icon { width: var(--size-6); height: var(--size-6); object-fit: contain; display: block; pointer-events: none; } /* ========================================================================== STACKED — full-width labelled buttons, one provider per row ========================================================================== */ .ds-social-auth--stacked { flex-direction: column; } .ds-social-auth--stacked .ds-social-auth__btn { flex: 0 0 auto; gap: var(--space-2); width: 100%; height: var(--size-12); background: var(--social-auth-filled-bg); border: none; } .ds-social-auth--stacked .ds-social-auth__btn:hover { background: var(--social-auth-filled-bg-hover); } .ds-social-auth--stacked .ds-social-auth__icon { width: var(--size-5); height: var(--size-5); } .ds-social-auth__label { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--social-auth-filled-label); pointer-events: none; } /* --- ./media-grid/_media-grid.css --- */ /** * Design System - Media Grid * * Responsive portfolio gallery grid with square media cells and an upload * drop-zone tile (the "+" cell with a "PNG, JPG… max N / max X MB" hint). * Used by the creator onboarding "Profile" step portfolio + cover sections. * * Mobile-first: 2 columns by default, 3 from sm, 4 from md. * * Usage: *
*
* * *
* *
*/ .ds-media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); width: 100%; } @media (min-width: 640px) { .ds-media-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .ds-media-grid { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== SINGLE VARIANT — one fixed-size square cell (e.g. a solitary logo upload) ========================================================================== */ .ds-media-grid--single { grid-template-columns: var(--size-40); } @media (min-width: 640px) { .ds-media-grid--single { grid-template-columns: var(--size-40); } } @media (min-width: 768px) { .ds-media-grid--single { grid-template-columns: var(--size-40); } } /* ========================================================================== CELL — square media thumbnail ========================================================================== */ .ds-media-grid__cell { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--media-grid-cell-bg); } .ds-media-grid__cell > img, .ds-media-grid__cell > video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Remove control overlapping the cell corner */ .ds-media-grid__remove { position: absolute; top: var(--space-1-5); right: var(--space-1-5); display: inline-flex; align-items: center; justify-content: center; width: var(--size-3); height: var(--size-3); padding: 0; border: none; border-radius: var(--radius-full); background: var(--color-overlay); color: var(--color-text-inverse); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .ds-media-grid__remove:hover { background: var(--color-bg-inverse); } .ds-media-grid__remove svg { width: var(--size-3); height: var(--size-3); } /* ========================================================================== DROPZONE — the "+" upload cell with format/size hint ========================================================================== */ .ds-media-grid__dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-2-5); text-align: center; background: var(--media-grid-dropzone-bg); border: var(--border-width-1) solid var(--media-grid-dropzone-border); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .ds-media-grid__dropzone:hover { border-color: var(--media-grid-dropzone-border-hover); background: var(--color-bg-secondary); } .ds-media-grid__dropzone-icon { display: block; flex-shrink: 0; width: var(--size-4); height: var(--size-4); color: var(--media-grid-dropzone-icon); } .ds-media-grid__dropzone-icon svg { width: 100%; height: 100%; } .ds-media-grid__dropzone-hint { font-size: var(--font-size-2xs); line-height: var(--line-height-normal); color: var(--media-grid-dropzone-color); } /* --- ./campaign-draft-banner/_campaign-draft-banner.css --- */ /** * Design System - Campaign Draft Banner * * Reminder shown on the brand dashboard when a campaign draft is sitting * unpublished (COL-3873). Lighter than the case-study banner: this one recurs, * so it should not dominate the page. */ .ds-campaign-draft-banner { position: relative; display: flex; align-items: center; gap: var(--space-4); /* Right padding has to clear the whole footprint of the out-of-flow close button (its corner offset plus its box), or wrapped text runs underneath it. */ padding: var(--space-5) var(--space-10) var(--space-5) var(--space-5); margin-bottom: var(--space-6); border: var(--border-width-1) solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-secondary); } .ds-campaign-draft-banner__icon { flex-shrink: 0; color: var(--color-text-subtle); } .ds-campaign-draft-banner__content { flex: 1; min-width: 0; } .ds-campaign-draft-banner__title { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text-default); } .ds-campaign-draft-banner__body { margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-subtle); } .ds-campaign-draft-banner__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .ds-campaign-draft-banner__close { position: absolute; top: var(--space-1-5); right: var(--space-1-5); padding: var(--space-1); border: none; background: none; color: var(--color-text-subtle); cursor: pointer; } /** * Order-page contrast message, above the chat composer. Shares the dashboard banner's * surface so a brand who meets both recognises them as the same campaign. */ .ds-campaign-draft-order-prompt { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); /* Flex item in .conversation-area, between the thread and the composer. The panel's horizontal rhythm is 32px (the composer's margin, the thread's padding), so the prompt matches it rather than running full bleed. Vertically: without the top margin it sits flush against the last message, and the composer adds its own 8px above, so the bottom margin is the remainder of a matching 12px. */ flex-shrink: 0; margin: var(--space-3) var(--space-8) var(--space-1); /* Right padding clears the out-of-flow close button, as on the banner. Padding only the title is not enough: the button is taller than the title's line, so the body's first line still runs underneath it. */ padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4); border: var(--border-width-1) solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-secondary); } .ds-campaign-draft-order-prompt__icon { flex-shrink: 0; color: var(--color-text-subtle); } .ds-campaign-draft-order-prompt__content { flex: 1; min-width: 0; } .ds-campaign-draft-order-prompt__title { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text-default); } .ds-campaign-draft-order-prompt__body { margin: 0 0 var(--space-3) 0; font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-subtle); } .ds-campaign-draft-order-prompt__close { position: absolute; top: var(--space-1-5); right: var(--space-1-5); padding: var(--space-1); border: none; background: none; color: var(--color-text-subtle); cursor: pointer; } .ds-campaign-draft-banner__close svg, .ds-campaign-draft-order-prompt__close svg { display: block; width: var(--size-5); height: var(--size-5); } @media (max-width: 767px) { .ds-campaign-draft-banner { flex-wrap: wrap; } /* Full width rather than squeezed against the content column. */ .ds-campaign-draft-banner__actions { width: 100%; flex-direction: column; align-items: stretch; } } /* --- ./case-study-banner/_case-study-banner.css --- */ /** * Design System - Case Study Banner * * Dark promotional banner shown in the brand dashboard to invite selected * brands to participate in a case study. Based on Figma node 29:5853. */ /* ========================================================================== BASE BANNER ========================================================================== */ .ds-case-study-banner { position: relative; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); margin-bottom: var(--space-6); border-radius: var(--radius-xl); background: var(--color-bg-inverse); color: var(--color-text-inverse); overflow: hidden; } /* Decorative shapes — positioned absolutely behind the content. Pulled from Figma layers 87:447, 87:449, 87:466. */ .ds-case-study-banner::before, .ds-case-study-banner::after { content: ""; position: absolute; pointer-events: none; } /* Mauve rounded rectangle — peeks from top-right */ .ds-case-study-banner::before { top: -60px; right: 22%; width: 173px; height: 127px; background: #8E5A6B; border-radius: var(--radius-3xl); } /* Purple rounded rectangle — peeks from bottom-right */ .ds-case-study-banner::after { bottom: -40px; right: -30px; width: 364px; height: 91px; background: #5E4B8A; border-radius: var(--radius-3xl); } /* Gold circle — peeks from top-right corner */ .ds-case-study-banner__shape { position: absolute; top: -60px; right: 4%; width: 144px; height: 144px; border-radius: var(--radius-full); background: #A59048; pointer-events: none; } /* Content elements sit above the decorative shapes */ .ds-case-study-banner__icon, .ds-case-study-banner__content, .ds-case-study-banner__actions, .ds-case-study-banner__close { position: relative; z-index: 1; } /* ========================================================================== CLOSE (top-right icon) — dismiss only; hides + resurfaces in 5 days. Distinct from the "Dismiss" text action below, which records a decline. ========================================================================== */ .ds-case-study-banner__close { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text-inverse); opacity: 0.7; cursor: pointer; transition: var(--transition-colors); } .ds-case-study-banner__close svg { width: 16px; height: 16px; } .ds-case-study-banner__close:hover { background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent); opacity: 1; } /* ========================================================================== ICON ========================================================================== */ .ds-case-study-banner__icon { flex-shrink: 0; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-primary); border-radius: var(--radius-2xl); color: var(--color-brand-500); } .ds-case-study-banner__icon svg, .ds-case-study-banner__icon i { width: 72px; height: 72px; } /* ========================================================================== CONTENT ========================================================================== */ .ds-case-study-banner__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); } .ds-case-study-banner__content[hidden], .ds-case-study-banner__actions[hidden] { display: none; } .ds-case-study-banner__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); color: var(--color-text-inverse); margin: 0; } .ds-case-study-banner__body { font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-neutral-300); margin: 0; } /* ========================================================================== ACTIONS ========================================================================== */ .ds-case-study-banner__actions { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-4); } /* Scoped button override — the Figma CTA uses the brand pink, but the DS primary button is black. Override within the banner scope only so we don't fork the button component. */ .ds-case-study-banner .ds-btn--primary { background: var(--color-brand-500); color: var(--color-text-inverse); } .ds-case-study-banner .ds-btn--primary:hover { background: var(--color-brand-600); } .ds-case-study-banner__dismiss { background: none; border: none; padding: var(--space-2) var(--space-3); color: var(--color-text-inverse); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; border-radius: var(--radius-md); } .ds-case-study-banner__dismiss:hover { background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent); } /* ========================================================================== RESPONSIVE — STACKED ON MOBILE ========================================================================== */ @media (max-width: 767px) { .ds-case-study-banner { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); } .ds-case-study-banner__icon { width: 96px; height: 96px; } .ds-case-study-banner__icon svg, .ds-case-study-banner__icon i { width: 56px; height: 56px; } .ds-case-study-banner__actions { width: 100%; justify-content: flex-start; } .ds-case-study-banner__title { font-size: var(--font-size-base); padding-right: var(--space-6); } /* Hide decorative shapes on mobile to keep the card clean */ .ds-case-study-banner::before, .ds-case-study-banner::after, .ds-case-study-banner__shape { display: none; } } /* Feedback & Status */ /* --- ./badges/_badge.css --- */ /** * Design System - Badge Component * * Small labels for status indicators, categories, and tags. */ /* ========================================================================== BASE BADGE ========================================================================== */ .ds-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border: 1px solid transparent; border-radius: 10px; white-space: nowrap; background: var(--color-neutral-100); color: var(--color-text-subtle); } .ds-badge::before { content: none; } /* ========================================================================== BADGE VARIANTS ========================================================================== */ /* Brand / Primary */ .ds-badge--brand { background: var(--color-brand-100); color: var(--color-brand-700); } .ds-badge--brand-solid { background: var(--color-brand-500); color: white; } /* Success */ .ds-badge--success { border: none; background: var(--color-success-600); color: white; } .ds-badge--success-outline { border-color: var(--color-success-600); background: transparent; color: var(--color-success-600); } .ds-badge--success-light { border: none; background: var(--color-bg-success); color: var(--color-success-700); font-weight: var(--font-weight-semibold); } /* Warning */ .ds-badge--warning { border: none; background: var(--color-warning-500); color: white; } .ds-badge--warning-outline { border-color: var(--color-warning-500); background: transparent; color: var(--color-warning-500); } .ds-badge--warning-light { border: none; background: var(--color-bg-warning); color: var(--color-warning-600); font-weight: var(--font-weight-semibold); } /* Error / Danger */ .ds-badge--error { border: none; background: var(--color-error-500); color: white; } .ds-badge--error-outline { border-color: var(--color-error-600); background: transparent; color: var(--color-error-600); } .ds-badge--error-light { border: none; background: var(--color-bg-error); color: var(--color-error-600); font-weight: var(--font-weight-semibold); } /* Info */ .ds-badge--info { border: none; background: var(--color-info-500); color: white; } .ds-badge--info-outline { border-color: var(--color-info-500); background: transparent; color: var(--color-info-500); } .ds-badge--info-light { border: none; background: var(--color-bg-info); color: var(--color-info-700); font-weight: var(--font-weight-semibold); } /* Neutral */ .ds-badge--neutral { border: none; background: var(--bw-black); color: white; } .ds-badge--neutral-outline { border-color: var(--bw-black); background: transparent; color: var(--bw-black); } .ds-badge--neutral-light { border: none; background: color-mix(in srgb, var(--bw-black) 8%, transparent); color: var(--color-text-default); } /* ========================================================================== PLATFORM BADGES ========================================================================== */ .platform-badge { cursor: pointer; position: relative; display: flex; align-items: center; margin: 0 12px 4px 0; padding: 4px 7px; border-radius: 10px; border: 1px solid var(--lightGray); box-shadow: var(--lightBoxShadow); width: fit-content; } .platform-badge > img { width: 16px; margin-right: 5px; } .platform-badge a { color: cornflowerblue; text-decoration: none; font-size: 78%; font-weight: var(--font-weight-semibold); } .platform-badge a > span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .ds-badge--instagram { background: var(--instagram); color: white; } .ds-badge--tiktok { background: var(--tiktok); color: white; } .ds-badge--youtube { background: var(--youtube); color: white; } .ds-badge--twitter { background: var(--twitter); color: white; } .ds-badge--twitch { background: var(--twitch); color: white; } .ds-badge--snapchat { background: var(--snapchat); color: var(--badge-snapchat-color); } .ds-badge--amazon { background: var(--amazon); color: white; } .ds-badge--ugc { background: var(--ugc); color: white; } /* ========================================================================== Other BADGES ========================================================================== */ .profile-listing-badge-holder{ position: absolute; top: 10px; left: 8px; z-index: 99; display: flex; } .profile-listing-badge { display: flex; align-items: end; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; padding: 5px; margin-right: 5px; box-shadow: var(--darkBoxShadow); border: 1px solid white; } .profile-listing-badge-img { width: 13px; margin-right: 3px; } .profile-listing-badge-title { font-weight: 600; font-size: 70%; color: white; } /* ========================================================================== BADGE SIZES ========================================================================== */ .ds-badge--xs { padding: var(--space-0-5) var(--space-2); font-size: var(--font-size-2xs); } .ds-badge--sm { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); } /* Default size is already defined in .ds-badge */ .ds-badge--lg { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); } /* ========================================================================== BADGE SHAPES ========================================================================== */ /* Rounded (default is full/pill) */ .ds-badge--rounded { border-radius: var(--radius-md); } /* Square */ .ds-badge--square { border-radius: var(--radius-sm); } /* ========================================================================== BADGE WITH DOT ========================================================================== */ .ds-badge--dot { padding-left: var(--space-2); } .ds-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; } /* ========================================================================== STAT BADGE (soft benchmark pill with a leading icon) ========================================================================== */ .ds-badge--stat { background: var(--badge-stat-bg); color: var(--badge-stat-color); font-weight: var(--font-weight-normal); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); gap: var(--space-2); } .ds-badge--stat .ds-badge__icon { width: var(--size-4); height: var(--size-4); color: var(--badge-stat-icon); } /* Full-width, multi-line badge for card footers */ .ds-badge--block { display: flex; width: 100%; white-space: normal; box-sizing: border-box; } /* ========================================================================== BADGE WITH ICON ========================================================================== */ .ds-badge__icon { width: 12px; height: 12px; flex-shrink: 0; } /* ========================================================================== REMOVABLE BADGE ========================================================================== */ .ds-badge--removable { padding-right: var(--space-1); } .ds-badge__remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: var(--space-1); background: transparent; border: none; border-radius: var(--radius-full); cursor: pointer; opacity: 0.6; transition: opacity var(--duration-fast) var(--ease-out); } .ds-badge__remove:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); } /* ========================================================================== BADGE GROUP ========================================================================== */ .ds-badge-group { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ========================================================================== COUNT/NUMBER BADGE ========================================================================== */ .ds-badge--count { min-width: 20px; height: 20px; padding: 0 var(--space-1-5); border-radius: var(--radius-full); text-align: center; } .ds-badge--count.ds-badge--sm { min-width: 16px; height: 16px; font-size: var(--font-size-2xs); } /* ========================================================================== NOTIFICATION DOT Compatible with existing .notification class ========================================================================== */ .ds-dot { width: 10px; height: 10px; background: var(--color-brand-500); border-radius: var(--radius-full); } .ds-dot--animated { animation: var(--animate-pulse); } .ds-dot--success { background: var(--color-success-500); } .ds-dot--warning { background: var(--color-warning-500); } .ds-dot--error { background: var(--color-error-500); } /* --- ./tags/_tag.css --- */ /** * Design System - Tag/Chip Component * * Compact labels for categorization, status indicators, or filtering. * Use .ds-tag--removable with a .ds-tag__remove button for interactive chips. */ /* ========================================================================== BASE TAG ========================================================================== */ .ds-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); font-family: var(--font-family-base); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; border-radius: var(--radius-full); border: var(--border-width-1) solid transparent; white-space: nowrap; vertical-align: middle; } /* ========================================================================== VARIANTS ========================================================================== */ .ds-tag--neutral { background: var(--color-neutral-100); color: var(--color-neutral-700); border-color: var(--color-neutral-200); } .ds-tag--brand { background: var(--color-brand-50); color: var(--color-brand-700); border-color: var(--color-brand-200); } .ds-tag--success { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-200); } .ds-tag--warning { background: var(--color-warning-50); color: var(--color-warning-700); border-color: var(--color-warning-200); } .ds-tag--error { background: var(--color-error-50); color: var(--color-error-700); border-color: var(--color-error-200); } .ds-tag--info { background: var(--color-info-50); color: var(--color-info-700); border-color: var(--color-info-200); } /* Add affordance: dashed chip that opens a picker */ .ds-tag--add { background: transparent; border: 1px dashed var(--color-border-default); color: var(--color-text-subtlest); cursor: pointer; } .ds-tag--add:hover { border-color: var(--color-border-strong); color: var(--color-text-default); } /* ========================================================================== SIZES ========================================================================== */ .ds-tag--sm { font-size: 11px; padding: 2px var(--space-2); } .ds-tag--lg { font-size: var(--font-size-sm); padding: var(--space-1) var(--space-3); } /* ========================================================================== REMOVABLE TAG ========================================================================== */ .ds-tag--removable { padding-right: var(--space-2); } .ds-tag__remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: transparent; border: none; border-radius: var(--radius-full); cursor: pointer; color: currentColor; opacity: 0.6; padding: 0; transition: opacity var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); flex-shrink: 0; } .ds-tag__remove:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); } .ds-tag__remove:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); opacity: 1; } /* ========================================================================== TAG ICON ========================================================================== */ .ds-tag__icon { flex-shrink: 0; width: 12px; height: 12px; } .ds-tag--lg .ds-tag__icon { width: 14px; height: 14px; } /* --- ./alerts/_alert.css --- */ /** * Design System - Alert Component * * Contextual feedback messages for user actions. */ /* ========================================================================== BASE ALERT ========================================================================== */ .ds-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-sm); border-left: 4px solid; background: var(--color-neutral-100); border-left-color: var(--color-neutral-400); } /* ========================================================================== ALERT VARIANTS ========================================================================== */ /* Tip — inline hint, no border, soft background */ .ds-alert--tip { background: var(--color-bg-info); border-left: none; border-radius: var(--radius-md); align-items: center; padding: var(--space-3) var(--space-4); } .ds-alert--tip .ds-alert__icon { width: 18px; height: 18px; color: var(--color-text-subtle); } .ds-alert--tip .ds-alert__text, .ds-alert--tip .ds-alert__message { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-text-subtle); } .ds-alert--tip .ds-alert__message strong { font-weight: var(--font-weight-semibold); color: var(--color-text-subtle); } .ds-alert--tip a:not(.ds-btn) { color: var(--color-text-subtle); text-decoration: underline; } /* Inline — compact, borderless feedback line tight to a form field. Compose with --info / --success / --warning / --error for color. */ .ds-alert--inline { border-left: none; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md); } .ds-alert--inline .ds-alert__icon { width: var(--size-4); height: var(--size-4); } .ds-alert--inline .ds-alert__text { min-width: 0; font-size: var(--font-size-sm); line-height: var(--line-height-normal); } .ds-alert--banner { margin-bottom: var(--space-6); } @media (max-width: 768px) { .ds-alert--banner { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .ds-alert--banner .ds-alert__content { width: 100%; } .ds-alert--banner .ds-alert__close { order: -1; align-self: flex-end; margin: 0; } } /* Info */ .ds-alert--info { background: var(--color-info-50); border-left-color: var(--color-info-500); } .ds-alert--info .ds-alert__icon { color: var(--color-info-500); } /* Success */ .ds-alert--success { background: var(--color-bg-success); border-left-color: var(--color-success-500); } .ds-alert--success .ds-alert__icon { color: var(--color-success-500); } /* Warning */ .ds-alert--warning { background: var(--color-bg-warning); border-left-color: var(--color-warning-500); } .ds-alert--warning .ds-alert__icon { color: var(--color-warning-500); } .ds-alert--warning .ds-alert__control { border-top-color: var(--color-border-warning); } /* Error */ .ds-alert--error { background: var(--color-bg-error); border-left-color: var(--color-error-500); } .ds-alert--error .ds-alert__icon { color: var(--color-error-500); } /* ========================================================================== ALERT ELEMENTS ========================================================================== */ .ds-alert__icon { flex-shrink: 0; width: 20px; height: 20px; } .ds-alert__content { flex: 1; min-width: 0; } .ds-alert__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin-bottom: var(--space-1); } .ds-alert__message { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin: 0; } .ds-alert__actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); } /* Control row — a prominent toggle/switch separated from the message by a divider */ .ds-alert__control { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width-1) solid var(--color-border-subtle); } .ds-alert__control-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-default); } .ds-alert__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: calc(var(--space-1) * -1); background: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text-subtlest); cursor: pointer; transition: var(--transition-colors); } .ds-alert__close svg { width: 16px; height: 16px; } .ds-alert__close:hover { background: rgba(0, 0, 0, 0.05); color: var(--color-text-default); } /* ========================================================================== ALERT VARIANTS - FILLED ========================================================================== */ .ds-alert--filled { border-left: none; color: white; } .ds-alert--filled.ds-alert--info { background: var(--color-info-500); } .ds-alert--filled.ds-alert--success { background: var(--color-success-500); } .ds-alert--filled.ds-alert--warning { background: var(--color-warning-500); color: var(--color-text-default); } .ds-alert--filled.ds-alert--error { background: var(--color-error-500); } .ds-alert--filled .ds-alert__icon, .ds-alert--filled .ds-alert__title, .ds-alert--filled .ds-alert__message { color: inherit; } .ds-alert--filled .ds-alert__close { color: inherit; opacity: 0.7; } .ds-alert--filled .ds-alert__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); } /* ========================================================================== TOAST (Floating alert) ========================================================================== */ .ds-toast { position: fixed; z-index: 9999; display: flex; align-items: flex-start; gap: var(--space-3); min-width: 300px; max-width: 420px; padding: var(--space-4); background: var(--toast-bg); border-radius: var(--radius-sm); box-shadow: var(--toast-shadow); animation: var(--animate-slide-in-up); } .ds-toast[hidden] { display: none; } /* Toast positions */ .ds-toast--top-right { top: var(--space-4); right: var(--space-4); } .ds-toast--top-left { top: var(--space-4); left: var(--space-4); } .ds-toast--bottom-right { bottom: var(--space-4); right: var(--space-4); } .ds-toast--bottom-left { bottom: var(--space-4); left: var(--space-4); } .ds-toast--top-center { top: var(--space-4); left: 50%; transform: translateX(-50%); animation: var(--animate-slide-in-up-center); } .ds-toast--bottom-center { bottom: var(--space-4); left: 50%; transform: translateX(-50%); animation: var(--animate-slide-in-up-center); } /* Toast inner layout */ .ds-toast__icon { flex-shrink: 0; stroke-width: 1.2; width: 20px; height: 20px; margin-top: 1px; } .ds-toast__body { flex: 1; min-width: 0; } .ds-toast__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-default); line-height: 1.4; } .ds-toast__message { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin-top: var(--space-0-5); line-height: 1.4; } .ds-toast__action { flex-shrink: 0; margin-top: -2px; } .ds-toast__action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: color-mix(in srgb, currentColor 10%, transparent); border: none; border-radius: var(--radius-sm); cursor: pointer; color: inherit; opacity: 0.9; transition: opacity var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .ds-toast__action-btn svg { width: 16px; height: 16px; } .ds-toast__action-btn:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); } .ds-toast__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: color-mix(in srgb, currentColor 10%, transparent); border: none; border-radius: var(--radius-sm); cursor: pointer; color: inherit; opacity: 0.75; transition: opacity var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); margin-top: -2px; } .ds-toast__close svg { width: 16px; height: 16px; } .ds-toast__close:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); } /* Dense variant — compact single-line toast */ .ds-toast--dense { padding: var(--space-2-5) var(--space-4); min-width: 0; align-items: center; } .ds-toast--dense .ds-toast__icon { width: 16px; height: 16px; margin-top: 0; } .ds-toast--dense .ds-toast__body { display: flex; align-items: center; } .ds-toast--dense .ds-toast__title { font-size: var(--font-size-sm); } .ds-toast--dense .ds-toast__message { display: none; } .ds-toast--dense .ds-toast__close { margin-top: 0; width: 24px; height: 24px; } /* ========================================================================== TOAST SEVERITY VARIANTS ========================================================================== */ /* --- Text (subtle) --- */ .ds-toast--normal { color: var(--color-text-default); } .ds-toast--info { color: var(--color-info-700); } .ds-toast--success{ color: var(--color-success-700); } .ds-toast--warning{ color: var(--color-warning-600); } .ds-toast--error { color: var(--color-error-600); } /* --- Outlined --- */ .ds-toast--normal-outlined { border: 1px solid var(--color-border-default); color: var(--color-text-default); } .ds-toast--info-outlined { border: 1px solid var(--color-info-500); color: var(--color-info-700); } .ds-toast--success-outlined { border: 1px solid var(--color-success-500); color: var(--color-success-700); } .ds-toast--warning-outlined { border: 1px solid var(--color-warning-500); color: var(--color-warning-600); } .ds-toast--error-outlined { border: 1px solid var(--color-error-500); color: var(--color-error-600); } /* --- Filled --- */ .ds-toast--normal-filled { background: var(--bw-black); color: white; box-shadow: var(--shadow-lg); } .ds-toast--info-filled { background: var(--color-info-500); color: white; box-shadow: var(--shadow-lg); } .ds-toast--success-filled { background: var(--color-success-600); color: white; box-shadow: var(--shadow-lg); } .ds-toast--warning-filled { background: var(--color-warning-500); color: white; box-shadow: var(--shadow-lg); } .ds-toast--error-filled { background: var(--color-error-500); color: white; box-shadow: var(--shadow-lg); } /* Filled variants: override text colors for inner elements */ .ds-toast--normal-filled .ds-toast__title, .ds-toast--info-filled .ds-toast__title, .ds-toast--success-filled .ds-toast__title, .ds-toast--warning-filled .ds-toast__title, .ds-toast--error-filled .ds-toast__title { color: white; } .ds-toast--normal-filled .ds-toast__message, .ds-toast--info-filled .ds-toast__message, .ds-toast--success-filled .ds-toast__message, .ds-toast--warning-filled .ds-toast__message, .ds-toast--error-filled .ds-toast__message { color: rgba(255, 255, 255, 0.8); } /* ========================================================================== TOAST CONTAINER (for stacking) ========================================================================== */ .ds-toast-container { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none; } .ds-toast-container > * { pointer-events: auto; } .ds-toast-container--top-right { top: var(--space-4); right: var(--space-4); } .ds-toast-container--bottom-right { bottom: var(--space-4); right: var(--space-4); flex-direction: column-reverse; } /* ========================================================================== BANNER (full-width promotional / feature announcement strip) ========================================================================== */ .ds-banner { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-6); background: var(--color-bg-inverse); border-radius: var(--radius-lg); color: var(--color-text-inverse); } .ds-banner__media { flex-shrink: 0; width: 160px; overflow: hidden; border-radius: var(--radius-md); } .ds-banner__media img { display: block; width: 100%; height: auto; object-fit: cover; } .ds-banner__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1-5); } .ds-banner__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-inverse); margin: 0; line-height: 1.2; } .ds-banner__description { font-size: var(--font-size-sm); color: var(--color-neutral-400); margin: 0; line-height: 1.5; } .ds-banner__actions { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-4); } /* ========================================================================== AI BANNER (full-width feature announcement — brand dashboard) ========================================================================== */ .ai-banner { display: none; background: #0a0a0a; overflow: hidden; position: relative; flex-shrink: 0; } .ai-banner__inner { display: flex; align-items: stretch; justify-content: space-between; min-height: 160px; } .ai-banner__left { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-6) var(--space-8); max-width: 520px; flex-shrink: 0; } .ai-banner__heading { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--bw-white); line-height: 1.25; margin: 0; } .ai-banner__message { font-size: var(--font-size-sm); color: var(--gray-400); line-height: 1.6; margin: 0; } .ai-banner__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; padding: var(--space-6) var(--space-8); } .ai-banner__cta { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; color: var(--bw-white); border: 1.5px solid var(--bw-white); border-radius: var(--radius-full); padding: var(--space-2) var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); white-space: nowrap; } .ai-banner__cta i { width: 14px; height: 14px; } .ai-banner__cta:hover { background: var(--bw-white); color: var(--bw-black); } .ai-banner__dismiss { background: none; border: none; color: var(--gray-600); cursor: pointer; padding: var(--space-1); display: flex; align-items: center; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-out); position: absolute; top: var(--space-4); right: var(--space-4); } .ai-banner__dismiss:hover { color: var(--gray-300); } .ai-banner__dismiss i { width: 16px; height: 16px; } .ai-banner__collage { position: relative; flex: 1; min-height: 160px; overflow: hidden; } .ai-banner__collage-img { position: absolute; object-fit: cover; border-radius: var(--radius-lg); } .ai-banner__collage-shape { position: absolute; border-radius: var(--radius-md); } /* ========================================================================== INLINE MESSAGE (simpler, inline feedback) ========================================================================== */ .ds-message { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); border-radius: var(--radius-md); } .ds-message--success { background: var(--color-bg-success); color: var(--color-success-700); } .ds-message--error { background: var(--color-bg-error); color: var(--color-error-700); } .ds-message--warning { background: var(--color-bg-warning); color: var(--color-warning-700); } .ds-message--info { background: var(--color-bg-info); color: var(--color-info-700); } /* --- ./pricing-banner/_pricing-banner.css --- */ /** * Pricing Banner * COL-1397: sticky dark banner shown on edit profile when creator is paused * for "Pricing Update Required". Prompts update + unpause. */ .ds-pricing-banner { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-4); margin-bottom: var(--space-6); background: var(--color-bg-inverse); color: var(--color-text-inverse); box-sizing: border-box; } .ds-pricing-banner__content { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .ds-pricing-banner__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: 0.25px; color: var(--color-text-inverse); margin: 0; } .ds-pricing-banner__message { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-relaxed); color: var(--color-text-inverse); margin: 0; } .ds-pricing-banner__action { flex: 0 0 auto; display: inline-block; background: var(--color-bg-primary); color: var(--color-text-default); border: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); letter-spacing: 0.25px; text-decoration: none; cursor: pointer; transition: background 120ms ease, transform 120ms ease; min-width: 255px; } .ds-pricing-banner__action:hover { background: var(--gray-100); } .ds-pricing-banner--ribbon { padding: var(--space-2) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-md); justify-content: space-between; flex-wrap: wrap; } .ds-pricing-banner--ribbon .ds-pricing-banner__message { flex: 1 1 auto; font-size: var(--font-size-sm); text-align: left; } .ds-pricing-banner--ribbon .ds-pricing-banner__action { flex: 0 0 auto; min-width: 0; padding: var(--space-1) var(--space-3); white-space: nowrap; background: transparent; border: 1px solid var(--color-brand-500); color: var(--color-brand-500); } .ds-pricing-banner--ribbon .ds-pricing-banner__action:hover { background: var(--color-bg-brand-subtle); } .ds-pricing-banner__action:active { transform: translateY(1px); } /* Shared pricing modal helpers (used by reminder, warning, success modals) */ .ds-pricing-modal { max-width: 420px; border-radius: 20px; box-sizing: border-box; } .ds-pricing-modal *, .ds-pricing-modal *::before, .ds-pricing-modal *::after { box-sizing: border-box; } .ds-pricing-modal .ds-modal__close svg { width: 24px; height: 24px; } .ds-pricing-modal .ds-modal__close { position: absolute; top: 12px; right: 12px; margin: 0; z-index: 2; } .ds-pricing-modal__body { text-align: center; padding: var(--space-7) var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .ds-pricing-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; color: var(--color-icon-primary); } .ds-pricing-modal__icon svg { width: 72px; height: 72px; } .ds-pricing-modal__footer-stack { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; padding: 0 var(--space-6) var(--space-6); border-top: none; background: transparent; } @media (max-width: 767px) { .ds-pricing-banner:not(.ds-pricing-banner--ribbon) { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); } .ds-pricing-banner__action:not(.ds-pricing-banner--ribbon .ds-pricing-banner__action) { width: 100%; min-width: 0; text-align: center; } .ds-pricing-banner--ribbon { flex-wrap: nowrap; align-items: center; gap: var(--space-2); } .ds-pricing-banner--ribbon .ds-pricing-banner__message { font-size: var(--font-size-xs); } } /* Overlays */ /* --- ./modals/_modal.css --- */ /** * Design System - Modal Component * * Dialog boxes and overlays for focused interactions. * Backwards compatible with existing modal styles. */ /* ========================================================================== MODAL BACKDROP ========================================================================== */ .ds-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--modal-backdrop); backdrop-filter: blur(4px); animation: fadeIn var(--duration-normal) var(--ease-out); } .ds-modal-backdrop[hidden] { display: none; } .ds-modal-backdrop--transparent { background: transparent; backdrop-filter: none; } @media (max-width: 800px) { .ds-modal-backdrop--nav-safe .ds-modal__footer { flex-direction: column-reverse; align-items: stretch; } } .ds-modal-backdrop--nav-safe .ds-modal__body.is-scrollable { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-6)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-6)), transparent); } @media (max-width: 800px) { body:has(.mobile-nav-holder) .ds-modal-backdrop--nav-safe { --mobile-nav-height: 65px; padding-bottom: calc(var(--mobile-nav-height) + var(--space-4)); } body:has(.mobile-nav-holder) .ds-modal-backdrop--nav-safe .ds-modal { max-height: calc(100dvh - var(--mobile-nav-height) - var(--space-8)); } } /* ========================================================================== MODAL CONTAINER ========================================================================== */ .ds-modal { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 500px; max-height: 90vh; background: var(--modal-bg); border-radius: var(--radius-xl); box-shadow: var(--modal-shadow); overflow: hidden; animation: scaleIn var(--duration-normal) var(--ease-out-emphasized); } /* ========================================================================== MODAL SIZES ========================================================================== */ .ds-modal--xs { max-width: 320px; } .ds-modal--sm { max-width: 400px; } /* Default is 500px */ .ds-modal--md { max-width: 600px; } .ds-modal--lg { max-width: 800px; } .ds-modal--xl { max-width: 1000px; } .ds-modal--full { max-width: none; max-height: none; width: 100%; height: 100%; border-radius: 0; } /* ========================================================================== MODAL SECTIONS ========================================================================== */ .ds-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: var(--border-subtle); flex-shrink: 0; } .ds-modal__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin: 0; } .ds-modal__subtitle { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin-top: var(--space-1); } .ds-modal__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: calc(var(--space-2) * -1); background: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text-subtlest); cursor: pointer; transition: var(--transition-colors); } .ds-modal__close svg { width: 18px; height: 18px; } .ds-modal__close:hover { background: var(--color-neutral-100); color: var(--color-text-default); } .ds-modal__close:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; } .ds-modal__body { flex: 1; padding: var(--space-6); overflow-y: auto; } .ds-modal__body--flush { padding: 0; } .ds-modal__list { margin: var(--space-2) 0; padding-left: var(--space-5); } .ds-modal__list li { margin-bottom: var(--space-1); } .ds-modal__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: var(--border-subtle); background: var(--color-bg-secondary); flex-shrink: 0; } .ds-modal__footer--left { justify-content: flex-start; } .ds-modal__footer--center { justify-content: center; } .ds-modal__footer--between { justify-content: space-between; } .ds-modal__footer--plain { background: transparent; border-top: none; } /* ========================================================================== MODAL VARIANTS ========================================================================== */ /* Centered modal (vertical center with explicit height) */ .ds-modal--centered { margin: auto; } /* Drawer - Slides from side */ .ds-modal--drawer-right { position: fixed; top: 0; right: 0; bottom: 0; max-width: 400px; max-height: none; border-radius: var(--radius-xl) 0 0 var(--radius-xl); animation: slideInRight var(--duration-normal) var(--ease-out); } .ds-modal--drawer-left { position: fixed; top: 0; left: 0; bottom: 0; max-width: 400px; max-height: none; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; animation: slideInLeft var(--duration-normal) var(--ease-out); } /* Bottom sheet (mobile-friendly) */ .ds-modal--sheet { position: fixed; bottom: 0; left: 0; right: 0; max-width: none; max-height: 90vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: slideInUp var(--duration-normal) var(--ease-out); } .ds-modal--sheet .ds-modal__header { position: relative; } .ds-modal--sheet .ds-modal__header::before { content: ''; position: absolute; top: calc(var(--space-2) * -1); left: 50%; transform: translateX(-50%); width: 36px; height: 4px; background: var(--color-neutral-300); border-radius: var(--radius-full); } /* ========================================================================== CONFIRMATION DIALOG ========================================================================== */ .ds-dialog { text-align: center; max-width: 400px; } .ds-dialog .ds-modal__body { padding: var(--space-8) var(--space-6); } .ds-dialog__icon { width: 48px; height: 48px; margin: 0 auto var(--space-4); } .ds-dialog__icon--success { color: var(--color-success-500); } .ds-dialog__icon--warning { color: var(--color-warning-500); } .ds-dialog__icon--error { color: var(--color-error-500); } .ds-dialog__icon--info { color: var(--color-info-500); } .ds-dialog__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin-bottom: var(--space-2); } .ds-dialog__message { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin: 0; } .ds-dialog .ds-modal__footer { justify-content: center; } /* ========================================================================== PAYWALL MODAL ========================================================================== */ /* Sized to the legacy checkout host, since the last step embeds that markup. */ .ds-paywall { max-width: 560px; } .ds-paywall__step { display: none; flex-direction: column; min-height: 0; } .ds-paywall__step.is-active { display: flex; } .ds-paywall__lead { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text-subtle); margin: 0; } .ds-paywall__lead--center { text-align: center; } .ds-paywall__billing { margin-bottom: var(--space-6); } .ds-paywall__price { text-align: center; margin-bottom: var(--space-5); } .ds-paywall__amount { display: block; font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text-default); } .ds-paywall__term { display: block; margin-top: var(--space-1); font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-subtle); } .ds-paywall__benefits { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .ds-paywall__benefit { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-default); } .ds-paywall__benefit svg { width: var(--size-4); height: var(--size-4); flex-shrink: 0; color: var(--color-success-500); } .ds-paywall__note { font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-subtle); text-align: center; margin: var(--space-5) 0 0; } .ds-paywall__footer { flex-direction: column; align-items: stretch; gap: var(--space-2); } /* ========================================================================== MODAL UTILITIES ========================================================================== */ /* Prevent body scroll when modal is open */ .ds-modal-open { overflow: hidden; } /* Hide modal visually but keep accessible */ .ds-modal[aria-hidden="true"] { display: none; } /* --- ./image-cropper/_image-cropper.css --- */ /** * Image Cropper Component * ======================= * * Modal image cropper wrapping Cropper.js (loaded via CDN in base.html). * Markup partial: templates/igmarketplace/components/imageCropper.html * Controller: static/js/imageCropper.js (window.openImageCropper) */ .ds-image-cropper__body { display: flex; gap: var(--space-4); } .ds-image-cropper__stage { flex: 1; min-width: 0; min-height: 360px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--gray-400); } .ds-image-cropper__img { max-width: 100%; display: block; } .ds-image-cropper__controls { width: 220px; display: flex; flex-direction: column; gap: var(--space-3); } .ds-image-cropper__actions { display: flex; gap: var(--space-2); } .ds-image-cropper--circle .cropper-view-box, .ds-image-cropper--circle .cropper-face { border-radius: var(--radius-full); } @media (max-width: 768px) { .ds-image-cropper.ds-modal-backdrop { --mobile-nav-clearance: 65px; /* .mobile-nav-holder height */ padding-bottom: calc(var(--mobile-nav-clearance) + var(--space-4)); } .ds-image-cropper .ds-modal { max-height: calc(100dvh - var(--mobile-nav-clearance) - var(--space-8)); } .ds-image-cropper__body { flex-direction: column; } .ds-image-cropper__stage { min-height: var(--space-60); } .ds-image-cropper__controls { width: 100%; } .ds-image-cropper__actions { justify-content: center; } } /* --- ./tooltips/_tooltip.css --- */ /** * Design System - Tooltip Component * * Small informational overlays on hover or focus. * CSS-driven show/hide via :hover and :has(:focus-visible). * Use aria-label or aria-describedby on the trigger for screen readers. */ /* ========================================================================== TOOLTIP WRAPPER ========================================================================== */ .ds-tooltip { position: relative; display: inline-flex; } .ds-tooltip--fill { display: flex; flex: 1 1 auto; width: 100%; min-width: 0; } /* ========================================================================== TOOLTIP CONTENT ========================================================================== */ .ds-tooltip__content { position: absolute; z-index: var(--ds-z-tooltip); padding: var(--space-2) var(--space-3); font-family: var(--font-family-base); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; color: var(--color-text-inverse); background: var(--bw-black); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-width: none; white-space: nowrap; pointer-events: none; /* Hidden by default */ opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out); } /* Tooltip arrow */ .ds-tooltip__content::before { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; } /* ========================================================================== POSITIONS ========================================================================== */ /* Top (default) */ .ds-tooltip__content, .ds-tooltip__content--top { bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%); } .ds-tooltip__content::before, .ds-tooltip__content--top::before { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: var(--gray-900); } /* Bottom */ .ds-tooltip__content--bottom { top: calc(100% + var(--space-2)); bottom: auto; left: 50%; transform: translateX(-50%); } .ds-tooltip__content--bottom::before { bottom: 100%; top: auto; left: 50%; transform: translateX(-50%); border-top-color: transparent; border-bottom-color: var(--gray-900); } /* Left */ .ds-tooltip__content--left { right: calc(100% + var(--space-2)); bottom: auto; left: auto; top: 50%; transform: translateY(-50%); } .ds-tooltip__content--left::before { left: 100%; top: 50%; transform: translateY(-50%); border-top-color: transparent; border-left-color: var(--gray-900); } /* Right */ .ds-tooltip__content--right { left: calc(100% + var(--space-2)); bottom: auto; right: auto; top: 50%; transform: translateY(-50%); } .ds-tooltip__content--right::before { right: 100%; left: auto; top: 50%; transform: translateY(-50%); border-top-color: transparent; border-left-color: transparent; border-right-color: var(--gray-900); } /* ========================================================================== SHOW STATE ========================================================================== */ .ds-tooltip:hover .ds-tooltip__content, .ds-tooltip:has(:focus-visible) .ds-tooltip__content, .ds-tooltip__content.is-visible { opacity: 1; visibility: visible; } /* ========================================================================== TOP LAYER (anchor positioning) ========================================================================== */ @supports (anchor-name: --ds-tooltip) and (left: anchor(center)) { :where(.ds-tooltip__content[popover]) { inset: auto; margin: 0; border: 0; overflow: visible; width: auto; } .ds-tooltip__content[popover] { position-anchor: --ds-tooltip; bottom: calc(anchor(top) + var(--space-2)); left: anchor(center); transform: translateX(-50%); transition: opacity var(--duration-fast) var(--ease-out), display var(--duration-fast) var(--ease-out) allow-discrete, overlay var(--duration-fast) var(--ease-out) allow-discrete; } .ds-tooltip__content--bottom[popover] { top: calc(anchor(bottom) + var(--space-2)); bottom: auto; left: anchor(center); transform: translateX(-50%); } .ds-tooltip__content--left[popover] { right: calc(anchor(left) + var(--space-2)); left: auto; top: anchor(center); bottom: auto; transform: translateY(-50%); } .ds-tooltip__content--right[popover] { left: calc(anchor(right) + var(--space-2)); right: auto; top: anchor(center); bottom: auto; transform: translateY(-50%); } .ds-tooltip__content[popover]:popover-open { opacity: 1; visibility: visible; } @starting-style { .ds-tooltip__content[popover]:popover-open { opacity: 0; } } } /* ========================================================================== LIGHT VARIANT ========================================================================== */ .ds-tooltip__content--light { color: var(--color-text-default); background: var(--color-bg-primary); border: var(--border-width-1) solid var(--color-border-default); box-shadow: var(--shadow-xl); } .ds-tooltip__content--light::before { display: none; } /* --- ./popovers/_popover.css --- */ /** * Design System - Popover Component * * Rich contextual overlays with structured content. * Unlike tooltips, popovers can hold interactive content (buttons, forms). * Toggle .is-open on .ds-popover__content via JS. * JS is responsible for positioning, focus management, and Escape key handling. */ /* ========================================================================== POPOVER WRAPPER ========================================================================== */ .ds-popover { position: relative; display: inline-flex; } /* ========================================================================== POPOVER CONTENT ========================================================================== */ .ds-popover__content { position: absolute; z-index: var(--ds-z-popover); background: var(--color-bg-primary); border: var(--border-width-1) solid var(--color-border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-xl); /* Hidden by default */ opacity: 0; visibility: hidden; transform: scale(0.97) translateY(-4px); transform-origin: top left; transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out-emphasized); } .ds-popover__content.is-open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); } /* ========================================================================== POSITIONING VARIANTS ========================================================================== */ .ds-popover__content--bottom, .ds-popover__content:not([class*="--top"]):not([class*="--bottom-right"]):not([class*="--bottom-center"]):not([class*="--tour"]) { top: calc(100% + var(--space-2)); left: 0; transform-origin: top left; } .ds-popover__content--bottom-right { top: calc(100% + var(--space-2)); right: 0; left: auto; transform-origin: top right; } .ds-popover__content--bottom-center { top: calc(100% + var(--space-2)); left: 50%; transform: scale(0.97) translateX(-50%) translateY(-4px); transform-origin: top center; } .ds-popover__content--bottom-center.is-open { transform: scale(1) translateX(-50%) translateY(0); } .ds-popover__content--top { bottom: calc(100% + var(--space-2)); top: auto; left: 0; transform-origin: bottom left; transform: scale(0.97) translateY(4px); } .ds-popover__content--top.is-open { transform: scale(1) translateY(0); } /* ========================================================================== POPOVER SECTIONS ========================================================================== */ .ds-popover__header { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: var(--border-subtle); } .ds-popover__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin: 0; } .ds-popover__body { padding: var(--space-4); } .ds-popover__footer { padding: var(--space-3) var(--space-4); border-top: var(--border-subtle); display: flex; justify-content: flex-end; gap: var(--space-2); } /* ========================================================================== SIZES ========================================================================== */ .ds-popover__content--sm { width: 240px; } .ds-popover__content--md { width: 320px; } .ds-popover__content--lg { width: 400px; } /* ========================================================================== ARROW ========================================================================== */ .ds-popover__arrow { position: absolute; width: 10px; height: 10px; background: var(--color-bg-primary); border-left: var(--border-width-1) solid var(--color-border-default); border-top: var(--border-width-1) solid var(--color-border-default); transform: rotate(45deg); } .ds-popover__content--bottom .ds-popover__arrow, .ds-popover__content--bottom-right .ds-popover__arrow, .ds-popover__content:not([class*="--top"]):not([class*="--bottom-right"]):not([class*="--bottom-center"]):not([class*="--tour"]) .ds-popover__arrow { top: -6px; left: var(--space-4); } .ds-popover__content--bottom-center .ds-popover__arrow { top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); } .ds-popover__content--top .ds-popover__arrow { bottom: -6px; left: var(--space-4); transform: rotate(225deg); } .ds-popover__content--tour { position: fixed; max-width: calc(100vw - var(--space-6)); max-height: calc(100dvh - var(--space-24)); overflow-y: auto; border-radius: var(--radius-lg); transform-origin: top center; } .ds-tour-target { position: relative; z-index: var(--ds-z-modal); outline: var(--border-width-2) solid var(--color-border-brand); outline-offset: var(--space-1); border-radius: var(--radius-sm); } /* ========================================================================== DARK VARIANT (tour/onboarding) ========================================================================== */ .ds-popover__content--dark { background: var(--bw-black); border-color: transparent; color: var(--bw-white); } .ds-popover__content--dark .ds-popover__title { color: var(--bw-white); } .ds-popover__content--dark .ds-popover__body, .ds-popover__content--dark .ds-popover__body p { color: var(--color-neutral-300); } .ds-popover__content--dark .ds-popover__header { border-bottom-color: rgba(255, 255, 255, 0.1); } .ds-popover__content--dark .ds-popover__footer { border-top-color: rgba(255, 255, 255, 0.1); } .ds-popover__content--dark .ds-popover__arrow { background: var(--bw-black); border-color: transparent; } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .ds-popover__content { transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out); transform: none !important; } .ds-popover__content--bottom-center, .ds-popover__content--bottom-center.is-open { transform: translateX(-50%) !important; } } /* Menus */ /* --- ./dropdowns/_dropdown.css --- */ /** * Design System - Dropdown Component * * Contextual menus triggered by a button action. * Toggle .is-open on .ds-dropdown__menu via JS. * JS is also responsible for keyboard navigation (arrow keys, Escape, Home/End). */ /* ========================================================================== DROPDOWN WRAPPER ========================================================================== */ .ds-dropdown { position: relative; display: inline-flex; } /* ========================================================================== DROPDOWN MENU ========================================================================== */ .ds-dropdown__menu { position: absolute; z-index: var(--ds-z-dropdown); min-width: 200px; padding: var(--space-1) 0; background: var(--color-bg-primary); border: var(--border-width-1) solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); /* Hidden by default */ opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .ds-dropdown__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } /* Positioning variants */ .ds-dropdown__menu--bottom-left, .ds-dropdown__menu:not([class*="--top"]):not([class*="--bottom-right"]) { top: calc(100% + var(--space-1)); left: 0; } .ds-dropdown__menu--bottom-right { top: calc(100% + var(--space-1)); right: 0; left: auto; } .ds-dropdown__menu--top-left { bottom: calc(100% + var(--space-1)); top: auto; left: 0; transform: translateY(4px); } .ds-dropdown__menu--top-left.is-open { transform: translateY(0); } .ds-dropdown__menu--top-right { bottom: calc(100% + var(--space-1)); top: auto; right: 0; left: auto; transform: translateY(4px); } .ds-dropdown__menu--top-right.is-open { transform: translateY(0); } .ds-dropdown__menu--fixed { position: fixed; } /* ========================================================================== DROPDOWN ITEM ========================================================================== */ .ds-dropdown__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-4); font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); color: var(--color-text-default); background: transparent; border: none; cursor: pointer; text-align: left; text-decoration: none; white-space: nowrap; transition: background var(--duration-instant) var(--ease-out); } .ds-dropdown__item:hover { background: var(--color-interactive-hover); } .ds-dropdown__item:focus-visible { outline: none; background: var(--color-interactive-active); } .ds-dropdown__item--active { background: var(--color-interactive-selected); color: var(--color-brand-600); font-weight: var(--font-weight-medium); } .ds-dropdown__item--disabled { color: var(--color-text-disabled); cursor: not-allowed; pointer-events: none; } .ds-dropdown__item--danger { color: var(--color-error-600); } .ds-dropdown__item--danger:hover { background: var(--color-bg-error); } .ds-dropdown__item[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; } .ds-dropdown__item[aria-disabled="true"]:hover { background: none; } /* Item icon */ .ds-dropdown__item-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-icon-secondary); } .ds-dropdown__item--danger .ds-dropdown__item-icon { color: var(--color-error-500); } /* ========================================================================== DROPDOWN DIVIDER ========================================================================== */ .ds-dropdown__divider { height: 1px; margin: var(--space-1) 0; background: var(--color-border-subtle); border: none; } /* ========================================================================== DROPDOWN SECTION HEADER ========================================================================== */ .ds-dropdown__header { padding: var(--space-2) var(--space-4) var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-subtlest); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* ========================================================================== SIZES ========================================================================== */ .ds-dropdown__menu--sm { min-width: 160px; } .ds-dropdown__menu--sm .ds-dropdown__item { padding: var(--space-1-5) var(--space-3); font-size: var(--font-size-xs); } .ds-dropdown__menu--lg { min-width: 260px; } /* --- ./workspace-switcher/_workspace-switcher.css --- */ /** * Design System - Workspace Switcher (Agency Mode) * * Navbar workspace dropdown, the shared workspace picker modal, and the * small workspace chip reused in notifications/billing rows. The workspace * color dot is the one legitimately dynamic inline style (per-workspace hex). */ /* ========================================================================== SHARED DOT ========================================================================== */ .ds-workspace-dot { display: inline-block; flex-shrink: 0; width: var(--size-2); height: var(--size-2); border-radius: var(--radius-full); } /* ========================================================================== SWITCHER WRAPPER + TRIGGER ========================================================================== */ .ds-workspace-switcher { position: relative; display: inline-flex; /* Matches the cart-icon / notification-bell-wrapper left-margin rhythm in header.css; without it the pill sits flush against the notification bell. */ margin-left: var(--space-6); } .ds-workspace-switcher[hidden] { display: none; } .ds-workspace-switcher__trigger { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2); font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-default); background: var(--color-bg-primary); border: var(--border-width-1) solid var(--color-border-default); border-radius: var(--radius-full); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .ds-workspace-switcher__trigger:hover { background: var(--color-interactive-hover); } .ds-workspace-switcher__name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-workspace-switcher__chevron { width: var(--space-3-5); height: var(--space-3-5); color: var(--color-icon-secondary); } @media only screen and (max-width: 800px) { .ds-workspace-switcher__name { max-width: var(--space-16); } } /* ========================================================================== MENU ========================================================================== */ .ds-workspace-switcher__menu { right: 0; left: auto; min-width: 260px; top: calc(100% + var(--space-2)); } @media only screen and (max-width: 800px) { .ds-workspace-switcher__menu { position: fixed; top: calc(var(--space-16) + var(--space-1)); left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100vw - var(--space-8)); } .ds-workspace-switcher__menu.is-open { transform: translateX(-50%); } } .ds-workspace-switcher__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4) var(--space-1); } .ds-workspace-switcher__header-label { padding: 0; } /* ========================================================================== WORKSPACE ROW ========================================================================== */ .ds-workspace-switcher__row { display: flex; align-items: center; gap: var(--space-1); padding-right: var(--space-2); } .ds-workspace-switcher__row--active { background: var(--color-interactive-selected); } .ds-workspace-switcher__row-btn { display: flex; flex: 1; align-items: center; min-width: 0; gap: var(--space-3); padding: var(--space-2) var(--space-4); font-family: var(--font-family-base); font-size: var(--font-size-sm); color: var(--color-text-default); background: transparent; border: none; cursor: pointer; text-align: left; } .ds-workspace-switcher__row:not(.ds-workspace-switcher__row--active) .ds-workspace-switcher__row-btn:hover { background: var(--color-interactive-hover); } .ds-workspace-switcher__row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-workspace-switcher__check { flex-shrink: 0; width: var(--size-4); height: var(--size-4); color: var(--color-brand-600); } .ds-workspace-switcher__row--locked .ds-workspace-switcher__row-btn, .ds-workspace-switcher__row--locked .ds-workspace-switcher__gear { opacity: 0.5; } .ds-workspace-switcher__row--locked .ds-workspace-switcher__row-btn { color: var(--color-text-subtle); cursor: not-allowed; } .ds-workspace-switcher__row--locked .ds-workspace-switcher__row-btn:hover { background: transparent; } .ds-workspace-switcher__row--locked .ds-workspace-switcher__check { color: var(--color-icon-secondary); } .ds-workspace-switcher__gear { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--space-7); height: var(--space-7); color: var(--color-icon-secondary); background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .ds-workspace-switcher__gear:hover { background: var(--color-interactive-hover); color: var(--color-icon-primary); } .ds-workspace-switcher__gear[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; } .ds-workspace-switcher__gear[aria-disabled="true"]:hover { background: transparent; color: var(--color-text-disabled); } .ds-workspace-switcher__gear svg { width: var(--size-4); height: var(--size-4); } /* ========================================================================== ADD WORKSPACE FOOTER ITEM ========================================================================== */ .ds-workspace-switcher__add { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-4); font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-brand); background: transparent; border: none; cursor: pointer; text-align: left; } .ds-workspace-switcher__add svg { width: var(--size-4); height: var(--size-4); } .ds-workspace-switcher__add:hover { background: var(--color-bg-brand-subtle); } .ds-workspace-switcher__add.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; pointer-events: none; } .ds-workspace-switcher__add[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; } .ds-workspace-switcher__add[aria-disabled="true"]:hover { background: transparent; } /* ========================================================================== COLOR INPUT (native swatch, reused by create/manage/naming modals) ========================================================================== */ .ds-workspace-switcher__color-input { width: var(--size-12); height: var(--space-9); padding: var(--space-1); background: var(--color-bg-primary); border: var(--border-width-1) solid var(--color-border-default); border-radius: var(--radius-md); cursor: pointer; } .ds-workspace-switcher__naming-copy { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-subtle); } /* ========================================================================== WORKSPACE CHIP (notifications / billing rows) ========================================================================== */ .ds-workspace-chip { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-1-5); padding: var(--space-0-5) var(--space-2); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: var(--color-text-subtle); background: var(--color-bg-secondary); border-radius: var(--radius-full); white-space: nowrap; } .ds-workspace-chip--account { color: var(--color-text-subtlest); background: transparent; } /* ========================================================================== BILLING PAGE-LOCAL WORKSPACE FILTER ========================================================================== */ .ds-workspace-filter { display: inline-flex; } .ds-billing-transfer-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); row-gap: var(--space-1); } .ds-billing-transfer { display: inline-flex; align-items: center; gap: var(--space-1-5); } .ds-billing-transfer__arrow { width: var(--space-3-5); height: var(--space-3-5); color: var(--color-icon-secondary); } .ds-billing-move-from { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-default); } .ds-workspace-switcher__manage-danger-zone { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-subtle); } .ds-workspace-switcher__archive-note { margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-subtle); } .ds-workspace-switcher__create-body { display: flex; flex-direction: column; overflow-y: hidden; min-height: 0; } .ds-workspace-switcher__member-field { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .ds-workspace-switcher__member-search { margin-bottom: var(--space-2); } .ds-workspace-switcher__member-count { margin: 0 0 var(--space-2); font-size: var(--font-size-2xs); color: var(--color-text-subtlest); } .ds-workspace-switcher__member-checklist { flex: 1 1 auto; min-height: 0; } .ds-workspace-switcher__member-checklist .ds-checklist__items { flex: 1 1 auto; min-height: 0; max-height: 230px; } /* Data Display */ /* --- ./avatars/_avatar.css --- */ /** * Design System - Avatar Component * * User profile images and placeholders. */ /* ========================================================================== BASE AVATAR ========================================================================== */ .ds-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-neutral-200); color: var(--color-text-subtle); font-weight: var(--font-weight-medium); overflow: hidden; flex-shrink: 0; } .ds-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== AVATAR SIZES ========================================================================== */ .ds-avatar--2xs { width: 20px; height: 20px; font-size: var(--font-size-2xs); } .ds-avatar--xs { width: 24px; height: 24px; font-size: var(--font-size-xs); } .ds-avatar--sm { width: 32px; height: 32px; font-size: var(--font-size-sm); } /* Default is 40px */ .ds-avatar--md { width: 48px; height: 48px; font-size: var(--font-size-base); } .ds-avatar--lg { width: 64px; height: 64px; font-size: var(--font-size-lg); } .ds-avatar--xl { width: 96px; height: 96px; font-size: var(--font-size-xl); } .ds-avatar--2xl { width: 128px; height: 128px; font-size: var(--font-size-2xl); } /* ========================================================================== AVATAR VARIANTS ========================================================================== */ /* Square avatar */ .ds-avatar--square { border-radius: var(--radius-md); } /* Rounded square */ .ds-avatar--rounded { border-radius: var(--radius-lg); } /* With border */ .ds-avatar--bordered { border: 2px solid white; box-shadow: var(--shadow-sm); } /* ========================================================================== AVATAR PLACEHOLDER (initials) ========================================================================== */ .ds-avatar--placeholder { background: var(--color-brand-100); color: var(--color-brand-600); } /* Color variants for placeholders */ .ds-avatar--blue { background: var(--color-info-100); color: var(--color-info-600); } .ds-avatar--green { background: var(--color-success-100); color: var(--color-success-600); } .ds-avatar--yellow { background: var(--color-warning-100); color: var(--color-warning-600); } .ds-avatar--red { background: var(--color-error-100); color: var(--color-error-600); } /* ========================================================================== AVATAR STATUS INDICATOR ========================================================================== */ .ds-avatar-wrapper { position: relative; display: inline-block; } .ds-avatar-status { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background: var(--color-neutral-400); border: 2px solid white; border-radius: var(--radius-full); } .ds-avatar-status--online { background: var(--color-success-500); } .ds-avatar-status--offline { background: var(--color-neutral-400); } .ds-avatar-status--busy { background: var(--color-error-500); } .ds-avatar-status--away { background: var(--color-warning-500); } /* Status sizes based on avatar size */ .ds-avatar--sm + .ds-avatar-status, .ds-avatar--xs + .ds-avatar-status { width: 8px; height: 8px; } .ds-avatar--lg + .ds-avatar-status, .ds-avatar--xl + .ds-avatar-status { width: 14px; height: 14px; } /* ========================================================================== AVATAR GROUP ========================================================================== */ .ds-avatar-group { display: inline-flex; flex-direction: row-reverse; } .ds-avatar-group .ds-avatar { border: 2px solid white; margin-left: -8px; } .ds-avatar-group .ds-avatar:last-child { margin-left: 0; } /* Hover to show full avatars */ .ds-avatar-group:hover .ds-avatar { margin-left: var(--space-1); } /* Count indicator for extra avatars */ .ds-avatar--count { background: var(--color-neutral-200); color: var(--color-text-subtle); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } /* ========================================================================== AVATAR WITH BADGE ========================================================================== */ .ds-avatar-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 var(--space-1); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); line-height: 18px; text-align: center; color: white; background: var(--color-brand-500); border: 2px solid white; border-radius: var(--radius-full); } /* ========================================================================== AVATAR ACTION (clickable) ========================================================================== */ .ds-avatar--action { cursor: pointer; transition: var(--transition-all-fast); } .ds-avatar--action:hover { transform: scale(1.05); } .ds-avatar--action:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; } /* Upload avatar */ .ds-avatar--upload { cursor: pointer; border: 2px dashed var(--color-border-default); background: var(--color-bg-secondary); } .ds-avatar--upload:hover { border-color: var(--color-brand-500); background: var(--color-brand-50); } .ds-avatar--upload:hover .ds-avatar__upload-icon { color: var(--color-brand-500); } .ds-avatar__upload-icon { color: var(--color-text-subtlest); transition: color var(--duration-fast) var(--ease-out); } /* --- ./tables/_table.css --- */ /** * Design System - Table Component * * Data tables with sorting, selection, and responsive behavior. */ /* ========================================================================== TABLE WRAPPER ========================================================================== */ .ds-table-wrapper { width: 100%; overflow-x: auto; border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-md); } .ds-table-wrapper--bordered { box-shadow: none; border: var(--border-default); } /* ========================================================================== BASE TABLE ========================================================================== */ .ds-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } /* ========================================================================== TABLE HEADER ========================================================================== */ .ds-table thead { background: var(--color-bg-secondary); } .ds-table th { padding: var(--space-3) var(--space-4); text-align: left; font-weight: var(--font-weight-semibold); color: var(--color-text-subtle); border-bottom: var(--border-default); white-space: nowrap; } /* Sortable header */ .ds-table th[data-sortable] { cursor: pointer; user-select: none; } .ds-table th[data-sortable]:hover { background: var(--color-neutral-200); } .ds-table__sort-icon { display: inline-flex; margin-left: var(--space-1); opacity: 0.3; } .ds-table__sort-icon, .ds-table__sort-icon i, .ds-table__sort-icon svg { width: var(--space-3-5); height: var(--space-3-5); } .ds-table th[data-sorted] .ds-table__sort-icon { opacity: 1; } /* Expand toggle — chevron in a fit cell that rotates when its row carries .ds-table__row--expanded (pairs with expandable card tables). */ .ds-table__expand { display: inline-flex; width: var(--space-4); height: var(--space-4); color: var(--color-text-subtle); transition: transform var(--duration-fast) var(--ease-out); } .ds-table__row--expanded .ds-table__expand { transform: rotate(90deg); } /* ========================================================================== TABLE BODY ========================================================================== */ .ds-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-subtle); color: var(--color-text-default); vertical-align: middle; } .ds-table tbody tr:last-child td { border-bottom: none; } /* Row hover */ .ds-table tbody tr:hover { background: var(--color-bg-secondary); } /* Selected row */ .ds-table tbody tr.ds-table__row--selected { background: var(--color-brand-50); } /* Clickable row */ .ds-table tbody tr.ds-table__row--clickable { cursor: pointer; } /* ========================================================================== TABLE VARIANTS ========================================================================== */ /* Striped */ .ds-table--striped tbody tr:nth-child(even) { background: var(--color-bg-secondary); } /* Compact */ .ds-table--compact th, .ds-table--compact td { padding: var(--space-2) var(--space-3); } /* Borderless */ .ds-table--borderless th, .ds-table--borderless td { border: none; } /* ========================================================================== TABLE CELL VARIANTS ========================================================================== */ /* Numeric data (right-aligned) */ .ds-table td.ds-table__cell--numeric, .ds-table th.ds-table__cell--numeric { text-align: right; font-variant-numeric: tabular-nums; } /* Actions cell */ .ds-table td.ds-table__cell--actions { text-align: right; white-space: nowrap; } /* Minimal width cell */ .ds-table th.ds-table__cell--fit, .ds-table td.ds-table__cell--fit { width: 1%; white-space: nowrap; } /* Truncate long content */ .ds-table td.ds-table__cell--truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== TABLE ELEMENTS ========================================================================== */ /* User cell (avatar + name) */ .ds-table__user { display: flex; align-items: center; gap: var(--space-3); } .ds-table__user-info { display: flex; flex-direction: column; } .ds-table__user-name { font-weight: var(--font-weight-medium); color: var(--color-text-default); } .ds-table__user-email { font-size: var(--font-size-xs); color: var(--color-text-subtlest); } /* ========================================================================== TABLE CHECKBOX ========================================================================== */ .ds-table__checkbox { width: 20px; height: 20px; cursor: pointer; } .ds-table th:first-child:has(.ds-table__checkbox), .ds-table td:first-child:has(.ds-table__checkbox) { width: 48px; text-align: center; } /* ========================================================================== TABLE FOOTER ========================================================================== */ .ds-table tfoot { background: var(--color-bg-secondary); font-weight: var(--font-weight-medium); } .ds-table tfoot td { border-top: var(--border-default); border-bottom: none; } /* ========================================================================== TABLE CAPTION ========================================================================== */ .ds-table caption { padding: var(--space-4); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); text-align: left; caption-side: top; } /* ========================================================================== PAGINATION ========================================================================== */ .ds-table-pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-top: var(--border-subtle); background: var(--color-bg-secondary); font-size: var(--font-size-sm); } .ds-table-pagination__info { color: var(--color-text-subtle); } .ds-table-pagination__controls { display: flex; align-items: center; gap: var(--space-2); } .ds-table-pagination__btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: white; border: var(--border-default); border-radius: var(--radius-md); color: var(--color-text-subtle); cursor: pointer; transition: var(--transition-all-fast); } .ds-table-pagination__btn:hover:not(:disabled) { background: var(--color-neutral-100); color: var(--color-text-default); } .ds-table-pagination__btn:disabled { opacity: 0.5; cursor: not-allowed; } .ds-table-pagination__pages { display: flex; gap: var(--space-1); } .ds-table-pagination__page { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--space-2); background: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text-subtle); cursor: pointer; transition: var(--transition-all-fast); } .ds-table-pagination__page:hover { background: var(--color-neutral-100); } .ds-table-pagination__page--active { background: var(--color-brand-500); color: white; } .ds-table-pagination__page--active:hover { background: var(--color-brand-600); } /* ========================================================================== RESPONSIVE TABLE ========================================================================== */ @media (max-width: 768px) { .ds-table--responsive { display: block; } .ds-table--responsive thead { display: none; } .ds-table--responsive tbody, .ds-table--responsive tr, .ds-table--responsive td { display: block; } .ds-table--responsive tr { padding: var(--space-4); border-bottom: var(--border-default); } .ds-table--responsive td { display: flex; justify-content: space-between; padding: var(--space-2) 0; border: none; } .ds-table--responsive td::before { content: attr(data-label); font-weight: var(--font-weight-semibold); color: var(--color-text-subtle); } } /* ========================================================================== EMPTY TABLE STATE ========================================================================== */ .ds-table__empty { padding: var(--space-12) var(--space-6); text-align: center; color: var(--color-text-subtlest); } .ds-table__empty td { border: none; } /* ========================================================================== TABLE CARDS VARIANT Each body row renders as a rounded white card, separated by gaps that reveal the surface behind the table (themed via --ds-table-cards-gap). Additive only — does not modify any base .ds-table rule. ========================================================================== */ .ds-table-wrapper--cards { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; } .ds-table--cards { border-collapse: separate; border-spacing: 0; background: transparent; } .ds-table--cards thead { background: transparent; } .ds-table--cards thead th { background: transparent; border-bottom: var(--space-1) solid var(--ds-table-cards-gap); } .ds-table--cards tbody td { background: var(--bw-white); border-top: none; border-bottom: var(--space-1) solid var(--ds-table-cards-gap); } .ds-table--cards tbody tr:last-child td { border-bottom: none; } .ds-table--cards tbody tr td:first-child { border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); } .ds-table--cards tbody tr td:last-child { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); } /* Cards are static — neutralize the base row-hover so every row keeps its resting fill (white / zebra / expanded / detail) uniformly, with no half-changed card. */ .ds-table--cards tbody tr:hover { background: transparent; } .ds-table--cards tbody tr.ds-table__row--alt td { background: transparent; } .ds-table--cards tbody tr.ds-table__row--expanded td { background: var(--bw-white); border-bottom: none; } .ds-table--cards tbody tr.ds-table__row--expanded td:first-child { border-bottom-left-radius: 0; } .ds-table--cards tbody tr.ds-table__row--expanded td:last-child { border-bottom-right-radius: 0; } .ds-table--cards tbody tr.ds-table__detail td { background: var(--bw-white); padding: 0; /* Square top corners so the detail merges with its expanded parent as one card */ border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); } /* Expanding must not recolor a row — a zebra (alt) row keeps its surface fill when expanded, and its detail row matches, so the whole card stays one color. */ .ds-table--cards tbody tr.ds-table__row--alt.ds-table__row--expanded td { background: transparent; } .ds-table--cards tbody tr.ds-table__row--alt.ds-table__row--expanded + tr.ds-table__detail td { background: transparent; } /* Soft rounded sortable-hover, scoped to cards (replaces the harsh sharp base block) */ .ds-table--cards th[data-sortable]:hover { background: var(--color-neutral-200); border-radius: var(--radius-md); } /* Loading States */ /* --- ./loaders/_loader.css --- */ /** * Design System - Loader Components * * Loading indicators and skeleton screens. */ /* ========================================================================== SPINNER ========================================================================== */ .ds-spinner { display: inline-block; width: var(--size-6); height: var(--size-6); border: 3px solid var(--color-neutral-200); border-top-color: var(--color-brand-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } /* Spinner Sizes */ .ds-spinner--xs { width: var(--size-3); height: var(--size-3); border-width: var(--border-width-2); } .ds-spinner--sm { width: var(--size-4); height: var(--size-4); border-width: var(--border-width-2); } /* Default is 24px (--size-6) */ .ds-spinner--md { width: var(--size-8); height: var(--size-8); border-width: 3px; } .ds-spinner--lg { width: var(--size-10); height: var(--size-10); border-width: var(--border-width-4); } .ds-spinner--xl { width: var(--size-12); height: var(--size-12); border-width: var(--border-width-4); } /* Spinner Colors */ .ds-spinner--white { border-color: rgba(255, 255, 255, 0.3); border-top-color: white; } .ds-spinner--dark { border-color: var(--color-neutral-300); border-top-color: var(--color-neutral-700); } /* ========================================================================== DOTS LOADER ========================================================================== */ .ds-dots { display: inline-flex; align-items: center; gap: var(--space-2); } .ds-dots__dot { width: var(--size-2); height: var(--size-2); background: var(--color-brand-500); border-radius: var(--radius-full); animation: dotPulse 1.4s ease-in-out infinite; } .ds-dots__dot:nth-child(1) { animation-delay: 0s; } .ds-dots__dot:nth-child(2) { animation-delay: 0.2s; } .ds-dots__dot:nth-child(3) { animation-delay: 0.4s; } @keyframes dotPulse { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* Dots Sizes */ .ds-dots--sm .ds-dots__dot { width: 6px; height: 6px; } .ds-dots--lg .ds-dots__dot { width: 10px; height: 10px; } /* ========================================================================== PROGRESS BAR ========================================================================== */ .ds-progress { width: 100%; height: var(--size-2); background: var(--color-neutral-200); border-radius: var(--radius-full); overflow: hidden; } .ds-progress__bar { height: 100%; background: var(--color-brand-500); border-radius: var(--radius-full); transition: width var(--duration-normal) var(--ease-out); } /* Indeterminate progress */ .ds-progress--indeterminate .ds-progress__bar { width: 30%; animation: indeterminate 1.5s ease-in-out infinite; } @keyframes indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } /* Progress Sizes */ .ds-progress--sm { height: 4px; } .ds-progress--lg { height: 12px; } /* Progress Colors */ .ds-progress--success .ds-progress__bar { background: var(--color-success-500); } .ds-progress--warning .ds-progress__bar { background: var(--color-warning-500); } .ds-progress--error .ds-progress__bar { background: var(--color-error-500); } /* ========================================================================== SKELETON LOADING ========================================================================== */ .ds-skeleton { background: linear-gradient( 90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md); } /* Skeleton Text */ .ds-skeleton--text { height: var(--size-4); width: 100%; margin-bottom: var(--space-2); } .ds-skeleton--text-sm { height: var(--size-3); } .ds-skeleton--text-lg { height: var(--size-5); } /* Skeleton Heading */ .ds-skeleton--heading { height: var(--space-7); width: 60%; margin-bottom: var(--space-4); } /* Skeleton Avatar */ .ds-skeleton--avatar { width: var(--size-10); height: var(--size-10); border-radius: var(--radius-full); } .ds-skeleton--avatar-sm { width: var(--size-8); height: var(--size-8); } .ds-skeleton--avatar-lg { width: var(--size-14); height: var(--size-14); } /* Skeleton Image */ .ds-skeleton--image { width: 100%; aspect-ratio: 16 / 9; } .ds-skeleton--image-square { aspect-ratio: 1; } /* Skeleton Button */ .ds-skeleton--button { width: 100px; height: 40px; } /* Skeleton Card */ .ds-skeleton--card { height: 200px; width: 100%; } /* ========================================================================== SKELETON LAYOUTS ========================================================================== */ /* Card skeleton */ .ds-skeleton-card { padding: var(--space-4); background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .ds-skeleton-card__image { height: 160px; margin: calc(var(--space-4) * -1); margin-bottom: var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* List item skeleton */ .ds-skeleton-list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; } .ds-skeleton-list-item__content { flex: 1; } /* ========================================================================== LOADING OVERLAY ========================================================================== */ .ds-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.8); z-index: 10; } .ds-loading-overlay--dark { background: rgba(0, 0, 0, 0.5); } /* ========================================================================== LOADING STATE FOR ELEMENTS ========================================================================== */ .ds-loading { position: relative; pointer-events: none; } .ds-loading::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; } /* ========================================================================== EMPTY STATE ========================================================================== */ .ds-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); text-align: center; } .ds-empty__icon { width: var(--size-16); height: var(--size-16); margin-bottom: var(--space-4); color: var(--color-neutral-400); } .ds-empty__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin-bottom: var(--space-2); } .ds-empty__message { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin-bottom: var(--space-6); max-width: 400px; } /* --- ./enrichment-overlay/_enrichment-overlay.css --- */ /** * Design System - Enrichment Overlay * * Full-screen transition shown while the creator's public profile is pulled * after "Start Profile Set-up". Centred sparkle icon with a soft pulsing glow * ring behind it, plus a static phrase whose trailing dots grow (. -> .. -> ...). * * Toggle visibility with the is-open state class. * * Usage: *
*
* * * * * Fetching your profile * *
*
*/ .ds-enrichment-overlay { position: fixed; inset: 0; z-index: var(--ds-z-modal); display: none; align-items: center; justify-content: center; background: var(--enrichment-overlay-bg); } .ds-enrichment-overlay.is-open { display: flex; animation: fadeIn var(--duration-normal) var(--ease-out); } .ds-enrichment-overlay__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6); text-align: center; } /* Sparkle sits above a soft, neutral glow ring that pulses outward. */ .ds-enrichment-overlay__glow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--size-8); height: var(--size-8); } .ds-enrichment-overlay__glow::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--color-bg-secondary); box-shadow: 0 0 var(--space-4) var(--color-border-default); animation: enrichmentGlow var(--duration-1000) var(--ease-out) infinite; } .ds-enrichment-overlay__icon { position: relative; width: var(--size-8); height: var(--size-8); color: var(--enrichment-overlay-icon); animation: var(--animate-sparkle); } .ds-enrichment-overlay__icon svg { width: 100%; height: 100%; } .ds-enrichment-overlay__caption { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--enrichment-overlay-caption); line-height: var(--line-height-normal); animation: fadeIn var(--duration-normal) var(--ease-out); } .ds-enrichment-overlay__subcaption { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-subtlest); line-height: var(--line-height-normal); animation: fadeIn var(--duration-normal) var(--ease-out); } /* Fixed-width slot so the phrase never reflows as the dots grow. */ .ds-enrichment-overlay__dots { display: inline-block; width: 1.5em; text-align: left; white-space: pre; } @keyframes enrichmentGlow { 0%, 100% { transform: scale(0.9); opacity: 0.6; } 50% { transform: scale(1.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ds-enrichment-overlay.is-open, .ds-enrichment-overlay__glow::before, .ds-enrichment-overlay__icon, .ds-enrichment-overlay__caption, .ds-enrichment-overlay__subcaption { animation: none; } } /* Progress */ /* --- ./progress-ring/_progress-ring.css --- */ /** * Design System - Progress Ring * * Circular SVG progress indicator with a value in the centre. Used for the * Profile Score (e.g. 72/100) on the creator onboarding "Optimize" step. * ds-progress is linear only, so this is a separate component. * * The arc length is driven by stroke-dasharray / stroke-dashoffset on the * progress circle. Per instance, set: * --ring-circumference (2 * PI * r, e.g. r=42 -> ~263.89) * --ring-offset (circumference * (1 - value/100)) * on the .ds-progress-ring__value circle (inline style), then the ring * animates from empty to the target on render via the ringDraw keyframe. * * Usage: *
* * * * *
* 72 * / 100 *
*
*/ .ds-progress-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--size-24); height: var(--size-24); flex-shrink: 0; } .ds-progress-ring__svg { width: 100%; height: 100%; /* rotate to start the arc at top; scaleX flips the sweep counter-clockwise to match the design */ transform: rotate(-90deg) scaleX(-1); } .ds-progress-ring__track { fill: none; stroke: var(--progress-ring-track); stroke-width: var(--border-width-8); } .ds-progress-ring__value { fill: none; stroke: var(--progress-ring-fill); stroke-width: var(--border-width-8); stroke-linecap: round; stroke-dasharray: var(--ring-circumference); stroke-dashoffset: var(--ring-offset); animation: ringDraw var(--duration-1000) var(--ease-out); } .ds-progress-ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: var(--line-height-none); } .ds-progress-ring__score { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--progress-ring-score); line-height: var(--line-height-none); } .ds-progress-ring__unit { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--progress-ring-unit); margin-top: var(--space-0-5); } @media (prefers-reduced-motion: reduce) { .ds-progress-ring__value { animation: none; } } /* Navigation */ /* --- ./navigation/_nav.css --- */ /** * Design System - Navigation Components * * Tabs, breadcrumbs, pagination, and navigation patterns. */ /* ========================================================================== TABS ========================================================================== */ .ds-tabs { display: flex; border-bottom: var(--border-default); gap: var(--space-1); } .ds-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-subtle); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: var(--transition-all-fast); } .ds-tab:hover { color: var(--color-text-default); background: var(--color-neutral-50); } .ds-tab--active { color: var(--color-brand-500); border-bottom-color: var(--color-brand-500); } .ds-tab:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: -2px; } .ds-tab:disabled { opacity: 0.5; cursor: not-allowed; } /* Tab with badge/count */ .ds-tab__badge { padding: var(--space-0-5) var(--space-2); font-size: var(--font-size-xs); background: var(--color-neutral-200); border-radius: var(--radius-full); } .ds-tab--active .ds-tab__badge { background: var(--color-brand-100); color: var(--color-brand-600); } /* Tabs Variants */ .ds-tabs--pills { border-bottom: none; gap: var(--space-2); } .ds-tabs--pills .ds-tab { border-radius: var(--radius-full); border-bottom: none; margin-bottom: 0; } .ds-tabs--pills .ds-tab--active { background: var(--color-brand-500); color: white; } .ds-tabs--pills .ds-tab--active .ds-tab__badge { background: rgba(255, 255, 255, 0.2); color: white; } /* Tabs - Contained */ .ds-tabs--contained { background: var(--color-neutral-100); border-radius: var(--radius-lg); border-bottom: none; padding: var(--space-1); } .ds-tabs--contained .ds-tab { border-radius: var(--radius-md); border-bottom: none; margin-bottom: 0; } .ds-tabs--contained .ds-tab--active { background: white; color: var(--color-text-default); box-shadow: var(--shadow-sm); } /* ========================================================================== TAB PANELS ========================================================================== */ .ds-tab-panels { padding-top: var(--space-4); } .ds-tab-panel { display: none; } .ds-tab-panel--active { display: block; animation: var(--animate-fade-in); } /* ========================================================================== BREADCRUMBS ========================================================================== */ .ds-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-sm); } .ds-breadcrumbs--footer { padding-top: var(--space-12); } .ds-breadcrumb { display: inline-flex; align-items: center; color: var(--color-text-subtle); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .ds-breadcrumb:hover { color: var(--color-brand-500); } .ds-breadcrumb--current { color: var(--color-text-default); font-weight: var(--font-weight-medium); pointer-events: none; } .ds-breadcrumb__separator { color: var(--color-neutral-400); margin: 0 var(--space-1); } .ds-breadcrumb__icon { width: 16px; height: 16px; margin-right: var(--space-1); } /* ========================================================================== PAGINATION ========================================================================== */ .ds-pagination { display: flex; align-items: center; gap: var(--space-1); } .ds-pagination__btn { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-subtle); background: transparent; border: var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-all-fast); } .ds-pagination__btn:hover:not(:disabled) { background: var(--color-neutral-100); color: var(--color-text-default); } .ds-pagination__btn--active { background: var(--color-brand-500); border-color: var(--color-brand-500); color: white; } .ds-pagination__btn--active:hover { background: var(--color-brand-600); color: white; } .ds-pagination__btn:disabled { opacity: 0.5; cursor: not-allowed; } .ds-pagination__ellipsis { padding: 0 var(--space-2); color: var(--color-text-subtlest); } /* Pagination - Simple (prev/next only) */ .ds-pagination--simple { justify-content: space-between; } .ds-pagination--simple .ds-pagination__btn { gap: var(--space-2); } /* ========================================================================== NAV LINKS (vertical navigation) ========================================================================== */ .ds-nav { display: flex; flex-direction: column; gap: var(--space-1); } .ds-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-subtle); text-decoration: none; border-radius: var(--radius-md); transition: var(--transition-all-fast); } .ds-nav-item:hover { background: var(--color-neutral-100); color: var(--color-text-default); } .ds-nav-item--active { background: var(--color-brand-50); color: var(--color-brand-600); } .ds-nav-item--active:hover { background: var(--color-brand-100); } .ds-nav-item__icon { width: 20px; height: 20px; flex-shrink: 0; } .ds-nav-item__badge { margin-left: auto; padding: var(--space-0-5) var(--space-2); font-size: var(--font-size-xs); background: var(--color-neutral-200); border-radius: var(--radius-full); } .ds-nav-item--active .ds-nav-item__badge { background: var(--color-brand-100); } /* Nav group */ .ds-nav-group { margin-bottom: var(--space-4); } .ds-nav-group__title { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-subtlest); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } /* ========================================================================== STEPS / STEPPER ========================================================================== */ .ds-steps { display: flex; align-items: flex-start; } .ds-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; } .ds-step::before { content: ''; position: absolute; top: 16px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--color-neutral-300); } .ds-step:last-child::before { display: none; } .ds-step--completed::before { background: var(--color-brand-500); } .ds-step__indicator { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-subtlest); background: var(--color-neutral-200); border-radius: var(--radius-full); position: relative; z-index: 1; } .ds-step--active .ds-step__indicator { background: var(--color-brand-500); color: white; } .ds-step--completed .ds-step__indicator { background: var(--color-brand-500); color: white; } .ds-step--disabled .ds-step__indicator { background: var(--color-neutral-200); color: var(--color-text-subtlest); } .ds-step--disabled .ds-step__title { color: var(--color-text-subtlest); } .ds-step__indicator--sm { width: calc(var(--size-5) + var(--size-0-5)); height: calc(var(--size-5) + var(--size-0-5)); font-size: var(--font-size-xs); } .ds-step__content { margin-top: var(--space-3); text-align: center; } .ds-step__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-default); } .ds-step__description { font-size: var(--font-size-xs); color: var(--color-text-subtlest); margin-top: var(--space-1); } /* Vertical steps */ .ds-steps--vertical { flex-direction: column; gap: 0; } .ds-steps--vertical .ds-step { flex-direction: row; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-6); } .ds-steps--vertical .ds-step::before { top: 32px; left: 15px; right: auto; bottom: 0; width: 2px; height: auto; } .ds-steps--vertical .ds-step__content { text-align: left; margin-top: 0; } /* --- ./tabs/_tab.css --- */ /** * Design System - Tabs Component * * Navigation tabs for switching between related views. * Use role="tablist", role="tab", role="tabpanel" for accessibility. */ /* ========================================================================== TAB CONTAINER ========================================================================== */ .ds-tabs { width: 100%; } /* ========================================================================== TAB LIST ========================================================================== */ .ds-tabs__list { display: flex; gap: 0; border-bottom: var(--border-width-1) solid var(--color-border-default); overflow-x: auto; scrollbar-width: none; } .ds-tabs__list::-webkit-scrollbar { display: none; } /* ========================================================================== TAB ITEM ========================================================================== */ .ds-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-subtle); background: transparent; border: none; border-bottom: var(--border-width-2) solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .ds-tab:hover { color: var(--color-text-default); } .ds-tab--active, .ds-tab[aria-selected="true"] { color: var(--color-brand-500); border-bottom-color: var(--color-brand-500); font-weight: var(--font-weight-semibold); } .ds-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring-brand); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .ds-tab:disabled, .ds-tab--disabled { color: var(--color-text-disabled); cursor: not-allowed; pointer-events: none; } /* Tab count badge */ .ds-tab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); background: var(--color-neutral-200); color: var(--color-text-subtle); border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-out); } .ds-tab--active .ds-tab__badge, .ds-tab[aria-selected="true"] .ds-tab__badge { background: var(--color-brand-100); color: var(--color-brand-700); } .ds-tab__badge.is-hidden { display: none; } /* ========================================================================== VARIANTS ========================================================================== */ /* Pills variant - contained, rounded tabs on a background track */ .ds-tabs--pills .ds-tabs__list { border-bottom: none; gap: var(--space-1); padding: var(--space-1); background: var(--color-neutral-100); border-radius: var(--radius-lg); display: inline-flex; } .ds-tabs--pills .ds-tab { border-bottom: none; border-radius: var(--radius-md); margin-bottom: 0; } .ds-tabs--pills .ds-tab--active, .ds-tabs--pills .ds-tab[aria-selected="true"] { background: var(--color-bg-primary); color: var(--color-text-default); box-shadow: var(--shadow-sm); } /* Full variant - equal-width segments; keep after the pills rules (equal-specificity override) and flex:1 the list because _nav.css makes the .ds-tabs wrapper a flex row */ .ds-tabs--full .ds-tabs__list { display: flex; flex: 1; } .ds-tabs--full .ds-tab { flex: 1; justify-content: center; } /* Enclosed variant - bordered tabs that connect to panel border */ .ds-tabs--enclosed .ds-tabs__list { border-bottom: none; gap: 0; } .ds-tabs--enclosed .ds-tab { border: var(--border-width-1) solid transparent; border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; margin-bottom: 0; } .ds-tabs--enclosed .ds-tab--active, .ds-tabs--enclosed .ds-tab[aria-selected="true"] { background: var(--color-bg-primary); border-color: var(--color-border-default); color: var(--color-text-default); border-bottom-color: var(--color-bg-primary); position: relative; z-index: 1; } /* ========================================================================== TAB PANEL ========================================================================== */ .ds-tab-panel { padding-top: var(--space-4); } .ds-tab-panel[hidden] { display: none; } /* --- ./brief-list/_brief-list.css --- */ /** * Design System - Brief List Component * * Compact sidebar list of saved order briefs, grouped under headings. * Rows reveal their actions on hover / focus; JS handles apply, rename and delete. */ .ds-brief-list { display: flex; flex-direction: column; gap: var(--space-6); } .ds-brief-list__group { display: flex; flex-direction: column; gap: var(--space-1); } .ds-brief-list__heading { padding: 0 var(--space-2); margin-bottom: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-text-subtlest); } .ds-brief-list__row { display: flex; align-items: center; gap: var(--space-1); min-width: 0; border-radius: var(--radius-md); transition: var(--transition-colors); } .ds-brief-list__row:hover, .ds-brief-list__row:focus-within { background: var(--color-bg-secondary); } .ds-brief-list__label { flex: 1; min-width: 0; padding: var(--space-2); border: none; background: transparent; text-align: left; font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-text-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .ds-brief-list__label:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: -2px; border-radius: var(--radius-md); } /* Actions leave the flow until the row is hovered so the label keeps the full row width. */ .ds-brief-list__actions { display: none; align-items: center; flex-shrink: 0; padding-right: var(--space-1); } .ds-brief-list__row:hover .ds-brief-list__actions, .ds-brief-list__row:focus-within .ds-brief-list__actions { display: flex; } /* Padding plus border matches the label's --space-2 box, so renaming keeps the row height. */ .ds-brief-list__rename-input { flex: 1; min-width: 0; padding: var(--space-1-5); font-size: var(--font-size-sm); } @media (max-width: 800px) { .ds-brief-list__actions { display: flex; } } /* Disclosure */ /* --- ./accordions/_accordion.css --- */ /** * Design System - Accordion Component * * Expandable/collapsible content panels. * * Usage: *
*
* *
*
Answer
*
*
*
*/ /* ========================================================================== BASE ========================================================================== */ .ds-accordion { width: 100%; } /* ========================================================================== ITEM ========================================================================== */ .ds-accordion__item { margin-bottom: 4%; padding-bottom: 2%; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, .1); } /* ========================================================================== HEADER ========================================================================== */ .ds-accordion__header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; } .ds-accordion__header:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; } /* ========================================================================== TITLE ========================================================================== */ .ds-accordion__title { font-weight: 600; font-size: 112%; margin: 0; } /* ========================================================================== ICON ========================================================================== */ .ds-accordion__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .ds-accordion__item.is-open .ds-accordion__icon { transform: rotate(180deg); } /* ========================================================================== BODY ========================================================================== */ .ds-accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .ds-accordion__item.is-open .ds-accordion__body { grid-template-rows: 1fr; } .ds-accordion__content { overflow: hidden; min-height: 0; margin-top: 0; font-weight: 300; font-size: 95%; transition: margin-top 0.3s ease, padding-bottom 0.3s ease; } .ds-accordion__item.is-open .ds-accordion__content { margin-top: 2%; padding-bottom: 2%; } .ds-accordion--divided .ds-accordion__item.is-open .ds-accordion__icon { transform: rotate(45deg); } /* ========================================================================== NAV VARIANT — sidebar navigation group (flush, leading icon, nav typography) ========================================================================== */ .ds-accordion--nav .ds-accordion__item { margin-bottom: 0; padding-bottom: 0; border-bottom: none; cursor: default; } .ds-accordion--nav .ds-accordion__header { gap: var(--space-2); padding: var(--space-2) var(--space-3); } .ds-accordion--nav .ds-accordion__title { flex: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .ds-accordion--nav .ds-accordion__content { font-weight: inherit; font-size: inherit; } .ds-accordion--nav .ds-accordion__item.is-open .ds-accordion__content { margin-top: 0; padding-bottom: 0; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media only screen and (max-width: 800px) { .ds-accordion__item { margin-bottom: 10%; padding-bottom: 4%; } .ds-accordion__title { font-size: 100%; } } /* Layout Aids */ /* --- ./dividers/_divider.css --- */ /** * Design System - Divider Component * * Visual separator between content sections. * Use
for semantic separators or
in non-list contexts. */ /* ========================================================================== HORIZONTAL DIVIDER ========================================================================== */ .ds-divider { display: block; width: 100%; height: 1px; background: var(--color-border-subtle); border: none; margin: var(--space-4) 0; } .ds-divider--subtle { background: var(--color-neutral-100); } .ds-divider--strong { background: var(--color-border-strong); } /* ========================================================================== VERTICAL DIVIDER ========================================================================== */ .ds-divider--vertical { display: inline-block; width: 1px; height: 1em; background: var(--color-border-subtle); border: none; vertical-align: middle; margin: 0 var(--space-2); } /* ========================================================================== DIVIDER WITH CENTERED TEXT ========================================================================== */ .ds-divider--text { display: flex; align-items: center; gap: var(--space-3); width: 100%; margin: var(--space-4) 0; background: transparent; height: auto; } .ds-divider--text::before, .ds-divider--text::after { content: ''; flex: 1; height: 1px; background: var(--color-border-subtle); } .ds-divider__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-subtlest); white-space: nowrap; } /* ========================================================================== SPACING VARIANTS ========================================================================== */ .ds-divider--xs { margin: var(--space-2) 0; } .ds-divider--sm { margin: var(--space-3) 0; } .ds-divider--lg { margin: var(--space-6) 0; } .ds-divider--xl { margin: var(--space-8) 0; } .ds-divider--none { margin: 0; } /* Testimonial */ /* --- ./testimonials/_testimonial.css --- */ /** * Testimonial component * BEM prefix: ds-testimonial * * Variants: * (default / circle): pricing page — circular avatar, author col left * --portrait : home — vertical 220×320 photo, author col left * --feature : home (Figma 668-4058) — landscape image, author inside body col, button CTA * --case-study : competitor LPs (Figma 329-1188) — brand mark, 20px quote, button CTA */ .ds-testimonial { box-sizing: border-box; display: grid; grid-template-columns: 220px 1fr; gap: var(--space-10); padding: var(--space-10); background: var(--gray-100); border-radius: var(--radius-xl); align-items: start; } /* ─── Media column (image + optional author-info) ─── */ .ds-testimonial__media { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-left: var(--space-12); gap: var(--space-1); } .ds-testimonial__avatar { width: 163px; height: 163px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 0 var(--space-6) calc(-1 * var(--space-3)); overflow: hidden; } .ds-testimonial__avatar img { width: 100%; height: 100%; object-fit: contain; display: block; } .ds-testimonial__avatar--square { border-radius: var(--radius-none); } .ds-testimonial__author-info { display: flex; flex-direction: column; gap: var(--space-1); } .ds-testimonial__name { font-size: var(--font-size-sm); color: var(--color-text-subtle); margin: 0; } .ds-testimonial__role { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin: 0; line-height: var(--line-height-snug); } /* ─── Body column ─── */ .ds-testimonial__body { display: flex; flex-direction: column; gap: var(--space-5); align-self: start; padding-top: var(--space-8); } .ds-testimonial__headline { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-snug); color: var(--color-text-default); margin: 0; } .ds-testimonial__quote { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-text-subtle); margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--color-border-default); } .ds-testimonial__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-default); text-decoration: none; transition: color 0.2s ease; align-self: flex-start; } .ds-testimonial__link:hover { color: var(--color-brand-500); } .ds-testimonial__link i, .ds-testimonial__link svg { width: var(--size-4); height: var(--size-4); } /* ───────────────────────────────────────────── --portrait variant (220×320 photo, author left) ───────────────────────────────────────────── */ .ds-testimonial--portrait { grid-template-columns: 220px 1fr; gap: var(--space-12); padding: 47px var(--space-10) 47px 61px; background: var(--gray-100); border-radius: var(--radius-xl); align-items: center; min-height: 414.4px; } .ds-testimonial--portrait .ds-testimonial__media { padding-left: 0; gap: var(--space-2); align-self: center; } .ds-testimonial--portrait .ds-testimonial__avatar { width: 220px; height: 320.4px; border-radius: 12px; margin: 0; background: var(--gray-200); } .ds-testimonial--portrait .ds-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; } .ds-testimonial--portrait .ds-testimonial__body { padding-top: 0; justify-content: center; align-self: center; } /* ───────────────────────────────────────────── --feature variant (Figma 668-4058) landscape image, author in body, button CTA ───────────────────────────────────────────── */ .ds-testimonial--feature { grid-template-columns: 308px 1fr; gap: var(--space-12); padding: 0; background: var(--gray-100); border-radius: var(--radius-xl); align-items: center; min-height: 414.4px; position: relative; overflow: hidden; } .ds-testimonial--feature .ds-testimonial__media { padding: 0; margin: 0; align-self: center; justify-self: center; } .ds-testimonial--feature .ds-testimonial__avatar { width: 247px; height: 319px; border-radius: 12px; margin: 0 0 0 61px; background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ds-testimonial--feature .ds-testimonial__avatar img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: var(--radius-xl); } .ds-testimonial--feature .ds-testimonial__body { padding: var(--space-16) var(--space-10) var(--space-16) 0; justify-content: center; align-self: center; gap: var(--space-5); max-width: 884px; } .ds-testimonial--feature .ds-testimonial__headline { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-snug); letter-spacing: -0.48px; color: var(--color-text-default); margin: 0; } .ds-testimonial--feature .ds-testimonial__headline { display: none; } .ds-testimonial--feature .ds-testimonial__quote { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); font-style: normal; line-height: normal; color: var(--color-text-default); border-left: 2px solid var(--pink-400); padding-left: var(--space-4); margin: 0; } .ds-testimonial--feature .ds-testimonial__author-info { gap: 0; margin-top: var(--space-2); } .ds-testimonial--feature .ds-testimonial__name { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-subtle); line-height: normal; margin: 0; } .ds-testimonial--feature .ds-testimonial__role { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-default); line-height: normal; margin: 0; } .ds-testimonial__cta-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); width: 200px; height: 40px; background: var(--color-bg-inverse); color: var(--color-text-inverse); border-radius: var(--radius-md); padding: var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); text-decoration: none; align-self: flex-start; margin-top: var(--space-3); transition: background 0.15s ease; } .ds-testimonial__cta-button:hover { background: var(--gray-800); color: var(--color-text-inverse); } .ds-testimonial__cta-button i, .ds-testimonial__cta-button svg { width: 24px; height: 24px; } .ds-testimonial--case-study { min-height: 365px; border: 1px solid var(--color-border-subtle); align-items: center; } .ds-testimonial--case-study .ds-testimonial__media { padding-left: 0; align-self: center; } .ds-testimonial--case-study .ds-testimonial__avatar { width: 181px; height: 181px; margin: 0; } .ds-testimonial--case-study .ds-testimonial__body { padding-top: 0; align-self: center; } .ds-testimonial--case-study .ds-testimonial__quote { padding-left: var(--space-3); font-style: normal; border-left-color: var(--color-brand-400); color: var(--color-text-subtle); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: 1.16; } .ds-testimonial--case-study .ds-testimonial__cta-button { width: auto; height: 36px; padding: var(--space-2) var(--space-4); margin-top: 0; } /* ───────────────────────────────────────────── Responsive ───────────────────────────────────────────── */ @media (max-width: 768px) { .ds-testimonial--case-study .ds-testimonial__cta-button { height: auto; min-height: 44px; padding: var(--space-3) var(--space-4); text-align: left; } .ds-testimonial, .ds-testimonial--portrait { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); min-height: auto; } .ds-testimonial--feature { grid-template-columns: 139px 1fr; grid-template-areas: "image author" "quote quote"; gap: var(--space-4); padding: var(--space-4); min-height: auto; border-radius: var(--radius-xl); align-items: end; } .ds-testimonial__media { padding-left: 0; align-items: center; text-align: center; } .ds-testimonial--portrait .ds-testimonial__avatar { width: 100%; max-width: 320px; height: auto; aspect-ratio: 4 / 3; } /* Feature mobile: image left, author right, then headline + quote full-width below */ .ds-testimonial--feature .ds-testimonial__media { grid-area: image; align-self: end; padding: 0; align-items: flex-end; } .ds-testimonial--feature .ds-testimonial__avatar { width: 139px; height: 147px; aspect-ratio: auto; margin: 0; } .ds-testimonial--feature .ds-testimonial__avatar img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; } .ds-testimonial--feature .ds-testimonial__body { display: contents; } .ds-testimonial--feature .ds-testimonial__headline { grid-area: headline; } .ds-testimonial--feature .ds-testimonial__quote { grid-area: quote; } .ds-testimonial--feature .ds-testimonial__author-info { grid-area: author; align-self: end; } .ds-testimonial--feature .ds-testimonial__cta-button { display: none; } .ds-testimonial__body { padding-top: 0; } } /* Programmatic Landing Page */ /* --- ./lp-hero/_lp-hero.css --- */ /** * LP Hero component * BEM prefix: ds-lp-hero * Figma: node 56:441 (programmatic landing page hero) * * Markup contract (all three children share grid-area 1/1, DOM order = paint order): *
* *
*
*

Hire top ... creators for your brand.

*

Last updated ...

*

...

*
...ds-btn instances...
*

...

*
...
*
*
* * ds-lp-hero__bg keeps an aspect-ratio + min-height so the grid track is sized * before the image loads (no CLS), even though it shares its cell with the overlay/content. * The ds-rank-card as content's last child is auto-positioned as the right column. */ .ds-lp-hero { position: relative; display: grid; width: 100%; max-width: 1230px; border-radius: var(--radius-3xl); isolation: isolate; } .ds-lp-hero__bg, .ds-lp-hero__overlay, .ds-lp-hero__content { grid-area: 1 / 1; } /* bg + overlay carry the ratio to reserve height (CLS-safe) and round their own corners so the container can grow past the ratio when the content is taller */ .ds-lp-hero__bg { width: 100%; height: 100%; aspect-ratio: 1230 / 613; min-height: 420px; object-fit: cover; display: block; border-radius: inherit; } .ds-lp-hero__overlay { background: var(--lp-hero-overlay); border-radius: inherit; } .ds-lp-hero__content { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-9) var(--space-20) 0; color: var(--lp-hero-text); } .ds-lp-hero__content > div { display: flex; flex: 0 1 517px; flex-direction: column; align-items: flex-start; gap: var(--space-6); min-width: 0; } .ds-lp-hero__content > .ds-rank-card { flex: 1 1 0; max-width: 514px; } .ds-lp-hero__title { margin: 0; font-size: var(--font-size-6xl); font-weight: var(--font-weight-black); line-height: calc(var(--font-size-6xl) + var(--space-1)); letter-spacing: var(--letter-spacing-display); color: var(--lp-hero-text); } .ds-lp-hero__title-em { color: var(--color-brand-500); } .ds-lp-hero__freshness { margin: 0; font-size: var(--font-size-xl); line-height: var(--line-height-normal); opacity: 0.8; color: var(--lp-hero-text); } .ds-lp-hero__subtitle { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-normal); line-height: var(--space-8); color: var(--lp-hero-text); } .ds-lp-hero__actions { display: flex; align-items: center; gap: var(--space-4); margin: 0; } .ds-lp-hero__actions .ds-btn--brand { gap: var(--space-3); height: calc(var(--size-12) + var(--space-1) + var(--space-0-5)); border-width: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-none); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); text-transform: capitalize; } .ds-lp-hero__actions .ds-btn--inverse-outline { width: calc(var(--space-44) + var(--space-1) + var(--space-0-5)); height: calc(var(--size-12) + var(--space-1) - var(--space-px)); padding-right: var(--space-6); padding-left: var(--space-6); border-color: var(--color-border-default); border-radius: var(--radius-lg); text-transform: capitalize; } .ds-lp-hero__actions .ds-btn svg { width: var(--size-5); height: var(--size-5); } .ds-lp-hero__microcopy { margin: var(--space-3) 0 0; font-size: var(--font-size-sm); line-height: var(--line-height-normal); opacity: 0.8; color: var(--lp-hero-text); } @media (max-width: 1023px) { .ds-lp-hero__content { flex-direction: column; align-items: stretch; min-width: 0; padding: var(--space-8) var(--space-5); } .ds-lp-hero__content > div { flex-basis: auto; width: 100%; } .ds-lp-hero { min-height: auto; aspect-ratio: auto; } .ds-lp-hero__content > .ds-rank-card { max-width: 100%; margin-top: var(--space-6); } .ds-lp-hero__title { font-size: var(--font-size-4xl); line-height: var(--line-height-tight); } .ds-lp-hero__bg { min-height: var(--space-80); } } @media (max-width: 639px) { .ds-lp-hero__actions { width: 100%; flex-wrap: wrap; } .ds-lp-hero__title { font-size: var(--font-size-3xl); } } /* --- ./rank-card/_rank-card.css --- */ /** * Rank Card component * BEM prefix: ds-rank-card * Figma: node 56:586 (programmatic landing page hero, right column) * * Markup contract: *
*
*

Top ... creators

*

Rated by brands

*
*
* *
* Alexa Rivers * Los Angeles, CA • 1.2M followers *
* 4.9 *
*
* 2 *
...
* 4.8 *
*
...ds-btn "View all"...
*
* * ds-rank-card__meta expects the creator name as its first child element * (styled bold/dark) followed by a meta line (location/followers, styled gray/sm). */ .ds-rank-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 0; min-height: calc(var(--space-96) + var(--space-12) + var(--space-0-5)); padding: var(--space-6); background: var(--rank-card-bg); border-radius: var(--radius-2xl); box-shadow: var(--rank-card-shadow); } .ds-rank-card, .ds-rank-card * { box-sizing: border-box; } .ds-rank-card__header { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); } .ds-rank-card__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-neutral-900); } .ds-rank-card__subtitle { margin: 0; font-size: var(--font-size-xs); line-height: var(--line-height-tight); color: var(--color-text-subtlest); } .ds-rank-card__row { display: grid; grid-template-columns: var(--size-4) var(--size-12) minmax(0, 1fr) max-content; grid-template-rows: auto auto; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); height: var(--size-20); padding: var(--space-4); background: var(--rank-card-bg); border: var(--border-width-1) solid var(--rank-card-border); border-radius: var(--radius-xl); } .ds-rank-card__row + .ds-rank-card__row { margin-top: var(--space-3); } .ds-rank-card__row--first { border-width: var(--border-width-2); border-color: var(--rank-card-first-border); background: var(--rank-card-first-bg); } .ds-rank-card__rank { display: inline-flex; flex-shrink: 0; grid-column: 1; grid-row: 1 / span 2; align-items: center; justify-content: center; width: var(--size-4); height: var(--size-4); border-radius: var(--radius-full); background: var(--color-brand-500); color: var(--color-text-inverse); font-size: var(--font-size-2xs); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-none); } .ds-rank-card__row--first .ds-rank-card__rank { background: transparent; color: var(--rank-card-first-border); font-size: var(--font-size-base); } .ds-rank-card__row--first .ds-rank-card__rank i, .ds-rank-card__row--first .ds-rank-card__rank svg { width: var(--size-4); height: var(--size-4); } .ds-rank-card__avatar { flex-shrink: 0; grid-column: 2; grid-row: 1 / span 2; width: var(--size-12); height: var(--size-12); border-radius: var(--radius-full); object-fit: cover; } .ds-rank-card__meta { display: flex; flex-direction: column; grid-column: 3; grid-row: 1 / span 2; min-width: 0; gap: var(--space-0-5); font-size: var(--font-size-xs); color: var(--color-text-subtlest); line-height: var(--line-height-tight); } .ds-rank-card__meta > :first-child { font-size: calc(var(--font-size-base) - var(--space-px)); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-neutral-900); } .ds-rank-card__meta > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-rank-card__rating { display: inline-flex; flex-shrink: 0; grid-column: 4; grid-row: 1; align-items: center; justify-self: end; align-self: end; gap: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-neutral-900); } .ds-rank-card__rating i, .ds-rank-card__rating svg { width: var(--size-4); height: var(--size-4); color: var(--rank-card-rating-color); fill: currentColor; } .ds-rank-card__rate { flex-shrink: 0; grid-column: 4; grid-row: 2; justify-self: end; align-self: start; font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text-subtlest); white-space: nowrap; } /* No rating line above it (creator not yet eligible to show a rating) - span both rows and center in the full row height instead of sitting at the row1/row2 boundary where the rating would otherwise anchor it. */ .ds-rank-card__rate--solo { grid-row: 1 / span 2; align-self: center; } .ds-rank-card__footer { height: calc(var(--space-10) + var(--space-px)); margin-top: var(--space-5); padding-top: var(--space-3); padding-bottom: var(--space-3); background: var(--rank-card-bg); border-radius: var(--radius-lg); } .ds-rank-card__footer i, .ds-rank-card__footer svg { width: var(--size-4); height: var(--size-4); } @media (max-width: 639px) { .ds-rank-card { height: auto; padding: var(--space-4); } .ds-rank-card__row { gap: var(--space-2); padding: var(--space-2); } .ds-rank-card__rate { display: none; } .ds-rank-card__footer { height: auto; min-height: calc(var(--space-10) + var(--space-px)); padding-right: var(--space-2); padding-left: var(--space-2); white-space: normal; text-align: center; } } /* --- ./creator-panel/_creator-panel.css --- */ /** * Creator Panel component * BEM prefix: ds-creator-panel * Figma: node 59:561 (creator profile panel, programmatic landing page grid) * * Markup contract: *
*
*
*
*
*
Dalena Ha
*
...
*
*
* Instagram • @dalena.ha * Los Angeles, CA *
*
5.09 reviews
*
*
* Sign Up To Contact *
*
*
*
* Followers * 505k *
* *
* Audience Gender *
* * *
*
F 72%M 28%
*
*
*
*

About Me

*

Bio paragraph...

*
*
*
*

Top Platforms

*
* Instagram *
*
*
*

Engagement vs. Median

*
* * * * * * * * * *
*

Creator is 10% above median engagement

*
*
*

Audience by Country

*
*
* United States * 46% *
*
*
*
*
* * The 9-bar chart reproduces Figma's fixed distribution silhouette and is not a * literal proportional plot -- the service only gives engagement_vs_median_pct. * Positive values highlight bar 6, while negative values highlight bar 1, so the * decorative chart does not contradict the caption. *
*

Rates

*
*
* * * Instagram Story * * $75 *
*
*
* Sign up to see rates *
*
*
* * ds-creator-panel__bio-label is the shared uppercase "section eyebrow" style, * reused for the Bio label, each audience card title, and the Rates label. * Header badges reuse ds-badge as-is (ds-badge--brand/--success-light); the * header contact button reuses ds-btn--primary. The platform chip * (ds-creator-panel__chip) remains scoped instead of reusing ds-tag because * the shared component does not match its gray-200/gray-400 Figma treatment. * The rates CTA combines ds-btn interaction states with scoped geometry because * it is a small centered outline control rather than a full-width button. * ds-avatar supplies the shape/overflow/image handling; ds-creator-panel__avatar * only sets the exact 80px Figma size (no built-in ds-avatar size matches 80px) * and does not touch ds-avatar's own CSS file. * ds-creator-panel__country-bar is two solid layers (dark full-width track + * ::after pink fill sized via the --creator-panel-country-pct custom property * set inline per row) -- not a gradient. * * Listing wrapper markup contract (also this file): *
*
*
...
*
* *
*
...
*
*

Sign up to see all creators

* Sign up free *
*
*
* * Any item containing a ds-creator-list__fade is clipped (max-height + overflow * hidden) via :has() so the fade + prompt gate the rest of that panel's content. * * SEO note: on the live /hire/ page ds-creator-list/ds-creator-list__item * are rendered as
    /
  1. (not
    ) and ds-creator-panel__name as an

    * (not the
    shown above) per a stakeholder ordered-list/heading requirement; * the classes carry all styling either way. * * Mid-list banner (also this file, ds-lp-mid-banner below): a non-numbered *
  2. inserted after row 10, sibling to (not inside) * a ds-creator-list__item, e.g.: *
  3. *

    "Quote from a brand."

    *

    — Verified brand, Collabstr marketplace

    *

    See who you can hire. Sign up free.

    * Sign up free *
    4. */ .ds-creator-panel { display: flex; flex-direction: column; background: var(--creator-panel-bg); border: 0; border-radius: calc(var(--radius-xl) - var(--space-0-5)); box-shadow: inset 0 0 0 var(--border-width-1) var(--creator-panel-border), var(--creator-panel-shadow); overflow: hidden; } .ds-creator-panel, .ds-creator-panel * { box-sizing: border-box; } /* ========================================================================== HEADER ========================================================================== */ .ds-creator-panel__header { display: flex; align-items: center; gap: var(--space-6); min-height: calc(var(--space-32) + var(--space-1)); padding: var(--space-6); border-bottom: var(--border-width-1) solid var(--creator-panel-border-subtle); } .ds-creator-panel__avatar { flex-shrink: 0; width: var(--size-20); height: var(--size-20); } .ds-creator-panel__rank { color: var(--color-neutral-900); } .ds-creator-panel__identity { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: var(--space-2); } .ds-creator-panel__name-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .ds-creator-panel__name { margin: 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-tight); color: var(--color-neutral-900); } .ds-creator-panel__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); } .ds-creator-panel__badges .ds-badge { min-height: var(--size-6); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); color: var(--color-text-default); line-height: var(--line-height-none); } .ds-creator-panel__badges .ds-badge--brand { background: var(--color-brand-25); } .ds-creator-panel__badges .ds-badge i, .ds-creator-panel__badges .ds-badge svg { width: var(--size-4); height: var(--size-4); } .ds-creator-panel__badges .ds-badge--brand i, .ds-creator-panel__badges .ds-badge--brand svg { color: var(--color-brand-500); } .ds-creator-panel__badges .ds-badge--success-light i, .ds-creator-panel__badges .ds-badge--success-light svg { color: var(--color-success-700); } .ds-creator-panel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); font-size: var(--font-size-sm); line-height: var(--line-height-tight); color: var(--color-text-subtle); } .ds-creator-panel__meta span { display: inline-flex; align-items: center; gap: var(--space-1); } .ds-creator-panel__meta .ds-creator-panel__handle { gap: 0; } .ds-creator-panel__meta i, .ds-creator-panel__meta svg { width: var(--size-4); height: var(--size-4); color: var(--color-icon-secondary); } .ds-creator-panel__rating { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-neutral-900); } .ds-creator-panel__rating i, .ds-creator-panel__rating svg { width: var(--size-4); height: var(--size-4); color: var(--color-warning-500); fill: currentColor; } .ds-creator-panel__rating a, .ds-creator-panel__rating .ds-creator-panel__reviews-trigger { margin: 0; padding: 0; background: transparent; border: 0; color: var(--color-text-subtle); font: inherit; font-weight: var(--font-weight-normal); text-decoration: underline; cursor: pointer; } .ds-creator-panel__rating span { color: var(--color-text-subtle); font-weight: var(--font-weight-normal); text-decoration: none; } .ds-creator-panel__contact-btn { flex-shrink: 0; } .ds-creator-panel__contact-btn .ds-btn { width: calc(var(--space-44) + var(--space-1) + var(--space-0-5)); height: var(--size-10); min-height: var(--size-10); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border-width: 0; box-shadow: var(--shadow-none); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); text-transform: capitalize; } /* ========================================================================== STATS ========================================================================== */ .ds-creator-panel__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); height: calc(var(--space-28) + var(--space-1)); min-height: calc(var(--space-28) + var(--space-1)); padding: var(--space-4) var(--space-6); } .ds-creator-panel__stats:has(> :only-child) { grid-template-columns: 1fr; } .ds-creator-panel__stats:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } .ds-creator-panel__stats:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } .ds-creator-panel__stat-card { display: flex; flex-direction: column; gap: var(--space-1); min-height: calc(var(--space-20) + var(--space-1)); padding: var(--space-4); background: var(--creator-panel-section-bg); border: var(--border-width-1) solid var(--creator-panel-border-subtle); border-radius: var(--radius-lg); } .ds-creator-panel__stat-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-normal); text-transform: uppercase; color: var(--color-text-subtlest); } .ds-creator-panel__stat-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-neutral-900); } .ds-creator-panel__stat-card:has(.ds-creator-panel__gender-bar) { gap: var(--space-2); } .ds-creator-panel__gender-bar { display: flex; width: 100%; height: var(--space-2); gap: var(--space-1); } .ds-creator-panel__gender-bar-fill { display: block; height: 100%; border-radius: var(--radius-full); } .ds-creator-panel__gender-labels { display: flex; justify-content: space-between; width: 100%; font-size: var(--font-size-2xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-tight); color: var(--color-text-subtlest); } /* ========================================================================== BIO ========================================================================== */ .ds-creator-panel__bio { display: flex; flex-direction: column; gap: var(--space-4); min-height: calc(var(--space-32) + var(--space-px)); padding: var(--space-4) var(--space-6); } .ds-creator-panel__bio-label { margin: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-normal); text-transform: uppercase; color: var(--color-text-subtlest); } .ds-creator-panel__bio p { margin: 0; font-size: var(--font-size-sm); line-height: calc(var(--font-size-sm) + var(--space-2)); color: var(--color-text-subtle); } /* ========================================================================== AUDIENCE ========================================================================== */ .ds-creator-panel__audience { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 6fr)); gap: var(--space-6); min-height: calc(var(--space-80) - var(--space-0-5) - var(--space-px)); padding: var(--space-4) var(--space-6); } .ds-creator-panel__audience:has(> :only-child) { grid-template-columns: 1fr; } .ds-creator-panel__audience:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } .ds-creator-panel__audience-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--creator-panel-section-bg); border: var(--border-width-1) solid var(--creator-panel-border); border-radius: var(--radius-xl); } .ds-creator-panel__chips { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; } .ds-creator-panel__chip { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2); height: var(--size-8); padding: 0 var(--space-3); background: var(--color-neutral-200); border: var(--border-width-1) solid var(--color-neutral-400); border-radius: var(--radius-full); font-size: calc(var(--font-size-sm) - var(--space-px)); font-weight: var(--font-weight-semibold); color: var(--color-neutral-900); } .ds-creator-panel__chip i, .ds-creator-panel__chip svg { width: var(--size-4); height: var(--size-4); } .ds-creator-panel__chart { display: flex; align-items: flex-end; gap: var(--space-2); height: calc(var(--space-32) + var(--space-2)); width: 100%; padding: var(--space-4) var(--space-4) 0; } .ds-creator-panel__chart-bar { flex: 1 1 0; height: var(--creator-panel-chart-bar-height); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-neutral-200); } .ds-creator-panel__chart-bar--1 { --creator-panel-chart-bar-height: var(--size-10); } .ds-creator-panel__chart-bar--2 { --creator-panel-chart-bar-height: calc(var(--space-16) - var(--space-1)); } .ds-creator-panel__chart-bar--3 { --creator-panel-chart-bar-height: var(--size-20); } .ds-creator-panel__chart-bar--4 { --creator-panel-chart-bar-height: calc(var(--space-24) + var(--space-1)); } .ds-creator-panel__chart-bar--5 { --creator-panel-chart-bar-height: calc(var(--space-32) - var(--space-2)); } .ds-creator-panel__chart-bar--6 { --creator-panel-chart-bar-height: calc(var(--space-28) - var(--space-0-5)); } .ds-creator-panel__chart-bar--7 { --creator-panel-chart-bar-height: calc(var(--space-24) - var(--space-1-5)); } .ds-creator-panel__chart-bar--8 { --creator-panel-chart-bar-height: calc(var(--space-18) - var(--space-0-5)); } .ds-creator-panel__chart-bar--9 { --creator-panel-chart-bar-height: calc(var(--space-12) + var(--space-0-5)); } .ds-creator-panel__chart-bar--highlight { background: var(--color-brand-500); } .ds-creator-panel__chart-caption { margin: calc(var(--space-0) - var(--space-1)) 0 0; font-size: var(--font-size-xs); line-height: var(--line-height-tight); text-align: center; color: var(--color-text-subtlest); } .ds-creator-panel__countries { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: space-between; gap: var(--space-5); min-height: 0; } .ds-creator-panel__country-row { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-2); row-gap: var(--space-1-5); align-items: center; font-size: calc(var(--font-size-base) - var(--space-px)); font-weight: var(--font-weight-medium); color: var(--color-text-default); } .ds-creator-panel__country-row span:last-of-type { font-weight: var(--font-weight-semibold); } .ds-creator-panel__country-bar { grid-column: 1 / -1; position: relative; height: var(--size-1); border-radius: var(--radius-full); background: var(--color-neutral-900); } .ds-creator-panel__country-bar::after { content: ''; position: absolute; inset: 0; width: var(--creator-panel-country-pct, 0%); border-radius: var(--radius-full); background: var(--color-brand-400); } /* ========================================================================== REVIEWS TRIGGER (rating line) ========================================================================== */ .ds-creator-panel__rating .ds-creator-panel__reviews-trigger:focus-visible { outline: var(--outline-brand); outline-offset: var(--space-0-5); } /* ========================================================================== RATES ========================================================================== */ .ds-creator-panel__rates { display: flex; flex-direction: column; gap: var(--space-5); height: calc(var(--space-52) - var(--space-1)); min-height: calc(var(--space-52) - var(--space-1)); padding: var(--space-4) var(--space-6); background: var(--creator-panel-section-bg); border-top: var(--border-width-1) solid var(--creator-panel-border); } .ds-creator-panel__rates--visible { height: auto; min-height: auto; } .ds-creator-panel__rates--visible .ds-creator-panel__rate-card { height: auto; } .ds-creator-panel__rates--visible .ds-creator-panel__rate-label { align-items: flex-start; } .ds-creator-panel__rates--visible .ds-creator-panel__rate-label-text { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; } .ds-creator-panel__rates-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); width: calc(100% - var(--space-12)); margin-inline: var(--space-6); } .ds-creator-panel__rates-grid:has(> :only-child) { grid-template-columns: 1fr; } .ds-creator-panel__rates-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } .ds-creator-panel__rates-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } .ds-creator-panel__rates-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } .ds-creator-panel__rates-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); } .ds-creator-panel__rate-card { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; height: calc(var(--space-20) + var(--space-px)); min-height: calc(var(--space-20) + var(--space-px)); padding: var(--space-4) var(--space-4) calc(var(--space-4) - var(--space-px)); background: var(--creator-panel-bg); border: var(--border-width-1) solid var(--creator-panel-border-subtle); border-radius: var(--radius-lg); text-align: left; } .ds-creator-panel__rate-card i, .ds-creator-panel__rate-card svg { width: calc(var(--size-5) - var(--space-0-5)); height: calc(var(--size-5) - var(--space-0-5)); color: var(--color-icon-secondary); } .ds-creator-panel__rate-card .ds-social-icon { box-sizing: border-box; overflow: visible; padding: var(--space-px); } .ds-creator-panel__rate-label { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; font-size: calc(var(--font-size-sm) - var(--space-px)); font-weight: var(--font-weight-semibold); line-height: var(--font-size-base); color: var(--color-neutral-900); } .ds-creator-panel__rate-label i, .ds-creator-panel__rate-label svg { flex-shrink: 0; } .ds-creator-panel__rate-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-creator-panel__rate-price { display: block; overflow: hidden; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-neutral-900); filter: blur(var(--creator-panel-rate-blur)); user-select: none; white-space: nowrap; } .ds-creator-panel__rate-price--visible { width: auto; overflow: visible; filter: none; user-select: text; } .ds-creator-panel__rate-card:nth-child(1) .ds-creator-panel__rate-price:not(.ds-creator-panel__rate-price--visible), .ds-creator-panel__rate-card:nth-child(3) .ds-creator-panel__rate-price:not(.ds-creator-panel__rate-price--visible) { width: var(--size-8); } .ds-creator-panel__rate-card:nth-child(2) .ds-creator-panel__rate-price:not(.ds-creator-panel__rate-price--visible) { width: var(--space-11); } .ds-creator-panel__rate-card:nth-child(4) .ds-creator-panel__rate-price:not(.ds-creator-panel__rate-price--visible) { width: var(--size-10); } .ds-creator-panel__rate-card:nth-child(5) .ds-creator-panel__rate-price:not(.ds-creator-panel__rate-price--visible) { width: calc(var(--size-10) + var(--space-px)); } .ds-creator-panel__rate-card:nth-child(6) .ds-creator-panel__rate-price:not(.ds-creator-panel__rate-price--visible) { width: calc(var(--size-10) + var(--space-0-5)); } .ds-creator-panel__rates-cta { display: flex; justify-content: center; } .ds-creator-panel__rates-cta-btn { display: inline-flex; align-items: center; gap: var(--space-1); width: calc(var(--space-52) + var(--space-1-5) + var(--space-px)); height: calc(var(--size-10) - var(--space-1)); padding: 0 var(--space-4); background: transparent; border: var(--border-width-1) solid var(--color-neutral-300); border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); line-height: var(--line-height-compact); color: var(--color-text-default); } .ds-creator-panel__rates-cta-btn i, .ds-creator-panel__rates-cta-btn svg { width: var(--size-6); height: var(--size-6); } /* ========================================================================== CREATOR LIST (listing wrapper) ========================================================================== */ .ds-creator-list { display: flex; flex-direction: column; gap: var(--space-7); list-style: none; margin: 0; padding: var(--space-20) 0 0; } .ds-creator-list__item { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; } .ds-creator-list__item:has(.ds-creator-list__fade) { position: relative; max-height: calc(var(--space-96) + var(--space-9)); overflow: hidden; } .ds-creator-list__item > .ds-creator-panel { flex: 0 0 auto; width: 100%; min-width: 0; } .ds-creator-list__fade { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-4); padding-bottom: var(--space-10); background: linear-gradient(to bottom, transparent, var(--creator-panel-bg) 65%); text-align: center; } .ds-creator-list__fade p { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-neutral-900); } /* ========================================================================== LP MID-LIST BANNER Non-numbered conversion card inserted mid-listing (Figma node 59:4892). ========================================================================== */ .ds-lp-mid-banner { box-sizing: border-box; display: grid; grid-template-columns: calc(var(--space-56) - var(--space-1)) minmax(0, 1fr); align-items: center; gap: var(--space-12); margin: 0; min-height: calc(var(--space-96) + var(--space-7) + var(--space-0-5)); background: var(--color-bg-secondary); border-radius: var(--radius-xl); padding: var(--space-10); } .ds-lp-mid-banner__visual { position: relative; width: calc(var(--space-56) - var(--space-1)); height: calc(var(--space-36) - var(--space-1)); } .ds-lp-mid-banner__visual--composite { display: flex; align-items: center; justify-content: center; } .ds-lp-mid-banner__visual--composite::before, .ds-lp-mid-banner__visual--composite::after { content: none; } .ds-lp-mid-banner__visual::before, .ds-lp-mid-banner__visual::after { content: ''; position: absolute; display: block; } .ds-lp-mid-banner__visual::before { top: var(--space-16); left: 0; width: var(--size-8); height: calc(var(--size-8) - var(--space-1-5)); border-radius: var(--radius-sm); background: var(--color-brand-300); } .ds-lp-mid-banner__visual::after { right: var(--space-5); bottom: var(--space-4); width: var(--space-18); height: calc(var(--size-5) - var(--space-0-5)); border-radius: var(--radius-full); background: var(--color-brand-purple-400); } .ds-lp-mid-banner__visual img { position: absolute; width: var(--size-14); height: var(--size-14); border: var(--border-width-2) solid var(--color-bg-primary); border-radius: var(--radius-full); object-fit: cover; } .ds-lp-mid-banner__visual img:nth-child(1) { top: var(--space-5); left: var(--space-5); width: var(--size-10); height: var(--size-10); border-color: var(--color-brand-400); } .ds-lp-mid-banner__visual img:nth-child(2) { top: var(--space-7); right: var(--space-5); width: calc(var(--size-16) - var(--space-0-5)); height: calc(var(--size-12) + var(--space-0-5)); border: 0; border-radius: var(--radius-md); } .ds-lp-mid-banner__visual img:nth-child(3) { bottom: var(--space-1); left: var(--space-14); width: var(--size-10); height: var(--size-10); } .ds-lp-mid-banner__visual--composite img.ds-lp-mid-banner__art { position: static; inset: auto; width: calc(var(--space-44) + var(--space-1)); height: calc(var(--space-36) - var(--space-1) - var(--space-px)); border: 0; border-radius: 0; object-fit: contain; } .ds-lp-mid-banner__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); } .ds-lp-mid-banner__quote { margin: 0; padding-left: var(--space-4); max-width: calc(var(--space-96) + var(--space-96) - var(--space-3) - var(--space-0-5)); border-left: calc(var(--border-width-2) + var(--border-width-1)) solid var(--color-brand-400); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-compact); color: var(--color-text-default); } .ds-lp-mid-banner__author { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; font-size: var(--font-size-xs); line-height: var(--line-height-compact); color: var(--color-text-subtle); } .ds-lp-mid-banner__author br { display: none; } .ds-lp-mid-banner__author strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: var(--line-height-compact); color: var(--color-text-default); } .ds-lp-mid-banner__prompt { margin: 0; font-size: calc(var(--font-size-base) - var(--space-px)); font-weight: var(--font-weight-semibold); line-height: var(--line-height-compact); color: var(--color-neutral-900); } .ds-lp-mid-banner .ds-btn { width: calc(var(--space-48) + var(--space-2)); height: var(--size-10); gap: var(--space-1); padding: var(--space-2); border-width: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-none); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); text-transform: capitalize; } .ds-lp-mid-banner .ds-btn svg { width: var(--size-6); height: var(--size-6); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1023px) { .ds-creator-panel__stats { grid-template-columns: repeat(2, 1fr); height: auto; min-height: auto; } .ds-creator-panel__audience { grid-template-columns: 1fr; } .ds-creator-panel__chips { flex-direction: row; flex-wrap: wrap; } .ds-creator-panel__rates-grid { grid-template-columns: repeat(3, 1fr); } .ds-creator-panel__rates { height: auto; min-height: auto; } } @media (max-width: 639px) { .ds-creator-panel__header { display: grid; grid-template-columns: var(--size-20) minmax(0, 1fr); align-items: center; column-gap: var(--space-3); row-gap: var(--space-2); padding: var(--space-4); } .ds-creator-panel__avatar { grid-column: 1; grid-row: 1; } .ds-creator-panel__identity { display: contents; } .ds-creator-panel__name-row { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: var(--space-2); width: 100%; } .ds-creator-panel__badges { width: 100%; } .ds-creator-panel__meta { grid-column: 1 / -1; grid-row: 2; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-1); width: 100%; } .ds-creator-panel__meta > span { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; } .ds-creator-panel__meta .ds-creator-panel__handle { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-creator-panel__rating { grid-column: 1 / -1; grid-row: 3; width: 100%; } .ds-creator-panel__contact-btn { grid-column: 1 / -1; grid-row: 4; width: 100%; } .ds-creator-panel__contact-btn .ds-btn { width: 100%; } .ds-creator-panel__stats, .ds-creator-panel__bio, .ds-creator-panel__audience, .ds-creator-panel__rates { padding-left: var(--space-4); padding-right: var(--space-4); } .ds-creator-panel__stats { grid-template-columns: repeat(2, 1fr); padding-top: var(--space-4); padding-bottom: var(--space-4); } .ds-creator-panel__rates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-inline: 0; } .ds-creator-panel__rates-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } .ds-creator-panel__rates-grid:has(> :nth-child(2):last-child), .ds-creator-panel__rates-grid:has(> :nth-child(3):last-child), .ds-creator-panel__rates-grid:has(> :nth-child(4):last-child), .ds-creator-panel__rates-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-creator-panel__rate-card { min-width: 0; } .ds-creator-panel__rate-label { width: 100%; min-width: 0; max-width: 100%; } .ds-lp-mid-banner { grid-template-columns: 1fr; min-height: auto; padding: var(--space-6); } .ds-lp-mid-banner__visual { margin: 0 auto; } } /* --- ./lp-listing-heading/_lp-listing-heading.css --- */ /** * LP Listing heading * BEM prefix: ds-lp-listing-heading * Figma: node 73:761 (programmatic landing page, creator listing section heading) * * Markup contract: *
    *

    {{ niche_count_display }} top {{ niche_plural }} available on Collabstr

    *

    ...

    *
    */ .ds-lp-listing-heading { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-20); text-align: center; } .ds-lp-listing-heading__title { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; min-height: calc(var(--space-24) + var(--space-6) - var(--border-width-1)); max-width: 800px; font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-display); color: var(--color-text-default); } .ds-lp-listing-heading__description { display: flex; align-items: flex-start; justify-content: center; max-width: 680px; min-height: calc(var(--space-14) - var(--border-width-1)); margin: 0 auto; font-size: var(--font-size-base); line-height: var(--line-height-spacious); color: var(--color-text-subtle); } @media (max-width: 639px) { .ds-lp-listing-heading { margin-top: var(--space-12); } .ds-lp-listing-heading__title { font-size: var(--font-size-3xl); } } /* --- ./lp-sections/_lp-sections.css --- */ /** * LP below-fold sections (Task 9) * BEM prefixes: ds-lp-how, ds-lp-proof, ds-lp-testimonial, ds-lp-cta-band, ds-lp-search * Figma: nodes 54:5567 (how-to-hire), 59:5694 (proof points), 59:5456 (testimonial banner), * 2:606 / 27:258 (dark CTA bands). Search bar (ds-lp-search) is PRD-only, no Figma node. * * Bundled into one file (rather than one new component folder per section) since all five * blocks belong to the same programmatic-landing-page feature and are only ever used together * on igmarketplace/templates/igmarketplace/landingPages/hireNiche.html. */ .ds-container.ds-lp-page { max-width: calc(var(--container-xl) + var(--space-3) + var(--space-0-5)); } /* ========================================================================== HOW TO HIRE — numbered vertical timeline ========================================================================== */ .ds-lp-how { margin-top: var(--space-20); background: var(--color-bg-secondary); border: var(--border-width-1) solid var(--color-border-subtle); border-radius: var(--radius-3xl); padding: var(--space-8) 0; } .ds-lp-how__card { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 530px; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); } .ds-lp-how__title { margin: 0 0 var(--space-8); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); color: var(--color-text-default); text-align: center; } .ds-lp-how__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); } .ds-lp-how__step { position: relative; display: flex; gap: var(--space-6); } .ds-lp-how__step:not(:last-child) { min-height: var(--space-28); } .ds-lp-how__step:not(:last-child)::after { content: ''; position: absolute; top: var(--size-12); left: calc(var(--size-12) / 2 - var(--border-width-1)); height: var(--size-16); width: var(--border-width-1); background: var(--color-brand-400); opacity: 0.35; } .ds-lp-how__badge { position: relative; z-index: var(--ds-z-raised); flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--size-12); height: var(--size-12); border-radius: var(--radius-full); background: var(--color-brand-500); color: var(--color-text-inverse); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } .ds-lp-how__step-title { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-subtle-tight); color: var(--color-text-default); } .ds-lp-how__step-desc { margin: 0; font-size: calc(var(--font-size-base) - var(--space-px)); line-height: var(--space-6); color: var(--color-text-subtle); } /* ========================================================================== PROOF POINTS — "Why brands choose Collabstr" cards ========================================================================== */ .ds-lp-proof { margin-top: var(--space-20); padding: 0 0 calc(var(--space-12) - var(--border-width-1)); } .ds-lp-proof__title { margin: 0 0 var(--space-12); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); color: var(--color-text-default); text-align: center; text-transform: capitalize; } .ds-lp-proof .ds-card-grid { gap: var(--space-4); } .ds-lp-proof__icon { display: flex; align-items: center; justify-content: center; width: var(--size-16); height: var(--size-16); color: var(--color-text-default); } .ds-lp-proof__icon svg { width: var(--size-10); height: var(--size-10); } .ds-lp-proof__card { box-sizing: border-box; min-height: 274px; border: var(--border-width-1) solid var(--color-border-subtle); border-radius: calc(var(--radius-xl) + var(--space-1)); box-shadow: var(--shadow-sm); } .ds-lp-proof__card .ds-card__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding: var(--space-4); } .ds-lp-proof__card-title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-snug); color: var(--color-text-default); } .ds-lp-proof__desc { margin: 0; font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text-subtle); } /* ========================================================================== TESTIMONIAL BANNER — generic social-proof block (distinct from the in-list ds-lp-mid-banner in creator-panel/_creator-panel.css) ========================================================================== */ .ds-lp-testimonial-section { margin-top: var(--space-20); } .ds-lp-testimonial-section__title { margin: 0 0 var(--space-12); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); color: var(--color-text-default); text-align: center; } .ds-lp-testimonial { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: var(--space-12); min-height: 414px; box-sizing: border-box; padding: var(--space-10); background: var(--color-bg-secondary); border-radius: var(--radius-xl); } .ds-lp-testimonial__visual { position: relative; width: 220px; height: 100%; background: linear-gradient(var(--color-brand-300), var(--color-brand-300)) left var(--space-5) top calc(50% + var(--space-2)) / var(--space-9) var(--size-8) no-repeat, linear-gradient(var(--color-brand-500), var(--color-brand-500)) left calc(var(--space-24) + var(--space-2)) top calc(50% - var(--space-11)) / var(--size-6) var(--size-12) no-repeat, linear-gradient(var(--color-brand-purple-400), var(--color-brand-purple-400)) left var(--space-28) top calc(50% + var(--space-5) + var(--space-0-5)) / calc(var(--space-20) + var(--space-2)) calc(var(--space-5) + var(--space-0-5)) no-repeat; } .ds-lp-testimonial__visual--composite { display: flex; align-items: center; justify-content: center; background: none; } .ds-lp-testimonial__visual img { position: absolute; width: var(--size-12); height: var(--size-12); border: var(--border-width-2) solid var(--color-bg-primary); border-radius: var(--radius-full); object-fit: cover; } .ds-lp-testimonial__visual img:nth-child(1) { top: calc(50% - var(--space-14)); left: var(--space-10); } .ds-lp-testimonial__visual img:nth-child(2) { top: calc(50% - var(--space-11)); right: var(--space-7); width: var(--size-16); height: var(--size-16); border-radius: var(--radius-md); } .ds-lp-testimonial__visual img:nth-child(3) { top: calc(50% + var(--space-3-5)); left: var(--space-16); width: var(--size-10); height: var(--size-10); } .ds-lp-testimonial__visual--composite img.ds-lp-testimonial__art { position: static; inset: auto; width: calc(var(--space-44) + var(--space-1)); height: calc(var(--space-36) - var(--space-1) - var(--space-px)); border: 0; border-radius: 0; object-fit: contain; } .ds-lp-testimonial__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); } .ds-lp-testimonial__quote { margin: 0; box-sizing: border-box; width: 100%; max-width: 773px; padding-left: var(--space-4); border-left: calc(var(--border-width-2) + var(--border-width-1)) solid var(--color-brand-500); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-compact); color: var(--color-neutral-900); } .ds-lp-testimonial__author { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-compact); color: var(--color-text-subtlest); } .ds-lp-testimonial__author br { display: none; } .ds-lp-testimonial__author strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: var(--line-height-compact); color: var(--color-neutral-900); } .ds-lp-testimonial__stat { margin: 0; font-size: calc(var(--font-size-base) - var(--space-px)); font-weight: var(--font-weight-semibold); line-height: var(--line-height-compact); color: var(--color-neutral-700); } .ds-lp-testimonial__footer { margin-top: 0; } .ds-lp-testimonial__footer .ds-btn { width: 200px; height: var(--size-10); gap: var(--space-1); padding: var(--space-2); border-width: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-none); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); text-transform: capitalize; } .ds-lp-testimonial__footer .ds-btn svg { width: var(--size-6); height: var(--size-6); } /* ========================================================================== FAQ ========================================================================== */ .ds-lp-faq { min-height: 600px; box-sizing: border-box; margin-top: var(--space-20); padding: var(--space-9) 0 0; } .ds-lp-faq__inner { max-width: var(--content-medium); margin: 0 auto; padding: 0 var(--space-6); box-sizing: border-box; } .ds-lp-faq__title { margin: 0 0 var(--space-10); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); color: var(--color-text-default); text-align: center; text-wrap: balance; } .ds-lp-faq .ds-accordion__item { margin: 0; padding: 0; border-bottom: var(--border-width-1) solid var(--lp-faq-divider); } .ds-lp-faq .ds-accordion__header { min-height: var(--size-16); padding: var(--space-5) 0; } .ds-lp-faq .ds-accordion__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); } .ds-lp-faq .ds-accordion__content { margin-top: 0; padding: 0; font-size: calc(var(--font-size-base) - var(--space-px)); font-weight: var(--font-weight-normal); line-height: var(--line-height-body-copy); color: var(--color-text-subtle); } .ds-lp-faq .ds-accordion__item.is-open .ds-accordion__content { margin-top: 0; padding-bottom: calc(var(--space-5) + var(--space-0-5)); } .ds-lp-faq__icons { flex-shrink: 0; color: var(--color-icon-secondary); } .ds-lp-faq__icon { width: var(--size-5); height: var(--size-5); } .ds-lp-faq__icon--open, .ds-accordion__item.is-open .ds-lp-faq__icon--closed { display: none; } .ds-accordion__item.is-open .ds-lp-faq__icon--open { display: block; } /* ========================================================================== DARK CTA BAND ========================================================================== */ .ds-lp-cta-band { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; justify-content: center; height: calc(var(--space-80) + var(--space-6) + var(--space-0-5)); min-height: calc(var(--space-80) + var(--space-6) + var(--space-0-5)); box-sizing: border-box; background: var(--color-neutral-900); border-radius: var(--radius-2xl); padding: var(--space-16) var(--space-2); margin: var(--space-20) 0 0; } .ds-lp-cta-band__title { margin: 0; max-width: 968px; font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-inverse); text-transform: capitalize; } .ds-lp-cta-band__subtitle { margin: 0; max-width: 644px; font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text-inverse); opacity: 0.7; } .ds-lp-cta-band--final .ds-lp-cta-band__title { max-width: 774px; } .ds-lp-cta-band .ds-btn { min-width: 188px; height: calc(var(--size-12) + var(--space-1)); padding: var(--space-4) var(--space-8); border-width: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-none); font-size: var(--font-size-base); text-transform: capitalize; } .ds-lp-cta-band .ds-btn svg { width: calc(var(--size-4) + var(--space-px)); height: calc(var(--size-4) + var(--space-px)); } .ds-lp-cta-band__microcopy { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-inverse); opacity: 0.6; } /* ========================================================================== SEARCH BAR — closing conversion prompt (Figma node 139:758) Input and button are a single joined control: the input rounds only its left corners, the button only its right, and they share one border edge. ========================================================================== */ .ds-lp-search { display: flex; flex-direction: column; align-items: center; gap: var(--space-3-5); text-align: center; padding: var(--space-12) var(--space-6); } .ds-lp-search__form { display: flex; align-items: stretch; width: 100%; max-width: 600px; height: var(--size-12); } .ds-lp-search__input { flex: 1 1 auto; min-width: 0; height: 100%; box-sizing: border-box; padding: var(--space-3-5) var(--space-4); border-width: var(--border-width-1); border-right: 0; border-color: var(--color-border-default); border-radius: var(--radius-md) 0 0 var(--radius-md); } .ds-lp-search__form .ds-btn { flex-shrink: 0; height: 100%; padding: 0 calc(var(--space-6) + var(--space-0-5)); border-width: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: var(--shadow-none); font-size: calc(var(--font-size-base) - var(--space-px)); font-weight: var(--font-weight-semibold); white-space: nowrap; } .ds-lp-search__microcopy { margin: 0; font-size: calc(var(--font-size-sm) - var(--space-px)); color: var(--color-text-subtlest); } @media (max-width: 639px) { .ds-lp-cta-band { height: auto; } .ds-lp-how { margin-top: var(--space-12); padding: var(--space-6); } .ds-lp-how__card { min-height: auto; padding: var(--space-6) 0; } .ds-lp-how__title, .ds-lp-proof__title, .ds-lp-testimonial-section__title, .ds-lp-faq__title { font-size: var(--font-size-3xl); line-height: var(--line-height-tight); } .ds-lp-how__step:not(:last-child) { min-height: auto; } .ds-lp-cta-band__title { font-size: var(--font-size-3xl); } .ds-lp-testimonial { grid-template-columns: 1fr; min-height: auto; padding: var(--space-6); } .ds-lp-testimonial__visual { width: 220px; height: 140px; margin: 0 auto; } .ds-lp-faq { min-height: auto; } .ds-lp-search__form .ds-btn { padding: 0 var(--space-4); } }