/*! Built: 2025-12-08 14:28:51 | Source: C:\laragon\www\camunite\css\v5/src/core.css */ /** * CSS-V5 CORE - Base styles for ALL pages (expanded build target) * ======================================= * * This source uses @import for modularity. Build script will inline * everything (no minify) into dist/core.css. Keep tokens + base + layout * + shared components here. */ /* ============================================ 📦 DESIGN TOKENS ============================================ */ /* === Inlined from: ./00-tokens/tokens.css === */ /* CSS-V5 TOKENS proxy to canonical tokens */ /* === Inlined from: ../../../00-tokens/tokens.css === */ /** * DESIGN TOKENS - CSS Variables (UNIFIED MULTI-THEME) * * System: Palette + Mode Architecture * Date: November 26, 2025 * Purpose: Centralized design system with 3 color palettes * * PALETTES: * - Classic (default) - Orange/Teal, Chaturbate-inspired * - Neon - Cyan/Pink, Cyberpunk-inspired * - Crimson - Red/Rose, Elegant & Bold * * MODES: * - Light (default) * - Dark * * USAGE: * * * Structure: * 1. Base tokens (shared across all themes) * 2. Palette-specific brand colors * 3. Mode-specific backgrounds & text * 4. Combined palette+mode overrides */ /* ============================================ 📦 BASE TOKENS (Shared Across All Themes) ============================================ */ :root { /* ============================================ ✅ STATUS COLORS (Universal) ============================================ */ --success: #10b981; --success-alt: #22c55e; --status-online: var(--success); --status-free: var(--success-alt); --warning: #f59e0b; --warning-light: #f5c542; --status-away: var(--warning-light); --status-member: var(--warning); --danger: #ef4444; --status-private: var(--danger); --status-group: #8b5cf6; --status-offline: #8b8f98; /* ============================================ 📏 SPACING TOKENS (Universal) ============================================ */ --spacing-3xs: 2px; --spacing-2xs: 4px; --spacing-xs: 8px; --spacing-sm: 12px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; --content-gap: 12px; --section-gap: clamp(0.35rem, 0.7vw, 0.5rem); /* Reduced: ~5-8px uniform gap between sections */ --page-gap: 24px; /* Results Section Spacing - Header belongs to content below */ --results-header-gap: 0.1rem; /* Minimal gap: header → content (~1.6px) */ --results-section-spacing: 0; /* No extra margin - use section-gap instead */ /* Card Grid Gap - uniform small spacing between model cards */ --card-gap: clamp(0.2rem, 0.5vw, 0.35rem); /* ~3-5px - tight grid layout */ /* ============================================ 📝 TYPOGRAPHY TOKENS (Universal) ============================================ */ --font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Courier New', Courier, monospace; /* Font sizes - improved scale for better hierarchy */ --font-size-2xs: 0.7rem; /* 11.2px - minimal use only */ --font-size-xs: 0.8rem; /* 12.8px - labels minimum */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 1.875rem; /* 30px */ --font-size-3xl: 2.25rem; /* 36px */ --font-size-4xl: 2.75rem; /* 44px */ /* Font weights - now properly loaded via variable font */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Line heights */ --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.65; /* Letter spacing for improved readability */ --letter-spacing-tighter: -0.03em; --letter-spacing-tight: -0.015em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* ============================================ 📐 LAYOUT TOKENS (Universal) ============================================ */ --max-width-container: 1600px; --max-width-content: 1200px; --max-width-narrow: 800px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --z-index-dropdown: 1000; --z-index-sticky: 1020; --z-index-fixed: 1030; --z-index-modal-backdrop: 1040; --z-index-modal: 1050; --z-index-popover: 1060; --z-index-tooltip: 1070; /* ============================================ 🔄 TRANSITION TOKENS (Universal) ============================================ */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; --transition-all: all var(--transition-base); /* ============================================ 🌓 SHADOW & DEPTH TOKENS (Light Mode Default) Creates visual hierarchy and tactile feel ============================================ */ /* Card shadows - for elevated surfaces (cards, containers) */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06); /* Elevated shadows - for prominent elements (sidebar, modals) */ --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-elevated-lg: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); /* Header/Banner shadows - subtle bottom shadow */ --shadow-header: 0 2px 4px rgba(0, 0, 0, 0.06); /* Inset effects - for buttons, interactive elements (3D volume) */ --inset-button: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.1); --inset-button-hover: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.12); --inset-button-active: inset 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Input field inset - subtle depth for text inputs */ --inset-input: inset 0 1px 2px rgba(0, 0, 0, 0.06); /* Glow effects - for focus states and accents */ --glow-accent: 0 0 0 3px rgba(var(--accent-primary-rgb, 0, 212, 255), 0.15); --glow-success: 0 0 0 3px rgba(16, 185, 129, 0.2); --glow-danger: 0 0 0 3px rgba(239, 68, 68, 0.2); /* ============================================ 🎨 COMPONENT TOKENS (Universal structure) ============================================ */ --model-card-info-h: 48px; /* Reduced from 60px for compact cards */ --model-card-radius: var(--radius-md); --header-height: 60px; --sidebar-width: 280px; --btn-padding-x: var(--spacing-md); --btn-padding-y: var(--spacing-xs); --btn-radius: var(--radius-md); } /* ============================================ 🎨 PALETTE: CLASSIC (Default) Orange CTA + Teal Links (Chaturbate-inspired) ============================================ */ :root, [data-palette="classic"] { /* Brand Colors */ --brand-orange-500: #F47321; --brand-orange-600: #D66118; --brand-teal-500: #0C6A93; --brand-teal-600: #0A5575; /* Semantic Aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); --index-accent: var(--brand-teal-500); --index-accent-strong: var(--brand-teal-600); /* Focus States */ --border-focus: rgba(12, 106, 147, 0.5); --border-focus-ring: 0 0 0 3px rgba(12, 106, 147, 0.2); /* Palette Indicator (for UI) */ --palette-swatch-1: #F47321; --palette-swatch-2: #0C6A93; } /* ============================================ 🎨 PALETTE: NEON Cyan CTA + Hot Pink Links (Cyberpunk) ============================================ */ [data-palette="neon"] { /* Brand Colors - FIXED for WCAG AA contrast (4.5:1 minimum) */ --brand-orange-500: #0097A7; /* Darker cyan CTA - contrast 4.56:1 on white */ --brand-orange-600: #00838F; /* Cyan hover */ --brand-teal-500: #D81B60; /* Darker pink links - contrast 4.82:1 */ --brand-teal-600: #C2185B; /* Pink hover - contrast 5.5:1 */ /* Semantic Aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); --index-accent: var(--brand-teal-500); --index-accent-strong: var(--brand-teal-600); /* Focus States */ --border-focus: rgba(216, 27, 96, 0.5); --border-focus-ring: 0 0 0 3px rgba(216, 27, 96, 0.2); /* Palette Indicator */ --palette-swatch-1: #0097A7; --palette-swatch-2: #D81B60; } /* ============================================ 🎨 PALETTE: CRIMSON Red CTA + Rose Links (Elegant) ============================================ */ [data-palette="crimson"] { /* Brand Colors - FIXED for WCAG AA contrast (4.5:1 minimum) */ --brand-orange-500: #C91538; /* Crimson Red - contrast 5.4:1 on white */ --brand-orange-600: #A8102E; /* Darker hover */ --brand-teal-500: #B8395A; /* Darker rose links - contrast 4.68:1 */ --brand-teal-600: #9A2E4A; /* Rose hover - contrast 6.1:1 */ /* Semantic Aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); --index-accent: var(--brand-orange-500); --index-accent-strong: var(--brand-orange-600); /* Focus States */ --border-focus: rgba(201, 21, 56, 0.5); --border-focus-ring: 0 0 0 3px rgba(201, 21, 56, 0.25); /* Palette Indicator */ --palette-swatch-1: #C91538; --palette-swatch-2: #B8395A; } /* ============================================ 🎨 PALETTE: GOLDEN Gold CTA + Warm Gold Links (Luxury) ============================================ */ [data-palette="golden"] { /* Brand Colors - FIXED for WCAG AA contrast (4.5:1 minimum) */ --brand-orange-500: #996515; /* Darker gold - contrast 4.86:1 on white */ --brand-orange-600: #7A5012; /* Hover state */ --brand-teal-500: #8B6914; /* Dark gold links - contrast 5.12:1 */ --brand-teal-600: #705410; /* Link hover - contrast 6.8:1 */ /* Semantic Aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); --index-accent: var(--brand-orange-500); --index-accent-strong: var(--brand-orange-600); /* Focus States */ --border-focus: rgba(153, 101, 21, 0.5); --border-focus-ring: 0 0 0 3px rgba(153, 101, 21, 0.25); /* Palette Indicator */ --palette-swatch-1: #996515; --palette-swatch-2: #8B6914; } /* ============================================ 🎨 PALETTE: SUNSET Orange CTA + Purple Links (Warm Passion) ============================================ */ [data-palette="sunset"] { /* Brand Colors */ --brand-orange-500: #FF5722; --brand-orange-600: #E64A19; --brand-teal-500: #9C27B0; --brand-teal-600: #7B1FA2; /* Semantic Aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); --index-accent: var(--brand-orange-500); --index-accent-strong: var(--brand-orange-600); /* Focus States */ --border-focus: rgba(255, 87, 34, 0.5); --border-focus-ring: 0 0 0 3px rgba(255, 87, 34, 0.25); /* Palette Indicator */ --palette-swatch-1: #FF5722; --palette-swatch-2: #9C27B0; } /* ============================================ 🎨 PALETTE: VELVET Ferrari Red CTA + Navy Links (Sophisticated) ============================================ */ [data-palette="velvet"] { /* Brand Colors - Navy adjusted for better visibility on light backgrounds */ --brand-orange-500: #E63946; /* Ferrari Red CTA */ --brand-orange-600: #C62A38; /* Darker hover */ --brand-teal-500: #2B4A6F; /* Lighter navy links - contrast 6.8:1 */ --brand-teal-600: #1D3557; /* Dark navy hover */ /* Semantic Aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); --index-accent: var(--brand-orange-500); --index-accent-strong: var(--brand-orange-600); /* Focus States */ --border-focus: rgba(230, 57, 70, 0.5); --border-focus-ring: 0 0 0 3px rgba(230, 57, 70, 0.25); /* Palette Indicator */ --palette-swatch-1: #E63946; --palette-swatch-2: #2B4A6F; } /* ============================================ ☀️ MODE: LIGHT (Default) Clean whites and subtle grays Applied to :root, [data-mode="light"], and [data-theme="light"] ============================================ */ :root, [data-mode="light"], [data-theme="light"] { /* Text Colors - Soft hierarchy, comfortable for extended reading */ --text-primary: #555555; /* Body text - soft, easy on eyes */ --text-heading: #505050; /* Headings - same comfort level */ --text-secondary: #666666; /* Secondary content */ --text-tertiary: #757575; /* Labels, captions */ --text-muted: #909090; /* Subtle hints */ --text-placeholder: #ababab; --text-disabled: #c8c8c8; --text-inverse: #FFFFFF; --text-on-accent: #FFFFFF; /* Always white - for text on colored backgrounds */ /* Background Colors */ --bg-primary: #FFFFFF; --bg-secondary: #F7F7F7; --bg-tertiary: #F5F5F5; --bg-hover: #FAFAFA; --bg-chips: #F3F4F6; --surface-primary: var(--bg-primary); --surface-secondary: var(--bg-secondary); /* Overlay Effects */ --surface-glass: rgba(0, 0, 0, 0.02); --overlay-light: rgba(0, 0, 0, 0.05); --overlay-medium: rgba(0, 0, 0, 0.08); --overlay-strong: rgba(0, 0, 0, 0.12); /* Chip Backgrounds */ --chip-bg: var(--surface-glass); --chip-bg-hover: var(--overlay-light); --chip-bg-active: var(--overlay-medium); /* Border Colors */ --border-primary: #CCCCCC; --border-secondary: #DEDEDE; --border-tertiary: #E5E5E5; --border-subtle: rgba(0, 0, 0, 0.10); --border-default: rgba(0, 0, 0, 0.14); --border-strong: rgba(0, 0, 0, 0.18); /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.025); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.075); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.125); --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.125); --shadow-hero: 0 18px 42px rgba(0, 0, 0, 0.14); --shadow-card: var(--shadow-md); --shadow-modal: var(--shadow-xl); --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15); --shadow-button: 0 2px 6px rgba(0, 0, 0, 0.12); /* Component Colors */ --btn-bg: var(--accent-primary); --btn-bg-hover: var(--accent-primary-hover); --btn-color: var(--text-on-accent); /* Always white for colored buttons */ --model-card-shadow: var(--shadow-card); --header-bg: var(--bg-primary); --header-shadow: var(--shadow-sm); --sidebar-bg: var(--surface-primary); } /* ============================================ 🌙 MODE: DARK Deep charcoal with bright accents ============================================ */ [data-mode="dark"] { /* Text Colors - Soft hierarchy for dark mode, comfortable for eyes */ --text-primary: #d8d8d8; /* Body text - soft off-white */ --text-heading: #d0d0d0; /* Headings - same comfort level */ --text-secondary: #b8b8b8; /* Secondary content */ --text-tertiary: #959595; /* Labels, captions */ --text-muted: #757575; /* Subtle hints */ --text-placeholder: #5a5a5a; --text-disabled: #454545; --text-inverse: #000000; --text-on-accent: #FFFFFF; /* Always white - for text on colored backgrounds */ /* Background Colors */ --bg-primary: #1E1E1E; --bg-secondary: #2A2A2A; --bg-tertiary: #282828; --bg-hover: #333333; --bg-chips: #353535; --surface-primary: #2A2A2A; --surface-secondary: #252525; /* Overlay Effects */ --surface-glass: rgba(255, 255, 255, 0.02); --overlay-light: rgba(255, 255, 255, 0.05); --overlay-medium: rgba(255, 255, 255, 0.08); --overlay-strong: rgba(255, 255, 255, 0.12); /* Chip Backgrounds */ --chip-bg: var(--overlay-light); --chip-bg-hover: var(--overlay-medium); --chip-bg-active: var(--overlay-strong); /* Border Colors */ --border-primary: #555555; --border-secondary: #444444; --border-tertiary: #3A3A3A; --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.12); /* Shadows (Stronger for dark mode) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.5); --shadow-hero: 0 18px 42px rgba(0, 0, 0, 0.4); --shadow-modal: var(--shadow-xl); --shadow-dropdown: var(--shadow-lg); --shadow-button: 0 2px 6px rgba(0, 0, 0, 0.3); /* Card shadows - deeper for dark mode visibility */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.2); /* Elevated shadows - prominent for dark backgrounds */ --shadow-elevated: 0 6px 24px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.2); --shadow-elevated-lg: 0 12px 40px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.25); /* Header shadow - subtle glow effect */ --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.05); /* Inset effects - adjusted for dark backgrounds */ --inset-button: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 2px rgba(0, 0, 0, 0.25); --inset-button-hover: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.3); --inset-button-active: inset 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.25); /* Input field inset */ --inset-input: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Glow effects - more visible on dark */ --glow-accent: 0 0 0 3px rgba(var(--accent-primary-rgb, 0, 212, 255), 0.25); --glow-success: 0 0 0 3px rgba(16, 185, 129, 0.3); --glow-danger: 0 0 0 3px rgba(239, 68, 68, 0.3); } /* ============================================ 🎨 NEON PALETTE + DARK MODE OVERRIDES Enhanced neon glow effects ============================================ */ [data-palette="neon"][data-mode="dark"] { /* Brighter neon colors for dark mode */ --brand-orange-500: #00E5FF; --brand-orange-600: #00B8D4; --brand-teal-500: #FF1744; --brand-teal-600: #F50057; /* Update semantic aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); /* Deeper dark backgrounds for neon */ --bg-primary: #0A0E27; --bg-secondary: #151B3B; --bg-tertiary: #1A2142; --surface-primary: #151B3B; --surface-secondary: #0F1432; /* Cyan-tinted overlays */ --overlay-light: rgba(0, 229, 255, 0.08); --overlay-medium: rgba(0, 229, 255, 0.12); --overlay-strong: rgba(0, 229, 255, 0.16); /* Neon glow borders */ --border-subtle: rgba(0, 229, 255, 0.10); --border-default: rgba(0, 229, 255, 0.16); --border-strong: rgba(0, 229, 255, 0.24); /* Neon glow shadows */ --shadow-sm: 0 2px 8px rgba(0, 229, 255, 0.1); --shadow-md: 0 4px 10px rgba(0, 229, 255, 0.15); --shadow-lg: 0 10px 24px rgba(0, 229, 255, 0.2); /* Neon focus */ --border-focus: rgba(255, 23, 68, 0.6); --border-focus-ring: 0 0 0 3px rgba(255, 23, 68, 0.3); } /* ============================================ 🎨 CRIMSON PALETTE + DARK MODE OVERRIDES Deep burgundy with warm accents ============================================ */ [data-palette="crimson"][data-mode="dark"] { /* Brighter colors for dark mode - excellent contrast on burgundy backgrounds */ --brand-orange-500: #FF3D5A; /* Brighter red for dark mode */ --brand-orange-600: #FF5C75; /* Lighter hover */ --brand-teal-500: #FF8DA1; /* Brighter rose links */ --brand-teal-600: #FFB4C4; /* Light pink hover */ /* Deep burgundy backgrounds */ --bg-primary: #11040A; --bg-secondary: #190710; --bg-tertiary: #2B0E1F; --surface-primary: #190710; --surface-secondary: #220A17; /* Rose-tinted overlays */ --overlay-light: rgba(249, 115, 143, 0.08); --overlay-medium: rgba(249, 115, 143, 0.12); --overlay-strong: rgba(249, 115, 143, 0.16); /* Crimson borders */ --border-subtle: rgba(249, 115, 143, 0.15); --border-default: rgba(249, 115, 143, 0.25); --border-strong: rgba(249, 115, 143, 0.35); /* Warm text for crimson dark */ --text-secondary: #FBE8EF; --text-tertiary: #E7B9CD; --text-muted: #B37A94; } /* ============================================ 🎨 GOLDEN PALETTE + DARK MODE OVERRIDES Rich gold on deep black/brown ============================================ */ [data-palette="golden"][data-mode="dark"] { /* Brighter gold for dark mode - excellent contrast on dark backgrounds */ --brand-orange-500: #DAA520; /* Goldenrod - vibrant on dark */ --brand-orange-600: #C49319; /* Slightly darker hover */ --brand-teal-500: #F4C430; /* Saffron gold links - high visibility */ --brand-teal-600: #FFD700; /* Gold hover */ /* Update semantic aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); /* Deep black/brown backgrounds for luxury feel */ --bg-primary: #0D0A07; --bg-secondary: #1A150F; --bg-tertiary: #231C14; --surface-primary: #1A150F; --surface-secondary: #14100A; /* Gold-tinted overlays */ --overlay-light: rgba(218, 165, 32, 0.08); --overlay-medium: rgba(218, 165, 32, 0.12); --overlay-strong: rgba(218, 165, 32, 0.16); /* Gold borders */ --border-subtle: rgba(218, 165, 32, 0.12); --border-default: rgba(218, 165, 32, 0.20); --border-strong: rgba(218, 165, 32, 0.30); /* Gold glow shadows */ --shadow-sm: 0 2px 8px rgba(218, 165, 32, 0.1); --shadow-md: 0 4px 10px rgba(218, 165, 32, 0.15); --shadow-lg: 0 10px 24px rgba(218, 165, 32, 0.2); /* Gold focus */ --border-focus: rgba(255, 215, 0, 0.6); --border-focus-ring: 0 0 0 3px rgba(255, 215, 0, 0.3); /* Warm cream text */ --text-secondary: #F5E6D3; --text-tertiary: #D4C4B0; --text-muted: #A89580; } /* ============================================ 🎨 SUNSET PALETTE + DARK MODE OVERRIDES Warm orange and purple on deep dark ============================================ */ [data-palette="sunset"][data-mode="dark"] { /* Brighter sunset colors for dark mode */ --brand-orange-500: #FF7043; --brand-orange-600: #FF5722; --brand-teal-500: #BA68C8; --brand-teal-600: #9C27B0; /* Update semantic aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); /* Deep purple-tinted backgrounds */ --bg-primary: #0F0A14; --bg-secondary: #1A1221; --bg-tertiary: #241829; --surface-primary: #1A1221; --surface-secondary: #150E1A; /* Sunset-tinted overlays */ --overlay-light: rgba(255, 112, 67, 0.08); --overlay-medium: rgba(255, 112, 67, 0.12); --overlay-strong: rgba(255, 112, 67, 0.16); /* Sunset borders */ --border-subtle: rgba(186, 104, 200, 0.12); --border-default: rgba(186, 104, 200, 0.20); --border-strong: rgba(186, 104, 200, 0.30); /* Warm shadows */ --shadow-sm: 0 2px 8px rgba(255, 112, 67, 0.1); --shadow-md: 0 4px 10px rgba(156, 39, 176, 0.15); --shadow-lg: 0 10px 24px rgba(255, 112, 67, 0.2); /* Sunset focus */ --border-focus: rgba(255, 112, 67, 0.6); --border-focus-ring: 0 0 0 3px rgba(186, 104, 200, 0.3); /* Warm purple-tinted text */ --text-secondary: #F0E6F5; --text-tertiary: #D4C4E0; --text-muted: #A890B8; } /* ============================================ 🎨 VELVET PALETTE + DARK MODE OVERRIDES Deep navy with warm red accents ============================================ */ [data-palette="velvet"][data-mode="dark"] { /* Brighter velvet colors for dark mode - improved link visibility */ --brand-orange-500: #FF6B7A; /* Coral red CTA */ --brand-orange-600: #FF8A95; /* Lighter hover for dark bg */ --brand-teal-500: #7EB8D8; /* Brighter sky blue links - contrast 7.2:1 */ --brand-teal-600: #A8D4EA; /* Light blue hover */ /* Update semantic aliases */ --accent-primary: var(--brand-orange-500); --accent-primary-hover: var(--brand-orange-600); --link-color: var(--brand-teal-500); --link-color-hover: var(--brand-teal-600); /* Deep navy backgrounds */ --bg-primary: #0A0F1A; --bg-secondary: #121A28; --bg-tertiary: #1A2535; --surface-primary: #121A28; --surface-secondary: #0E141F; /* Navy-tinted overlays */ --overlay-light: rgba(29, 53, 87, 0.15); --overlay-medium: rgba(29, 53, 87, 0.22); --overlay-strong: rgba(29, 53, 87, 0.30); /* Velvet borders */ --border-subtle: rgba(230, 57, 70, 0.12); --border-default: rgba(230, 57, 70, 0.20); --border-strong: rgba(230, 57, 70, 0.30); /* Red glow shadows */ --shadow-sm: 0 2px 8px rgba(230, 57, 70, 0.1); --shadow-md: 0 4px 10px rgba(230, 57, 70, 0.15); --shadow-lg: 0 10px 24px rgba(230, 57, 70, 0.2); /* Velvet focus */ --border-focus: rgba(255, 107, 122, 0.6); --border-focus-ring: 0 0 0 3px rgba(255, 107, 122, 0.3); /* Cool navy-tinted text */ --text-secondary: #E8EDF5; --text-tertiary: #B8C5D8; --text-muted: #7A8FA8; } /* ============================================ 🔄 LEGACY COMPATIBILITY Support old [data-theme="dark"] attribute ============================================ */ [data-theme="dark"] { /* Map old attribute to new system - FULL dark mode token set */ /* Text Colors - Soft hierarchy for dark mode */ --text-primary: #d8d8d8; --text-heading: #d0d0d0; --text-secondary: #b8b8b8; --text-tertiary: #959595; --text-muted: #757575; --text-placeholder: #5a5a5a; --text-disabled: #454545; --text-inverse: #000000; --text-on-accent: #FFFFFF; /* Background Colors */ --bg-primary: #1E1E1E; --bg-secondary: #2A2A2A; --bg-tertiary: #282828; --bg-hover: #333333; --bg-chips: #353535; --surface-primary: #2A2A2A; --surface-secondary: #252525; /* Border Colors */ --border-primary: #555555; --border-secondary: #444444; --border-tertiary: #3A3A3A; --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.12); /* Overlay Effects */ --surface-glass: rgba(255, 255, 255, 0.02); --overlay-light: rgba(255, 255, 255, 0.05); --overlay-medium: rgba(255, 255, 255, 0.08); --overlay-strong: rgba(255, 255, 255, 0.12); /* Chip Backgrounds */ --chip-bg: var(--overlay-light); --chip-bg-hover: var(--overlay-medium); --chip-bg-active: var(--overlay-strong); /* Shadows - stronger for dark mode */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.2); --shadow-elevated: 0 6px 24px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.2); --shadow-elevated-lg: 0 12px 40px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.25); --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.05); --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.5); --shadow-dropdown: 0 10px 24px rgba(0, 0, 0, 0.4); --shadow-button: 0 2px 6px rgba(0, 0, 0, 0.3); /* Inset effects for buttons */ --inset-button: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 2px rgba(0, 0, 0, 0.25); --inset-button-hover: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.3); --inset-button-active: inset 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.25); --inset-input: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Glow effects */ --glow-accent: 0 0 0 3px rgba(var(--accent-primary-rgb, 0, 212, 255), 0.25); --glow-success: 0 0 0 3px rgba(16, 185, 129, 0.3); --glow-danger: 0 0 0 3px rgba(239, 68, 68, 0.3); } /* ============================================ 📱 RESPONSIVE BREAKPOINTS (For reference in media queries) ============================================ */ /* --breakpoint-xs: 480px; --breakpoint-sm: 768px; --breakpoint-md: 992px; --breakpoint-lg: 1200px; --breakpoint-xl: 1400px; --breakpoint-2xl: 1600px; */ /* ============================================ 🎯 BODY BACKGROUND FIX Ensures body always uses theme background ============================================ */ body { background-color: var(--bg-primary) !important; } /* ============================================ 📦 BASE ============================================ */ /* === Inlined from: ./01-base/reset.css === */ /* CSS-V5 BASE RESET proxy */ /* === Inlined from: ../../../01-base/reset.css === */ /** * RESET & NORMALIZE * * Minimal reset for consistency across browsers * Based on modern normalize + custom adjustments */ /* Box Sizing Reset */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margins & paddings */ * { margin: 0; padding: 0; } /* HTML & Body */ html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; } body { font-family: var(--font-primary); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Remove list styles */ ul, ol { list-style: none; } /* Links */ a { color: var(--link-color); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--link-color-hover); } /* Images */ img { max-width: 100%; height: auto; display: block; } /* Buttons */ button { font-family: inherit; font-size: inherit; line-height: inherit; border: none; background: none; cursor: pointer; } /* Form Elements */ input, textarea, select { font-family: inherit; font-size: inherit; line-height: inherit; } /* Remove default focus outline (we'll add custom later) */ :focus { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Remove focus outline for mouse users */ :focus:not(:focus-visible) { outline: none; } /* === Inlined from: ./01-base/typography.css === */ /* CSS-V5 BASE TYPOGRAPHY proxy */ /* === Inlined from: ../../../01-base/typography.css === */ /** * TYPOGRAPHY * * Global typography styles using design tokens * Headings, paragraphs, lists, etc. * Updated: 2025-12-05 - Improved hierarchy and readability */ /* ===== BASE FONT SETTINGS ===== */ html { font-family: var(--font-primary); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--text-primary); } /* ===== HEADINGS - Clear Visual Hierarchy ===== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); color: var(--text-heading); margin-top: 0; margin-bottom: var(--spacing-md); } /* H1 - Primary page title */ h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } /* H2 - Major section headers */ h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } /* H3 - Subsection headers */ h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); } /* H4 - Component headers */ h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); } /* H5 - Minor headers */ h5 { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); } /* H6 - Smallest headers */ h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; } /* ===== PARAGRAPHS ===== */ p { margin-top: 0; margin-bottom: var(--spacing-sm); color: var(--text-primary); line-height: var(--line-height-relaxed); } /* Lead paragraph - larger intro text */ .lead, p.lead { font-size: var(--font-size-md); font-weight: var(--font-weight-normal); line-height: var(--line-height-relaxed); color: var(--text-secondary); } /* ===== TEXT EMPHASIS ===== */ /* Strong & Bold - properly visible now with variable font */ strong, b { font-weight: var(--font-weight-semibold); } /* Extra emphasis */ .text-bold { font-weight: var(--font-weight-bold); } /* Emphasis */ em, i { font-style: italic; } /* ===== SMALL & SECONDARY TEXT ===== */ /* Small Text */ small, .small { font-size: var(--font-size-sm); color: var(--text-secondary); } /* Extra small - use sparingly */ .text-xs { font-size: var(--font-size-xs); line-height: var(--line-height-normal); } /* Muted text */ .text-muted { color: var(--text-muted); } /* Secondary text */ .text-secondary { color: var(--text-secondary); } /* ===== LABELS & CAPTIONS ===== */ /* Standard label - minimum readable size */ .label, label { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-secondary); margin-bottom: var(--spacing-2xs); } /* Uppercase label - with proper letter-spacing */ .label-caps { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--text-secondary); } /* Caption text */ .caption { font-size: var(--font-size-sm); color: var(--text-tertiary); line-height: var(--line-height-normal); } /* ===== CODE ===== */ code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-glass); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--text-primary); } pre { font-family: var(--font-mono); font-size: var(--font-size-sm); background: var(--bg-tertiary); padding: var(--spacing-md); border-radius: var(--radius-md); overflow-x: auto; } pre code { background: transparent; padding: 0; } /* ===== BLOCKQUOTE ===== */ blockquote { padding: var(--spacing-md); margin: var(--spacing-md) 0; background: var(--bg-tertiary); border-left: 4px solid var(--accent-primary); color: var(--text-secondary); font-style: italic; } blockquote p:last-child { margin-bottom: 0; } /* ===== LISTS ===== */ ul, ol { margin-top: 0; margin-bottom: var(--spacing-sm); padding-left: var(--spacing-lg); } ul li, ol li { margin-bottom: var(--spacing-2xs); line-height: var(--line-height-relaxed); } /* ===== HORIZONTAL RULE ===== */ hr { border: none; border-top: 1px solid var(--border-secondary); margin: var(--spacing-lg) 0; } /* ===== SELECTION ===== */ ::selection { background: var(--accent-primary); color: var(--text-on-accent); } /* ===== EYEBROW (Small label text above headings) ===== */ .eyebrow { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--index-accent); margin-bottom: var(--spacing-xs); } /* ===== TEXT LIST (Styled list with accent markers) ===== */ .text-list { list-style: none; padding: 0; margin: 0 0 var(--spacing-md); } .text-list li { position: relative; padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg); border-bottom: 1px solid var(--border-subtle); line-height: var(--line-height-relaxed); } .text-list li:last-child { border-bottom: none; } .text-list li::before { content: ''; position: absolute; left: 0; top: 1.1em; width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--index-accent); } /* ===== SITE SMALL LOGO (Inline logos) ===== */ .site-small-logo { display: inline-block; height: 24px; width: auto; vertical-align: middle; margin-right: var(--spacing-xs); } /* ===== UTILITY CLASSES FOR TYPOGRAPHY ===== */ /* Font weights */ .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 alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* Text transform */ .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } /* Truncation */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================ 📦 LAYOUT ============================================ */ /* === Inlined from: ./02-layout/container.css === */ /* CSS-V5 LAYOUT CONTAINER proxy */ /* === Inlined from: ../../../02-layout/container.css === */ /** * CONTAINER SYSTEM - 2025 RESPONSIVE STANDARDS * * Universal wrapper with max-width: 1600px * Applies AUTOMATICALLY to: Header, Content, Sidebar, Footer - ALL site elements * * Modern responsive breakpoints (2025): * - 1600px+ → max 1600px (Large Desktop - 4K monitors) * - 1536px → max 1400px (Desktop XL - MacBook Pro 16") * - 1280px → max 1200px (Desktop - Standard monitors) * - 1024px → max 992px (Laptop - iPad Pro landscape) * - 768px → max 100% (Tablet - iPad portrait) * - 640px → max 100% (Mobile Landscape - iPhone Pro Max) * - <640px → max 100% (Mobile Portrait - iPhone) */ /* Main content area - add padding to prevent header overlap */ main#content { padding-top: 85px; /* Height of fixed header */ } /* ===== UNIVERSAL AUTOMATIC WRAPPER ===== */ /* Applies to header inner container */ .site-header .header-container, /* Applies to main content (exclude form pages which have their own sizing) */ main#content > *:not(.form-container), /* Applies to footer inner container */ .site-footer .footer-container { width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; /* 20px default */ padding-right: 1.25rem; } /* 🖥️ Large Desktop (4K) → Desktop XL */ @media (max-width: 1600px) { .site-header .header-container, main#content > *:not(.form-container), .site-footer .footer-container { max-width: 1400px; } } /* 🖥️ Desktop XL (MacBook Pro 16") → Desktop */ @media (max-width: 1536px) { .site-header .header-container, main#content > *:not(.form-container), .site-footer .footer-container { max-width: 1280px; } } /* 💻 Desktop (Standard monitors) → Laptop */ @media (max-width: 1280px) { .site-header .header-container, main#content > *:not(.form-container), .site-footer .footer-container { max-width: 1024px; } } /* 💻 Laptop (iPad Pro landscape) → Tablet */ @media (max-width: 1024px) { .site-header .header-container, main#content > *:not(.form-container), .site-footer .footer-container { max-width: 100%; padding-left: 1rem; /* 16px for tablet */ padding-right: 1rem; } } /* 📱 Tablet (iPad portrait) */ @media (max-width: 768px) { .site-header .header-container, main#content > *:not(.form-container), .site-footer .footer-container { max-width: 100%; padding-left: 1rem; /* 16px */ padding-right: 1rem; } } /* 📱 Mobile Landscape (iPhone Pro Max) */ @media (max-width: 640px) { .site-header .header-container, main#content > *:not(.form-container), .site-footer .footer-container { max-width: 100%; padding-left: 0.875rem; /* 14px for mobile landscape */ padding-right: 0.875rem; } } /* 📱 Mobile Portrait (iPhone) */ @media (max-width: 480px) { .site-header .header-container, main#content > *:not(.form-container), .site-footer .footer-container { max-width: 100%; padding-left: 0.75rem; /* 12px for mobile portrait */ padding-right: 0.75rem; } } /* ===== LEGACY CONTAINER CLASSES (Backward Compatibility) ===== */ .container { width: 100%; max-width: var(--max-width-container); margin-left: auto; margin-right: auto; padding-left: var(--spacing-md); padding-right: var(--spacing-md); } /* Narrow container for focused content */ .container--narrow { max-width: var(--max-width-narrow); } /* Content container (for articles, blog posts) */ .container--content { max-width: var(--max-width-content); } /* Fluid container (no max-width) */ .container--fluid { max-width: none; } /* === Inlined from: ./02-layout/grid.css === */ /* CSS-V5 LAYOUT GRID proxy */ /* === Inlined from: ../../../02-layout/grid.css === */ /** * GRID SYSTEM * * Placeholder for future grid system * Will be populated during layout phase */ /* Grid system will be added in Phase 2 (Day 4-6) */ /* Basic flex grid for immediate use */ .flex-grid { display: flex; flex-wrap: wrap; gap: var(--spacing-md); } .flex-grid__item { flex: 1 1 300px; } /* ===== INDEX CONTENT LAYOUT (Main + Sidebar) ===== */ .content-layout { display: grid; gap: var(--card-gap, clamp(0.2rem, 0.5vw, 0.35rem)); /* Same as card grid gap */ align-items: start; margin-top: clamp(0.25rem, 0.5vw, 0.4rem); /* Minimal gap after hero */ } /* Two-column layout: Main content (fluid) + Sidebar (280-340px) */ @media (min-width: 1024px) { .content-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } } /* Main content area */ .content-main { display: flex; flex-direction: column; gap: var(--section-gap); /* UNIVERSAL gap between ALL children */ min-width: 0; /* CRITICAL: Prevents flex/grid overflow beyond parent container */ } /* ===== UNIVERSAL VERTICAL SPACING RULE ===== */ /* * The gap property on .content-main handles ALL vertical spacing automatically * No need for individual margin-bottom on child elements * This ensures CONSISTENT spacing between: * - .page-hero * - .index-home-explore * - .index-home-sites * - .results-section * - .results-list * - .content-box * - .pagination */ /* Remove any margin-bottom from direct children to prevent double spacing */ .content-main > * { margin-bottom: 0 !important; min-width: 0; /* Allow shrink - prevent overflow on resize (sites grid, etc.) */ } /* Sidebar is already styled in 03-components/sidebar.css */ /* ============================================ 📦 CORE COMPONENTS (used aproape peste tot) ============================================ */ /* === Inlined from: ../../03-components/header.css === */ /** * HEADER * * Site header/navigation - Extracted from assets/css/site-header.css * FontAwesome 6.7 compatible */ /* ===== SITE HEADER ===== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--bg-primary); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-header); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Subtle glass effect for modern look */ [data-mode="dark"] .site-header { background: rgba(30, 30, 30, 0.95); border-bottom-color: var(--border-subtle); } .header-container { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); /* 16px - tighter header spacing */ max-width: var(--max-width-container); margin: 0 auto; padding: 0 16px; height: 70px; flex-wrap: nowrap; } .site-header__inner { display: flex; align-items: center; gap: var(--spacing-md); max-width: var(--max-width-container); margin: 0 auto; padding: 0 16px; min-height: 72px; } .site-header__left { display: flex; align-items: center; gap: var(--spacing-md); flex: 1 1 auto; min-width: 0; } .site-header__branding { display: inline-flex; align-items: center; gap: var(--spacing-xs); } .site-nav { display: flex; flex: 2 1 auto; min-width: 0; } .site-header__end { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; } .site-search__toggle, .site-menu__toggle { display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 1200px) { .site-header__inner { flex-wrap: wrap; } .site-nav { order: 3; width: 100%; } } @media (max-width: 768px) { .site-header__end { width: 100%; justify-content: space-between; gap: var(--spacing-xs); } .site-nav { order: 3; width: 100%; } } @media (max-width: 560px) { .site-header__end { flex-direction: column; align-items: stretch; gap: var(--spacing-2xs); } .site-menu__toggle { order: 1; align-self: flex-end; } .site-header__end .save-app-button { order: 2; } } /* Header Layout Blocks */ /* Desktop-first: full search bar visible on large screens */ .header-search-block { flex: 1 1 420px; min-width: 260px; max-width: 460px; display: flex; position: relative; } /* Search Toggle Button - HIDDEN by default on desktop */ .search-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bg-primary); border: 1.5px solid var(--border-secondary); border-radius: 50%; cursor: pointer; color: var(--link-color); font-size: 1.1rem; transition: all 0.2s ease; flex-shrink: 0; } .search-toggle:hover { border-color: var(--link-color); background: var(--overlay-light); transform: scale(1.05); } .search-toggle:focus { outline: none; box-shadow: var(--border-focus-ring); } /* Search Close Button (inside expanded search) */ .search-close { display: none; position: absolute; right: 48px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: var(--spacing-xs); cursor: pointer; color: var(--text-muted); font-size: 1rem; transition: all 0.2s ease; } .search-close:hover { color: var(--link-color); } .header-logo-block { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; height: 40px; /* Fixed height container - matches button sizes */ } .header-actions { display: flex; align-items: center; gap: 6px; /* Tight, uniform spacing between action buttons */ flex-shrink: 0; /* No margin - parent gap handles spacing */ } .site-logo a { display: flex; align-items: center; transition: transform 0.2s ease; } .site-logo a:hover { transform: scale(1.02); } .logo-full { height: 40px; max-height: 40px; width: auto; display: block; object-fit: contain; } .logo-compact { height: 36px; max-height: 36px; width: auto; display: none !important; } .site-logo img { display: block; } /* Header Search - inherit from .header-search-block */ .header-search { /* Removed: flex and width rules now come from .header-search-block */ min-width: 0; } /* Desktop-first: search form visible by default */ .search-form { display: flex; position: relative; border: none; box-shadow: none; background: none; } .search-input-wrapper { position: relative; display: flex; align-items: center; } .search-input { width: 100%; height: 44px; padding: 0 50px 0 16px; border: 2px solid var(--border-secondary); border-radius: 22px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.95rem; transition: all 0.2s ease; text-decoration: none; outline: none; box-shadow: none; } .search-input:focus { outline: none; border-color: var(--link-color); box-shadow: var(--border-focus-ring); } .search-submit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: var(--spacing-xs); cursor: pointer; color: var(--link-color); font-size: 1.1rem; transition: all 0.2s ease; } .search-submit:hover { color: var(--link-color-hover); transform: translateY(-50%) scale(1.1); } /* Primary Navigation */ .primary-nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin-left: var(--spacing-md); justify-content: flex-end; /* Align nav-items to the right */ } .nav-items { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 2px; /* Compact spacing between items */ flex-wrap: nowrap; /* Prevent wrapping - let priority hiding work */ } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; padding: var(--spacing-xs) 10px; /* Reduced horizontal padding */ color: var(--text-primary); text-decoration: none; font-weight: var(--font-weight-semibold); border-radius: var(--radius-sm); transition: all 0.2s ease; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.95rem; } .nav-link:hover, .nav-link.active { color: var(--link-color); background: var(--overlay-light); } .nav-link.active { background: var(--overlay-medium); } .dropdown-icon { margin-left: 6px; font-size: 0.8rem; transition: transform 0.2s ease; } .nav-dropdown.open .dropdown-icon { transform: rotate(180deg); } /* User Menu */ .user-menu { position: relative; } .user-avatar { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) 12px; background: none; border: 2px solid var(--border-secondary); border-radius: 20px; cursor: pointer; transition: all 0.2s ease; color: var(--text-primary); } .user-avatar:hover { border-color: var(--link-color); background: var(--surface-glass); } .avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .user-name { font-weight: var(--font-weight-semibold); font-size: 0.9rem; } .user-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 1001; } .user-menu.open .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: flex; align-items: center; gap: 10px; padding: var(--spacing-sm) 16px; color: var(--text-primary); text-decoration: none; font-size: 0.9rem; transition: background 0.2s ease; } .dropdown-item:hover { background: var(--overlay-light); color: var(--link-color); } .dropdown-item .badge { margin-left: auto; background: var(--link-color); color: var(--text-on-accent); font-size: 0.75rem; padding: var(--spacing-3xs) 6px; border-radius: var(--radius-lg); font-weight: var(--font-weight-semibold); } .dropdown-divider { height: 1px; background: var(--border-secondary); margin: var(--spacing-xs) 0; } .btn-login { padding: 10px 20px; background: var(--link-color); color: var(--text-on-accent); text-decoration: none; border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); transition: all 0.2s ease; } .btn-login:hover { background: var(--link-color-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); } /* Mega Panels */ .mega-panels { position: absolute; top: 100%; left: 0; right: 0; z-index: 1200; pointer-events: none; } .mega-panel.open { pointer-events: auto; } .mega-panel { position: absolute; top: 0; left: 0; right: 0; background: var(--bg-primary); border: 1px solid var(--border-secondary); border-top: none; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; } .mega-panel.open { opacity: 1; visibility: visible; transform: translateY(0); } .mega-panel-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-xl); padding: var(--spacing-xl); max-width: var(--max-width-container); margin: 0 auto; } .mega-column h3 { margin: 0 0 16px 0; color: var(--text-primary); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .mega-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-xs); } .mega-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--text-primary); text-decoration: none; border-radius: var(--radius-sm); transition: all 0.2s ease; } .mega-link:hover { background: var(--overlay-light); color: var(--link-color); transform: translateX(4px); } .mega-link i { width: 16px; text-align: center; color: var(--link-color); } .mega-link .count { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; font-weight: var(--font-weight-semibold); } .mega-link .mega-badge { display: inline-flex; align-items: center; padding: var(--spacing-3xs) var(--spacing-xs); border-radius: var(--radius-full); font-size: 0.75rem; background: var(--link-color); color: var(--text-on-accent); font-weight: 600; letter-spacing: 0.02em; box-shadow: var(--shadow-sm); margin-left: 8px; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; } .mega-link:hover .mega-badge, .mega-link:focus .mega-badge { opacity: 1; transform: translateY(0); } /* Save App CTA */ .save-app-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.04em; border-radius: 999px; padding: 8px 18px; line-height: 1; transition: transform 0.2s ease, box-shadow 0.2s ease; } .save-app-button[hidden] { display: none !important; } .save-app-button.is-visible { animation: save-app-button-pop 0.35s ease; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); } .save-app-button:focus-visible { outline: 2px solid var(--link-color); outline-offset: 2px; } .save-app-button--drawer { width: 100%; } @keyframes save-app-button-pop { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @media (max-width: 768px) { .save-app-button { font-size: 0.74rem; padding: 6px 14px; letter-spacing: 0.03em; } .save-app-button.is-visible { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2); } } @media (max-width: 560px) { .save-app-button { width: 100%; } } .site-drawer__install { padding: var(--spacing-md); margin: var(--spacing-md) 0; border-radius: var(--radius-lg); border: 1px dashed rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.1); } .site-drawer__install p { margin: 0 0 var(--spacing-sm); font-size: 0.92rem; line-height: 1.4; } .pwa-install-info { position: relative; padding: var(--spacing-sm) var(--spacing-lg); margin: 72px auto 0; max-width: var(--max-width-container); background: linear-gradient(90deg, rgba(14, 165, 233, 0.1), rgba(14, 165, 233, 0.02)); border: 1px solid rgba(56, 189, 248, 0.2); border-radius: var(--radius-lg); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08); } .pwa-install-info p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--text-primary); text-align: center; } .pwa-install-info__signal { margin-right: var(--spacing-xs); font-size: 1rem; } @media (max-width: 768px) { .pwa-install-info { margin: 64px var(--spacing-md) 0; padding: var(--spacing-sm) var(--spacing-md); } } /* Mobile Navigation Toggle */ .mobile-nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; width: 40px; /* Uniform touch-friendly size */ height: 40px; background: var(--bg-primary); border: 1.5px solid var(--border-secondary); /* Match search toggle */ border-radius: 50%; cursor: pointer; gap: 5px; /* Space between lines */ padding: 0; align-self: center; transition: all 0.2s ease; } .mobile-nav-toggle:hover { border-color: var(--link-color); background: var(--overlay-light); } .hamburger-line { width: 18px; /* Slightly smaller to fit in circle */ height: 2.5px; /* Slightly thicker for visibility */ background: var(--text-primary); border-radius: 1px; transition: all 0.3s ease; } .mobile-nav-toggle.open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-nav-toggle.open .hamburger-line:nth-child(2) { opacity: 0; } .mobile-nav-toggle.open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } /* Mobile Navigation */ .mobile-nav { position: fixed; top: 70px; left: 0; right: 0; bottom: 0; background: var(--bg-primary); transform: translateY(-100%); transition: transform 0.3s ease; z-index: 998; overflow-y: auto; } .mobile-nav.open { transform: translateY(0); } .mobile-nav-content { padding: var(--spacing-lg) 20px; } .mobile-nav-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .mobile-nav-items > li { flex: 1 0 100%; } .mobile-nav-items > li.mobile-nav-divider { flex-basis: 100%; } .mobile-nav-items > li.mobile-icon-only { flex: 0 0 calc(33.333% - 8px); margin: var(--spacing-xs) var(--spacing-2xs) 0 var(--spacing-2xs); } .mobile-nav-link { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) 0; color: var(--text-primary); text-decoration: none; font-size: 1.1rem; font-weight: var(--font-weight-semibold); border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: color 0.2s ease; } .mobile-nav-items > li.mobile-icon-only .mobile-nav-link { justify-content: center; border-bottom: none; border: 1px solid var(--border-tertiary); border-radius: var(--radius-sm); padding: var(--spacing-sm) 0; } .mobile-nav-items > li.mobile-icon-only .mobile-nav-link i { margin: 0; } .mobile-nav-link:hover, .mobile-nav-link.active { color: var(--link-color); } .mobile-nav-link i { width: 20px; text-align: center; color: var(--link-color); } .mobile-nav-accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--spacing-md) 0; background: none; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: var(--text-primary); font-size: 1.1rem; font-weight: var(--font-weight-semibold); cursor: pointer; text-align: left; } .mobile-nav-accordion-trigger i:first-child { width: 20px; text-align: center; color: var(--link-color); margin-right: 12px; } .accordion-icon { transition: transform 0.3s ease; } .mobile-nav-accordion.open .accordion-icon { transform: rotate(180deg); } .mobile-nav-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .mobile-nav-accordion.open .mobile-nav-accordion-content { max-height: 500px; } .mobile-nav-sublink { display: flex; align-items: center; gap: 10px; padding: var(--spacing-sm) 0 12px 32px; color: var(--text-primary); text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease; } .mobile-nav-sublink:hover { color: var(--link-color); } .mobile-nav-sublink .count { margin-left: auto; color: var(--text-muted); font-size: 0.8rem; } .mobile-nav-divider { height: 1px; background: var(--border-secondary); margin: var(--spacing-md) 0; } .mobile-theme-switch { display: flex; align-items: center; gap: var(--spacing-sm); padding: 20px 0; border-top: 1px solid var(--border-secondary); margin-top: 20px; } .mobile-nav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 997; } .mobile-nav-overlay.open { opacity: 1; visibility: visible; } /* Theme Switcher */ .desktop-theme-switch { margin-left: 0; display: flex; align-items: center; } .mobile-theme-switch { display: flex; align-items: center; gap: var(--spacing-sm); padding: 20px 0; border-top: 1px solid var(--border-secondary); margin-top: 20px; justify-content: center; } .theme-toggle { position: relative; width: 40px; /* Uniform size with other header buttons */ height: 40px; border: 1.5px solid var(--border-secondary); border-radius: 50%; background: var(--bg-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; overflow: hidden; padding: 0; } .theme-toggle:hover { border-color: var(--link-color); background: var(--overlay-light); transform: scale(1.1); } .theme-icon-light, .theme-icon-dark { position: absolute; font-size: 1rem; /* Proportional to 40px button */ transition: all 0.3s ease; color: var(--link-color); } .theme-icon-light { opacity: 1; transform: scale(1); } .theme-icon-dark { opacity: 0; transform: scale(0.8); } [data-theme="dark"] .theme-icon-light { opacity: 0; transform: scale(0.8); } [data-theme="dark"] .theme-icon-dark, [data-mode="dark"] .theme-icon-dark { opacity: 1; transform: scale(1); } [data-mode="dark"] .theme-icon-light { opacity: 0; transform: scale(0.8); } /* ===== PALETTE SELECTOR ===== */ .palette-selector { display: flex; gap: 4px; padding: 3px 4px; background: var(--surface-secondary); border-radius: var(--radius-full); /* No margin - parent gap handles spacing */ } /* ===== THEME CYCLE BUTTON (Tablet only) ===== */ /* Single button that cycles through palettes - visible only when palette-selector is hidden */ .theme-cycle-btn { display: none; /* Hidden by default on desktop */ align-items: center; justify-content: center; width: 40px; /* Uniform touch-friendly size */ height: 40px; padding: 0; border-radius: 50%; border: 1.5px solid var(--border-secondary); background: var(--bg-primary); color: var(--accent-primary); /* Colored icon to indicate palette function */ cursor: pointer; font-size: 1rem; /* Slightly larger icon for 40px button */ transition: all 0.2s ease; } .theme-cycle-btn:hover { border-color: var(--accent-primary); background: var(--overlay-light); transform: scale(1.1); } .theme-cycle-btn:active { transform: scale(0.95); } /* Show cycle button only on tablet (992-1279px) when palette-selector is hidden */ @media (min-width: 992px) and (max-width: 1279px) { .theme-cycle-btn.tablet-only { display: flex; } } .palette-swatch { --palette-ring-color: rgba(0, 0, 0, 0.18); --palette-ring-hover: rgba(0, 0, 0, 0.32); --palette-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); --palette-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.2); width: 18px; height: 18px; min-width: 18px; min-height: 18px; padding: 0; border-radius: 50%; border: none; cursor: pointer; transition: all 0.2s ease; background-color: transparent; /* Conic gradient naturally fills circles completely */ background-size: 100% 100%; background-position: center; background-clip: padding-box; flex-shrink: 0; box-shadow: var(--palette-shadow), 0 0 0 1.5px var(--palette-ring-color); } /* Fix for proper circle rendering */ .palette-swatch::before { content: none; } .palette-swatch:hover { --palette-ring-color: var(--palette-ring-hover); --palette-shadow: var(--palette-shadow-hover); transform: scale(1.2); } .palette-swatch:focus { outline: none; box-shadow: var(--border-focus-ring), 0 0 0 1.5px var(--palette-ring-color); } .palette-swatch.active { box-shadow: var(--palette-shadow), 0 0 0 1.5px var(--text-primary), 0 0 0 3px var(--bg-primary), 0 0 0 4.5px var(--accent-primary); transform: scale(1.1); } /* Dark mode border adjustments */ [data-mode="dark"] .palette-swatch { --palette-ring-color: rgba(255, 255, 255, 0.35); --palette-ring-hover: rgba(255, 255, 255, 0.55); --palette-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); --palette-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.65); } [data-mode="dark"] .palette-swatch:hover { --palette-ring-color: var(--palette-ring-hover); --palette-shadow: var(--palette-shadow-hover); } /* Hide palette selector on mobile header (shown in mobile nav) */ .palette-selector.desktop-only { display: none; } @media (min-width: 992px) { .palette-selector.desktop-only { display: flex; } } /* ===== MOBILE THEME CONTROLS ===== */ .mobile-theme-controls { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); padding: 20px 0; border-top: 1px solid var(--border-secondary); margin-top: 20px; } .mobile-theme-controls .palette-selector { margin-right: 0; padding: 4px 6px; gap: 6px; } .mobile-theme-controls .palette-swatch { width: 28px; height: 28px; min-width: 28px; min-height: 28px; } .mobile-theme-controls .theme-toggle { width: 38px; height: 38px; } .mobile-theme-controls .theme-icon-light, .mobile-theme-controls .theme-icon-dark { font-size: 1rem; } .theme-label { font-size: 0.9rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); } .site-logo { flex-shrink: 0; } .site-logo img { max-height: 40px; /* Uniform with buttons */ height: 40px; width: auto; object-fit: contain; } /* ===== RESPONSIVE BREAKPOINTS - 3 TIER SYSTEM ===== */ /* * TIER 1: Full Desktop (≥1280px) - All visible * TIER 2: Tablet/Small Desktop (992px - 1279px) - Simplified nav * TIER 3: Mobile/Tablet Portrait (<992px) - Hamburger only */ /* ===== TIER 2: TABLET / SMALL DESKTOP (992px - 1279px) ===== */ @media (max-width: 1279px) { /* Collapse search to icon */ .header-search-block { flex: 0 0 auto; min-width: auto; max-width: none; position: relative; z-index: 2; /* Above nav links when they overlap on resize */ } /* Ensure search toggle stays clickable above overlapping nav items */ .search-toggle { position: relative; z-index: 2; } .header-search-block .search-form { display: none; position: fixed; top: 60px; left: 1rem; right: 1rem; transform: none; width: auto; max-width: 500px; z-index: 100; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .search-toggle { display: flex; } /* Hide lower priority items */ .nav-item-hideable[data-priority="7"], .nav-item-hideable[data-priority="8"] { display: none; } /* Hide palette selector on tablet */ .palette-selector.desktop-only { display: none; } /* When search expanded */ .header-search-block[data-search-expanded="true"] .search-form { display: block; animation: searchDropDown 0.3s ease forwards; } .header-search-block[data-search-expanded="true"] .search-toggle { display: none; } .header-search-block[data-search-expanded="true"] .search-close { display: flex; } } /* ===== TIER 2.5: Smaller tablets (992px - 1100px) - Hide more items ===== */ @media (max-width: 1100px) { .nav-item-hideable[data-priority="5"], .nav-item-hideable[data-priority="6"] { display: none; } } /* ===== TIER 3: MOBILE / TABLET PORTRAIT (<992px) ===== */ @media (max-width: 991px) { /* Layout: Search left, Logo centered, Actions (hamburger/icons) right */ .header-container { height: auto; padding: var(--spacing-sm) var(--spacing-md); display: grid; /* Search (auto), Logo (flexible center), Actions (auto) */ grid-template-columns: auto 1fr auto; grid-template-areas: "search logo actions"; align-items: center; gap: var(--spacing-sm); } .header-search-block { grid-area: search; flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; justify-self: stretch; } .header-logo-block { grid-area: logo; justify-self: center; justify-content: center; } .header-actions { grid-area: actions; justify-self: end; margin-left: 0; } /* Hide entire nav */ .primary-nav { display: none; } /* Show hamburger */ .mobile-nav-toggle { display: flex; } /* Hide desktop theme controls */ .desktop-theme-switch { display: none; } /* Default: collapsed search icon, dropdown fixed under header when expanded */ .search-toggle { display: flex; } .header-search-block .search-form { display: none; position: fixed; top: 60px; left: 1rem; right: 1rem; width: auto; max-width: none; z-index: 100; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .header-search-block[data-search-expanded="true"] .search-form { display: block; animation: searchDropDown 0.3s ease forwards; } .header-search-block[data-search-expanded="true"] .search-toggle { display: none; } } @keyframes searchExpand { from { opacity: 0; transform: translateY(-50%) scaleX(0.8); transform-origin: right center; } to { opacity: 1; transform: translateY(-50%) scaleX(1); } } @keyframes searchDropDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* * OLD PRIORITY HIDING SYSTEM - REMOVED * Replaced by Smart Nav (js/smart-nav.js) * The old system had 8 breakpoints to hide items one by one. * Now we just detect if nav fits and collapse to hamburger if not. */ /* Mega panel adjustments - keep these */ @media (max-width: 1100px) { .mega-panel-container { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--spacing-lg); } } @media (max-width: 900px) { .mega-panel-container { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-md); } } @media (max-width: 768px) { .header-container { height: auto; padding: var(--spacing-sm) var(--spacing-md); display: grid; /* Same three-column layout: Search (auto), Logo (flexible center), Actions (auto) */ grid-template-columns: auto 1fr auto; grid-template-areas: "search logo actions"; align-items: center; gap: var(--spacing-sm); } .header-search-block { grid-area: search; min-width: 0; max-width: none; width: 100%; justify-self: stretch; } .header-logo-block { grid-area: logo; justify-self: center; justify-content: center; } .header-actions { grid-area: actions; justify-self: end; margin-left: 0; } .logo-full { max-height: 36px; } /* Search width now controlled by .header-search-block */ /* Mobile search: when expanded, hide logo and take its space */ .header-container:has(.header-search-block[data-search-expanded="true"]) { grid-template-columns: 1fr auto; /* Remove logo column */ grid-template-areas: "search actions"; } .header-container:has(.header-search-block[data-search-expanded="true"]) .header-logo-block { display: none !important; } .header-search-block[data-search-expanded="true"] { grid-area: search; } /* When search is open, form is inline */ .header-search-block .search-form { position: static; width: 100%; max-width: none; border-radius: var(--radius-md); display: none; } .header-search-block[data-search-expanded="true"] .search-form { display: block !important; } .header-search-block[data-search-expanded="true"] .search-toggle { display: none !important; } /* Nav/hamburger rules inherited from 991px breakpoint */ .mobile-theme-switch { right: auto; top: auto; position: relative; } .mobile-nav-toggle { margin-left: 0; } .mega-panels { display: none; } .mobile-nav-link .mega-badge { opacity: 1; transform: none; } } /* ===== LANGUAGE SWITCHER ===== */ .lang-switcher { position: relative; display: inline-flex; } .lang-switcher__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; border: 1px solid var(--border-subtle, rgba(255,255,255,0.15)); border-radius: var(--radius-md, 8px); color: var(--text-primary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } .lang-switcher__trigger:hover { background: var(--surface-hover, rgba(255,255,255,0.08)); border-color: var(--border-interactive, rgba(255,255,255,0.25)); } .lang-switcher__flag { border-radius: 2px; object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .lang-switcher__code { font-weight: 600; letter-spacing: 0.5px; } .lang-switcher__arrow { opacity: 0.6; transition: transform 0.2s ease; } .lang-switcher[data-open="true"] .lang-switcher__arrow { transform: rotate(180deg); } .lang-switcher__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; padding: 6px; margin: 0; list-style: none; background: var(--surface-elevated, var(--bg-secondary)); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 12px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.95); transition: all 0.2s ease; z-index: 1100; } .lang-switcher[data-open="true"] .lang-switcher__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .lang-switcher__option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md, 8px); color: var(--text-primary); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.15s ease; } .lang-switcher__option:hover { background: var(--surface-hover, rgba(255,255,255,0.08)); } .lang-switcher__option.is-active { background: var(--accent-muted, rgba(99, 102, 241, 0.15)); } .lang-switcher__label { flex: 1; } .lang-switcher__check { color: var(--accent, #6366f1); flex-shrink: 0; } /* Mobile Language Controls */ .mobile-lang-controls { padding: var(--spacing-md); border-top: 1px solid var(--border-subtle); } .mobile-lang-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .mobile-lang-item { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--surface-secondary, rgba(255,255,255,0.05)); border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 8px); color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 600; transition: all 0.15s ease; } .mobile-lang-item:hover { background: var(--surface-hover); color: var(--text-primary); } .mobile-lang-item.is-active { background: var(--accent); border-color: var(--accent); color: white; } .mobile-lang-item img { border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } /* Hide lang switcher on very small screens in header */ @media (max-width: 991px) { .header-actions .lang-switcher { display: none; } } /* === Inlined from: ../../03-components/footer.css === */ /** * FOOTER * * Site footer - Extracted from css/style.css * Includes: footer links, legal, stats, back-to-top button */ /* ===== SITE FOOTER ===== */ .site-footer { clear: both; /* Subtle gradient from accent color (top) to background (bottom) */ background: linear-gradient( to bottom, rgba(12, 106, 147, 0.03) 0%, /* Accent color at 3% opacity (top) */ var(--bg-primary) 40% /* Fade to normal background */ ); border-top: 1px solid var(--border-secondary); padding: 20px 0; margin-top: 40px; width: 100%; } /* Dark theme gradient */ [data-theme="dark"] .site-footer { background: linear-gradient( to bottom, rgba(12, 106, 147, 0.08) 0%, /* Accent color at 8% opacity (top) - stronger in dark */ var(--dark-bg-primary) 40% /* Fade to dark background */ ); } .footer-container { max-width: var(--max-width-container); margin: 0 auto; padding: 0 16px; } .footer-content { text-align: center; } /* Footer Navigation */ .footer-nav { margin-bottom: 16px; } .footer-links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; justify-content: center; } .footer-link { color: var(--text-primary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s ease; } .footer-link:hover, .footer-link.active { color: var(--link-color); } .footer-link i { margin-right: 6px; } /* Footer Legal */ .footer-legal { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); } [data-theme="dark"] .footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-info { color: var(--text-muted); font-size: 0.85rem; margin: 0; } .legal-links { margin-top: 0; margin-bottom: var(--section-gap); /* Universal spacing to footer-info below */ gap: 16px; font-size: 0.8rem; display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; } .legal-links .footer-link { color: var(--text-muted); font-size: 0.8rem; } /* Footer Stats */ .footer-stats { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); } [data-theme="dark"] .footer-stats { border-top: 1px solid rgba(255, 255, 255, 0.1); } .stats-text { margin: 0; color: var(--text-primary); font-size: 0.9rem; } .stats-highlight { color: var(--link-color); font-weight: 700; font-size: 1.1rem; } /* ===== BACK TO TOP BUTTON ===== */ .back-to-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; background: var(--link-color); color: var(--text-on-accent); border: none; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(12, 106, 147, 0.25); z-index: 1000; display: none; } .back-to-top:hover { background: var(--link-color-hover); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(12, 106, 147, 0.35); } .back-to-top.show { display: flex; align-items: center; justify-content: center; } /* ===== DYNAMIC POPULAR CATEGORIES ===== */ .footer-popular { margin-bottom: var(--spacing-lg, 24px); padding-bottom: var(--spacing-md, 16px); border-bottom: 1px solid var(--border-secondary); } .footer-section-title { font-size: var(--font-size-sm, 13px); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 var(--spacing-sm, 12px) 0; font-weight: 500; } .footer-popular-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-xs, 8px); } .footer-popular-link { display: inline-block; padding: var(--spacing-2xs, 4px) var(--spacing-sm, 12px); background: var(--surface-tertiary, var(--surface-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-full, 20px); color: var(--text-secondary); text-decoration: none; font-size: var(--font-size-xs, 12px); transition: all 0.2s ease; white-space: nowrap; } .footer-popular-link:hover, .footer-popular-link:focus { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent, #fff); text-decoration: none; } /* "See all" link variant - outlined style */ .footer-view-all { background: transparent; border-color: var(--accent-primary); color: var(--accent-primary); font-weight: 500; } .footer-view-all:hover, .footer-view-all:focus { background: var(--accent-primary); color: var(--text-on-accent, #fff); } .footer-view-all i { margin-left: 4px; font-size: 10px; } .footer-section-title i { margin-right: 6px; } /* 2-column grid layout for blog/rankings links */ .footer-links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 24px; text-align: left; max-width: 900px; margin: 0 auto; } .footer-links-grid .footer-popular-link { display: block; background: transparent; border: none; border-radius: 0; padding: 2px 0; white-space: normal; text-overflow: ellipsis; overflow: hidden; } .footer-links-grid .footer-popular-link::before { content: "•"; margin-right: 8px; color: var(--accent-primary); } .footer-links-grid .footer-popular-link:hover, .footer-links-grid .footer-popular-link:focus { background: transparent; color: var(--accent-primary); } .footer-links-grid .footer-view-all { grid-column: 1 / -1; text-align: center; margin-top: 8px; padding: 6px 16px; background: transparent; border: 1px solid var(--accent-primary); border-radius: 20px; display: inline-block; width: auto; justify-self: center; } .footer-links-grid .footer-view-all::before { display: none; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .footer-content { text-align: center; } .footer-links { justify-content: center; gap: 16px; } .legal-links { flex-direction: column; gap: 12px; } .footer-links-grid { grid-template-columns: 1fr; text-align: center; } .footer-links-grid .footer-popular-link::before { display: none; } } /* === Inlined from: ../../03-components/sidebar.css === */ /** * SIDEBAR * * Sidebar navigation and filters - Extracted from assets/css/index-hero.css * Includes: Quick access, gender filters, mini-filters, popular tags * Updated: Uses design tokens for consistent theming */ /* ===== SIDEBAR CONTAINER ===== */ .sidebar { background: var(--surface-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: clamp(1.25rem, 2vw, 1.75rem); margin-top: 0; text-align: left; display: flex; flex-direction: column; gap: clamp(1.5rem, 2.5vw, 2.25rem); box-shadow: var(--shadow-elevated); } [data-mode="dark"] .sidebar { background: var(--surface-secondary); border-color: var(--border-subtle); box-shadow: var(--shadow-elevated-lg); } /* ===== SIDEBAR SECTIONS ===== */ .sidebar__section { display: flex; flex-direction: column; gap: 0.75rem; } .sidebar__section + .sidebar__section { padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); } /* Highlight variant - for special sections like chat roulette */ .sidebar__section--highlight { background: var(--overlay-light); border: 2px solid var(--accent-primary); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-card); } [data-mode="dark"] .sidebar__section--highlight { background: var(--overlay-medium); box-shadow: var(--shadow-card-hover); } .sidebar__heading { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); font-weight: var(--font-weight-semibold); margin: 0; } /* ===== QUICK ACCESS LINKS ===== */ .sidebar-actions, .sidebar-list { list-style: none; margin: 0; padding: 0; } .sidebar-actions { display: grid; gap: 0.5rem; } .sidebar-actions__link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-lg); background: var(--chip-bg); color: var(--text-primary); text-decoration: none; transition: all var(--transition-fast); font-weight: var(--font-weight-semibold); box-shadow: var(--inset-button); } .sidebar-actions__link i { font-size: 0.95rem; color: var(--accent-primary); } .sidebar-actions__link:hover, .sidebar-actions__link:focus { background: var(--chip-bg-hover); color: var(--accent-primary); box-shadow: var(--inset-button-hover); transform: translateX(2px); } .sidebar-actions__link:active { box-shadow: var(--inset-button-active); transform: translateX(0); } .sidebar-actions__link:hover i, .sidebar-actions__link:focus i { color: var(--accent-secondary); } /* ===== GENDER FILTERS ===== */ .sidebar-genders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .sidebar-genders__link { display: inline-flex; justify-content: center; align-items: center; padding: 0.55rem; border-radius: var(--radius-full); background: var(--chip-bg); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 0.82rem; text-decoration: none; transition: all var(--transition-fast); font-weight: var(--font-weight-semibold); box-shadow: var(--inset-button); } .sidebar-genders__link:hover, .sidebar-genders__link:focus { background: var(--chip-bg-hover); border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: var(--inset-button-hover); transform: translateY(-1px); } .sidebar-genders__link:active { box-shadow: var(--inset-button-active); transform: translateY(0); } .sidebar-genders__link.is-active { background: color-mix(in srgb, var(--accent-primary) 15%, transparent); border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: var(--glow-accent); } /* ===== MINI FILTERS (Site, Age, Language, Status) ===== */ .sidebar-mini { display: flex; flex-direction: column; gap: 1.1rem; } .sidebar-mini__group { display: flex; flex-direction: column; gap: 0.45rem; } .sidebar-mini__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: var(--font-weight-medium); } .sidebar-mini__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .sidebar-chip { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.85rem; border-radius: var(--radius-full); background: var(--chip-bg); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 0.78rem; text-decoration: none; transition: all var(--transition-fast); font-weight: var(--font-weight-semibold); cursor: pointer; } .sidebar-chip:hover, .sidebar-chip:focus { background: var(--chip-bg-hover); border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-1px); } .sidebar-chip:active { transform: translateY(0); } .sidebar-chip.is-active { background: color-mix(in srgb, var(--accent-primary) 18%, transparent); border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: var(--glow-accent); } /* ===== SIDEBAR LISTS ===== */ .sidebar-list { display: grid; gap: 0.4rem; font-size: 0.9rem; } .sidebar-list a { color: var(--link-color); text-decoration: none; transition: color var(--transition-fast); } .sidebar-list a:hover, .sidebar-list a:focus { color: var(--accent-primary); } .sidebar-list--two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 0.65rem; } .sidebar-list--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.75rem; } .sidebar-list--articles { font-size: 0.88rem; line-height: 1.4; } .sidebar-article__meta { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: 0.2rem; } .sidebar-article__title { display: block; font-weight: var(--font-weight-semibold); color: var(--text-primary); } /* ===== SIDEBAR SITES ===== */ .sidebar-sites { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .sidebar-site { display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; } .sidebar-site img { width: 100%; height: 100%; max-height: 48px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)); } /* ===== POPULAR TAGS (Sidebar) ===== */ .sidebar-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .sidebar-tag { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border-radius: var(--radius-full); background: var(--chip-bg); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 0.78rem; text-decoration: none; transition: all var(--transition-fast); font-weight: var(--font-weight-semibold); cursor: pointer; } .sidebar-tag:hover, .sidebar-tag:focus { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent); transform: translateY(-1px); } .sidebar-tag:active { transform: translateY(0); } /* ===== SIDEBAR ACTION LINK ===== */ .sidebar__action { text-align: center; margin-top: 0.5rem; } .sidebar__action-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--accent-primary, #e94560); text-decoration: none; padding: 0.4rem 0.75rem; border-radius: var(--radius-full, 20px); background: color-mix(in srgb, var(--accent-primary, #e94560) 10%, transparent); transition: all 0.2s ease; } .sidebar__action-link:hover { background: color-mix(in srgb, var(--accent-primary, #e94560) 20%, transparent); transform: translateX(2px); } /* ===== RECENTLY VIEWED ===== */ .recently-viewed-list { display: flex; flex-direction: column; gap: 0.4rem; } /* Single link element - no nested boxes */ .recently-viewed-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-lg); background: transparent; border: 1px solid var(--border-subtle); text-decoration: none; color: inherit; transition: all var(--transition-fast); } .recently-viewed-item:hover, .recently-viewed-item:focus { background: var(--accent-primary); border-color: var(--accent-primary); transform: translateX(2px); } .recently-viewed-item:hover .recently-viewed-item__name, .recently-viewed-item:focus .recently-viewed-item__name { color: var(--text-on-accent); } .recently-viewed-item:hover .recently-viewed-item__site, .recently-viewed-item:focus .recently-viewed-item__site { color: var(--text-on-accent); opacity: 0.85; } /* Avatar container */ .recently-viewed-item__avatar { position: relative; flex-shrink: 0; width: 36px; height: 36px; } .recently-viewed-item__avatar img { width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; background-color: var(--surface-secondary); } /* Placeholder icon when no thumbnail */ .recently-viewed-item__avatar i { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--overlay-medium); color: var(--text-tertiary); font-size: 0.9rem; } /* Online/Offline status indicator */ .recently-viewed-item__status { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--surface-secondary); background: var(--text-muted); } .recently-viewed-item.is-online .recently-viewed-item__status { background: var(--status-online); box-shadow: 0 0 6px var(--status-online); } /* Text content - left aligned */ .recently-viewed-item__info { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; } .recently-viewed-item__name { font-size: 0.82rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--transition-fast); } .recently-viewed-item__site { font-size: 0.7rem; color: var(--text-secondary); text-transform: capitalize; transition: color var(--transition-fast); } /* ===== USER STATS ===== */ .user-stats-list { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .user-stats-item { flex: 1; } .user-stats-link { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.5rem; background: var(--surface-alt, #1a1a2e); border: 1px solid var(--border-subtle, #2a2a4a); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; } .user-stats-link:hover { border-color: var(--accent-primary, #e94560); background: color-mix(in srgb, var(--accent-primary, #e94560) 5%, var(--surface-alt, #1a1a2e)); } .user-stats-link__icon { font-size: 1rem; color: var(--text-secondary, #888); } .user-stats-link__label { font-size: 0.7rem; color: var(--text-secondary, #888); } .user-stats-link__count { background: var(--surface, #0f0f1a); color: var(--text-primary, #eee); font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm, 4px); min-width: 1.5rem; text-align: center; } .user-stats-link__count.has-new { background: var(--accent-primary, #e94560); color: #fff; animation: pulse-count 2s infinite; } @keyframes pulse-count { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* ===== LIVE STATS ===== */ .live-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .live-stat-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem 0.5rem; background: var(--surface-alt, #1a1a2e); border-radius: var(--radius-md, 8px); border: 1px solid var(--border-subtle, #2a2a4a); text-align: center; } .live-stat-card--highlight { background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05)); border-color: rgba(76, 175, 80, 0.3); } .live-stat-card__icon { font-size: 0.85rem; color: var(--text-secondary, #888); } .live-stat-card--highlight .live-stat-card__icon { color: #4caf50; } .live-stat-card__value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #eee); } .live-stat-card--highlight .live-stat-card__value { color: #4caf50; } .live-stat-card__label { font-size: 0.65rem; color: var(--text-secondary, #888); text-transform: uppercase; letter-spacing: 0.03em; } /* ===== TRENDING TAGS ===== */ .trending-tags-list { display: flex; flex-wrap: wrap; gap: 0.4rem; } .trending-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.65rem; background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 87, 34, 0.1)); border: 1px solid rgba(255, 152, 0, 0.3); border-radius: var(--radius-full, 20px); color: #ff9800; font-size: 0.75rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .trending-tag:hover { background: linear-gradient(135deg, rgba(255, 152, 0, 0.25), rgba(255, 87, 34, 0.2)); transform: translateY(-1px); } .trending-tag__icon { font-size: 0.65rem; } /* ===== ONLINE COUNTER ===== */ .online-counter-banner { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 1rem; background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05)); border: 1px solid rgba(76, 175, 80, 0.3); border-radius: var(--radius-lg, 12px); } .online-counter-banner__pulse { width: 10px; height: 10px; background: #4caf50; border-radius: 50%; animation: online-pulse 2s infinite; } @keyframes online-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } } .online-counter-banner__count { font-size: 1.5rem; font-weight: 800; color: #4caf50; } .online-counter-banner__label { font-size: 0.85rem; color: var(--text-secondary, #888); } /* ===== BLOG LATEST ===== */ .blog-latest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .blog-latest-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem; background: var(--surface-alt, #1a1a2e); border-radius: var(--radius-md, 8px); text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; } .blog-latest-item:hover { background: var(--surface-hover, #252540); transform: translateX(2px); } .blog-latest-item__thumbnail { width: 40px; height: 40px; border-radius: var(--radius-sm, 6px); overflow: hidden; flex-shrink: 0; background: var(--surface, #0f0f1a); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary, #666); font-size: 1rem; } .blog-latest-item__thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-latest-item__title { font-size: 0.78rem; font-weight: 600; color: var(--text-primary, #eee); display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===== LATEST READS (Featured) ===== */ .latest-reads-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .latest-reads-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem; background: var(--surface-alt, #1a1a2e); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; } .latest-reads-item:hover { background: var(--surface-hover, #252540); transform: translateX(2px); } .latest-reads-item__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm, 6px); background: linear-gradient(135deg, var(--accent-primary, #e94560), var(--accent-secondary, #6366f1)); color: #fff; font-size: 0.85rem; flex-shrink: 0; } .latest-reads-item__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .latest-reads-item__meta { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-primary, #e94560); font-weight: 600; } .latest-reads-item__title { font-size: 0.78rem; font-weight: 600; color: var(--text-primary, #eee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== QUICK ACCESS (Redesigned) ===== */ .quick-access-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .quick-access-card { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.6rem 0.4rem; background: var(--surface-alt, #1a1a2e); border: 1px solid var(--border-subtle, #2a2a4a); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; } .quick-access-card:hover { border-color: var(--accent-primary, #e94560); background: color-mix(in srgb, var(--accent-primary, #e94560) 8%, var(--surface-alt, #1a1a2e)); transform: translateY(-2px); } .quick-access-card__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm, 6px); font-size: 0.9rem; } .quick-access-card__icon--purple { background: rgba(99, 102, 241, 0.15); color: #6366f1; } .quick-access-card__icon--green { background: rgba(16, 185, 129, 0.15); color: #10b981; } .quick-access-card__icon--orange { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .quick-access-card__icon--pink { background: rgba(236, 72, 153, 0.15); color: #ec4899; } .quick-access-card__label { font-size: 0.7rem; font-weight: 600; color: var(--text-primary, #eee); text-align: center; } /* ===== TIER GENDER FILTER (Freemium/Premium) ===== */ .tier-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: var(--radius-full, 20px); margin-right: 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; } .tier-badge--freemium { background: color-mix(in srgb, var(--accent-primary) 15%, transparent); color: var(--accent-primary); } .tier-badge--premium { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 180, 0, 0.1)); color: #d4a500; border: 1px solid rgba(255, 215, 0, 0.3); } .tier-gender-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .tier-gender-btn { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.75rem 0.5rem; background: var(--surface-secondary, var(--bg-secondary)); border: 2px solid var(--border-secondary, rgba(128,128,128,0.15)); border-radius: var(--radius-md, 8px); text-decoration: none; color: inherit; transition: all 0.2s ease; } .tier-gender-btn:hover { background: var(--bg-hover, var(--surface-primary)); border-color: var(--accent-primary); transform: translateY(-2px); } .tier-gender-btn.is-active { background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-secondary, var(--bg-secondary))); border-color: var(--accent-primary); } .tier-gender-btn__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full, 50%); background: color-mix(in srgb, var(--accent-primary) 10%, transparent); color: var(--accent-primary); font-size: 1rem; transition: all 0.2s ease; } .tier-gender-btn:hover .tier-gender-btn__icon, .tier-gender-btn.is-active .tier-gender-btn__icon { background: var(--accent-primary); color: var(--text-on-accent); } .tier-gender-btn__label { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); } /* Premium tier special styling */ .sidebar__section--tier-gender.tier--premium .tier-gender-btn.is-active { background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 180, 0, 0.05)); border-color: gold; } .sidebar__section--tier-gender.tier--premium .tier-gender-btn__icon { background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 180, 0, 0.1)); color: #d4a500; } .sidebar__section--tier-gender.tier--premium .tier-gender-btn:hover .tier-gender-btn__icon, .sidebar__section--tier-gender.tier--premium .tier-gender-btn.is-active .tier-gender-btn__icon { background: linear-gradient(135deg, gold, #ffb700); color: #1a1a1a; } /* ===== MINI CAM BATTLE ===== */ .mini-battle-icon { margin-right: 0.3rem; } .mini-cam-battle { background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-secondary, rgba(128,128,128,0.15)); border-radius: var(--radius-lg, 12px); padding: 1rem; min-height: 200px; } .mini-cam-battle__loading, .mini-cam-battle__error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem 1rem; color: var(--text-secondary); text-align: center; } .mini-cam-battle__spinner { width: 32px; height: 32px; border: 3px solid var(--border-secondary, rgba(128,128,128,0.2)); border-top-color: var(--accent-primary); border-radius: 50%; animation: mini-battle-spin 0.8s linear infinite; } @keyframes mini-battle-spin { to { transform: rotate(360deg); } } .mini-cam-battle__round { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .mini-cam-battle__contestants { display: flex; align-items: center; gap: 0.5rem; } .mini-cam-battle__card { flex: 1; background: var(--surface-primary, var(--bg-primary)); border: 2px solid var(--border-secondary, rgba(128,128,128,0.15)); border-radius: var(--radius-md, 8px); padding: 0.5rem; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .mini-cam-battle__card:hover, .mini-cam-battle__card:focus { border-color: var(--accent-primary); transform: scale(1.02); } .mini-cam-battle__thumb { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm, 4px); background: var(--surface-secondary, var(--bg-secondary)); } .mini-cam-battle__name { font-size: 0.7rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .mini-cam-battle__pick { font-size: 0.65rem; font-weight: 700; color: var(--accent-primary); text-transform: uppercase; opacity: 0; transition: opacity 0.2s; } .mini-cam-battle__card:hover .mini-cam-battle__pick { opacity: 1; } .mini-cam-battle__vs { font-size: 0.8rem; font-weight: 900; color: var(--accent-primary); text-shadow: 0 0 10px var(--accent-primary); flex-shrink: 0; } .mini-cam-battle__winner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; animation: mini-battle-winner-pop 0.5s ease; } @keyframes mini-battle-winner-pop { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .mini-cam-battle__trophy { font-size: 2rem; animation: mini-battle-trophy 0.6s ease infinite alternate; } @keyframes mini-battle-trophy { from { transform: rotate(-5deg) scale(1); } to { transform: rotate(5deg) scale(1.1); } } .mini-cam-battle__winner-thumb { width: 80px; height: 100px; object-fit: cover; border-radius: var(--radius-md, 8px); border: 3px solid var(--accent-primary); box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-primary) 40%, transparent); } .mini-cam-battle__winner-name { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin: 0; } .mini-cam-battle__cta { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent-primary); color: var(--text-on-accent); font-size: 0.75rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } .mini-cam-battle__cta:hover { transform: scale(1.05); background: var(--accent-primary-hover); box-shadow: var(--shadow-lg); } .mini-cam-battle__replay, .mini-cam-battle__retry { background: transparent; border: 1px solid var(--text-secondary); color: var(--text-secondary); font-size: 0.7rem; padding: 0.35rem 0.75rem; border-radius: 15px; cursor: pointer; transition: all 0.2s; } .mini-cam-battle__replay:hover, .mini-cam-battle__retry:hover { border-color: var(--text-primary); color: var(--text-primary); } .mini-cam-battle__card.is-picked { border-color: #4caf50; animation: mini-battle-pick 0.3s ease; } .mini-cam-battle__card.is-eliminated { opacity: 0.3; transform: scale(0.9); pointer-events: none; } @keyframes mini-battle-pick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* ===== USER STATS (Alternate row style) ===== */ .user-stats-item { display: flex; align-items: center; gap: var(--spacing-sm, 10px); padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px); background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12)); border-radius: var(--radius-md, 6px); text-decoration: none; color: inherit; transition: all var(--transition-fast, 150ms ease); } .user-stats-item:hover { background: var(--chip-bg-hover, var(--bg-hover)); border-color: var(--border-default, rgba(0, 0, 0, 0.18)); } .user-stats-item__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full, 50%); font-size: 12px; flex-shrink: 0; } .user-stats-item--favorites .user-stats-item__icon { background: rgba(238, 90, 90, 0.12); color: #ee5a5a; } .user-stats-item--notifications .user-stats-item__icon { background: rgba(245, 158, 11, 0.12); color: #f59e0b; } .user-stats-item__label { flex: 1; font-size: var(--font-size-sm, 14px); font-weight: var(--font-weight-medium, 500); color: var(--text-primary); } .user-stats-item__count { font-size: var(--font-size-sm, 14px); font-weight: var(--font-weight-semibold, 600); color: var(--text-secondary); background: var(--overlay-light, rgba(0, 0, 0, 0.05)); padding: 2px 8px; border-radius: var(--radius-sm, 4px); min-width: 28px; text-align: center; } .user-stats-item--favorites:hover .user-stats-item__icon { background: #ee5a5a; color: #fff; } .user-stats-item--notifications:hover .user-stats-item__icon { background: #f59e0b; color: #fff; } /* ===== SOCIAL LINKS ===== */ .social-links-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md, 8px); background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-subtle); color: var(--text-secondary); text-decoration: none; transition: all 0.2s ease; } .social-link:hover { transform: translateY(-2px); } .social-link--twitter:hover { background: #1da1f2; color: #fff; border-color: #1da1f2; } .social-link--reddit:hover { background: #ff4500; color: #fff; border-color: #ff4500; } .social-link--instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; border-color: transparent; } .social-link--telegram:hover { background: #0088cc; color: #fff; border-color: #0088cc; } .social-link--discord:hover { background: #5865f2; color: #fff; border-color: #5865f2; } .social-link--youtube:hover { background: #ff0000; color: #fff; border-color: #ff0000; } .social-link--tiktok:hover { background: #010101; color: #fff; border-color: #010101; } .social-link--facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; } /* ===== CAM BATTLE PODIUM ===== */ .podium-list { display: flex; flex-direction: column; gap: 0.5rem; } .podium-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem; background: var(--surface-secondary, var(--bg-secondary)); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; } .podium-item:hover { background: var(--chip-bg-hover); transform: translateX(2px); } .podium-item__rank { font-size: 1.25rem; flex-shrink: 0; } .podium-item__thumb { width: 40px; height: 40px; border-radius: var(--radius-md, 8px); object-fit: cover; flex-shrink: 0; } .podium-item__info { flex: 1; min-width: 0; } .podium-item__name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .podium-item__wins { font-size: 0.7rem; color: var(--text-secondary); } /* ===== CHAT ROULETTE WHEEL ===== */ .sidebar-wheel-wrapper { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .sidebar-wheel-wrapper canvas { max-width: 180px; max-height: 180px; cursor: pointer; transition: transform 0.2s ease; } .sidebar-wheel-wrapper canvas:hover { transform: scale(1.02); } .sidebar-wheel-hint { font-size: 0.75rem; color: var(--text-tertiary); text-align: center; } /* ===== QUICK FILTER ===== */ .quick-filter-section { display: flex; flex-direction: column; gap: 0.75rem; } .quick-filter-row { display: flex; flex-wrap: wrap; gap: 0.35rem; } .quick-filter-chip { display: inline-flex; align-items: center; padding: 0.35rem 0.7rem; background: var(--chip-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-full, 20px); font-size: 0.75rem; font-weight: 600; color: var(--text-primary); text-decoration: none; transition: all 0.15s ease; } .quick-filter-chip:hover { background: var(--chip-bg-hover); border-color: var(--accent-primary); color: var(--accent-primary); } .quick-filter-chip.is-active { background: color-mix(in srgb, var(--accent-primary) 15%, transparent); border-color: var(--accent-primary); color: var(--accent-primary); } /* ===== MODEL RATING ===== */ .sidebar-rating-widget { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.75rem; background: var(--surface-secondary, var(--bg-secondary)); border-radius: var(--radius-lg, 12px); text-align: center; } .sidebar-rating-widget__label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .sidebar-rating-widget .stars { margin: 0 auto; } /* ===== RESPONSIVE ===== */ @media (min-width: 1024px) { .sidebar { position: sticky; top: calc(70px + 16px); } } /* ===== MODEL PAGE OVERRIDES ===== * On single model pages (`body.model-page`), disable sticky behavior * to prevent the sidebar from visually overlapping the model navbar * and hero CTA row near the desktop breakpoint. */ @media (min-width: 1024px) { body.model-page .sidebar { position: static; top: auto; } } /* ===== MOBILE SIDEBAR: Hidden + FAB Button ===== */ /* Below 1024px: Hide sidebar, replaced by mobile-bottom-sheet.css */ @media (max-width: 1023px) { /* Hide the desktop sidebar - JS clones it for bottom sheet */ .sidebar-desktop, .content-layout > .sidebar:not(.is-open) { display: none !important; } } /* ===== FAB (Floating Action Button) ===== */ /* Works with mobile-bottom-sheet.js */ .fab-filters { display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 900; padding: 14px 28px; border-radius: var(--radius-full); background: var(--accent-primary); color: var(--text-on-accent); font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; border: none; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-base); opacity: 0; pointer-events: none; } .fab-filters.is-visible { opacity: 1; pointer-events: auto; } .fab-filters:hover { transform: translateX(-50%) translateY(-2px); background: var(--accent-primary-hover); box-shadow: var(--shadow-xl); } .fab-filters:active { transform: translateX(-50%) translateY(0); } .fab-filters i { margin-right: var(--spacing-xs); } /* Show FAB only on mobile/tablet */ @media (max-width: 1023px) { .fab-filters { display: flex; align-items: center; justify-content: center; } } /* ===== BOTTOM SHEET OVERLAY ===== */ .bottom-sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: var(--z-index-modal-backdrop, 1000); opacity: 0; visibility: hidden; transition: opacity var(--transition-slow), visibility var(--transition-slow); backdrop-filter: blur(4px); } .bottom-sheet-overlay.is-active { opacity: 1; visibility: visible; } /* ===== BOTTOM SHEET CONTAINER ===== */ .bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-index-modal, 1001); background: var(--bg-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); display: none; flex-direction: column; box-shadow: var(--shadow-2xl, 0 -4px 24px rgba(0, 0, 0, 0.25)); } .bottom-sheet.is-active { transform: translateY(0); } @media (max-width: 1023px) { .bottom-sheet { display: flex; } } /* ===== BOTTOM SHEET HEADER ===== */ .bottom-sheet__handle { width: 48px; height: 4px; background: var(--border-default); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; } .bottom-sheet__header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-default); flex-shrink: 0; } .bottom-sheet__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0; } .bottom-sheet__close { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--surface-secondary); border: none; color: var(--text-secondary); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); } .bottom-sheet__close:hover { background: var(--chip-bg-hover); color: var(--text-primary); } /* ===== BOTTOM SHEET CONTENT ===== */ .bottom-sheet__content { flex: 1; overflow-y: auto; padding: var(--spacing-md); -webkit-overflow-scrolling: touch; } .bottom-sheet__content .sidebar { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; } /* ===== BOTTOM SHEET FOOTER ===== */ .bottom-sheet__footer { display: flex; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--border-default); flex-shrink: 0; } .bottom-sheet__btn { flex: 1; padding: 14px 20px; border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .bottom-sheet__btn--secondary { background: var(--surface-secondary); border: 1px solid var(--border-default); color: var(--text-secondary); } .bottom-sheet__btn--secondary:hover { background: var(--chip-bg-hover); color: var(--text-primary); } .bottom-sheet__btn--primary { background: var(--accent-primary); border: none; color: var(--text-on-accent); } .bottom-sheet__btn--primary:hover { background: var(--accent-primary-hover); } /* ===== SAFE AREA INSETS (iPhone X+) ===== */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .fab-filters { bottom: calc(24px + env(safe-area-inset-bottom)); } .bottom-sheet__footer { padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom)); } } /* === Inlined from: ../../03-components/cards.css === */ /** * MODEL CARDS * * Model card styles - Extracted from assets/css/index-hero.css * Includes: .glam, .card-wrapper, image container, model info */ /* ===== TOOLTIP (Status indicator - visible only on hover) ===== */ .tooltip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.85); color: #FFFFFF; padding: 0.4rem 0.8rem; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; font-family: var(--font-primary); letter-spacing: 0.03em; white-space: nowrap; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; z-index: 100; } /* Show tooltip on parent hover */ .item:hover .tooltip, .glam:hover .tooltip { opacity: 1; visibility: visible; } [data-theme="dark"] .tooltip { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); color: rgba(242, 243, 248, 0.95); } /* ===== MODEL CARD OVERRIDES (Index Page) ===== */ body.index-page .item { padding: 0; border: none; background: none; margin: 0; width: 100%; height: 100%; } body.index-page .item:last-child { border-bottom: none; } .index-page .glam { position: relative; background: transparent; border: none; padding: 0; box-shadow: none; height: 100%; display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: visible; /* Changed from hidden - allow tooltip to overflow */ } /* Universal image-container for all pages */ .index-page .glam .image-container, .results-list .glam .image-container { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-md) 6px 0 0; border: 1px solid rgba(0, 0, 0, 0.18); border-bottom: none; overflow: hidden; /* Keep hidden for image clipping */ flex-shrink: 0; } [data-theme="dark"] .index-page .glam .image-container, [data-theme="dark"] .results-list .glam .image-container { border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: none; } .index-page .glam .image-container img, .results-list .glam .image-container img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Universal features (status badge) for all pages */ .index-page .glam .features, .results-list .glam .features { position: absolute; top: 6px; left: 6px; } /* Status Badge */ .index-page .glam .features i.fa-circle, .results-list .glam .features i.fa-circle { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); border: 1px solid #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); } .index-page .glam .features i.fa-circle::before, .results-list .glam .features i.fa-circle::before { content: none; display: none; } /* Card Wrapper (Model Info Box) */ .index-page .glam .card-wrapper { margin-top: -2px; padding: 0.55rem 0.85rem 0.28rem; /* Reduced bottom padding by ~50% */ border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 0 0 6px 6px; background: var(--surface-secondary); border-top: none; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; min-height: 65px; } [data-theme="dark"] .index-page .glam .card-wrapper { border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.07); border-top: none; } /* Model Info Lines */ .index-page .model-info-line--primary, .results-list .model-info-line--primary { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; line-height: 1.2; } .index-page .model-info-line--primary .name a { font-size: 0.98rem; font-weight: 600; color: var(--text-primary); } .index-page .model-info-line--primary .model-age { font-size: 0.82rem; color: var(--text-secondary); text-decoration: none; } [data-theme="dark"] .index-page .model-info-line--primary .model-age { color: rgba(242, 243, 248, 0.75); } .index-page .model-info-line--primary .model-age:hover, .index-page .model-info-line--primary .model-age:focus { color: var(--index-accent); } /* Model Info Secondary Line */ .index-page .glam .short-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; row-gap: 0.45rem; padding: 0; color: inherit; } body.index-page .short-info p { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } body.index-page .short-info p.name { padding-right: 0; } .index-page .glam .short-info .age { text-align: right; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } [data-theme="dark"] .index-page .glam .short-info .age { color: rgba(242, 243, 248, 0.75); } .index-page .glam .short-info a { color: var(--index-accent); text-decoration: none; font-weight: 600; } .index-page .glam .short-info a:hover, .index-page .glam .short-info a:focus { color: var(--index-accent-strong); } /* Country & Tags */ .index-page .glam .short-info .country, .index-page .glam .short-info .tags { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: var(--text-secondary); } [data-theme="dark"] .index-page .glam .short-info .country, [data-theme="dark"] .index-page .glam .short-info .tags { color: rgba(242, 243, 248, 0.75); } .index-page .glam .short-info .country { grid-column: 1 / 2; justify-self: flex-start; } .index-page .glam .short-info .tags { grid-column: 2 / 3; justify-content: flex-end; flex-wrap: wrap; gap: 0.3rem 0.5rem; } .index-page .model-country__link { color: var(--text-secondary); text-decoration: none; cursor: pointer; } [data-theme="dark"] .index-page .model-country__link { color: rgba(242, 243, 248, 0.75); } .index-page .model-country__link:hover, .index-page .model-country__link:focus { color: var(--index-accent); text-decoration: underline; } .index-page .model-country img { width: 18px; height: 12px; border-radius: var(--radius-sm); object-fit: cover; } /* Hide unused elements */ .index-page .glam .favorite, .index-page .glam .email, .index-page .glam .viewers, .index-page .glam .info, .index-page .glam .likes, .index-page .glam .rating { display: none !important; } /* ===== RESULTS LIST ===== */ .results-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Uniform small gaps - equal on all sides */ column-gap: var(--card-gap, clamp(0.2rem, 0.5vw, 0.35rem)); row-gap: var(--card-gap, clamp(0.2rem, 0.5vw, 0.35rem)); min-width: 0; /* Prevent overflow in flex/grid containers */ } .results-list .item { padding: 0; background: transparent; border: none; box-shadow: none; } .results-list .glam { position: relative; display: flex; flex-direction: column; background: transparent; border: none; box-shadow: none; border-radius: var(--radius-md); overflow: visible; /* Changed from hidden - allow tooltip to overflow */ --model-card-info-h: 78px; } /* Duplicates removed - now using universal selectors above */ .results-list .card-wrapper { background: var(--surface-secondary); border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 0 0 6px 6px; border-top: none; margin-top: -2px; padding: 0.4rem 0.85rem 0.2rem; /* Reduced bottom padding by 50% */ display: flex; flex-direction: column; gap: 0.05rem; min-height: var(--model-card-info-h, 78px); } [data-theme="dark"] .results-list .card-wrapper { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-top: none; } /* Grid density optimizations for 4-per-row */ /* === DEFAULT (4 per row) - REPRODUCING 6-PER-ROW RATIO === */ [data-grid-density="default"] .card-wrapper { padding-bottom: 0.04rem !important; /* Small bottom space like 6-per-row - not zero */ padding-top: 0.15rem !important; /* Minimal top padding */ gap: 0.04rem !important; /* Similar gap to 6-per-row */ padding-left: 0.5rem !important; padding-right: 0.5rem !important; min-height: auto !important; justify-content: flex-start !important; } [data-grid-density="default"] .results-list .card-wrapper { padding-bottom: 0.04rem !important; /* Small bottom space like 6-per-row - not zero */ padding-top: 0.15rem !important; /* Minimal top padding */ gap: 0.04rem !important; /* Similar gap to 6-per-row */ padding-left: 0.5rem !important; padding-right: 0.5rem !important; min-height: auto !important; justify-content: flex-start !important; } [data-grid-density="default"] .index-page .card-wrapper { padding-bottom: 0.06rem !important; /* Small bottom space like 6-per-row index */ padding-top: 0.2rem !important; /* Slightly more top padding for index page */ gap: 0.1rem !important; /* Similar to 6-per-row index gap */ padding-left: 0.5rem !important; padding-right: 0.5rem !important; min-height: auto !important; justify-content: flex-start !important; } /* Reset margins for consistent spacing */ [data-grid-density="default"] .card-wrapper * { margin: 0px !important; } /* Optimized spacing for secondary line */ [data-grid-density="default"] .model-info-line--secondary { margin-bottom: 0px !important; /* Keep zero bottom */ margin-top: 0.04rem !important; padding-top: 3px !important; padding-bottom: 3px !important; } [data-grid-density="default"] .model-info-line--primary { margin-bottom: 0px !important; /* ZERO bottom margin */ margin-top: 2px !important; padding-top: 1px !important; padding-bottom: 1px !important; } [data-grid-density="default"] .results-list .model-info-line--primary .name a { font-size: clamp(0.72rem, 1.0vw, 0.78rem); } [data-grid-density="default"] .results-list .model-info-line--primary .model-age { font-size: 0.72rem; } [data-grid-density="default"] .results-list .model-info-line--secondary { font-size: 0.70rem; } [data-grid-density="default"] .index-page .model-info-line--primary .name a { font-size: 0.80rem; } /* === COMFORTABLE (6 per row) - Dramatically smaller text, maximum space utilization, ultra-minimal bottom space === */ [data-grid-density="comfortable"] .results-list .card-wrapper { padding-bottom: 0.05rem; /* Ultra-minimal space under second line */ padding-left: 0.45rem; /* Dramatically reduced from 0.85rem - text fills maximum space */ padding-right: 0.45rem; /* Dramatically reduced from 0.85rem - text fills maximum space */ gap: 0.03rem; /* Ultra-minimal gap for maximum compactness */ min-height: 50px; /* Further reduced from 78px */ } [data-grid-density="comfortable"] .index-page .glam .card-wrapper { padding-bottom: 0.08rem; /* Ultra-minimal space under second line */ padding-left: 0.45rem; /* Dramatically reduced from 0.85rem - text fills maximum space */ padding-right: 0.45rem; /* Dramatically reduced from 0.85rem - text fills maximum space */ gap: 0.12rem; /* Much reduced from 0.25rem */ min-height: 45px; /* Further reduced from 65px */ justify-content: flex-start; /* Changed from center */ padding-top: 0.35rem; /* Reduced compensating padding */ } [data-grid-density="comfortable"] .results-list .model-info-line--primary .name a { font-size: clamp(0.64rem, 0.9vw, 0.70rem); /* Even smaller for more airy feel */ } [data-grid-density="comfortable"] .results-list .model-info-line--primary .model-age { font-size: 0.64rem; /* Even smaller for more airy feel */ } [data-grid-density="comfortable"] .results-list .model-info-line--secondary { font-size: 0.62rem; /* Even smaller for more airy feel */ } [data-grid-density="comfortable"] .index-page .model-info-line--primary .name a { font-size: 0.72rem; /* Even smaller for more airy feel */ } /* Force single line for primary info - prevent long names from breaking layout */ .results-list .model-info-line--primary { flex-wrap: nowrap; overflow: hidden; } .results-list .model-info-line--primary .name { margin: 0; line-height: 1; min-width: 0; flex: 0 1 auto; max-width: 70%; /* Hard limit to reserve space for age */ overflow: hidden; } .results-list .model-info-line--primary .name a { display: block; font-size: clamp(0.85rem, 1.4vw, 0.95rem); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Ensure age/gender stays visible */ .results-list .model-info-line--primary .model-age, .results-list .model-info-line--primary .model-gender { flex-shrink: 0; white-space: nowrap; } .results-list .model-info-line--primary .model-age { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } [data-theme="dark"] .results-list .model-info-line--primary .model-age { color: rgba(242, 243, 248, 0.8); } .results-list .model-info-line--secondary { align-items: center; min-height: 1rem; font-size: 0.86rem; color: var(--text-secondary); } [data-theme="dark"] .results-list .model-info-line--secondary { color: rgba(242, 243, 248, 0.72); } .results-list .model-country { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; } .results-list .model-country img { width: 20px; height: 14px; } .results-list .model-tags { display: inline-flex; justify-content: flex-end; font-size: 0.84rem; color: var(--text-secondary); } [data-theme="dark"] .results-list .model-tags { color: rgba(242, 243, 248, 0.65); } /* Site Badge (logo on model image) */ .result-site-badge { position: absolute; left: 6px; bottom: calc(var(--model-card-info-h, 78px) + 6px); /* Moved down: -2px → +6px */ right: auto; top: auto; display: flex; align-items: center; justify-content: center; width: 35%; height: auto; border-radius: 0; background: transparent; border: none; padding: 0; box-shadow: none; z-index: 3; } .result-site-badge img { width: 100%; height: auto; object-fit: contain; } /* ===== RESPONSIVE ===== */ @media (max-width: 991px) { .results-list .glam { flex-direction: column; border-radius: var(--radius-xl); overflow: visible; /* Changed from hidden - allow tooltip to overflow */ } .results-list .glam .image-container { width: 100%; max-width: 100%; border-radius: var(--radius-xl) 16px 0 0; border: 1px solid rgba(0, 0, 0, 0.18); border-bottom: none; overflow: hidden; /* Keep hidden for image clipping */ } [data-theme="dark"] .results-list .glam .image-container { border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: none; } .results-list .card-wrapper { border-radius: 0 0 16px 16px; } /* Ensure info lines stretch full width on mobile for proper space-between */ .results-list .model-info-line--primary, .results-list .model-info-line--secondary { width: 100%; justify-content: space-between; } .results-list .model-tags { justify-content: flex-start; } } @media (max-width: 767px) { .results-list .glam { flex-direction: column; border-radius: var(--radius-xl); overflow: visible; /* Changed from hidden - allow tooltip to overflow */ } .results-list .glam .image-container { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-xl) 16px 0 0; border: 1px solid rgba(0, 0, 0, 0.18); border-bottom: none; overflow: hidden; /* Keep hidden for image clipping */ } [data-theme="dark"] .results-list .glam .image-container { border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: none; } } /* ===== MODEL TOOLS (Favorite & Notification) - LOGGED-IN ONLY ===== */ .model-tools { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; margin-left: auto; } .model-tool { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1rem; text-decoration: none; transition: color 0.2s ease; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); cursor: pointer; } .model-tool:hover { color: var(--index-accent); text-shadow: none; } .model-tool.is-active { color: var(--index-accent); cursor: default; text-shadow: none; } [data-theme="dark"] .model-tool { color: rgba(242, 243, 248, 0.85); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65); } [data-theme="dark"] .model-tool:hover { color: var(--index-accent); } [data-theme="dark"] .model-tool.is-active { color: var(--index-accent); } /* Suppress hover tooltips on listing cards (filter/index pages) */ .results-list .glam .features .tooltip, .results-list .glam .model-tools .tooltip { display: none !important; } /* Ensure secondary line uses flexbox for proper alignment */ .model-info-line--secondary { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } /* ===== OFFLINE MODEL STYLING ===== */ /* Blur agresiv pentru modele offline */ .item--offline .image-container { position: relative; } .item--offline .image-container img { filter: blur(18px) grayscale(30%); transform: scale(1.15); /* Previne marginile albe de la blur */ } /* Overlay "OFFLINE" pentru modele offline */ .item--offline .image-container::after { content: 'OFFLINE'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.95); font-size: clamp(0.9rem, 2vw, 1.3rem); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 10; } /* Reduce opacitatea generală pe hover revert */ .item--offline .glam { opacity: 0.8; transition: opacity 0.3s ease; } .item--offline .glam:hover { opacity: 1; } /* Status badge color override pentru offline */ .item--offline .features i.fa-circle { background: var(--status-offline, #8b8f98) !important; } /* Compact card (tag-model-card) offline styling */ .tag-model-card.item--offline .tag-model-card__thumb { position: relative; } .tag-model-card.item--offline .tag-model-card__thumb img { filter: blur(18px) grayscale(30%); transform: scale(1.15); } .tag-model-card.item--offline .tag-model-card__thumb::after { content: 'OFFLINE'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.95); font-size: clamp(0.8rem, 1.5vw, 1.1rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 10; } .tag-model-card.item--offline { opacity: 0.8; transition: opacity 0.3s ease; } .tag-model-card.item--offline:hover { opacity: 1; } /* ===== SITE ICON SPRITE SYSTEM ===== */ /* * Sprite: /img/site-icon.webp * Actual dimensions: 16px wide × 240px tall * 15 icons, each 16×16px (240/15 = 16) * Order (top to bottom): * 0: skyprivate, 1: bongacams, 2: streamate, 3: flirt4free, 4: camsoda, * 5: stripchat, 6: imlive, 7: chaturbate, 8: livejasmin, 9: xlovecam, * 10: visit-x, 11: amateur_tv, 12: cam4, 13: xcams, 14: cherry_tv(defunct) */ .site-icon-sprite { display: inline-block; width: 16px; height: 16px; background-image: url('/img/site-icon.webp'); background-repeat: no-repeat; background-size: 16px 240px; flex-shrink: 0; border-radius: 2px; } /* Hide sprite on small screens */ @media (max-width: 991px) { .site-icon-sprite { display: none !important; } } /* Sprite positions - icons are 16px tall, stacked vertically */ .site-icon-sprite--skyprivate { background-position: 0 0; } /* index 0 */ .site-icon-sprite--bongacams { background-position: 0 -16px; } /* index 1 */ .site-icon-sprite--streamate { background-position: 0 -32px; } /* index 2 */ .site-icon-sprite--flirt4free { background-position: 0 -48px; } /* index 3 */ .site-icon-sprite--camsoda { background-position: 0 -64px; } /* index 4 */ .site-icon-sprite--stripchat { background-position: 0 -80px; } /* index 5 */ .site-icon-sprite--imlive { background-position: 0 -96px; } /* index 6 */ .site-icon-sprite--chaturbate { background-position: 0 -112px; } /* index 7 */ .site-icon-sprite--livejasmin { background-position: 0 -128px; } /* index 8 */ .site-icon-sprite--xlovecam { background-position: 0 -144px; } /* index 9 */ .site-icon-sprite--visit-x { background-position: 0 -160px; } /* index 10 */ .site-icon-sprite--amateur_tv { background-position: 0 -176px; } /* index 11 */ .site-icon-sprite--cam4 { background-position: 0 -192px; } /* index 12 */ .site-icon-sprite--xcams { background-position: 0 -208px; } /* index 13 */ .site-icon-sprite--cherry_tv { background-position: 0 -224px; } /* index 14 - defunct */ /* Smaller variant (14px) for tighter spaces */ .site-icon-sprite--sm { width: 14px; height: 14px; background-size: 14px 210px; /* Scale proportionally */ } .site-icon-sprite--sm.site-icon-sprite--skyprivate { background-position: 0 0; } .site-icon-sprite--sm.site-icon-sprite--bongacams { background-position: 0 -14px; } .site-icon-sprite--sm.site-icon-sprite--streamate { background-position: 0 -28px; } .site-icon-sprite--sm.site-icon-sprite--flirt4free { background-position: 0 -42px; } .site-icon-sprite--sm.site-icon-sprite--camsoda { background-position: 0 -56px; } .site-icon-sprite--sm.site-icon-sprite--stripchat { background-position: 0 -70px; } .site-icon-sprite--sm.site-icon-sprite--imlive { background-position: 0 -84px; } .site-icon-sprite--sm.site-icon-sprite--chaturbate { background-position: 0 -98px; } .site-icon-sprite--sm.site-icon-sprite--livejasmin { background-position: 0 -112px; } .site-icon-sprite--sm.site-icon-sprite--xlovecam { background-position: 0 -126px; } .site-icon-sprite--sm.site-icon-sprite--visit-x { background-position: 0 -140px; } .site-icon-sprite--sm.site-icon-sprite--amateur_tv { background-position: 0 -154px; } .site-icon-sprite--sm.site-icon-sprite--cam4 { background-position: 0 -168px; } .site-icon-sprite--sm.site-icon-sprite--xcams { background-position: 0 -182px; } .site-icon-sprite--sm.site-icon-sprite--cherry_tv { background-position: 0 -196px; } /* Sites NOT in sprite - use fallback colored box */ .site-icon-sprite:not([class*="skyprivate"]):not([class*="bongacams"]):not([class*="streamate"]):not([class*="flirt4free"]):not([class*="camsoda"]):not([class*="stripchat"]):not([class*="imlive"]):not([class*="livejasmin"]):not([class*="xlovecam"]):not([class*="visit-x"]):not([class*="amateur_tv"]):not([class*="cam4"]):not([class*="xcams"]):not([class*="chaturbate"]):not([class*="cherry_tv"]) { background-image: none; background-color: var(--accent-primary); border-radius: var(--radius-sm); } /* ===== NEW UNIFIED CARD ELEMENTS ===== */ /* Gender display (fallback for Age) */ .model-gender { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .model-gender i { font-size: 0.85rem; } /* Hide gender icon on small screens */ @media (max-width: 991px) { .model-gender i, .model-gender--secondary i { display: none !important; } } .model-gender:hover, .model-gender:focus { color: var(--index-accent); } [data-mode="dark"] .model-gender { color: rgba(242, 243, 248, 0.75); } [data-mode="dark"] .model-gender:hover, [data-mode="dark"] .model-gender:focus { color: var(--index-accent); } /* Secondary gender (on line 2) - slightly smaller */ .model-gender--secondary { font-size: 0.78rem; } /* Model location container (Country OR Site fallback) */ .model-location { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; } [data-mode="dark"] .model-location { color: rgba(242, 243, 248, 0.75); } .model-location img { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; flex-shrink: 0; } /* Hide flag images on small screens - ONLY inside model cards */ @media (max-width: 991px) { .results-list .model-location img, .results-list .model-country img, .results-list img.flag-small, .results-list img[src*="flags"], .card .model-location img, .card .model-country img, .card img.flag-small, .card img[src*="flags"] { display: none !important; } } /* Site icon (fallback when no country) */ .model-site-icon { width: 16px !important; height: 16px !important; border-radius: 3px; object-fit: contain; flex-shrink: 0; } .model-site__link { color: var(--text-secondary); text-decoration: none; font-weight: 500; } .model-site__link:hover, .model-site__link:focus { color: var(--index-accent); } [data-mode="dark"] .model-site__link { color: rgba(242, 243, 248, 0.75); } [data-mode="dark"] .model-site__link:hover, [data-mode="dark"] .model-site__link:focus { color: var(--index-accent); } /* Model meta container (right side of line 2) */ .model-meta { display: inline-flex; align-items: center; justify-content: flex-end; margin-left: auto; font-size: 0.8rem; white-space: nowrap; } /* Tag link */ .model-tag { color: var(--text-secondary); text-decoration: none; font-weight: 500; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); background: var(--chip-bg); transition: all 0.2s ease; } .model-tag:hover, .model-tag:focus { color: var(--text-on-accent); background: var(--accent-primary); } [data-mode="dark"] .model-tag { color: rgba(242, 243, 248, 0.75); background: rgba(255, 255, 255, 0.08); } [data-mode="dark"] .model-tag:hover, [data-mode="dark"] .model-tag:focus { color: var(--text-on-accent); background: var(--accent-primary); } /* Freemium/Premium tier - simple text like site name or gender */ .model-tier { color: var(--text-secondary); text-decoration: none; font-size: 0.82rem; font-weight: 500; transition: color 0.2s ease; } .model-tier:hover, .model-tier:focus { color: var(--index-accent); } [data-mode="dark"] .model-tier { color: rgba(242, 243, 248, 0.75); } [data-mode="dark"] .model-tier:hover, [data-mode="dark"] .model-tier:focus { color: var(--index-accent); } /* Ensure model-info-line--secondary has proper flex layout */ .model-info-line--secondary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.4rem; } /* ===== RESPONSIVE: HIDE ICONS ON SMALL SCREENS ===== */ /* Cards are small on tablet/mobile, hide icons to prevent crowding */ @media (max-width: 991px) { /* Hide ALL flag images */ .results-list .model-location img, .results-list .model-country img, .results-list .flag-small, .results-list img.flag-small, .results-list img[src*="flags"], .results-list .card-wrapper img[src*="flags"], .results-list .model-info-line img, .results-list .model-info-line--secondary img, .index-page .glam .model-info-line img { display: none !important; } /* Hide site sprite icon */ .results-list .site-icon-sprite, .index-page .glam .site-icon-sprite { display: none !important; } /* Hide gender icons */ .results-list .model-gender i, .results-list .model-gender--secondary i, .results-list .model-info-line i.fa, .results-list .model-info-line i.fa-solid, .results-list .model-info-line i[class*="fa-"], .index-page .glam .model-gender i, .index-page .glam i.fa-venus, .index-page .glam i.fa-mars, .index-page .glam i.fa-transgender { display: none !important; } /* Smaller text for mobile */ .results-list .model-info-line--secondary, .index-page .glam .model-info-line--secondary { font-size: 0.72rem; } .results-list .model-info-line--primary .name a, .index-page .glam .model-info-line--primary .name a { font-size: clamp(0.75rem, 2.5vw, 0.88rem); } /* Ensure card-wrapper children stretch to full width on mobile */ .results-list .card-wrapper, .index-page .glam .card-wrapper, [data-grid-density] .results-list .card-wrapper { align-items: stretch !important; } /* Ensure info lines stretch full width on mobile for proper space-between alignment */ .results-list .model-info-line--primary, .results-list .model-info-line--secondary, .index-page .glam .model-info-line--primary, .index-page .glam .model-info-line--secondary { width: 100% !important; justify-content: space-between !important; } } /* === Inlined from: ../../03-components/buttons.css === */ /** * ACTION BUTTONS * * Universal button list component for horizontal/grid layouts * Can be reused across tags, country hubs, filters, and any other page * Updated: Uses design tokens for consistent theming * * Usage: *

* Label *

* * Modifiers: * .action-buttons--vertical - Stack buttons vertically (like sidebar) * .action-buttons--grid-2 - 2 column grid * .action-buttons--grid-3 - 3 column grid * .action-buttons--grid-4 - 4 column grid */ /* ===== BASE STYLES ===== */ .action-buttons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; } .action-buttons__link { display: flex; align-items: center; height: 40px; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-lg); background: var(--chip-bg); border: 1px solid var(--border-subtle); color: var(--text-primary); text-decoration: none; font-weight: var(--font-weight-semibold); font-size: 0.95rem; transition: all var(--transition-fast); box-shadow: var(--inset-button); cursor: pointer; } .action-buttons__link:hover, .action-buttons__link:focus { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent); transform: translateY(-1px); box-shadow: var(--shadow-card-hover); } .action-buttons__link:active { transform: translateY(0); box-shadow: var(--inset-button-active); } .action-buttons__link i { font-size: 1rem; flex-shrink: 0; color: var(--accent-primary); transition: color var(--transition-fast); } .action-buttons__link:hover i, .action-buttons__link:focus i { color: var(--text-on-accent); } /* ===== MODIFIERS ===== */ /* Vertical layout (like sidebar) */ .action-buttons--vertical { flex-direction: column; flex-wrap: nowrap; } .action-buttons--vertical .action-buttons__link { width: 100%; } /* Grid layouts */ .action-buttons--grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .action-buttons--grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .action-buttons--grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } /* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .action-buttons--grid-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .action-buttons--grid-3, .action-buttons--grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .action-buttons { flex-direction: column; } .action-buttons--grid-2, .action-buttons--grid-3, .action-buttons--grid-4 { grid-template-columns: 1fr; } } /* ===== CTA BUTTONS ===== */ .btn, .btn-primary, .btn-secondary, .btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--btn-padding-y) var(--btn-padding-x); border-radius: var(--btn-radius); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); text-decoration: none; cursor: pointer; transition: all var(--transition-fast); border: none; } .btn-primary, .btn-cta { background: var(--accent-primary); color: var(--text-on-accent); box-shadow: var(--inset-button), var(--shadow-button); } .btn-primary:hover, .btn-cta:hover { background: var(--accent-primary-hover); transform: translateY(-1px); box-shadow: var(--inset-button-hover), var(--shadow-card-hover); } .btn-primary:active, .btn-cta:active { transform: translateY(0); box-shadow: var(--inset-button-active); } .btn-secondary { background: var(--chip-bg); border: 1px solid var(--border-subtle); color: var(--text-primary); box-shadow: var(--inset-button); } .btn-secondary:hover { background: var(--chip-bg-hover); border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-1px); } .btn-secondary:active { transform: translateY(0); box-shadow: var(--inset-button-active); } /* Outline variant */ .btn-outline { background: transparent; border: 2px solid var(--accent-primary); color: var(--accent-primary); } .btn-outline:hover { background: var(--accent-primary); color: var(--text-on-accent); } /* Ghost variant */ .btn-ghost { background: transparent; border: none; color: var(--text-secondary); } .btn-ghost:hover { background: var(--overlay-light); color: var(--accent-primary); } /* Size variants */ .btn-sm { padding: var(--spacing-2xs) var(--spacing-sm); font-size: var(--font-size-xs); border-radius: var(--radius-sm); } .btn-lg { padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-md); border-radius: var(--radius-lg); } /* Disabled state */ .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* === Inlined from: ../../03-components/pagination.css === */ /** * PAGINATION * * Pagination navigation - Extracted from assets/css/index-hero.css */ /* ===== PAGINATION ===== */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; padding: 0; border-bottom: none; margin-top: 0.75rem; /* Space above - shows it belongs to content above */ margin-bottom: 0.5rem; /* Smaller space below - separation from next section */ } /* Remove extra spacing from .row wrapper on filter pages */ .row > .col-12 > .pagination { margin-top: 0.5rem; /* Less top margin when inside .row (already has padding) */ } .pagination__label { display: inline-flex; align-items: center; height: 32px; margin-right: 8px; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); box-sizing: border-box; } [data-theme="dark"] .pagination__label { color: rgba(242, 243, 248, 0.75); } .pagination .pagination-separator { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 0.5rem; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; color: var(--text-secondary); font-weight: 600; font-size: 0.9rem; box-sizing: border-box; } [data-theme="dark"] .pagination .pagination-separator { color: rgba(242, 243, 248, 0.7); } .pagination ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; } .pagination ul li a, .pagination ul li span, .pagination a.page, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 0.5rem; border-radius: var(--radius-sm); background: transparent; border: 1px solid rgba(0, 0, 0, 0.12); color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; box-sizing: border-box; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pagination ul li a:hover, .pagination a.page:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.18); color: var(--text-primary); } .pagination ul li span.current, .pagination a.page.current, .pagination a.page.active, .pagination span.current { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.2); color: var(--text-primary); } /* Strict scoping to avoid external overrides */ nav.pagination, nav.pagination ul { align-items: center !important; } nav.pagination .pagination__label, nav.pagination .pagination-separator, nav.pagination a.page, nav.pagination span.current { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 32px !important; min-width: 32px !important; padding: 0 0.5rem !important; margin: 0 !important; line-height: 1 !important; vertical-align: middle !important; box-sizing: border-box !important; } /* ===== DARK THEME ===== */ [data-theme="dark"] .pagination a.page, [data-theme="dark"] .pagination span { background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(242, 243, 248, 0.85); } [data-theme="dark"] .pagination a.page:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--index-accent); color: var(--index-accent); } [data-theme="dark"] .pagination a.page.current, [data-theme="dark"] .pagination span.current { background: var(--index-accent); border-color: var(--index-accent); color: #1e2024; } /* === Inlined from: ../../03-components/modals.css === */ /** * MODALS & POPUPS * * Modal dialogs and popups - Extracted from css/style.css * Includes: AdBlock warning popup (hidden by default) */ /* ===== ADBLOCK WARNING POPUP (Hidden by default) ===== */ #boxischecked { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 99999; align-items: center; justify-content: center; /* HIDDEN BY DEFAULT - JavaScript will show when needed */ display: none; } /* When active, JavaScript will set display: flex */ #boxischecked.active { display: flex !important; } .warning-content { background: var(--bg-primary); padding: 20px; margin: 16px; max-width: 600px; text-align: justify; position: relative; color: var(--text-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); } [data-theme="dark"] .warning-content { background: var(--bg-secondary); color: var(--text-primary); } .warning-content img { margin-bottom: 10px; } /* Special handling for warning close button */ .warning-content .close-button, .warning-content .close-item { overflow: visible; box-shadow: none; background-image: none; cursor: pointer; z-index: 100000; position: relative; } /* Helper class for display flex */ .df { display: flex; } /* === Inlined from: ../../03-components/toast.css === */ /** * TOAST NOTIFICATIONS * * Beautiful toast notifications for user feedback. * Supports success, error, warning, and info variants. * * Usage: * CamToast.success('Added to favorites!'); * CamToast.error('Something went wrong'); * CamToast.info('Loading...'); * CamToast.warning('Please check your input'); */ /* ===== TOAST CONTAINER ===== */ .toast-container { position: fixed; bottom: var(--space-6, 24px); right: var(--space-6, 24px); z-index: 10000; display: flex; flex-direction: column-reverse; gap: var(--space-3, 12px); pointer-events: none; max-width: 380px; width: calc(100% - 48px); } @media (max-width: 640px) { .toast-container { bottom: var(--space-4, 16px); right: var(--space-4, 16px); left: var(--space-4, 16px); width: auto; } } /* ===== TOAST BASE ===== */ .toast { display: flex; align-items: flex-start; gap: var(--space-3, 12px); padding: var(--space-4, 16px); border-radius: var(--radius-lg, 12px); background: var(--surface-elevated, var(--bg-elevated, var(--surface-secondary))); color: var(--text-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border-default, rgba(255, 255, 255, 0.08)); pointer-events: auto; transform: translateX(120%); opacity: 0; animation: toast-slide-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; backdrop-filter: blur(12px); max-width: 100%; } .toast.toast--exiting { animation: toast-slide-out 0.25s cubic-bezier(0.06, 0.71, 0.55, 1) forwards; } @keyframes toast-slide-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } } /* ===== TOAST ICON ===== */ .toast__icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .toast__icon svg { width: 16px; height: 16px; } /* ===== TOAST CONTENT ===== */ .toast__content { flex: 1; min-width: 0; } .toast__title { font-family: var(--font-primary, sans-serif); font-size: 0.95rem; font-weight: 600; color: var(--text-primary, #f2f3f8); line-height: 1.4; margin: 0 0 2px 0; } .toast__message { font-family: var(--font-secondary, sans-serif); font-size: 0.85rem; color: var(--text-secondary, #8a8fa8); line-height: 1.4; margin: 0; } /* ===== TOAST CLOSE BUTTON ===== */ .toast__close { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--text-muted, #6b7094); border-radius: var(--radius-sm, 4px); transition: background 0.15s ease, color 0.15s ease; padding: 0; margin: -4px -4px -4px 0; } .toast__close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary, #f2f3f8); } .toast__close svg { width: 14px; height: 14px; } /* ===== TOAST VARIANTS ===== */ /* Success */ .toast--success { border-left: 3px solid var(--color-success, #00d97e); } .toast--success .toast__icon { background: rgba(0, 217, 126, 0.15); color: var(--color-success, #00d97e); } /* Error */ .toast--error { border-left: 3px solid var(--color-error, #e63757); } .toast--error .toast__icon { background: rgba(230, 55, 87, 0.15); color: var(--color-error, #e63757); } /* Warning */ .toast--warning { border-left: 3px solid var(--color-warning, #f6c343); } .toast--warning .toast__icon { background: rgba(246, 195, 67, 0.15); color: var(--color-warning, #f6c343); } /* Info */ .toast--info { border-left: 3px solid var(--accent-primary, #00d4ff); } .toast--info .toast__icon { background: rgba(0, 212, 255, 0.15); color: var(--accent-primary, #00d4ff); } /* ===== PROGRESS BAR ===== */ .toast__progress { position: absolute; bottom: 0; left: 0; height: 3px; background: currentColor; opacity: 0.3; border-radius: 0 0 0 var(--radius-lg, 12px); } .toast--success .toast__progress { background: var(--color-success, #00d97e); } .toast--error .toast__progress { background: var(--color-error, #e63757); } .toast--warning .toast__progress { background: var(--color-warning, #f6c343); } .toast--info .toast__progress { background: var(--accent-primary, #00d4ff); } /* ===== LIGHT THEME ===== */ [data-theme="light"] .toast { background: var(--surface-elevated, var(--bg-primary)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border-default, rgba(0, 0, 0, 0.06)); } [data-theme="light"] .toast__title { color: var(--text-primary); } [data-theme="light"] .toast__message { color: var(--text-secondary); } [data-theme="light"] .toast__close:hover { background: var(--overlay-light, rgba(0, 0, 0, 0.05)); } /* ===== MOBILE ADJUSTMENTS ===== */ @media (max-width: 640px) { .toast { padding: var(--space-3, 12px); } .toast__title { font-size: 0.9rem; } .toast__message { font-size: 0.8rem; } } /* ===== STACKED TOASTS ===== */ .toast-container .toast:nth-child(n+4) { opacity: 0.6; transform: scale(0.95); } .toast-container .toast:nth-child(n+5) { display: none; } /* === Inlined from: ../../03-components/skeleton.css === */ /** * SKELETON LOADING * * Shimmer animation placeholders for loading states. * Provides visual feedback while content is loading. * * Usage: *

*/ /* ===== SHIMMER ANIMATION ===== */ @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ===== BASE SKELETON STYLES ===== */ .skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); padding: var(--space-4) 0; } @media (min-width: 768px) { .skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } @media (min-width: 1200px) { .skeleton-grid { grid-template-columns: repeat(6, 1fr); } } /* ===== SKELETON CARD ===== */ .skeleton-card { background: var(--bg-secondary, #1a1a2e); border-radius: var(--radius-md, 8px); overflow: hidden; animation: skeleton-pulse 1.5s ease-in-out infinite; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* ===== SKELETON IMAGE ===== */ .skeleton-image { width: 100%; aspect-ratio: 4 / 3; background: linear-gradient( 90deg, var(--bg-tertiary, #252540) 25%, var(--bg-secondary, #2a2a4a) 50%, var(--bg-tertiary, #252540) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.8s ease-in-out infinite; } /* ===== SKELETON TEXT ===== */ .skeleton-content { padding: var(--space-3, 12px); display: flex; flex-direction: column; gap: var(--space-2, 8px); } .skeleton-text { height: 14px; border-radius: var(--radius-sm, 4px); background: linear-gradient( 90deg, var(--bg-tertiary, #252540) 25%, var(--bg-secondary, #2a2a4a) 50%, var(--bg-tertiary, #252540) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.8s ease-in-out infinite; } .skeleton-text--title { width: 75%; height: 16px; } .skeleton-text--subtitle { width: 55%; height: 12px; } .skeleton-text--meta { width: 40%; height: 10px; } /* ===== SKELETON BADGE ===== */ .skeleton-badge { display: inline-block; width: 60px; height: 20px; border-radius: var(--radius-sm, 4px); background: linear-gradient( 90deg, var(--bg-tertiary, #252540) 25%, var(--bg-secondary, #2a2a4a) 50%, var(--bg-tertiary, #252540) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.8s ease-in-out infinite; } /* ===== SKELETON AVATAR ===== */ .skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient( 90deg, var(--bg-tertiary, #252540) 25%, var(--bg-secondary, #2a2a4a) 50%, var(--bg-tertiary, #252540) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.8s ease-in-out infinite; } /* ===== RESULTS SKELETON (for filter loading) ===== */ .results-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4, 16px); padding: var(--space-4, 16px) 0; } @media (min-width: 768px) { .results-skeleton { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (min-width: 1200px) { .results-skeleton { grid-template-columns: repeat(6, 1fr); } } /* ===== LOADING OVERLAY ===== */ .skeleton-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(var(--bg-primary-rgb, 15, 15, 26), 0.8); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); } .skeleton-spinner { width: 40px; height: 40px; border: 3px solid var(--bg-tertiary, #252540); border-top-color: var(--accent-primary, #00d4ff); border-radius: 50%; animation: skeleton-spin 0.8s linear infinite; } @keyframes skeleton-spin { to { transform: rotate(360deg); } } /* ===== LIGHT THEME ADJUSTMENTS ===== */ [data-theme="light"] .skeleton-image, [data-theme="light"] .skeleton-text, [data-theme="light"] .skeleton-badge, [data-theme="light"] .skeleton-avatar { background: linear-gradient( 90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75% ); background-size: 200% 100%; } [data-theme="light"] .skeleton-card { background: #f5f5f5; } [data-theme="light"] .skeleton-overlay { background: rgba(255, 255, 255, 0.85); } [data-theme="light"] .skeleton-spinner { border-color: #e0e0e0; border-top-color: var(--accent-primary, #0066cc); } /* === Inlined from: ../../03-components/empty-state.css === */ /* ============================================ EMPTY STATE (NO RESULTS PAGE) ============================================ */ /* Main empty state container */ .empty-state { text-align: center; padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem); } /* Title (H2 - was H1 before) */ .empty-state__title { font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 700; color: var(--index-accent-strong); margin: 0 0 1rem; line-height: 1.3; } /* Criteria text */ .empty-state__criteria { font-size: clamp(0.95rem, 1.2vw, 1.05rem); color: var(--text-primary); margin: 0 auto 1rem; max-width: 820px; } /* Note text */ .empty-state__note { font-size: clamp(0.9rem, 1.1vw, 1rem); color: var(--text-secondary); margin: 0 auto 0.5rem; max-width: 820px; line-height: 1.6; } .empty-state__note--warning { font-weight: 600; color: var(--index-accent); margin-top: 0.5rem; } /* Dark theme */ [data-theme="dark"] .empty-state__title { color: rgba(242, 243, 248, 0.85); } [data-theme="dark"] .empty-state__criteria { color: rgba(242, 243, 248, 0.78); } [data-theme="dark"] .empty-state__note { color: rgba(242, 243, 248, 0.65); } [data-theme="dark"] .empty-state__note--warning { color: var(--index-accent); } /* ============================================ SUGGESTIONS (ALTERNATIVE BUTTONS) ============================================ */ .empty-state__suggestions { text-align: center; padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem); background: transparent !important; border: none !important; box-shadow: none !important; } .empty-state__suggestions-title { font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 600; color: var(--text-primary); margin: 0 0 1.5rem; text-align: center; } [data-theme="dark"] .empty-state__suggestions-title { color: rgba(242, 243, 248, 0.85); } .empty-state__suggestions-list { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; } /* Reuse sidebar-actions__link styling for buttons */ .empty-state__suggestions-list .sidebar-actions__link { /* Buttons already styled in sidebar.css */ /* Just ensure they display correctly in this context */ display: inline-flex; min-width: auto; } /* Responsive */ @media (max-width: 768px) { .empty-state__suggestions-list { flex-direction: column; align-items: stretch; } .empty-state__suggestions-list .sidebar-actions__link { width: 100%; justify-content: center; } } /* === Inlined from: ../../03-components/content-box.css === */ /** * CONTENT-BOX * * Universal content container for text, SEO content, etc. * Replaces: .index-home-seo, .text-box, .seo-text, etc. */ .content-box { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: clamp(1.5rem, 3vw, 2rem); /* margin-bottom removed - spacing handled by .content-main gap */ color: var(--text-primary); line-height: 1.7; } [data-theme="dark"] .content-box { background: var(--surface-secondary); border: 1px solid var(--border-default); } .content-box__inner { /* For nested content structure */ padding: 0; } /* Text alignment modifiers */ .content-box--justify { text-align: justify; } .content-box--center { text-align: center; } .content-box--center .action-buttons { justify-content: center; } /* Compact center box - smaller padding and heading */ .content-box--center h2 { font-size: clamp(0.9rem, 1.5vw, 1.1rem); margin-bottom: 0.5rem; } /* Compact action box for country hub and tag pages */ body.country-hub-page .content-box--center, body.index-page .content-box--center { padding: 0.75rem 1rem; } body.country-hub-page .content-box--center h2, body.index-page .content-box--center h2 { font-size: 0.85rem; margin-bottom: 0.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); } body.country-hub-page .content-box--center .action-buttons, body.index-page .content-box--center .action-buttons { gap: 0.5rem; } /* Padding modifiers */ .content-box--pad-sm { padding: var(--spacing-sm); } .content-box--pad-lg { padding: var(--spacing-xl); } /* Spacing modifiers */ .content-box--no-margin { margin-bottom: 0; } /* Nested headings */ .content-box h2 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--text-primary); } .content-box h3 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-xs); color: var(--text-primary); } /* Nested paragraphs */ .content-box p { margin-bottom: var(--spacing-sm); } .content-box p:last-child { margin-bottom: 0; } /* Nested links */ .content-box a { color: var(--link-color); text-decoration: underline; } .content-box a:hover { color: var(--link-color-hover); } /* ============================================ COLLAPSIBLE SEO TEXT - "Read More" Pattern SEO-safe: content stays in DOM, only visual truncation Supports both inline text AND multi-paragraph content ============================================ */ .content-box--collapsible { position: relative; } .content-box--collapsible .content-box__text { /* Fixed height for consistent truncation across pages */ /* Desktop: ~8-10 lines visible */ max-height: 12rem; overflow: hidden; position: relative; transition: max-height 0.4s ease; } /* Fade overlay for smooth truncation effect */ .content-box--collapsible .content-box__text::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2.5em; background: linear-gradient(to bottom, transparent, var(--surface-secondary)); pointer-events: none; transition: opacity 0.3s ease; } /* Expanded state */ .content-box--collapsible.is-expanded .content-box__text { max-height: 5000px; /* Large enough for any content */ } .content-box--collapsible.is-expanded .content-box__text::after { opacity: 0; } /* Read More toggle */ .content-box__toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem; padding: 0; background: none; border: none; color: var(--accent-primary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: color 0.2s ease; } .content-box__toggle:hover { color: var(--accent-hover, var(--accent-primary)); text-decoration: underline; } /* Dark theme - ensure toggle visibility */ [data-theme="dark"] .content-box__toggle { color: var(--link-color, var(--accent-primary)); } [data-theme="dark"] .content-box__toggle:hover { color: var(--link-color-hover, var(--accent-hover)); } .content-box__toggle i { font-size: 0.75rem; transition: transform 0.3s ease; } .content-box--collapsible.is-expanded .content-box__toggle i { transform: rotate(180deg); } /* Hide toggle when expanded (optional - or change text) */ .content-box--collapsible.is-expanded .content-box__toggle-more { display: none; } .content-box__toggle-less { display: none; } .content-box--collapsible.is-expanded .content-box__toggle-less { display: inline; } /* ===== MOBILE: Snippet - ensure H2 title + intro visible ===== */ @media (max-width: 768px) { .content-box--collapsible .content-box__text { max-height: 9rem; /* ~5-6 lines: H2 title + snippet */ } .content-box--collapsible .content-box__text::after { height: 2.5rem; } } /* ============================================ FILTER RELATED - Tag+Attribute Cross-links ============================================ */ .filter-related { margin-top: var(--section-gap); } .filter-related__title { margin: 0 0 var(--spacing-sm) 0; font-size: var(--font-size-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } .filter-related__buttons { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; } .filter-related__btn { display: inline-flex; align-items: center; gap: var(--spacing-2xs); padding: var(--spacing-xs) var(--spacing-sm); background: var(--surface-tertiary, var(--surface-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-full, 20px); color: var(--text-primary); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; transition: all 0.2s ease; white-space: nowrap; } .filter-related__btn:hover, .filter-related__btn:focus { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent, #fff); text-decoration: none; } .filter-related__count { font-size: var(--font-size-xs); opacity: 0.7; } /* === Inlined from: ../../03-components/search-suggestions.css === */ /** * SEARCH SUGGESTIONS - CSS-v2 * Tokenized styling for search autocomplete dropdown */ /* Container */ .suggestion-box { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: none; overflow-y: visible; z-index: 1000; display: none; } .suggestion-box:empty { display: none; } /* Loading */ .suggestion-box .loading { padding: var(--spacing-md) var(--spacing-lg); text-align: center; color: var(--text-secondary); font-size: var(--font-size-sm); } /* Items */ .suggestion-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-md); color: var(--text-primary); text-decoration: none; transition: background 0.2s ease; border-bottom: 1px solid var(--border-light); } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover { background: var(--surface-secondary); } /* Tags */ .suggestion-tag { font-size: var(--font-size-sm); } .suggestion-tag i { color: var(--link); } .suggestion-tag span { font-weight: 500; } /* Models */ .suggestion-model { padding: 6px var(--spacing-md); } .suggestion-model img { width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border-default); } .suggestion-model-name { flex: 1; font-weight: 500; font-size: var(--font-size-base); } /* Status indicator */ .suggestion-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .suggestion-status.status-online { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); } .suggestion-status.status-offline { background: var(--text-tertiary); } /* All Results button */ .suggestion-all-results, .suggestion-item.all-results { background: var(--overlay-light); font-weight: 600; color: var(--link); border-top: 2px solid var(--border-default); padding: var(--spacing-md); justify-content: center; } .suggestion-all-results:hover, .suggestion-item.all-results:hover { background: var(--overlay-medium); color: var(--link-hover); } /* Dark theme - solid background for readability */ [data-theme="dark"] .suggestion-box, [data-mode="dark"] .suggestion-box { background: var(--surface-primary, #1a1a2e); border-color: var(--border-subtle, rgba(255, 255, 255, 0.1)); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .suggestion-item, [data-mode="dark"] .suggestion-item { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .suggestion-item:hover, [data-mode="dark"] .suggestion-item:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .suggestion-model img, [data-mode="dark"] .suggestion-model img { border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .suggestion-all-results, [data-theme="dark"] .suggestion-item.all-results, [data-mode="dark"] .suggestion-all-results, [data-mode="dark"] .suggestion-item.all-results { background: rgba(255, 255, 255, 0.06); border-top-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .suggestion-all-results:hover, [data-theme="dark"] .suggestion-item.all-results:hover, [data-mode="dark"] .suggestion-all-results:hover, [data-mode="dark"] .suggestion-item.all-results:hover { background: rgba(255, 255, 255, 0.1); } /* Responsive */ @media (max-width: 768px) { .suggestion-model img { width: 32px; height: 32px; } .suggestion-item { padding: 4px var(--spacing-sm); } .suggestion-model { padding: 4px var(--spacing-sm); } } /* ============================================ 📦 UTILITIES ============================================ */ /* === Inlined from: ./04-utilities/spacing.css === */ /* CSS-V5 UTILITIES spacing proxy */ /* === Inlined from: ../../../04-utilities/spacing.css === */ /** * SPACING UTILITIES * * Margin and padding helper classes * Will be fully implemented in Phase 4 (Day 10-12) */ /* Placeholder - will be populated during utilities phase */ /* === Inlined from: ./04-utilities/display.css === */ /* CSS-V5 UTILITIES display proxy */ /* === Inlined from: ../../../04-utilities/display.css === */ /** * DISPLAY UTILITIES * * Display, flex, grid helper classes * Will be fully implemented in Phase 4 (Day 10-12) */ /* Placeholder - will be populated during utilities phase */ /* === Inlined from: ./04-utilities/text.css === */ /* CSS-V5 UTILITIES text proxy */ /* === Inlined from: ../../../04-utilities/text.css === */ /** * TEXT UTILITIES * * Text alignment, color, weight helper classes * Will be fully implemented in Phase 4 (Day 10-12) */ /* Placeholder - will be populated during utilities phase */ /* ============================================ 📝 GLOBAL OVERRIDES & DEFAULTS ============================================ */ body { background-color: var(--bg-primary); color: var(--text-primary); } /* Accessibility helper */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================ 📦 DRAWER MENU ICONS (Font Awesome) Added manually for CSS v5 ============================================ */ .site-drawer__meta a::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 0.5rem; width: 1.25em; display: inline-block; text-align: center; } .site-drawer__meta a.login::before { content: "\f2f6"; /* fa-right-to-bracket */ } .site-drawer__meta a.register::before { content: "\f234"; /* fa-user-plus */ } .site-drawer__meta a.user::before { content: "\f007"; /* fa-user */ } .site-drawer__meta a.fav::before { content: "\f004"; /* fa-heart */ } .site-drawer__meta a.alert::before { content: "\f0f3"; /* fa-bell */ } .site-drawer__meta a.logout::before { content: "\f2f5"; /* fa-right-from-bracket */ } .site-drawer__meta a.admin::before { content: "\f013"; /* fa-gear */ } /* Breadcrumbs */ main#content { position: relative; } .breadcrumbs { margin: -10px auto 0; padding: 0 12px; max-width: var(--max-width-container, 1200px); box-sizing: border-box; font-size: 12px; line-height: 1.25; color: #6b7280; text-align: right; } .breadcrumbs--right { position: static; } .breadcrumbs--tight { margin: 0; } .breadcrumbs nav, .breadcrumbs > nav, .breadcrumbs .breadcrumbs { display: inline; padding: 0; margin: 0; max-width: 100%; text-align: inherit; line-height: inherit; } .breadcrumbs__list { list-style: none; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; } .breadcrumbs__list li { display: inline-flex; align-items: center; } .breadcrumbs__list li + li::before { content: "›"; margin: 0 4px 0 0; color: #c1c4cc; font-size: 11px; } .breadcrumbs a { color: var(--accent-primary, #f47321); text-decoration: none; } .breadcrumbs a:visited { color: var(--accent-primary, #f47321); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs__current { color: #4c5464; } /* ============================================ 📦 HOME SECTIONS (Popular Countries & Top Platforms) Copied from V3/core.css - must be in core for proper cascade ============================================ */ /* Section Header */ .index-home-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); flex-wrap: wrap; gap: 1rem; } .index-home-section-head h2 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); font-weight: 700; color: var(--text-primary); margin: 0; } .index-home-section-head__link { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; } .index-home-section-head__link:hover, .index-home-section-head__link:focus { color: var(--accent-primary); } /* Popular Countries Section Container */ .index-home-explore { padding: clamp(1.5rem, 3vw, 2rem); background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-xl); } /* Countries Grid */ .index-home-country-grid { display: flex; flex-wrap: wrap; gap: 0; align-items: center; } .index-home-country-card { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; text-decoration: none; color: var(--text-primary); transition: color 0.2s ease; position: relative; } .index-home-country-card:not(:last-child)::after { content: '|'; position: absolute; right: 0; color: var(--text-secondary); opacity: 0.3; font-weight: 300; } .index-home-country-card:hover, .index-home-country-card:focus { color: var(--accent-primary); } .index-home-country-card__flag { flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; } .index-home-country-card__flag img { width: 36px; height: 24px; object-fit: cover; border-radius: var(--radius-sm, 4px); display: block; } .index-home-country-card__label { font-weight: 600; letter-spacing: 0.04em; font-size: 0.95rem; } /* Top Platforms Section Container - no overflow on resize (same as index-home-explore) */ .index-home-sites { padding: clamp(1.5rem, 3vw, 2rem); background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-xl); min-width: 0; overflow: hidden; } /* Sites Grid */ .index-home-sites__grid { display: flex; flex-wrap: wrap; gap: 0; align-items: center; min-width: 0; } .index-home-site-card { display: flex; align-items: center; justify-content: center; padding: 0.5rem 1.5rem; text-decoration: none; transition: opacity 0.2s ease; position: relative; min-width: 0; flex: 0 1 auto; } .index-home-site-card:not(:last-child)::after { content: '|'; position: absolute; right: 0; color: var(--text-secondary); opacity: 0.3; font-weight: 300; } .index-home-site-card:hover, .index-home-site-card:focus { opacity: 0.7; } .index-home-site-card img { max-width: min(160px, 100%); max-height: 56px; width: auto; height: auto; object-fit: contain; display: block; } /* Mobile: Sites grid */ @media (max-width: 600px) { .index-home-sites__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .index-home-site-card { padding: 0.5rem; justify-content: center; } .index-home-site-card:not(:last-child)::after { display: none; } .index-home-site-card img { max-width: 100px; max-height: 40px; } } @media (max-width: 400px) { .index-home-sites__grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile: Countries */ @media (max-width: 768px) { .index-home-country-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; } .index-home-country-card { padding: 0.4rem 0.75rem; } .index-home-country-card__flag img { width: 28px; height: 19px; } .index-home-country-card__label { font-size: 0.85rem; } } /* ============================================ 📦 SIDEBAR WIDGETS (extracted from partials) ============================================ */ /* === Mini Cam Battle Widget === */ .mini-battle-icon { margin-right: 0.3rem; } .mini-cam-battle { background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-secondary, rgba(128,128,128,0.15)); border-radius: var(--radius-lg, 12px); padding: 1rem; min-height: 200px; } .mini-cam-battle__loading, .mini-cam-battle__error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem 1rem; color: var(--text-secondary); text-align: center; } .mini-cam-battle__spinner { width: 32px; height: 32px; border: 3px solid var(--border-secondary, rgba(128,128,128,0.2)); border-top-color: var(--accent-primary); border-radius: 50%; animation: mini-battle-spin 0.8s linear infinite; } @keyframes mini-battle-spin { to { transform: rotate(360deg); } } .mini-cam-battle__round { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .mini-cam-battle__contestants { display: flex; align-items: center; gap: 0.5rem; } .mini-cam-battle__card { flex: 1; background: var(--surface-primary, var(--bg-primary)); border: 2px solid var(--border-secondary, rgba(128,128,128,0.15)); border-radius: var(--radius-md, 8px); padding: 0.5rem; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .mini-cam-battle__card:hover, .mini-cam-battle__card:focus { border-color: var(--accent-primary); transform: scale(1.02); } .mini-cam-battle__card:active { transform: scale(0.98); } .mini-cam-battle__thumb { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm, 4px); background: var(--surface-secondary, var(--bg-secondary)); } .mini-cam-battle__name { font-size: 0.7rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .mini-cam-battle__pick { font-size: 0.65rem; font-weight: 700; color: var(--accent-primary); text-transform: uppercase; opacity: 0; transition: opacity 0.2s; } .mini-cam-battle__card:hover .mini-cam-battle__pick { opacity: 1; } .mini-cam-battle__vs { font-size: 0.8rem; font-weight: 900; color: var(--accent-primary); text-shadow: 0 0 10px var(--accent-primary); flex-shrink: 0; } /* Winner Screen */ .mini-cam-battle__winner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; animation: mini-battle-winner-pop 0.5s ease; } @keyframes mini-battle-winner-pop { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .mini-cam-battle__trophy { font-size: 2rem; animation: mini-battle-trophy 0.6s ease infinite alternate; } @keyframes mini-battle-trophy { from { transform: rotate(-5deg) scale(1); } to { transform: rotate(5deg) scale(1.1); } } .mini-cam-battle__winner-thumb { width: 80px; height: 100px; object-fit: cover; border-radius: var(--radius-md, 8px); border: 3px solid var(--accent-primary); box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-primary) 40%, transparent); } .mini-cam-battle__winner-name { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin: 0; } .mini-cam-battle__cta { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent-primary); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } .mini-cam-battle__cta:hover { transform: scale(1.05); box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-primary) 50%, transparent); } .mini-cam-battle__replay { background: transparent; border: 1px solid var(--text-secondary); color: var(--text-secondary); font-size: 0.7rem; padding: 0.35rem 0.75rem; border-radius: 15px; cursor: pointer; transition: all 0.2s; margin-top: 0.25rem; } .mini-cam-battle__replay:hover { border-color: var(--text-primary); color: var(--text-primary); } .mini-cam-battle__retry { background: var(--surface-primary, var(--bg-primary)); border: 1px solid var(--accent-primary); color: var(--accent-primary); font-size: 0.75rem; padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer; transition: all 0.2s; } .mini-cam-battle__retry:hover { background: var(--accent-primary); color: #fff; } /* Picked animation */ .mini-cam-battle__card.is-picked { border-color: #4caf50; animation: mini-battle-pick 0.3s ease; } .mini-cam-battle__card.is-eliminated { opacity: 0.3; transform: scale(0.9); pointer-events: none; } @keyframes mini-battle-pick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* === Model Rating Widget === */ .sidebar__section--model-rating { text-align: center; } .sidebar-rating-widget { display: flex; justify-content: center; padding: var(--spacing-sm, 12px) var(--spacing-md, 16px); background: var(--bg-secondary, #f7f7f7); border: 1px solid var(--border-default, rgba(0, 0, 0, 0.12)); border-radius: var(--radius-md, 8px); } .sidebar-rating-widget__inner { width: 100%; max-width: 200px; } .sidebar-rating-widget .vote.with-rating { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs, 8px); padding: 0; background: transparent; border: none; box-shadow: none; min-width: unset; width: 100%; } .sidebar-rating-widget .vote.with-rating .totalrate { font-size: var(--font-size-sm, 0.875rem); font-weight: var(--font-weight-semibold, 600); color: var(--text-primary, #494949); display: flex; align-items: center; justify-content: center; gap: 6px; } .sidebar-rating-widget .vote.with-rating .totalrate i, .sidebar-rating-widget .vote.with-rating .totalrate span { color: var(--text-secondary, #575757); font-weight: var(--font-weight-medium, 500); font-style: normal; } .sidebar-rating-widget .vote.with-rating .stars { position: relative; width: 110px; height: 24px; display: block; margin: 0 auto; } .sidebar-rating-widget .vote.with-rating .stars::before { content: '★★★★★'; font-size: 20px; letter-spacing: 2px; line-height: 24px; color: var(--border-strong, #cccccc); position: absolute; left: 0; top: 0; width: 100%; text-align: left; } .sidebar-rating-widget .vote.with-rating .stars .star_n { position: absolute; left: 0; top: 0; height: 24px; overflow: hidden; transition: width 0.3s ease; pointer-events: none; } .sidebar-rating-widget .vote.with-rating .stars .star_n::before { content: '★★★★★'; font-size: 20px; letter-spacing: 2px; line-height: 24px; color: #fbbf24; position: absolute; left: 0; top: 0; white-space: nowrap; text-align: left; } .sidebar-rating-widget .vote.with-rating .stars .rating { position: absolute; left: 0; top: 0; width: 100%; height: 24px; display: flex; z-index: 2; } .sidebar-rating-widget .vote.with-rating .stars .rating span { width: 10%; height: 100%; cursor: pointer; position: relative; z-index: 3; background: transparent; } .sidebar-rating-widget .vote.with-rating em, .sidebar-rating-widget .vote.with-rating > span { font-size: var(--font-size-xs, 0.75rem); color: var(--text-muted, #999999); font-style: normal; font-weight: var(--font-weight-medium, 500); text-align: center; display: block; } .sidebar-rating-widget .vote.with-rating .thank { font-size: var(--font-size-sm, 0.9375rem); font-weight: var(--font-weight-semibold, 600); color: var(--success, #10b981); padding: var(--spacing-xs, 8px) 0; text-align: center; } [data-theme="dark"] .sidebar-rating-widget { background: var(--dark-surface-secondary, #252525); border-color: var(--border-dark-default, rgba(255, 255, 255, 0.08)); } [data-theme="dark"] .sidebar-rating-widget .vote.with-rating .totalrate { color: var(--dark-text-primary, #ffffff); } [data-theme="dark"] .sidebar-rating-widget .vote.with-rating .totalrate i, [data-theme="dark"] .sidebar-rating-widget .vote.with-rating .totalrate span { color: var(--dark-text-secondary, #eeeeee); } [data-theme="dark"] .sidebar-rating-widget .vote.with-rating .stars::before { color: var(--dark-border-primary, #555555); } [data-theme="dark"] .sidebar-rating-widget .vote.with-rating em, [data-theme="dark"] .sidebar-rating-widget .vote.with-rating > span { color: var(--dark-text-muted, #888888); } /* === Quick Filter Widget === */ .quick-filter { display: flex; flex-direction: column; gap: var(--spacing-sm, 12px); } .quick-filter__active { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; } .quick-filter__active:empty { display: none; } .quick-filter__active-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--brand-teal-500, #0C6A93); color: #fff; border-radius: var(--radius-full, 20px); font-size: 11px; font-weight: var(--font-weight-medium, 500); } .quick-filter__active-tag button { background: none; border: none; color: inherit; padding: 0; margin-left: 2px; cursor: pointer; opacity: 0.8; font-size: 10px; } .quick-filter__active-tag button:hover { opacity: 1; } .quick-filter__group { display: flex; flex-direction: column; gap: 6px; } .quick-filter__label { font-size: 11px; font-weight: var(--font-weight-semibold, 600); color: var(--text-muted, #999); text-transform: uppercase; letter-spacing: 0.5px; } .quick-filter__chips { display: flex; flex-wrap: wrap; gap: 5px; } .quick-filter__chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: var(--bg-secondary, #f7f7f7); border: 1px solid var(--border-default, rgba(0, 0, 0, 0.12)); border-radius: var(--radius-full, 20px); font-size: 12px; font-weight: var(--font-weight-medium, 500); color: var(--text-secondary, #575757); cursor: pointer; transition: all var(--transition-fast, 150ms ease); white-space: nowrap; } .quick-filter__chip:hover { background: var(--bg-hover, #eee); border-color: var(--border-strong, rgba(0, 0, 0, 0.18)); transform: translateY(-1px); } .quick-filter__chip.is-active { background: var(--brand-teal-500, #0C6A93); border-color: var(--brand-teal-600, #0A5575); color: #fff; } .quick-filter__chip.is-active:hover { background: var(--brand-teal-600, #0A5575); } .quick-filter__flag { font-size: 14px; line-height: 1; } .quick-filter__apply { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: linear-gradient(135deg, var(--brand-teal-500, #0C6A93) 0%, var(--brand-teal-600, #0A5575) 100%); color: #fff; border: none; border-radius: var(--radius-md, 6px); font-size: 14px; font-weight: var(--font-weight-semibold, 600); text-decoration: none; cursor: pointer; transition: all var(--transition-fast, 150ms ease); margin-top: 4px; } .quick-filter__apply:hover { background: linear-gradient(135deg, var(--brand-teal-600, #0A5575) 0%, var(--brand-teal-700, #084560) 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(12, 106, 147, 0.3); } .quick-filter__reset { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; background: transparent; border: none; color: var(--text-muted, #999); font-size: 12px; cursor: pointer; transition: color var(--transition-fast, 150ms ease); } .quick-filter__reset:hover { color: var(--danger, #ef4444); } [data-theme="dark"] .quick-filter__chip { background: var(--dark-surface-secondary, #252525); border-color: var(--border-dark-default, rgba(255, 255, 255, 0.08)); color: var(--dark-text-secondary, #eee); } [data-theme="dark"] .quick-filter__chip:hover { background: var(--dark-surface-tertiary, #282828); border-color: var(--border-dark-strong, rgba(255, 255, 255, 0.12)); } [data-theme="dark"] .quick-filter__chip.is-active { background: var(--brand-teal-500, #0C6A93); border-color: var(--brand-teal-600, #0A5575); color: #fff; } [data-theme="dark"] .quick-filter__label { color: var(--dark-text-muted, #888); } [data-theme="dark"] .quick-filter__reset { color: var(--dark-text-muted, #888); } /* === Advanced Filter Widget (sf) === */ .sf { display: flex; flex-direction: column; gap: 10px; } .sf__active { display: flex; flex-wrap: wrap; gap: 6px; } .sf__active:empty { display: none; } .sf__pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--brand-teal-500, #0C6A93); color: #fff; border-radius: 20px; font-size: 12px; font-weight: 500; } .sf__pill button { background: rgba(255,255,255,0.25); border: none; border-radius: 50%; width: 16px; height: 16px; color: #fff; cursor: pointer; font-size: 12px; line-height: 14px; padding: 0; } .sf__pill button:hover { background: rgba(255,255,255,0.4); } .sf__btns { display: flex; flex-wrap: wrap; gap: 6px; } .sf__btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--surface-secondary, #f5f5f5); border: 1px solid var(--border-color, rgba(0,0,0,0.1)); border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text-secondary, #666); cursor: pointer; transition: all 0.15s; } .sf__btn:hover { background: var(--surface-hover, #eee); } .sf__btn--open { background: var(--brand-teal-500, #0C6A93); color: #fff; border-color: var(--brand-teal-600); } .sf__btn--has:not(.sf__btn--open) { background: var(--brand-teal-100, #e0f4fa); color: var(--brand-teal-700, #085); border-color: var(--brand-teal-300); } .sf__btn--disabled { opacity: 0.4; pointer-events: none; } .sf__btn .fa-chevron-down { font-size: 9px; transition: transform 0.2s; } .sf__btn--open .fa-chevron-down { transform: rotate(180deg); } .sf__panels { margin-top: 8px; } .sf__panel { background: var(--surface-primary, #fff); border: 1px solid var(--border-color, rgba(0,0,0,0.1)); border-radius: 8px; padding: 8px; } .sf__panel[hidden] { display: none; } .sf__opts { display: flex; flex-direction: column; gap: 2px; } .sf__opts--scroll { max-height: 200px; overflow-y: auto; } .sf__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background 0.1s; } .sf__opt:hover { background: var(--surface-hover, rgba(0,0,0,0.04)); } .sf__opt--on { background: var(--brand-teal-50, #e8f6fa); } .sf__opt input { position: absolute; opacity: 0; pointer-events: none; } .sf__check { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--border-color, rgba(0,0,0,0.2)); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .sf__opt--on .sf__check { background: var(--brand-teal-500, #0C6A93); border-color: var(--brand-teal-500, #0C6A93); } .sf__opt--on .sf__check::after { content: '✓'; color: #fff; font-size: 12px; font-weight: bold; } .sf__reset { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; background: transparent; border: 1px dashed var(--border-color, rgba(0,0,0,0.15)); border-radius: 6px; color: var(--text-muted, #999); font-size: 12px; cursor: pointer; margin-top: 4px; } .sf__reset:hover { border-color: #e74c3c; color: #e74c3c; background: #fef5f5; } [data-theme="dark"] .sf__btn { background: #252525; border-color: rgba(255,255,255,0.08); color: #ccc; } [data-theme="dark"] .sf__btn:hover { background: #2a2a2a; } [data-theme="dark"] .sf__panel { background: #252525; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .sf__opt:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .sf__check { background: #1a1a1a; border-color: rgba(255,255,255,0.2); } /* === Filter Models Widget === */ .sidebar-genders { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--spacing-sm, 12px); } .sidebar-genders__link { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; background: var(--bg-secondary, #f7f7f7); border: 1px solid var(--border-default, rgba(0, 0, 0, 0.12)); border-radius: var(--radius-md, 6px); font-size: var(--font-size-sm, 14px); font-weight: var(--font-weight-medium, 500); color: var(--text-secondary, #575757); text-decoration: none; transition: all var(--transition-fast, 150ms ease); } .sidebar-genders__link:hover { background: var(--bg-hover, #eee); border-color: var(--border-strong, rgba(0, 0, 0, 0.18)); } .sidebar-genders__link.is-active { background: var(--brand-teal-500, #0C6A93); border-color: var(--brand-teal-600, #0A5575); color: #fff; } .sidebar-mini { display: flex; flex-direction: column; gap: var(--spacing-sm, 12px); } .sidebar-mini__group { display: flex; flex-direction: column; gap: 6px; } .sidebar-mini__label { font-size: 11px; font-weight: var(--font-weight-semibold, 600); color: var(--text-muted, #999); text-transform: uppercase; letter-spacing: 0.5px; } .sidebar-mini__chips { display: flex; flex-wrap: wrap; gap: 5px; } .sidebar-chip { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--bg-secondary, #f7f7f7); border: 1px solid var(--border-default, rgba(0, 0, 0, 0.12)); border-radius: var(--radius-full, 20px); font-size: 12px; font-weight: var(--font-weight-medium, 500); color: var(--text-secondary, #575757); text-decoration: none; transition: all var(--transition-fast, 150ms ease); white-space: nowrap; } .sidebar-chip:hover { background: var(--bg-hover, #eee); border-color: var(--border-strong, rgba(0, 0, 0, 0.18)); } .sidebar-chip.is-active { background: var(--brand-teal-500, #0C6A93); border-color: var(--brand-teal-600, #0A5575); color: #fff; } [data-theme="dark"] .sidebar-genders__link { background: var(--dark-surface-secondary, #252525); border-color: var(--border-dark-default, rgba(255, 255, 255, 0.08)); color: var(--dark-text-secondary, #eee); } [data-theme="dark"] .sidebar-genders__link:hover { background: var(--dark-surface-tertiary, #282828); } [data-theme="dark"] .sidebar-genders__link.is-active { background: var(--brand-teal-500, #0C6A93); border-color: var(--brand-teal-600, #0A5575); color: #fff; } [data-theme="dark"] .sidebar-chip { background: var(--dark-surface-secondary, #252525); border-color: var(--border-dark-default, rgba(255, 255, 255, 0.08)); color: var(--dark-text-secondary, #eee); } [data-theme="dark"] .sidebar-chip:hover { background: var(--dark-surface-tertiary, #282828); } [data-theme="dark"] .sidebar-chip.is-active { background: var(--brand-teal-500, #0C6A93); border-color: var(--brand-teal-600, #0A5575); color: #fff; } [data-theme="dark"] .sidebar-mini__label { color: var(--dark-text-muted, #888); } /* === Cam Battle Podium Widget === */ .sidebar__heading-icon { margin-right: 0.4rem; } .cam-battle-mini-podium { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; } .cam-battle-winner-card { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-secondary, rgba(128,128,128,0.15)); border-radius: var(--radius-md, 6px); text-decoration: none; color: inherit; transition: all 0.15s ease; } .cam-battle-winner-card:hover { background: var(--bg-hover, var(--surface-primary)); border-color: var(--accent-primary); transform: translateX(2px); } .cam-battle-winner-card:first-child { background: color-mix(in srgb, gold 8%, var(--surface-secondary, var(--bg-secondary))); border-color: color-mix(in srgb, gold 40%, transparent); } .cam-battle-winner-card:first-child:hover { border-color: gold; } .cam-battle-winner-card__rank { font-size: 1.1rem; line-height: 1; flex-shrink: 0; } .cam-battle-winner-card__avatar { width: 36px; height: 36px; border-radius: var(--radius-full, 50%); overflow: hidden; flex-shrink: 0; background: var(--surface-secondary, var(--bg-tertiary)); } .cam-battle-winner-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .cam-battle-winner-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.85rem; } .cam-battle-winner-card__info { flex: 1; display: flex; flex-direction: column; min-width: 0; } .cam-battle-winner-card__name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cam-battle-winner-card:hover .cam-battle-winner-card__name { color: var(--accent-primary); } .cam-battle-winner-card__wins { font-size: 0.68rem; color: var(--text-secondary); } .cam-battle-cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--link-color); color: var(--text-on-accent); border: none; border-radius: var(--radius-md, 6px); font-size: 0.85rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.15s ease; box-shadow: var(--inset-button, none); } .cam-battle-cta:hover, .cam-battle-cta:focus { background: var(--link-color-hover); color: var(--text-on-accent); transform: translateY(-1px); box-shadow: var(--shadow-md); } .cam-battle-cta:active { transform: translateY(0); box-shadow: var(--inset-button-active, none); } .cam-battle-cta i { font-size: 1rem; } [data-mode="dark"] .cam-battle-cta, [data-theme="dark"] .cam-battle-cta { background: var(--accent-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-mode="dark"] .cam-battle-cta:hover, [data-theme="dark"] .cam-battle-cta:hover { background: var(--accent-primary-hover); } /* === Games Hub Widget === */ .sidebar__section--games-hub .sidebar__heading i { margin-right: 0.4rem; color: var(--accent-secondary); } .games-hub { display: flex; flex-direction: column; gap: 0.5rem; } .games-hub__card { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.75rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; position: relative; overflow: hidden; } .games-hub__card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--game-color, var(--accent-primary)); opacity: 0; transition: opacity 0.2s ease; } .games-hub__card:hover { background: var(--surface-hover, var(--bg-tertiary)); border-color: var(--game-color, var(--accent-primary)); transform: translateX(3px); } .games-hub__card:hover::before, .games-hub__card.is-active::before { opacity: 1; } .games-hub__card.is-active { background: color-mix(in srgb, var(--game-color) 15%, var(--surface-secondary, var(--bg-secondary))); border-color: var(--game-color); } .games-hub__emoji { font-size: 1.5rem; line-height: 1; flex-shrink: 0; } .games-hub__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .games-hub__title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); } .games-hub__tagline { font-size: 0.7rem; color: var(--text-muted); } .games-hub__arrow { font-size: 1rem; color: var(--text-muted); transition: transform 0.2s ease, color 0.2s ease; } .games-hub__card:hover .games-hub__arrow { transform: translateX(3px); color: var(--game-color); } .games-hub__playing { padding: 0.2rem 0.5rem; background: var(--game-color); color: var(--text-on-accent, #fff); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; border-radius: var(--radius-sm, 4px); animation: pulse-playing 2s infinite; } @keyframes pulse-playing { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .games-hub__stats { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border-default); } .games-hub__stats-title { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .games-hub__stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .games-hub__stat { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.4rem; background: var(--bg-tertiary, var(--surface-secondary)); border-radius: var(--radius-sm, 6px); } .games-hub__stat-value { font-size: 1rem; font-weight: 700; color: var(--accent-primary); } .games-hub__stat-label { font-size: 0.55rem; color: var(--text-muted); text-transform: uppercase; } /* === VIP Models Widget === */ .sidebar__section--vip-models .sidebar__heading i { margin-right: 0.4rem; color: var(--accent-secondary); } .vip-models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.6rem; } .vip-model-card { display: flex; flex-direction: column; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); overflow: hidden; text-decoration: none; transition: all 0.2s ease; } .vip-model-card:hover { border-color: var(--accent-secondary); transform: translateY(-2px); box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-secondary) 20%, transparent); } .vip-model-card__image { position: relative; aspect-ratio: 1; overflow: hidden; } .vip-model-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .vip-model-card:hover .vip-model-card__image img { transform: scale(1.05); } .vip-model-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary, var(--border-default)); color: var(--text-muted); font-size: 1.5rem; } .vip-model-card__badge { position: absolute; top: 0.4rem; left: 0.4rem; display: flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.4rem; background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary)); color: var(--text-on-accent, #fff); font-size: 0.55rem; font-weight: 700; border-radius: var(--radius-sm, 4px); } .vip-model-card__badge i { font-size: 0.5rem; } .vip-model-card__live { position: absolute; bottom: 0.4rem; right: 0.4rem; padding: 0.15rem 0.35rem; background: var(--success); color: var(--text-on-accent, #fff); font-size: 0.5rem; font-weight: 700; border-radius: 2px; animation: live-pulse 2s infinite; } @keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } } .vip-model-card__name { padding: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--text-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vip-models-more { display: block; text-align: center; font-size: 0.75rem; color: var(--accent-secondary); text-decoration: none; padding: 0.4rem; border: 1px dashed color-mix(in srgb, var(--accent-secondary) 40%, transparent); border-radius: var(--radius-sm, 6px); transition: all 0.15s ease; } .vip-models-more:hover { background: color-mix(in srgb, var(--accent-secondary) 10%, transparent); border-color: var(--accent-secondary); } /* === New Models Widget === */ .sidebar__section--new-models .sidebar__heading i { margin-right: 0.4rem; color: var(--success); } .new-models-list { display: flex; flex-direction: column; gap: 0.4rem; } .new-models-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; } .new-models-item:hover { border-color: var(--success); background: var(--surface-hover, var(--bg-tertiary)); } .new-models-item__avatar { position: relative; width: 40px; height: 40px; border-radius: var(--radius-sm, 6px); overflow: hidden; background: var(--bg-tertiary, var(--border-default)); flex-shrink: 0; } .new-models-item__avatar img { width: 100%; height: 100%; object-fit: cover; } .new-models-item__avatar i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-muted); } .new-models-item__badge { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); padding: 0.1rem 0.3rem; background: var(--success); color: var(--text-on-accent, #fff); font-size: 0.5rem; font-weight: 700; border-radius: 2px; } .new-models-item__info { flex: 1; min-width: 0; } .new-models-item__name { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .new-models-item__meta { font-size: 0.7rem; color: var(--text-muted); } .new-models-item__status { width: 8px; height: 8px; background: var(--success); border-radius: 50%; flex-shrink: 0; animation: pulse-status 2s infinite; } @keyframes pulse-status { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } } /* === Top Rated Widget === */ .sidebar__section--top-rated .sidebar__heading i { margin-right: 0.4rem; color: var(--warning, #f59e0b); } .top-rated-list { display: flex; flex-direction: column; gap: 0.4rem; } .top-rated-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; } .top-rated-item:hover { border-color: var(--warning, #f59e0b); background: var(--surface-hover, var(--bg-tertiary)); } .top-rated-item__rank { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; border-radius: 50%; flex-shrink: 0; } .top-rated-item[data-rank="1"] .top-rated-item__rank { background: linear-gradient(135deg, var(--gold, #ffd700), var(--gold-dark, #d4a800)); color: var(--text-on-gold, #1a1a1a); } .top-rated-item[data-rank="2"] .top-rated-item__rank { background: linear-gradient(135deg, var(--silver, #c0c0c0), var(--silver-dark, #a0a0a0)); color: var(--text-on-silver, #1a1a1a); } .top-rated-item[data-rank="3"] .top-rated-item__rank { background: linear-gradient(135deg, var(--bronze, #cd7f32), var(--bronze-dark, #a05a20)); color: var(--text-on-bronze, #fff); } .top-rated-item__avatar { position: relative; width: 36px; height: 36px; border-radius: var(--radius-sm, 6px); overflow: hidden; background: var(--bg-tertiary, var(--border-default)); flex-shrink: 0; } .top-rated-item__avatar img { width: 100%; height: 100%; object-fit: cover; } .top-rated-item__avatar i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-muted); } .top-rated-item__online { position: absolute; bottom: 2px; right: 2px; width: 8px; height: 8px; background: var(--success); border: 1px solid var(--surface-secondary, var(--bg-secondary)); border-radius: 50%; } .top-rated-item__info { flex: 1; min-width: 0; } .top-rated-item__name { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-rated-item__rating { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--warning, #f59e0b); } .top-rated-item__rating i { font-size: 0.65rem; } .top-rated-item__votes { color: var(--text-muted); font-size: 0.65rem; } /* === Site Comparison Widget === */ .sidebar__section--site-comparison .sidebar__heading i { margin-right: 0.4rem; color: var(--accent-secondary); } .site-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.6rem; } .site-comparison-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; } .site-comparison-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); background: var(--surface-hover, var(--bg-tertiary)); } .site-comparison-card__header { display: flex; align-items: center; justify-content: space-between; } .site-comparison-card__logo { height: 18px; width: auto; object-fit: contain; } [data-theme="light"] .site-comparison-card__logo, :root:not([data-theme="dark"]) .site-comparison-card__logo { filter: brightness(0.8) contrast(1.1); } .site-comparison-card__score { font-size: 0.75rem; font-weight: 700; color: var(--warning, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 15%, transparent); padding: 0.15rem 0.4rem; border-radius: var(--radius-sm, 4px); } .site-comparison-card__bars { display: flex; flex-direction: column; gap: 0.25rem; } .site-comparison-bar { display: flex; align-items: center; gap: 0.3rem; } .site-comparison-bar__label { font-size: 0.6rem; color: var(--text-muted); width: 24px; flex-shrink: 0; } .site-comparison-bar__track { flex: 1; height: 6px; background: var(--bg-tertiary, rgba(128,128,128,0.2)); border-radius: 3px; overflow: hidden; } .site-comparison-bar__fill { height: 100%; background: linear-gradient(90deg, var(--accent-primary, #e94560), var(--accent-secondary, #6366f1)); border-radius: 3px; transition: width 0.3s ease; min-width: 2px; } .site-comparison-more { display: block; text-align: center; font-size: 0.75rem; color: var(--accent-primary); text-decoration: none; padding: 0.4rem; border: 1px dashed var(--border-default); border-radius: var(--radius-sm, 6px); transition: all 0.15s ease; } .site-comparison-more:hover { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); border-color: var(--accent-primary); } /* === Online Counter Banner Widget === */ .online-counter-banner { display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs, 8px); padding: var(--spacing-sm, 12px) var(--spacing-md, 16px); background: linear-gradient(135deg, var(--success, #10b981) 0%, #059669 100%); border-radius: var(--radius-md, 8px); margin-bottom: var(--spacing-sm, 12px); color: #fff; } .online-counter-banner__pulse { width: 10px; height: 10px; background: #fff; border-radius: 50%; animation: pulse-glow 2s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } } .online-counter-banner__count { font-size: var(--font-size-xl, 1.5rem); font-weight: var(--font-weight-bold, 700); line-height: 1; } .online-counter-banner__label { font-size: var(--font-size-sm, 14px); font-weight: var(--font-weight-medium, 500); opacity: 0.9; } [data-theme="dark"] .online-counter-banner { background: linear-gradient(135deg, #059669 0%, #047857 100%); } /* === Live Stats Grid Widget === */ .live-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xs, 8px); } .live-stats-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--spacing-sm, 12px) var(--spacing-xs, 8px); background: var(--bg-secondary, #f7f7f7); border: 1px solid var(--border-default, rgba(0, 0, 0, 0.12)); border-radius: var(--radius-md, 6px); text-align: center; } .live-stats-item--main { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%); border-color: rgba(16, 185, 129, 0.2); } .live-stats-item__icon { font-size: 14px; color: var(--text-muted, #999); } .live-stats-item[data-color="success"] .live-stats-item__icon { color: var(--success, #10b981); } .live-stats-item[data-color="primary"] .live-stats-item__icon { color: var(--brand-teal-500, #0C6A93); } .live-stats-item__value { font-size: var(--font-size-lg, 1.25rem); font-weight: var(--font-weight-bold, 700); color: var(--text-primary, #494949); line-height: 1.2; } .live-stats-item--main .live-stats-item__value { color: var(--success, #10b981); } .live-stats-item__label { font-size: var(--font-size-xs, 0.75rem); color: var(--text-muted, #999); text-transform: uppercase; letter-spacing: 0.3px; } [data-theme="dark"] .live-stats-item { background: var(--dark-surface-secondary, #252525); border-color: var(--border-dark-default, rgba(255, 255, 255, 0.08)); } [data-theme="dark"] .live-stats-item--main { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%); border-color: rgba(16, 185, 129, 0.3); } [data-theme="dark"] .live-stats-item__value { color: var(--dark-text-primary, #fff); } [data-theme="dark"] .live-stats-item__label { color: var(--dark-text-muted, #888); } /* === Online Now Ticker Widget === */ .sidebar__section--online-ticker { padding: 0 !important; } .online-ticker { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.25rem 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--success, #10b981) 15%, transparent) 0%, color-mix(in srgb, var(--success, #10b981) 5%, transparent) 100%); border: 1px solid color-mix(in srgb, var(--success, #10b981) 30%, transparent); border-radius: var(--radius-lg, 12px); overflow: hidden; } .online-ticker__pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; background: radial-gradient(circle, color-mix(in srgb, var(--success, #10b981) 20%, transparent) 0%, transparent 70%); animation: ticker-pulse 3s ease-in-out infinite; pointer-events: none; } @keyframes ticker-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; } } .online-ticker__content { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; } .online-ticker__icon { color: var(--success, #10b981); font-size: 0.6rem; animation: blink-icon 1.5s infinite; } @keyframes blink-icon { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .online-ticker__count { font-size: 1.75rem; font-weight: 800; color: var(--success, #10b981); letter-spacing: -0.5px; } .online-ticker__label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .online-ticker__cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.25rem; background: var(--success, #10b981); color: var(--text-on-accent, #fff); font-size: 0.8rem; font-weight: 600; text-decoration: none; border-radius: var(--radius-full, 50px); transition: all 0.2s ease; } .online-ticker__cta:hover { filter: brightness(1.1); transform: scale(1.05); box-shadow: 0 4px 15px color-mix(in srgb, var(--success, #10b981) 40%, transparent); } [data-theme="light"] .online-ticker, :root:not([data-theme="dark"]) .online-ticker { background: linear-gradient(135deg, color-mix(in srgb, var(--success, #10b981) 10%, var(--bg-primary, #fff)) 0%, color-mix(in srgb, var(--success, #10b981) 5%, var(--bg-primary, #fff)) 100%); } /* === Trending Tags Widget === */ .sidebar-tags--trending { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs, 6px); } .sidebar-tag--trending { display: inline-flex; align-items: center; padding: 5px 10px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: var(--radius-full, 20px); font-size: var(--font-size-xs, 12px); font-weight: var(--font-weight-medium, 500); color: var(--text-secondary, #575757); text-decoration: none; transition: all var(--transition-fast, 150ms ease); white-space: nowrap; } .sidebar-tag--trending:hover { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%); border-color: rgba(245, 158, 11, 0.4); color: #b45309; transform: translateY(-1px); } [data-theme="dark"] .sidebar-tag--trending { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%); border-color: rgba(245, 158, 11, 0.25); color: var(--dark-text-secondary, #eee); } [data-theme="dark"] .sidebar-tag--trending:hover { background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.1) 100%); border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; } /* === Popular Tags Widget === */ .sidebar-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs, 6px); } .sidebar-tag { display: inline-flex; align-items: center; padding: 5px 10px; background: var(--chip-bg, rgba(0, 0, 0, 0.04)); border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)); border-radius: var(--radius-full, 20px); font-size: var(--font-size-xs, 12px); font-weight: var(--font-weight-medium, 500); color: var(--text-secondary, #575757); text-decoration: none; transition: all var(--transition-fast, 150ms ease); white-space: nowrap; } .sidebar-tag:hover { background: var(--chip-bg-hover, rgba(0, 0, 0, 0.08)); border-color: var(--border-default, rgba(0, 0, 0, 0.12)); color: var(--text-primary, #494949); transform: translateY(-1px); } .sidebar-tag:active { transform: translateY(0); } [data-theme="dark"] .sidebar-tag { background: var(--overlay-dark-light, rgba(255, 255, 255, 0.05)); border-color: var(--border-dark-subtle, rgba(255, 255, 255, 0.06)); color: var(--dark-text-secondary, #eee); } [data-theme="dark"] .sidebar-tag:hover { background: var(--overlay-dark-medium, rgba(255, 255, 255, 0.08)); border-color: var(--border-dark-default, rgba(255, 255, 255, 0.08)); color: var(--dark-text-primary, #fff); } /* === Country Spotlight Widget === */ .sidebar__section--country-spotlight .sidebar__heading i { margin-right: 0.4rem; color: var(--accent-secondary); } .country-spotlight-list { display: flex; flex-direction: column; gap: 0.4rem; } .country-spotlight-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; } .country-spotlight-item:hover { background: var(--surface-hover, var(--bg-tertiary)); border-color: var(--accent-primary); transform: translateX(3px); } .country-spotlight-item__rank { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; border-radius: 50%; background: var(--bg-tertiary, var(--border-default)); color: var(--text-muted); } .country-spotlight-item[data-rank="1"] .country-spotlight-item__rank { background: linear-gradient(135deg, var(--gold, #ffd700), var(--gold-dark, #d4a800)); color: var(--text-on-gold, #1a1a1a); } .country-spotlight-item[data-rank="2"] .country-spotlight-item__rank { background: linear-gradient(135deg, var(--silver, #c0c0c0), var(--silver-dark, #a0a0a0)); color: var(--text-on-silver, #1a1a1a); } .country-spotlight-item[data-rank="3"] .country-spotlight-item__rank { background: linear-gradient(135deg, var(--bronze, #cd7f32), var(--bronze-dark, #a05a20)); color: var(--text-on-bronze, #fff); } .country-spotlight-item__flag { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.15)); } .country-spotlight-item__name { flex: 1; font-size: 0.85rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .country-spotlight-item__count { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--success); } .country-spotlight-item__dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } /* === Language Quick Filter Widget === */ .sidebar__section--lang-filter .sidebar__heading i { margin-right: 0.4rem; color: var(--accent-secondary); } .lang-filter-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; } .lang-filter-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.65rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); text-decoration: none; font-size: 0.8rem; color: var(--text-secondary); transition: all 0.15s ease; } .lang-filter-btn:hover { border-color: var(--accent-secondary); background: var(--surface-hover, var(--bg-tertiary)); color: var(--text-primary); } .lang-filter-btn.is-active { background: var(--accent-secondary); border-color: var(--accent-secondary); color: var(--text-on-accent, #fff); } .lang-filter-btn--all { background: transparent; border-style: dashed; } .lang-filter-btn--all:hover { border-color: var(--danger); color: var(--danger); } .lang-filter-btn__flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.1)); flex-shrink: 0; } .lang-filter-btn__name { font-weight: 500; } /* === Blog Latest Widget === */ .blog-latest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .blog-latest-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-secondary, rgba(128,128,128,0.15)); border-radius: var(--radius-md, 6px); text-decoration: none; color: inherit; transition: all 0.15s ease; } .blog-latest-item:hover { background: var(--bg-hover, var(--surface-primary)); border-color: var(--accent-primary); transform: translateX(2px); } .blog-latest-item__thumb { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md, 6px); background: var(--surface-secondary, var(--bg-tertiary)); color: var(--accent-primary); font-size: 1rem; flex-shrink: 0; overflow: hidden; } .blog-latest-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .blog-latest-item:hover .blog-latest-item__thumb { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 20%, transparent); } .blog-latest-item__title { flex: 1; font-size: 0.85rem; font-weight: 500; color: var(--text-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-latest-item:hover .blog-latest-item__title { color: var(--accent-primary); } .blog-latest-more { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.5rem; padding: 0.5rem; font-size: 0.8rem; font-weight: 500; color: var(--accent-primary); text-decoration: none; border-radius: var(--radius-md, 6px); transition: all 0.15s ease; } .blog-latest-more:hover { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); } .blog-latest-more i { font-size: 0.7rem; transition: transform 0.15s ease; } .blog-latest-more:hover i { transform: translateX(3px); } /* === Featured Reads / Latest Reads Widget === */ .sidebar__heading-icon--gold { color: var(--accent-secondary, #f59e0b); } .featured-reads-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .featured-reads-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-secondary, rgba(128,128,128,0.15)); border-radius: var(--radius-md, 6px); text-decoration: none; color: inherit; transition: all 0.15s ease; } .featured-reads-item:hover { background: var(--bg-hover, var(--surface-primary)); border-color: var(--accent-secondary, #f59e0b); transform: translateX(2px); } .featured-reads-item__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md, 6px); background: color-mix(in srgb, var(--accent-secondary, #f59e0b) 15%, transparent); color: var(--accent-secondary, #f59e0b); font-size: 0.8rem; flex-shrink: 0; } .featured-reads-item:hover .featured-reads-item__icon { background: var(--accent-secondary, #f59e0b); color: #fff; } .featured-reads-item__content { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .featured-reads-item__title { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .featured-reads-item:hover .featured-reads-item__title { color: var(--accent-primary); } .featured-reads-item__meta { font-size: 0.6rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } /* === Quick Access Widget === */ .quick-access-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .quick-access-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-secondary, rgba(128,128,128,0.15)); border-radius: var(--radius-md, 6px); text-decoration: none; color: inherit; transition: all 0.15s ease; } .quick-access-link:hover { background: var(--bg-hover, var(--surface-primary)); border-color: var(--accent-primary); transform: translateX(2px); } .quick-access-link__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md, 6px); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--accent-primary); font-size: 0.75rem; flex-shrink: 0; } .quick-access-link:hover .quick-access-link__icon { background: var(--accent-primary); color: var(--text-on-accent, #fff); } .quick-access-link__label { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); } /* === Chat Roulette Wheel Widget === */ .sidebar-wheel-wrapper { display: flex; flex-direction: column; align-items: center; padding: var(--spacing-sm, 12px) 0; margin: var(--spacing-xs, 8px) 0; } .sidebar-wheel-wrapper .chat-roulette-wheel--sidebar { width: 200px !important; height: 200px !important; cursor: pointer; transition: transform var(--transition-fast, 150ms ease); } .sidebar-wheel-wrapper .chat-roulette-wheel--sidebar:hover { transform: scale(1.03); } .sidebar-wheel-wrapper .chat-roulette-wheel--sidebar:focus { outline: 3px solid var(--accent-primary, #F47321); outline-offset: 4px; border-radius: 50%; } .sidebar-wheel-hint { margin: var(--spacing-xs, 8px) 0 0; font-size: var(--font-size-xs, 12px); font-weight: var(--font-weight-medium, 500); color: var(--text-muted, #999); text-transform: uppercase; letter-spacing: 0.5px; } [data-theme="dark"] .sidebar-wheel-hint { color: var(--dark-text-muted, #888); } /* === Affiliate CTA Widget === */ .sidebar__section--affiliate-cta { padding: 0 !important; } .affiliate-cta { padding: 1.25rem; border-radius: var(--radius-lg, 12px); text-align: center; } .affiliate-cta--gradient { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); color: var(--text-on-accent, #fff); } .affiliate-cta--solid { background: var(--accent-primary); color: var(--text-on-accent, #fff); } .affiliate-cta--outline { background: transparent; border: 2px solid var(--accent-primary); color: var(--text-primary); } .affiliate-cta__icon { width: 50px; height: 50px; margin: 0 auto 0.75rem; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-primary, #fff) 20%, transparent); border-radius: 50%; font-size: 1.25rem; } .affiliate-cta--outline .affiliate-cta__icon { background: color-mix(in srgb, var(--accent-primary) 15%, transparent); color: var(--accent-primary); } .affiliate-cta__title { margin: 0 0 0.25rem; font-size: 1.1rem; font-weight: 700; } .affiliate-cta__subtitle { margin: 0 0 0.75rem; font-size: 0.8rem; opacity: 0.9; } .affiliate-cta__features { list-style: none; margin: 0 0 1rem; padding: 0; text-align: left; font-size: 0.75rem; } .affiliate-cta__features li { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0; } .affiliate-cta__features i { font-size: 0.65rem; opacity: 0.8; } .affiliate-cta--outline .affiliate-cta__features { color: var(--text-secondary); } .affiliate-cta__button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.25rem; background: var(--bg-primary, #fff); color: var(--accent-primary); font-size: 0.85rem; font-weight: 700; text-decoration: none; border-radius: var(--radius-full, 50px); transition: all 0.2s ease; } .affiliate-cta--outline .affiliate-cta__button { background: var(--accent-primary); color: var(--text-on-accent, #fff); } .affiliate-cta__button:hover { transform: scale(1.05); box-shadow: var(--shadow-md, 0 4px 15px rgba(0, 0, 0, 0.2)); } /* === Search History Widget === */ .sidebar__section--search-history .sidebar__heading i { margin-right: 0.4rem; color: var(--text-muted); } .search-history-list { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; } .search-history-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--surface-secondary, var(--bg-secondary)); border: 1px solid var(--border-default); border-radius: var(--radius-sm, 6px); text-decoration: none; font-size: 0.8rem; color: var(--text-secondary); transition: all 0.15s ease; } .search-history-item:hover { background: var(--surface-hover, var(--bg-tertiary)); border-color: var(--accent-primary); color: var(--text-primary); } .search-history-item i { font-size: 0.7rem; opacity: 0.6; } .search-history-item span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-history-clear { display: flex; align-items: center; justify-content: center; gap: 0.3rem; width: 100%; padding: 0.4rem; background: transparent; border: 1px dashed var(--border-default); border-radius: var(--radius-sm, 6px); color: var(--text-muted); font-size: 0.7rem; cursor: pointer; transition: all 0.15s ease; } .search-history-clear:hover { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } /* === Social Links Widget === */ .sidebar__section--social-links .sidebar__heading i { margin-right: 0.4rem; color: var(--accent-secondary, #6366f1); } .social-links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .social-link-card { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; background: var(--surface-alt, #1a1a2e); border: 1px solid var(--border-subtle, #2a2a4a); border-radius: var(--radius-md, 8px); text-decoration: none; transition: all 0.2s ease; overflow: hidden; } .social-link-card:hover { border-color: var(--social-color, var(--accent-primary)); background: color-mix(in srgb, var(--social-color) 10%, var(--surface-alt, #1a1a2e)); transform: translateY(-2px); } .social-link-card__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--social-color, var(--accent-primary)); border-radius: var(--radius-sm, 6px); color: #fff; font-size: 0.85rem; flex-shrink: 0; } .social-link-card__label { font-size: 0.75rem; font-weight: 600; color: var(--text-primary, #eee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 280px) { .social-links-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ */ /* ADBLOCK POPUP STYLES - Modern Design */ /* ═══════════════════════════════════════════════════════════════════════════ */ .adblock-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(30, 41, 59, 0.6); display: flex; justify-content: center; align-items: center; z-index: 99999; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 1rem; box-sizing: border-box; } .adblock-popup-content { background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); border-radius: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); width: 100%; max-width: 420px; text-align: center; padding: 32px 24px; animation: adblockFadeIn 0.3s ease-out; border: 1px solid rgba(255, 255, 255, 0.5); font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; } [data-mode="dark"] .adblock-popup-content { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border-color: rgba(255, 255, 255, 0.1); } .adblock-popup-content h1 { font-size: 22px; font-weight: 700; color: #1e293b; margin: 0 0 16px; line-height: 1.3; } [data-mode="dark"] .adblock-popup-content h1 { color: #f1f5f9; } .adblock-guarantee-section { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; padding: 12px; background: rgba(34, 197, 94, 0.1); border-radius: 8px; } .adblock-guarantee-section .adblock-icon { width: 28px; height: 28px; flex-shrink: 0; } .adblock-guarantee-section p { font-size: 14px; color: #475569; margin: 0; text-align: left; line-height: 1.5; } [data-mode="dark"] .adblock-guarantee-section p { color: #94a3b8; } .adblock-main-text { font-size: 15px; color: #334155; line-height: 1.6; margin: 0 0 24px; } [data-mode="dark"] .adblock-main-text { color: #cbd5e1; } .adblock-popup-buttons { display: flex; flex-direction: column; gap: 12px; } .adblock-popup-btn { padding: 12px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s ease; font-family: inherit; } .adblock-btn-primary { background-color: #3b82f6; color: white; } .adblock-btn-primary:hover { background-color: #2563eb; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); } .adblock-btn-secondary { background-color: #ffffff; color: #475569; border: 1px solid #cbd5e1; } [data-mode="dark"] .adblock-btn-secondary { background-color: #1e293b; color: #94a3b8; border-color: #475569; } .adblock-btn-secondary:hover { background-color: #f8fafc; border-color: #94a3b8; } [data-mode="dark"] .adblock-btn-secondary:hover { background-color: #334155; } .adblock-logos-image { width: 100%; max-width: 320px; margin: 0 auto 16px; display: block; } .adblock-instructions-image { width: 100%; max-width: 280px; margin: 8px auto 24px; border-radius: 8px; display: block; } .adblock-instructions-list { text-align: left; padding-left: 20px; margin: 0 auto 24px; color: #334155; max-width: 340px; } [data-mode="dark"] .adblock-instructions-list { color: #cbd5e1; } .adblock-instructions-list li { margin-bottom: 12px; line-height: 1.5; } @keyframes adblockFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @media (max-width: 480px) { .adblock-popup-content { padding: 24px 16px; } .adblock-popup-content h1 { font-size: 20px; } .adblock-guarantee-section { flex-direction: column; text-align: center; } .adblock-guarantee-section p { text-align: center; } } /* ═══════════════════════════════════════════════════════════════════════════ */ /* COOKIE CONSENT BANNER - Theme-Aware Design */ /* ═══════════════════════════════════════════════════════════════════════════ */ #gdpr-cookie-message { position: fixed; bottom: 1rem; right: 1rem; left: auto; width: calc(100% - 2rem); max-width: 480px; z-index: 99998; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--surface-primary, #1a1a2e); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1)); border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); overflow: hidden; transition: opacity 0.3s ease; } /* Content wrapper */ #gdpr-cookie-message .cookie-consent-content { padding: 24px; } /* Title with cookie icon */ #gdpr-cookie-message h5 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 20px; font-weight: 700; color: var(--text-primary, #fff); letter-spacing: -0.02em; } #gdpr-cookie-message h5::before { content: "🍪"; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 24px; background: color-mix(in srgb, var(--accent-primary) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent); border-radius: 16px; flex-shrink: 0; } /* Message paragraph */ #gdpr-cookie-message .cookie-consent-content > p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--text-secondary, #94a3b8); } #gdpr-cookie-message .cookie-consent-content > p a { color: var(--accent-primary, #60a5fa); text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; } #gdpr-cookie-message .cookie-consent-content > p a:hover { color: var(--accent-primary-hover, #93c5fd); } /* Cookie Types Container */ #gdpr-cookie-types { margin: 0 0 20px; padding: 0; } #gdpr-cookie-types h6 { margin: 0 0 12px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary, #64748b); } #gdpr-cookie-types ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; padding: 0; margin: 0; } #gdpr-cookie-types li { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 14px 16px; background: var(--surface-secondary, rgba(15, 23, 42, 0.6)); border: 1px solid var(--border-subtle, rgba(71, 85, 105, 0.4)); border-radius: 16px; cursor: pointer; transition: all 0.2s ease; } #gdpr-cookie-types li:hover { border-color: var(--border-default, rgba(100, 116, 139, 0.6)); background: var(--surface-glass, rgba(30, 41, 59, 0.6)); } #gdpr-cookie-types li:has(input:checked) { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent); } #gdpr-cookie-types li label { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary, #cbd5e1); cursor: pointer; transition: color 0.2s ease; } #gdpr-cookie-types li:has(input:checked) label { color: var(--accent-primary, #60a5fa); } #gdpr-cookie-types li:has(input:disabled) label::after { content: "Required"; display: inline-block; margin-left: 8px; padding: 2px 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary, #64748b); background: var(--surface-glass, rgba(71, 85, 105, 0.4)); border-radius: 4px; } /* Custom Checkbox Styling */ #gdpr-cookie-types input[type="checkbox"] { appearance: none; -webkit-appearance: none; order: 2; width: 22px; height: 22px; margin: 0; background: transparent; border: 2px solid var(--border-default, #475569); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; position: relative; } #gdpr-cookie-types input[type="checkbox"]:hover { border-color: var(--border-strong, #64748b); } #gdpr-cookie-types input[type="checkbox"]:checked { background: var(--accent-primary, #3b82f6); border-color: var(--accent-primary, #3b82f6); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 30%, transparent); } #gdpr-cookie-types input[type="checkbox"]:checked::after { content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; color: #fff; } #gdpr-cookie-types input[type="checkbox"]:disabled { opacity: 0.6; cursor: not-allowed; } /* Buttons Container */ .cookie-consent-buttons { display: flex; flex-direction: row; gap: 12px; } /* Accept Button - Primary (uses accent color) */ #gdpr-cookie-accept, .cookie-btn-accept { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 24px; font-size: 15px; font-weight: 700; color: #fff; background: var(--accent-primary, #3b82f6); border: none; border-radius: 16px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 10px 25px color-mix(in srgb, var(--accent-primary) 30%, transparent); } #gdpr-cookie-accept::after, .cookie-btn-accept::after { content: "✓"; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 12px; color: var(--accent-primary, #3b82f6); background: #fff; border-radius: 50%; } #gdpr-cookie-accept:hover, .cookie-btn-accept:hover { background: var(--accent-primary-hover, #2563eb); transform: translateY(-2px); box-shadow: 0 15px 35px color-mix(in srgb, var(--accent-primary) 40%, transparent); } #gdpr-cookie-accept:active, .cookie-btn-accept:active { transform: scale(0.98); } /* Customize Button - Secondary */ #gdpr-cookie-advanced, .cookie-btn-customize { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; font-size: 14px; font-weight: 600; color: var(--text-secondary, #94a3b8); background: transparent; border: 1px solid transparent; border-radius: 16px; cursor: pointer; transition: all 0.2s ease; } #gdpr-cookie-advanced::before, .cookie-btn-customize::before { content: "⚙"; font-size: 14px; } #gdpr-cookie-advanced:hover, .cookie-btn-customize:hover { color: var(--text-primary, #fff); background: var(--surface-glass, rgba(255, 255, 255, 0.05)); } #gdpr-cookie-advanced:disabled, .cookie-btn-customize:disabled { opacity: 0.5; cursor: not-allowed; } /* Mobile Responsive */ @media (max-width: 640px) { #gdpr-cookie-message { bottom: 0; left: 0; right: 0; width: 100%; max-width: none; border-radius: 24px 24px 0 0; } #gdpr-cookie-message h5 { font-size: 18px; } #gdpr-cookie-message h5::before { width: 40px; height: 40px; font-size: 20px; } #gdpr-cookie-types ul { grid-template-columns: 1fr; } .cookie-consent-buttons { flex-direction: column-reverse; } } /* ═══════════════════════════════════════════════════════════════════════════ */ /* ADULT WARNING OVERLAY - 18+ Age Verification */ /* ═══════════════════════════════════════════════════════════════════════════ */ .adult-warning-overlay { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: adultWarningFadeIn 0.4s ease-out; } .adult-warning-overlay.adult-warning-fade-out { animation: adultWarningFadeOut 0.3s ease-out forwards; } @keyframes adultWarningFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes adultWarningFadeOut { from { opacity: 1; } to { opacity: 0; } } .adult-warning-card { width: 100%; max-width: 480px; background: var(--surface-primary, #0f172a); border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1)); border-radius: 32px; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6); overflow: hidden; animation: adultWarningSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes adultWarningSlideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Header with gradient and icon */ .adult-warning-header { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; background: linear-gradient(180deg, rgba(239, 68, 68, 0.2) 0%, transparent 100%); } .adult-warning-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%); opacity: 0.5; } .adult-warning-icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--surface-secondary, #1e293b); border: 1px solid var(--border-default, rgba(255, 255, 255, 0.15)); border-radius: 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); color: #ef4444; } /* Content area */ .adult-warning-content { padding: 1rem 2.5rem 2.5rem; } .adult-warning-title { margin: 0 0 1rem; font-size: 28px; font-weight: 800; color: var(--text-primary, #fff); text-align: center; letter-spacing: -0.02em; } /* Badge with lines */ .adult-warning-badge { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 1.5rem; } .adult-warning-line { height: 1px; width: 32px; background: var(--border-default, rgba(255, 255, 255, 0.2)); } .adult-warning-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #ef4444; } /* Message box */ .adult-warning-message { position: relative; padding: 1.5rem; margin-bottom: 1.5rem; background: var(--surface-secondary, rgba(30, 41, 59, 0.6)); border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)); border-radius: 16px; } .adult-warning-message::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%); border-radius: 16px; z-index: -1; opacity: 0.5; } .adult-warning-message p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-secondary, #cbd5e1); text-align: center; } /* Buttons */ .adult-warning-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.5rem; } .adult-warning-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; font-size: 14px; font-weight: 700; border: none; border-radius: 16px; cursor: pointer; transition: all 0.2s ease; } .adult-warning-btn:active { transform: scale(0.97); } /* Exit button */ .adult-warning-btn-exit { color: var(--text-secondary, #94a3b8); background: transparent; border: 1px solid transparent; } .adult-warning-btn-exit:hover { color: var(--text-primary, #fff); background: var(--surface-glass, rgba(255, 255, 255, 0.05)); border-color: var(--border-subtle, rgba(255, 255, 255, 0.1)); } /* Enter button - uses accent color */ .adult-warning-btn-enter { color: #fff; background: var(--accent-primary, #ef4444); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-primary) 35%, transparent); } .adult-warning-btn-enter:hover { background: var(--accent-primary-hover, #dc2626); transform: translateY(-2px); box-shadow: 0 15px 40px color-mix(in srgb, var(--accent-primary) 45%, transparent); } .adult-warning-btn-enter svg { transition: transform 0.2s ease; } .adult-warning-btn-enter:hover svg { transform: translateX(3px); } /* Footer text */ .adult-warning-footer { margin: 0; font-size: 11px; line-height: 1.6; color: var(--text-secondary, #64748b); text-align: center; opacity: 0.7; } .adult-warning-footer a { color: var(--text-secondary, #94a3b8); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-subtle, rgba(255, 255, 255, 0.2)); margin: 0 2px; } .adult-warning-footer a:hover { color: var(--text-primary, #fff); } /* Mobile responsive */ @media (max-width: 480px) { .adult-warning-overlay { padding: 1rem; align-items: flex-end; } .adult-warning-card { border-radius: 24px 24px 0 0; max-width: none; } .adult-warning-content { padding: 1rem 1.5rem 2rem; } .adult-warning-title { font-size: 24px; } .adult-warning-buttons { grid-template-columns: 1fr; } .adult-warning-btn-exit { order: 2; } }