/* ================================================================================ ACMOBOOK - India's Largest Talent Marketplace Universal Profile CSS Stylesheet - Version 2 (Luxury Upgrade) ================================================================================ Theme: Ultra-Premium, Netflix + Airbnb + Spotify + IMDb Style Colors: Royal Violet (#6C4EFF), Neon Cyan (#00C2FF), Luxury Gold (#FFD700), Velvet Slate Prefix: .ac- (All classes namespace protected) ================================================================================ */ /* ============================================================================= 01 Root Variables ============================================================================= */ :root { /* Brand Colors & Shaders */ --ac-primary: #6C4EFF; --ac-primary-rgb: 108, 78, 255; --ac-primary-hover: #583cd6; --ac-primary-light: rgba(108, 78, 255, 0.08); --ac-primary-glow: rgba(108, 78, 255, 0.25); --ac-secondary: #00C2FF; --ac-secondary-rgb: 0, 194, 255; --ac-secondary-hover: #0099cc; --ac-secondary-light: rgba(0, 194, 255, 0.08); --ac-secondary-glow: rgba(0, 194, 255, 0.2); --ac-accent: #FF0080; --ac-accent-rgb: 255, 0, 128; --ac-accent-glow: rgba(255, 0, 128, 0.2); --ac-success: #22C55E; --ac-success-rgb: 34, 197, 94; --ac-success-light: rgba(34, 197, 94, 0.08); --ac-warning: #F59E0B; --ac-warning-rgb: 245, 158, 11; --ac-warning-light: rgba(245, 158, 11, 0.08); --ac-danger: #EF4444; --ac-danger-rgb: 239, 68, 68; --ac-danger-light: rgba(239, 68, 68, 0.08); --ac-gold: #FFD700; --ac-gold-rgb: 255, 215, 0; /* Neutrals: Default Light / Bright Theme */ --ac-bg: #F8FAFC; --ac-surface: #FFFFFF; --ac-surface-hover: #F1F5F9; --ac-text-main: #0F172A; --ac-text-muted: #4B5563; --ac-text-subtle: #6B7280; --ac-border-color: rgba(15, 23, 42, 0.08); --ac-border-color-hover: rgba(15, 23, 42, 0.16); /* Glassmorphism Accents */ --ac-glass-bg: rgba(255, 255, 255, 0.7); --ac-glass-border: rgba(15, 23, 42, 0.08); --ac-glass-shadow: rgba(0, 0, 0, 0.05); --ac-glass-blur: 24px; --ac-header-bg: rgba(255, 255, 255, 0.8); /* Typography */ --ac-font-family: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ac-font-mono: "JetBrains Mono", "Fira Code", monospace; /* Layout Sizing & Spacing */ --ac-max-width: 1440px; --ac-radius-sm: 8px; --ac-radius-md: 14px; --ac-radius-lg: 20px; --ac-radius-xl: 30px; --ac-radius-full: 9999px; /* Transitions */ --ac-transition-fast: 0.2s cubic-bezier(0.25, 1, 0.5, 1); --ac-transition-medium: 0.4s cubic-bezier(0.25, 1, 0.5, 1); --ac-transition-slow: 0.7s cubic-bezier(0.25, 1, 0.5, 1); --ac-transition-elastic: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Shadows (Elegant soft light theme shadows) */ --ac-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --ac-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06); --ac-shadow-lg: 0 16px 48px rgba(108, 78, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03); --ac-shadow-xl: 0 24px 64px rgba(108, 78, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04); --ac-shadow-glow: 0 0 30px rgba(108, 78, 255, 0.15); --ac-shadow-cyan-glow: 0 0 30px rgba(0, 194, 255, 0.12); /* Cover & Media Aspect Ratios */ --ac-aspect-cover: 3.8 / 1; --ac-aspect-cover-mobile: 2 / 1; } /* Dark Mode Theme Variables Overrides */ [data-theme="dark"] { --ac-bg: #090B11; --ac-surface: #121622; --ac-surface-hover: #181E2E; --ac-text-main: #F8FAFC; --ac-text-muted: #94A3B8; --ac-text-subtle: #64748B; --ac-border-color: rgba(255, 255, 255, 0.08); --ac-border-color-hover: rgba(255, 255, 255, 0.16); --ac-glass-bg: rgba(18, 22, 34, 0.7); --ac-glass-border: rgba(255, 255, 255, 0.08); --ac-glass-shadow: rgba(0, 0, 0, 0.5); --ac-header-bg: rgba(9, 11, 17, 0.9); --ac-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3); --ac-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5); --ac-shadow-lg: 0 20px 50px rgba(108, 78, 255, 0.08), 0 5px 15px rgba(0, 0, 0, 0.4); --ac-shadow-xl: 0 30px 80px rgba(108, 78, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.6); --ac-shadow-glow: 0 0 30px rgba(108, 78, 255, 0.25); --ac-shadow-cyan-glow: 0 0 30px rgba(0, 194, 255, 0.2); } /* Theme Toggle Button Styles */ #ac-theme-toggle { background: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-sm); color: var(--ac-text-main); padding: 8px 12px; display: flex; align-items: center; justify-content: center; transition: all var(--ac-transition-fast); } #ac-theme-toggle:hover { background: var(--ac-surface-hover); border-color: var(--ac-border-color-hover); transform: translateY(-1px); } /* Show/hide icons depending on active theme */ [data-theme="dark"] #ac-theme-toggle .sun-icon { display: block; } [data-theme="dark"] #ac-theme-toggle .moon-icon { display: none; } #ac-theme-toggle .sun-icon { display: none; } #ac-theme-toggle .moon-icon { display: block; } /* Header nav links styling */ .ac-nav-link { color: var(--ac-text-muted); text-decoration: none; transition: color var(--ac-transition-fast); } .ac-nav-link:hover { color: var(--ac-text-main); } /* ============================================================================= 02 Reset & Global Defaults ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { font-size: 16px; scroll-behavior: smooth; background-color: var(--ac-bg); } body { font-family: var(--ac-font-family); color: var(--ac-text-main); background-color: var(--ac-bg); background-image: radial-gradient(circle at 10% 20%, rgba(108, 78, 255, 0.05) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(0, 194, 255, 0.05) 0%, transparent 40%), linear-gradient(rgba(255, 255, 255, 0.005) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.005) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px; line-height: 1.6; overflow-x: hidden; } img, video, iframe { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; transition: color var(--ac-transition-fast); } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; } button { cursor: pointer; } /* Custom Scrollbar for Spotify feel */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--ac-bg); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* Noise overlay */ .ac-noise-bg { position: relative; } .ac-noise-bg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; } /* ============================================================================= 03 Typography Hierarchy ============================================================================= */ .ac-title-display { font-size: 3.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; color: var(--ac-text-main); font-family: var(--ac-font-family); } .ac-title-2xl { font-size: 2.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--ac-text-main); } .ac-title-xl { font-size:48px; font-weight:700; color:#111827; line-height: 1.25; letter-spacing: -0.02em; } .ac-title-lg { font-size: 1.45rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--ac-text-main); } .ac-title-md { font-size: 1.15rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--ac-text-main); } .ac-text-lead { font-size: 1.15rem; font-weight: 400; line-height: 1.7; color: var(--ac-text-muted); } .ac-text-body { font-size: 0.98rem; font-weight: 400; line-height: 1.7; color:#4B5563; } .ac-text-small { font-size: 0.88rem; font-weight: 500; line-height: 1.5; color: var(--ac-text-subtle); } .ac-text-xs { font-size: 0.78rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ac-text-subtle); } .ac-text-bold { font-weight: 700; color: var(--ac-text-main); } .ac-text-gradient-primary { background: linear-gradient(135deg, #FFF 10%, #A5B4FC 60%, var(--ac-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================================= 04 Layout Framework ============================================================================= */ .ac-container { width: 100%; max-width: var(--ac-max-width); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } .ac-section { padding-top: 64px; padding-bottom: 64px; border-bottom: 1px solid var(--ac-border-color); } .ac-section:last-of-type { border-bottom: none; } .ac-section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; } .ac-section-title-group { display: flex; flex-direction: column; gap: 8px; } .ac-section-subtitle { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; background: linear-gradient(90deg, var(--ac-primary), var(--ac-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================================= 05 CSS Grid & Flex Master Layout ============================================================================= */ .ac-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .ac-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .ac-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .ac-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } /* Responsive adjustment for 5-column grid */ @media (max-width: 1200px) { .ac-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .ac-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ac-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .ac-bento-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 24px; } .ac-flex-center { display: flex; align-items: center; justify-content: center; } .ac-flex-between { display: flex; align-items: center; justify-content: space-between; } .ac-flex-y-center { display: flex; align-items: center; } .ac-gap-1 { gap: 4px; } .ac-gap-2 { gap: 8px; } .ac-gap-3 { gap: 12px; } .ac-gap-4 { gap: 16px; } .ac-gap-6 { gap: 24px; } .ac-gap-8 { gap: 32px; } /* ============================================================================= 06 Elegant Cards (Upgraded Luxury Styles) ============================================================================= */ .ac-card { background: #FFFFFF;; border: 1px solid #ECEEFF; border-radius: var(--ac-radius-lg); padding: 32px; box-shadow: 0 20px 60px rgba(20,35,90,.08); transition: transform var(--ac-transition-medium), box-shadow var(--ac-transition-medium), border-color var(--ac-transition-medium); position: relative; overflow: hidden; z-index: 1; } .ac-card::before{ display:none; } .ac-card-interactive:hover { transform: translateY(-6px); box-shadow: var(--ac-shadow-lg); border-color: rgba(108, 78, 255, 0.3); } .ac-card-interactive:hover::before { } .ac-card-luxury { border: 1px solid rgba(108, 78, 255, 0.15); background: linear-gradient(180deg, var(--ac-surface) 0%, rgba(9, 11, 17, 0.8) 100%); box-shadow: var(--ac-shadow-md); position: relative; } .ac-card-luxury::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(108, 78, 255, 0.4), transparent); } .ac-card-luxury:hover { border-color: rgba(108, 78, 255, 0.4); box-shadow: var(--ac-shadow-xl), 0 0 40px rgba(108, 78, 255, 0.15); transform: translateY(-6px); } .ac-card-header{ margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid #EDF2F7; } .ac-card-footer { margin-top: 24px; border-top: 1px solid var(--ac-border-color); padding-top: 20px; } /* ============================================================================= 07 High-Interaction Buttons (Airbnb + Netflix Custom) ============================================================================= */ .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-size: 0.98rem; font-weight: 700; border-radius: var(--ac-radius-md); transition: all var(--ac-transition-medium); cursor: pointer; white-space: nowrap; user-select: none; position: relative; overflow: hidden; z-index: 1; } .ac-btn::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease-in-out; z-index: -1; } .ac-btn:hover::after { left: 100%; } .ac-btn-sm { padding: 8px 18px; font-size: 0.85rem; border-radius: var(--ac-radius-sm); } .ac-btn-lg { padding: 18px 36px; font-size: 1.05rem; border-radius: var(--ac-radius-lg); } .ac-btn-primary{ background:linear-gradient( 135deg, #6C63FF 0%, #7C3AED 45%, #5B4BFF 100% ); color:#fff; border:none; box-shadow: 0 10px 28px rgba(108,99,255,.35); } .ac-btn-primary:hover{ background:linear-gradient( 135deg, #7C3AED 0%, #6C63FF 100% ); transform:translateY(-3px); box-shadow: 0 18px 40px rgba(108,99,255,.45); } .ac-btn-primary:active { transform: translateY(1px); } .ac-btn-secondary{ background:linear-gradient( 135deg, #00D4FF 0%, #06B6D4 100% ); color:#fff; border:none; box-shadow: 0 10px 28px rgba(0,212,255,.30); } .ac-btn-secondary:hover{ background:linear-gradient( 135deg, #06B6D4 0%, #00D4FF 100% ); transform:translateY(-3px); box-shadow: 0 18px 40px rgba(0,212,255,.40); } .ac-btn-outline { background-color: transparent; color: var(--ac-text-main); border: 1px solid var(--ac-border-color); } .ac-btn-outline:hover { background-color: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .ac-btn-ghost { background-color: transparent; color: var(--ac-text-muted); } .ac-btn-ghost:hover { background-color: rgba(108, 78, 255, 0.15); color: var(--ac-primary); } .ac-btn-icon{ width:56px; height:56px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.10); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.15); color:#FFFFFF; box-shadow: 0 10px 30px rgba(0,0,0,.18); transition:.3s; } .ac-btn-icon:hover{ background:linear-gradient( 135deg, #6C63FF, #00D4FF ); color:#FFFFFF; transform:translateY(-3px); } .ac-btn-icon svg{ width:22px; height:22px; fill:currentColor; stroke:currentColor; display:block; } .ac-btn-icon-sm { width: 36px; height: 36px; border-radius: var(--ac-radius-full); } /* ============================================================================= 08 Premium Inputs & Controls ============================================================================= */ .ac-form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .ac-label { font-size: 0.88rem; font-weight: 700; color: var(--ac-text-main); letter-spacing: 0.03em; } .ac-input-wrapper { position: relative; display: flex; align-items: center; } .ac-input { width: 100%; padding: 14px 18px; border-radius: var(--ac-radius-md); border: 1px solid var(--ac-border-color); background-color: rgba(9, 11, 17, 0.8); font-size: 0.98rem; color: var(--ac-text-main); transition: all var(--ac-transition-medium); } .ac-input:focus { border-color: var(--ac-primary); background-color: rgba(9, 11, 17, 0.95); box-shadow: 0 0 0 4px rgba(108, 78, 255, 0.2); } .ac-input-icon-left { padding-left: 48px; } .ac-input-icon { position: absolute; left: 16px; color: var(--ac-text-subtle); pointer-events: none; display: flex; align-items: center; justify-content: center; } .ac-input-wrapper:focus-within .ac-input-icon { color: var(--ac-primary); } .ac-textarea { resize: vertical; min-height: 120px; } /* ============================================================================= 09 Modern Custom Chips ============================================================================= */ .ac-chip-group { display: flex; flex-wrap: wrap; gap: 10px; } .ac-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--ac-radius-full); background:#F3F6FC; border:1px solid #E2E8F0; color:#1F2937; font-weight:600; font-size: 0.88rem; transition: all var(--ac-transition-medium); cursor: pointer; } .ac-chip:hover { background-color: rgba(108, 78, 255, 0.15); border-color: var(--ac-primary); color: var(--ac-primary); } .ac-chip-active { background-color: var(--ac-primary); border-color: var(--ac-primary); color: var(--ac-text-main); box-shadow: 0 4px 12px rgba(108, 78, 255, 0.3); } .ac-chip-active:hover { background-color: var(--ac-primary-hover); color: var(--ac-text-main); } .ac-chip-icon { font-size: 1rem; } /* ============================================================================= 10 Badges (Premium, Verified, Glow badges) ============================================================================= */ .ac-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--ac-radius-full); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .ac-badge-verified { background-color: rgba(0, 194, 255, 0.12); color: var(--ac-secondary); border: 1px solid rgba(0, 194, 255, 0.25); box-shadow: 0 0 15px rgba(0, 194, 255, 0.1); } .ac-badge-premium { background: linear-gradient(135deg, rgba(108, 78, 255, 0.15) 0%, rgba(255, 0, 128, 0.1) 100%); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); box-shadow: 0 0 15px rgba(168, 85, 247, 0.1); } .ac-badge-featured { background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%); color: var(--ac-gold); border: 1px solid rgba(255, 215, 0, 0.3); box-shadow: 0 0 15px rgba(255, 215, 0, 0.1); } .ac-badge-available { background-color: rgba(34, 197, 94, 0.12); color: var(--ac-success); border: 1px solid rgba(34, 197, 94, 0.25); } .ac-badge-busy { background-color: rgba(239, 68, 68, 0.12); color: var(--ac-danger); border: 1px solid rgba(239, 68, 68, 0.25); } /* ============================================================================= 11 Hero Layout Container (Premium Netflix/Spotify Immersive Vibe) ============================================================================= */ .ac-hero { position: relative; background-color: var(--ac-bg); padding-bottom: 48px; overflow: hidden; } /* Ambient animated blobs in background */ .ac-hero::before { content: ""; position: absolute; top: -100px; left: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(108, 78, 255, 0.15) 0%, transparent 70%); filter: blur(50px); z-index: 1; pointer-events: none; animation: ac-blob-float-1 20s infinite alternate; } .ac-hero::after { content: ""; position: absolute; bottom: -150px; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 194, 255, 0.12) 0%, transparent 70%); filter: blur(60px); z-index: 1; pointer-events: none; animation: ac-blob-float-2 25s infinite alternate; } @keyframes ac-blob-float-1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(150px, 100px) scale(1.2); } } @keyframes ac-blob-float-2 { 0% { transform: translate(0, 0) scale(1.1); } 100% { transform: translate(-100px, -150px) scale(0.9); } } /* ============================================================================= 12 Cover Image Container with Parallax Zoom ============================================================================= */ .ac-cover-wrapper { position: relative; width: 100%; aspect-ratio: var(--ac-aspect-cover); overflow: hidden; border-bottom-left-radius: var(--ac-radius-xl); border-bottom-right-radius: var(--ac-radius-xl); background-color: #05060b; z-index: 2; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8); } .ac-cover-image { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform var(--ac-transition-slow); transform: scale(1.05); } .ac-cover-wrapper:hover .ac-cover-image { transform: scale(1.12); } /* ============================================================================= 13 Hero Cover Overlay (Slick Gradient and Spotlight Beam) ============================================================================= */ .ac-cover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(9, 11, 17, 0) 0%, rgba(9, 11, 17, 0.4) 50%, rgba(9, 11, 17, 0.95) 100% ); z-index: 2; } /* Spotlight dynamic line */ .ac-cover-overlay::after { content: ""; position: absolute; top: 0; left: 25%; width: 50%; height: 100%; background: radial-gradient(ellipse at top, rgba(108, 78, 255, 0.15) 0%, transparent 60%); pointer-events: none; animation: ac-spotlight-pulse 4s ease-in-out infinite alternate; } /* ============================================================================= 14 Hero Content Block (Floating Profile Design) ============================================================================= */ .ac-hero-content-wrapper{ position:relative; margin-top:-165px; z-index:20; display:flex; align-items:flex-end; gap:70px; padding:0 30px; } .ac-hero-info{ display:flex; align-items:flex-end; gap:35px; flex:1; } .ac-hero-meta{ display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; flex:1; padding-bottom:40px; max-width:850px; } .ac-hero-badges-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; } .ac-hero-title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .ac-hero-name { font-family: var(--ac-font-family); font-size: 4.4rem; font-weight: 800; line-height: 1.05; margin: 0; margin-bottom: 50px; background: linear-gradient(135deg, #FFFFFF 30%, var(--ac-secondary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 8px 20px rgba(0,0,0,.28); } .ac-hero-category{ display:flex; align-items:center; gap:18px; flex-wrap:nowrap; font-size:1.18rem; color:#3B4455; margin-top:25px; margin-bottom:20px; } .ac-hero-quick-stats{ display:flex; align-items:center; flex-wrap:nowrap; gap:30px; margin-top:18px; font-size:1.05rem; } .ac-hero-stat-item { display: flex; align-items: center; gap: 8px; } .ac-hero-stat-icon { color: var(--ac-text-subtle); display: flex; align-items: center; } /* ============================================================================= 15 Professional Profile Image / Avatar with Rotate Border ============================================================================= */ .ac-profile-avatar-wrapper { position: relative; width: 275px !important; height: 275px !important; flex:0 0 275px; border-radius: var(--ac-radius-xl); padding: 5px; /* Frame thickness */ background: linear-gradient(135deg, var(--ac-primary), var(--ac-secondary), var(--ac-accent)); background-size: 300% 300%; animation: ac-gradient-border-spin 8s linear infinite; box-shadow: 0 20px 50px rgba(93,75,255,.35), 0 12px 25px rgba(0,0,0,.25); flex-shrink: 0 !important; overflow: visible; } @keyframes ac-gradient-border-spin { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .ac-profile-avatar { width: 100%; height: 100%; border-radius: calc(var(--ac-radius-xl) - 4px); object-fit: cover; border: 4px solid var(--ac-bg); /* Contrast gap */ } /* Animated Pulse ring around verified badge */ .ac-profile-verified-badge{ position:absolute; top:-16px; right:-16px; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#2563eb); border:5px solid #fff; display:flex; justify-content:center; align-items:center; box-shadow:0 12px 30px rgba(0,0,0,.25); } .ac-profile-verified-badge::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: var(--ac-radius-full); border: 1px solid var(--ac-secondary); animation: ac-pulse-ring-wave 2s infinite; opacity: 0; } @keyframes ac-pulse-ring-wave { 0% { transform: scale(1); } 100% { transform: scale(1.4); opacity: 0; } } /* ============================================================================= 16 Floating Hero Statistics Bento Row ============================================================================= */ .ac-hero-stats-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 36px; background: linear-gradient( 135deg, #191B3A 0%, #161A3D 40%, #11152F 100% ); border:1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(27,31,78,.25); border-radius:28px; padding: 24px; position: relative; overflow: hidden; } .ac-hero-stats-bento::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.01) 50%, transparent); animation: ac-card-light-sweep 6s infinite linear; } @keyframes ac-card-light-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .ac-hero-stat-bento-card { text-align: center; padding: 8px 12px; border-right: 1px solid var(--ac-border-color); transition: transform var(--ac-transition-fast); } .ac-hero-stat-bento-card:hover { transform: translateY(-2px); } .ac-hero-stat-bento-card:last-child { border-right: 1px solid rgba(255,255,255,.08); } .ac-hero-stat-bento-val { font-family: var(--ac-font-family); font-size: 38px; font-weight: 800; background: linear-gradient(135deg, #FFFFFF, var(--ac-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; margin-bottom: 6px; } .ac-hero-stat-bento-label { font-family: var(--ac-font-family); font-size: 14px; font-weight: 600; color: #C8D0F2; text-transform: uppercase; letter-spacing: 0.1em; } /* ============================================================================= 17 Action Bar (Save, Share, Report) ============================================================================= */ .ac-hero-actions-container{ position:absolute; top:-180px; right:6px; display:flex; gap:18px; align-items:center; z-index:40; } /* ============================================================================= 18 Sticky Right Sidebar Layout (Desktop Split 70% / 30%) ============================================================================= */ .ac-profile-layout { display: grid; grid-template-columns: 7fr 3fr; gap: 40px; padding-top: 48px; padding-bottom: 96px; } .ac-main-content-area { display: flex; flex-direction: column; gap: 56px; } .ac-sidebar-area { position: relative; } .ac-sidebar-sticky { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 32px; } /* ============================================================================= 19 Booking Widget Card (Sticky Sidebar Luxury Upgrade) ============================================================================= */ .ac-booking-card { background-color: var(--ac-surface); border: 1px solid rgba(108, 78, 255, 0.25); border-radius: var(--ac-radius-xl); padding: 36px; box-shadow: var(--ac-shadow-xl), 0 0 50px rgba(108, 78, 255, 0.1); overflow: hidden; position: relative; z-index: 1; } .ac-booking-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--ac-primary), var(--ac-secondary), var(--ac-accent)); } .ac-booking-price-section { display: flex; align-items: flex-baseline; justify-content: space-between; margin-bottom: 24px; } .ac-booking-price-label { font-size: 0.85rem; font-weight: 700; color: var(--ac-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .ac-booking-price-value-container { display: flex; align-items: flex-baseline; gap: 6px; } .ac-booking-price-val { font-family: var(--ac-font-family); font-size: 2.25rem; font-weight: 800; background: linear-gradient(135deg, #FFF 30%, #A5B4FC 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.03em; } .ac-booking-price-unit { font-size: 0.95rem; font-weight: 700; color: var(--ac-text-muted); } .ac-booking-form { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; } .ac-booking-btn-stack { display: flex; flex-direction: column; gap: 14px; } /* Upgraded Invoice / Estimate Display */ .ac-invoice-breakdown { background-color: rgba(9, 11, 17, 0.6); border: 1px dashed var(--ac-border-color); border-radius: var(--ac-radius-md); padding: 20px; margin-top: 12px; font-size: 0.88rem; display: flex; flex-direction: column; gap: 10px; } .ac-invoice-row { display: flex; justify-content: space-between; color: var(--ac-text-muted); } .ac-invoice-row-total { border-top: 1px solid var(--ac-border-color); padding-top: 10px; margin-top: 6px; color: var(--ac-text-main); font-weight: 700; } /* ============================================================================= 20 Trust Indicators Card ============================================================================= */ .ac-trust-card { background-color: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-lg); padding: 24px; box-shadow: var(--ac-shadow-sm); display: flex; flex-direction: column; gap: 20px; } .ac-trust-item { display: flex; align-items: flex-start; gap: 14px; } .ac-trust-item-icon { color: var(--ac-success); margin-top: 3px; flex-shrink: 0; } .ac-trust-item-text-container { display: flex; flex-direction: column; gap: 4px; } .ac-trust-item-title { font-size: 0.95rem; font-weight: 700; color: var(--ac-text-main); } .ac-trust-item-desc { font-size: 0.82rem; color: var(--ac-text-muted); line-height: 1.5; } /* ============================================================================= 21 & 22 ABOUT SECTION (Forced Light Mode Fix) ============================================================================= */ /* This targets the large container holding the whole About section */ .ac-about-text-container { display: flex; flex-direction: column; gap: 20px; font-size: 1.02rem; line-height: 1.8; /* Force text to be dark grey */ color: #4B5563 !important; background: #FFFFFF !important; padding: 32px; border-radius: var(--ac-radius-xl); } /* Force the wrapper card to be white with no dark gradients */ .ac-main-content-area .ac-card { background-color: #FFFFFF !important; background-image: none !important; border: 1px solid #E2E8F0 !important; } /* Fix the Bento Cards inside the About section */ .ac-about-bento-card { background: #F8FAFC !important; /* Light Slate */ border: 1px solid #E2E8F0 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; } /* Fix for the White Text issue (The "Invisible Text") */ .ac-about-bento-content, .ac-about-bento-content span, .ac-about-bento-card i, .ac-about-bento-card svg { color: #1F2937 !important; /* Deep Navy/Black */ } /* Fix for the Labels (e.g. "Languages Spoken") */ .ac-about-bento-title { color: var(--ac-primary) !important; /* Royal Violet */ font-weight: 700 !important; opacity: 1 !important; } /* Ensure the Map Pin and Airplane icons are visible */ .ac-about-bento-card [class*="icon"], .ac-about-bento-card i { color: var(--ac-primary) !important; } /* Fix for Chips inside the cards */ .ac-about-bento-card .ac-chip { background: #FFFFFF !important; border: 1px solid #CBD5E0 !important; color: #334155 !important; } /* ============================================================================= 22 About Cards / Stats Bento Grid (Universal Light Fix) ============================================================================= */ /* 1. The Main Outer Container for the Biography Section */ .ac-main-content-area .ac-card { background: #FFFFFF !important; /* Pure White */ background-image: none !important; /* Removes any dark gradients */ border: 1px solid #E2E8F0 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; } /* 2. Style the Section Header Text */ .ac-section-subtitle { color: var(--ac-primary) !important; /* Artist Biography Label */ opacity: 1 !important; } .ac-title-lg, .ac-hero-name { /* If these appear in the light section, they must be dark */ color: #0F172A !important; } /* 3. The Individual Bento Cards (The 6 boxes) */ .ac-about-bento-card { background: #F1F5F9 !important; /* Soft light grey background for depth */ border: 1px solid #E2E8F0 !important; border-radius: 16px !important; padding: 24px !important; box-shadow: none !important; } .ac-about-bento-card:hover { background: #FFFFFF !important; border-color: var(--ac-primary) !important; transform: translateY(-4px); box-shadow: 0 10px 20px rgba(108, 78, 255, 0.1) !important; } /* 4. The Labels inside the cards (e.g., STAGE EXPERIENCE) */ .ac-about-bento-title { color: #64748B !important; /* Slate grey label */ font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 8px !important; } /* 5. The Main Content Text (e.g., "new delhi", "Worldwide") */ .ac-about-bento-content { color: #1E293B !important; /* Deep Navy/Black for readability */ font-size: 18px !important; font-weight: 700 !important; } /* 6. FIX FOR ICONS (Airplane, Map Pin, etc.) */ /* This ensures icons aren't white on white backgrounds */ .ac-about-bento-card i, .ac-about-bento-card svg, .ac-about-bento-content span { color: var(--ac-primary) !important; } /* 7. Fix for the description text below titles */ .ac-about-bento-card p, .ac-about-bento-card .ac-text-small { color: #64748B !important; font-size: 13px !important; } /* 8. Fix for the chips inside the light cards */ .ac-about-bento-card .ac-chip { background: #FFFFFF !important; border: 1px solid #CBD5E0 !important; color: #1E293B !important; } /* ============================================================================= 23 Featured Video Spotlight Component ============================================================================= */ .ac-featured-video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ac-radius-lg); overflow: hidden; box-shadow: var(--ac-shadow-xl); background-color: #05060b; } .ac-featured-video-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ac-transition-slow); } .ac-featured-video-wrapper:hover .ac-featured-video-thumbnail { transform: scale(1.06); } .ac-featured-video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(9, 11, 17, 0.9) 0%, rgba(9, 11, 17, 0.2) 60%, rgba(9, 11, 17, 0.3) 100%); display: flex; flex-direction: column; justify-content: space-between; padding: 32px; transition: background-color var(--ac-transition-medium); } .ac-featured-video-wrapper:hover .ac-featured-video-overlay { background-color: rgba(9, 11, 17, 0.4); } .ac-featured-video-play-btn { width: 80px; height: 80px; border-radius: var(--ac-radius-full); background-color: var(--ac-text-main); color: var(--ac-bg); box-shadow: 0 0 50px rgba(108, 78, 255, 0.4), var(--ac-shadow-glow); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; transition: all var(--ac-transition-elastic); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; } .ac-featured-video-wrapper:hover .ac-featured-video-play-btn { transform: translate(-50%, -50%) scale(1.15); background: linear-gradient(135deg, var(--ac-primary), var(--ac-secondary)); color: var(--ac-text-main); box-shadow: 0 0 40px rgba(108, 78, 255, 0.6); } .ac-featured-video-info { margin-top: auto; color: var(--ac-text-main); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); z-index: 3; } .ac-featured-video-title { font-family: var(--ac-font-family); font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; } .ac-featured-video-desc { font-size: 0.9rem; color: var(--ac-text-muted); } /* ============================================================================= 24 Master Portfolio Tabs ============================================================================= */ .ac-portfolio-tabs { display: flex; border-bottom: 1px solid var(--ac-border-color); margin-bottom: 32px; gap: 36px; } .ac-portfolio-tab-item { font-size: 1.05rem; font-weight: 700; color: var(--ac-text-muted); padding: 16px 0; cursor: pointer; position: relative; transition: color var(--ac-transition-fast); } .ac-portfolio-tab-item:hover { color: var(--ac-text-main); } .ac-portfolio-tab-item-active { color: var(--ac-primary); } .ac-portfolio-tab-item-active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ac-primary), var(--ac-secondary)); border-radius: var(--ac-radius-full); } /* ============================================================================= 25 Portfolio Gallery Grid ============================================================================= */ .ac-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ac-gallery-card { position: relative; aspect-ratio: 1 / 1; border-radius: var(--ac-radius-lg); overflow: hidden; box-shadow: var(--ac-shadow-sm); background-color: var(--ac-surface); } /* ============================================================================= 26 Video Portfolio Cards ============================================================================= */ .ac-video-card { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ac-radius-lg); overflow: hidden; box-shadow: var(--ac-shadow-md); background-color: #05060b; } .ac-video-card-badge { position: absolute; top: 16px; left: 16px; background-color: rgba(9, 11, 17, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ac-text-main); font-size: 0.75rem; padding: 6px 12px; border-radius: var(--ac-radius-sm); font-weight: 700; letter-spacing: 0.05em; border: 1px solid rgba(255, 255, 255, 0.08); z-index: 2; } /* ============================================================================= 27 Advanced Instagram-Style Hover & Lightbox triggers ============================================================================= */ .ac-image-hover-wrapper { position: relative; width: 100%; height: 100%; cursor: pointer; } .ac-hover-zoom { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ac-transition-slow); } .ac-image-hover-wrapper:hover .ac-hover-zoom { transform: scale(1.08); } .ac-hover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(9, 11, 17, 0.95) 0%, rgba(9, 11, 17, 0.5) 50%, rgba(9, 11, 17, 0.1) 100% ); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; opacity: 0; transition: opacity var(--ac-transition-medium); color: var(--ac-text-main); z-index: 3; } .ac-image-hover-wrapper:hover .ac-hover-overlay { opacity: 1; } .ac-hover-title { font-family: var(--ac-font-family); font-size: 1.1rem; font-weight: 700; transform: translateY(15px); transition: transform var(--ac-transition-medium); } .ac-image-hover-wrapper:hover .ac-hover-title { transform: translateY(0); } .ac-hover-subtitle { font-size: 0.82rem; color: var(--ac-text-muted); margin-top: 4px; transform: translateY(15px); transition: transform var(--ac-transition-medium) 0.05s; } .ac-image-hover-wrapper:hover .ac-hover-subtitle { transform: translateY(0); } /* Hover actions row */ .ac-hover-actions { display: flex; gap: 10px; margin-top: 12px; transform: translateY(15px); transition: transform var(--ac-transition-medium) 0.1s; } .ac-image-hover-wrapper:hover .ac-hover-actions { transform: translateY(0); } /* ============================================================================= 28 Pinterest Masonry Grid (Beautiful Pinterest Column Gaps) ============================================================================= */ .ac-masonry-grid { columns: 3 260px; column-gap: 20px; } .ac-masonry-item { break-inside: avoid; margin-bottom: 20px; position: relative; border-radius: var(--ac-radius-lg); overflow: hidden; box-shadow: var(--ac-shadow-sm); background-color: var(--ac-surface); transition: transform var(--ac-transition-medium), box-shadow var(--ac-transition-medium), border-color var(--ac-transition-medium); border: 1px solid var(--ac-border-color); } .ac-masonry-item:hover { transform: translateY(-6px); box-shadow: var(--ac-shadow-xl), 0 10px 30px rgba(108, 78, 255, 0.1); border-color: rgba(108, 78, 255, 0.3); } .ac-masonry-img { width: 100%; height: auto; display: block; } /* ============================================================================= 29 Custom Service Packages List ============================================================================= */ .ac-packages-list { display: flex; flex-direction: column; gap: 20px; } .ac-package-row { display: grid; grid-template-columns: 3fr 1.5fr 1.5fr 2fr; align-items: center; background-color: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-lg); padding: 24px 32px; transition: all var(--ac-transition-medium); } .ac-package-row:hover { border-color: rgba(108, 78, 255, 0.3); box-shadow: var(--ac-shadow-md), 0 0 25px rgba(108, 78, 255, 0.05); transform: translateY(-2px); } .ac-package-row-title-desc { display: flex; flex-direction: column; gap: 6px; } .ac-package-row-title { font-size: 1.25rem; font-weight: 700; color: var(--ac-text-main); } .ac-package-row-desc { font-size: 0.9rem; color: var(--ac-text-muted); } /* ============================================================================= 30 Luxury Stripe pricing Cards (Compare Engine) ============================================================================= */ .ac-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .ac-pricing-card { background-color: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-xl); padding: 40px; position: relative; display: flex; flex-direction: column; transition: all var(--ac-transition-medium); box-shadow: var(--ac-shadow-sm); z-index: 1; } /* Background mesh hover effect */ .ac-pricing-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--ac-radius-xl); background: radial-gradient(circle at top right, rgba(108, 78, 255, 0.1) 0%, transparent 60%); opacity: 0; transition: opacity var(--ac-transition-medium); z-index: -1; } .ac-pricing-card:hover { transform: translateY(-8px); border-color: rgba(108, 78, 255, 0.35); box-shadow: var(--ac-shadow-xl), 0 15px 50px rgba(108, 78, 255, 0.15); } .ac-pricing-card:hover::after { opacity: 1; } .ac-pricing-card-recommended { border: 2px solid var(--ac-primary); box-shadow: var(--ac-shadow-lg), 0 10px 40px rgba(108, 78, 255, 0.12); } .ac-pricing-card-recommended::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: var(--ac-radius-xl); background: linear-gradient(135deg, var(--ac-primary), var(--ac-secondary)); z-index: -2; } .ac-pricing-ribbon { position: absolute; top: 24px; right: 24px; background: linear-gradient(90deg, var(--ac-accent), #e00070); color: var(--ac-text-main); font-size: 0.75rem; font-weight: 800; padding: 6px 14px; border-radius: var(--ac-radius-full); text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 4px 10px rgba(255, 0, 128, 0.3); animation: ac-pulse-shimmer 2.5s infinite; } @keyframes ac-pulse-shimmer { 0% { box-shadow: 0 4px 10px rgba(255, 0, 128, 0.3); } 50% { box-shadow: 0 4px 20px rgba(255, 0, 128, 0.6); } 100% { box-shadow: 0 4px 10px rgba(255, 0, 128, 0.3); } } .ac-pricing-tier-name { font-family: var(--ac-font-family); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ac-text-subtle); margin-bottom: 12px; } .ac-pricing-price-container { display: flex; align-items: flex-baseline; gap: 6px; margin-bottom: 24px; } .ac-pricing-amt { font-family: var(--ac-font-family); font-size: 2.8rem; font-weight: 800; background: linear-gradient(135deg, #FFF 30%, #C7D2FE 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.03em; } .ac-pricing-features { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; margin-bottom: 36px; flex: 1; } .ac-pricing-feature-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: var(--ac-text-muted); } .ac-pricing-feature-icon { color: var(--ac-primary); flex-shrink: 0; margin-top: 3px; } /* ============================================================================= 31 Interactive Availability Calendar ============================================================================= */ .ac-calendar-wrapper { background-color: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-xl); padding: 32px; box-shadow: var(--ac-shadow-md); } .ac-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .ac-calendar-month-name { font-family: var(--ac-font-family); font-size: 1.30rem; font-weight: 700; color: var(--ac-text-main); } .ac-calendar-nav-btns { display: flex; gap: 10px; } .ac-calendar-days-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; text-align: center; } .ac-calendar-weekday { font-size: 0.85rem; font-weight: 700; color: var(--ac-text-subtle); padding-bottom: 12px; } .ac-calendar-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 600; border-radius: var(--ac-radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--ac-transition-fast); background-color: rgba(9, 11, 17, 0.4); } .ac-calendar-day-muted { color: var(--ac-text-subtle); opacity: 0.3; } .ac-calendar-day-available { background-color: rgba(34, 197, 94, 0.08); color: var(--ac-success); border-color: rgba(34, 197, 94, 0.15); } .ac-calendar-day-available:hover { background-color: var(--ac-success); color: var(--ac-bg); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); transform: scale(1.08); } .ac-calendar-day-limited { background-color: rgba(245, 158, 11, 0.08); color: var(--ac-warning); border-color: rgba(245, 158, 11, 0.15); } .ac-calendar-day-limited:hover { background-color: var(--ac-warning); color: var(--ac-bg); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); transform: scale(1.08); } .ac-calendar-day-booked { background-color: rgba(239, 68, 68, 0.06); color: var(--ac-danger); border-color: rgba(239, 68, 68, 0.08); opacity: 0.5; cursor: not-allowed; text-decoration: line-through; } .ac-calendar-day-selected { border: 2px solid var(--ac-primary); background-color: rgba(108, 78, 255, 0.2); color: var(--ac-primary); box-shadow: 0 0 15px rgba(108, 78, 255, 0.3); } .ac-calendar-legend { display: flex; justify-content: center; gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ac-border-color); font-size: 0.85rem; } .ac-calendar-legend-item { display: flex; align-items: center; gap: 8px; color: var(--ac-text-muted); } .ac-calendar-legend-dot { width: 12px; height: 12px; border-radius: var(--ac-radius-full); } /* ============================================================================= 32 Brand Trust Infinite Slider (Beautiful Moving Tape) ============================================================================= */ .ac-brands-grid { display: flex; align-items: center; justify-content: space-around; gap: 40px; flex-wrap: wrap; } .ac-brand-logo-img { max-height: 36px; width: auto; opacity: 0.35; filter: grayscale(100%) invert(1); transition: all var(--ac-transition-medium); } .ac-brand-logo-img:hover { opacity: 0.95; filter: grayscale(0%) invert(0); transform: scale(1.1); } /* ============================================================================= 33 Elegant Awards Timeline (Step Tracking) ============================================================================= */ .ac-timeline { position: relative; display: flex; flex-direction: column; gap: 40px; padding-left: 36px; } .ac-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 11px; width: 2px; background: linear-gradient(to bottom, var(--ac-primary) 0%, var(--ac-secondary) 100%); opacity: 0.4; } .ac-timeline-item { position: relative; } .ac-timeline-marker { position: absolute; left: -36px; top: 6px; width: 24px; height: 24px; border-radius: var(--ac-radius-full); background-color: var(--ac-bg); border: 4px solid var(--ac-primary); box-shadow: 0 0 10px rgba(108, 78, 255, 0.4); transition: all var(--ac-transition-elastic); z-index: 2; } .ac-timeline-item:hover .ac-timeline-marker { transform: scale(1.25); border-color: var(--ac-secondary); box-shadow: 0 0 20px rgba(0, 194, 255, 0.6); } .ac-timeline-content { display: flex; flex-direction: column; gap: 8px; background: rgba(18, 22, 34, 0.3); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-lg); padding: 24px; transition: border-color var(--ac-transition-medium); } .ac-timeline-item:hover .ac-timeline-content { border-color: rgba(108, 78, 255, 0.2); } .ac-timeline-date { font-family: var(--ac-font-mono); font-size: 0.85rem; font-weight: 700; color: var(--ac-secondary); letter-spacing: 0.05em; } .ac-timeline-title { font-family: var(--ac-font-family); font-size: 1.2rem; font-weight: 700; color: var(--ac-text-main); } .ac-timeline-desc { font-size: 0.95rem; color: var(--ac-text-muted); } /* ============================================================================= 34 Review Cards & Premium Testimonials ============================================================================= */ .ac-reviews-summary-card { background-color: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-xl); padding: 40px; display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: center; margin-bottom: 40px; box-shadow: var(--ac-shadow-md); } .ac-reviews-overall-score { text-align: center; border-right: 1px solid var(--ac-border-color); padding-right: 48px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .ac-reviews-big-num { font-family: var(--ac-font-family); font-size: 4.5rem; font-weight: 800; background: linear-gradient(135deg, #FFF 10%, #A5B4FC 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .ac-reviews-rating-stars { display: flex; gap: 6px; color: var(--ac-warning); font-size: 1.35rem; } .ac-review-card { background-color: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-lg); padding: 32px; margin-bottom: 24px; box-shadow: var(--ac-shadow-sm); transition: border-color var(--ac-transition-medium); } .ac-review-card:hover { border-color: rgba(108, 78, 255, 0.2); } .ac-review-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .ac-review-author { display: flex; align-items: center; gap: 16px; } .ac-review-author-avatar { width: 52px; height: 52px; border-radius: var(--ac-radius-full); object-fit: cover; border: 2px solid var(--ac-border-color); } .ac-review-author-info { display: flex; flex-direction: column; } .ac-review-author-name { font-size: 1.05rem; font-weight: 700; color: var(--ac-text-main); } .ac-review-date { font-size: 0.85rem; color: var(--ac-text-subtle); } .ac-review-body { font-size: 1rem; line-height: 1.7; color: var(--ac-text-muted); } .ac-review-media-row { display: flex; gap: 12px; margin-top: 20px; } .ac-review-media-thumbnail { width: 80px; height: 80px; border-radius: var(--ac-radius-sm); object-fit: cover; cursor: zoom-in; transition: transform var(--ac-transition-fast), border-color var(--ac-transition-fast); border: 1px solid var(--ac-border-color); } .ac-review-media-thumbnail:hover { transform: scale(1.06); border-color: var(--ac-primary); } /* ============================================================================= 35 Star Rating Progress Bars ============================================================================= */ .ac-rating-bars { display: flex; flex-direction: column; gap: 14px; } .ac-rating-bar-row { display: flex; align-items: center; gap: 16px; } .ac-rating-bar-label { font-size: 0.9rem; font-weight: 700; color: var(--ac-text-muted); width: 70px; } .ac-rating-bar-track { flex: 1; height: 10px; background-color: rgba(9, 11, 17, 0.6); border-radius: var(--ac-radius-full); overflow: hidden; border: 1px solid var(--ac-border-color); } .ac-rating-bar-fill { height: 100%; background: linear-gradient(90deg, var(--ac-warning), #ffa500); border-radius: var(--ac-radius-full); } .ac-rating-bar-percentage { font-family: var(--ac-font-mono); font-size: 0.88rem; color: var(--ac-text-muted); width: 44px; text-align: right; } /* ============================================================================= 36 FAQ Accordion Panel ============================================================================= */ .ac-faq-accordion { display: flex; flex-direction: column; gap: 16px; } .ac-faq-item { background-color: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-lg); overflow: hidden; transition: all var(--ac-transition-medium); } .ac-faq-item:hover { border-color: rgba(255,255,255,0.15); } .ac-faq-trigger { width: 100%; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; text-align: left; font-weight: 700; font-size: 1.1rem; color: var(--ac-text-main); background-color: var(--ac-surface); } .ac-faq-chevron { transition: transform var(--ac-transition-medium); color: var(--ac-text-muted); } .ac-faq-item-open { border-color: rgba(108, 78, 255, 0.3); } .ac-faq-item-open .ac-faq-chevron { transform: rotate(180deg); color: var(--ac-primary); } .ac-faq-content { max-height: 0; overflow: hidden; transition: max-height var(--ac-transition-medium) ease-out, padding var(--ac-transition-medium) ease-out; padding: 0 32px; background-color: var(--ac-surface); font-size: 0.98rem; color: var(--ac-text-muted); line-height: 1.7; } .ac-faq-item-open .ac-faq-content { max-height: 400px; padding-bottom: 24px; } /* ============================================================================= 37 Related Artists (Refined Suggested Cards) ============================================================================= */ /* Grid Layout - Force 5 columns on desktop */ #related-artists-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } /* Card container */ .ac-recommended-card { background-color: #FFFFFF; border: 1px solid var(--ac-border-color); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; position: relative; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; } .ac-recommended-card:hover { transform: translateY(-8px); border-color: var(--ac-primary) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); z-index: 10; } /* Image Wrapper with Portrait Ratio */ .ac-card-image-wrapper { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background-color: #f1f5f9; } .ac-recommended-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .ac-recommended-card:hover .ac-recommended-img { transform: scale(1.08); } .ac-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,0.1) 100%); } /* Content Styles */ .ac-card-details { padding: 16px; display: flex; flex-direction: column; flex: 1; } .ac-card-label { font-size: 0.65rem; font-weight: 700; color: var(--ac-primary); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; } .ac-card-name { font-size: 1.05rem; font-weight: 700; color: #1E293B; margin: 0 0 4px 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-card-city { font-size: 0.8rem; font-weight: 500; color: #64748B; display: block; } .ac-card-footer-row { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid #F1F5F9; padding-top: 12px; margin-top: auto; } .ac-price-label { display: block; font-size: 0.6rem; font-weight: 700; color: #94A3B8; text-transform: uppercase; } .ac-price-val { font-size: 1rem; font-weight: 800; color: #0F172A; } .ac-card-link { font-size: 0.7rem !important; padding: 8px 12px !important; border-radius: 8px !important; font-weight: 700 !important; } .ac-rating-badge { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); color: #0F172A; font-size: 0.7rem; font-weight: 800; border-radius: 6px; padding: 4px 8px; z-index: 5; display: flex; align-items: center; gap: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } /* Responsive */ @media (max-width: 1200px) { #related-artists-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 992px) { #related-artists-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { #related-artists-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { #related-artists-grid { grid-template-columns: repeat(1, 1fr); } } /* ============================================================================= 38 Direct Contact Card ============================================================================= */ .ac-contact-card { background: linear-gradient(135deg, #13112c 0%, #05060b 100%); border: 1px solid rgba(108, 78, 255, 0.2); color: var(--ac-text-main); border-radius: var(--ac-radius-xl); padding: 40px; box-shadow: var(--ac-shadow-lg); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; overflow: hidden; } .ac-contact-card::before { content: ""; position: absolute; top: -150px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(108, 78, 255, 0.15) 0%, transparent 70%); filter: blur(20px); } .ac-contact-title { font-family: var(--ac-font-family); font-size: 1.6rem; font-weight: 700; z-index: 2; } .ac-contact-desc { font-size: 1rem; color: var(--ac-text-muted); max-width: 400px; margin-bottom: 8px; z-index: 2; } /* ============================================================================= 39 Mobile Sticky Bottom CTA Navigation Panel ============================================================================= */ .ac-mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(9, 11, 17, 0.85); backdrop-filter: blur(var(--ac-glass-blur)); -webkit-backdrop-filter: blur(var(--ac-glass-blur)); border-top: 1px solid var(--ac-border-color); padding: 16px 32px; display: none; /* Desktop hidden */ align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.6); z-index: 999; } .ac-mobile-cta-price { display: flex; flex-direction: column; } .ac-mobile-cta-price-lbl { font-size: 0.75rem; color: var(--ac-text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; } .ac-mobile-cta-price-val { font-family: var(--ac-font-family); font-size: 1.4rem; font-weight: 800; color: var(--ac-text-main); } /* ============================================================================= 40 Premium Floating Back-to-Top and Support Triggers ============================================================================= */ .ac-floating-actions { position: fixed; bottom: 40px; right: 40px; display: flex; flex-direction: column; gap: 16px; z-index: 100; } .ac-floating-btn { width: 56px; height: 56px; border-radius: var(--ac-radius-full); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); transition: all var(--ac-transition-elastic); border: 1px solid rgba(255, 255, 255, 0.1); } .ac-floating-btn:hover { transform: translateY(-6px) scale(1.08); } .ac-floating-btn-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: var(--ac-text-main); } .ac-floating-btn-whatsapp:hover { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4); } /* ============================================================================= 41 Visual Skeleton Loader Framework (Content Skeletons) ============================================================================= */ .ac-skeleton { background: linear-gradient(90deg, #181E2E 25%, #252F47 50%, #181E2E 75%); background-size: 200% 100%; animation: ac-shimmer 1.5s infinite; border-radius: var(--ac-radius-sm); display: block; } .ac-skeleton-circle { border-radius: var(--ac-radius-full); } /* ============================================================================= 42 Shimmer Keyframe System ============================================================================= */ @keyframes ac-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================================= 43 Premium Empty States ============================================================================= */ .ac-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 32px; background-color: var(--ac-surface); border: 2px dashed var(--ac-border-color); border-radius: var(--ac-radius-lg); } .ac-empty-icon { font-size: 3.5rem; color: var(--ac-text-subtle); margin-bottom: 20px; } .ac-empty-title { font-size: 1.35rem; font-weight: 700; color: var(--ac-text-main); margin-bottom: 8px; } .ac-empty-desc { font-size: 0.95rem; color: var(--ac-text-muted); max-width: 360px; margin-bottom: 20px; } /* ============================================================================= 45 High-Performance Utility Classes ============================================================================= */ .ac-d-flex { display: flex; } .ac-flex-col { flex-direction: column; } .ac-flex-wrap { flex-wrap: wrap; } .ac-flex-1 { flex: 1; } .ac-w-full { width: 100%; } .ac-h-full { height: 100%; } .ac-text-center { text-align: center; } .ac-text-right { text-align: right; } .ac-p-0 { padding: 0; } .ac-p-4 { padding: 16px; } .ac-p-6 { padding: 24px; } .ac-p-8 { padding: 32px; } .ac-mt-2 { margin-top: 8px; } .ac-mt-4 { margin-top: 16px; } .ac-mt-6 { margin-top: 24px; } .ac-mt-8 { margin-top: 32px; } .ac-mb-2 { margin-bottom: 8px; } .ac-mb-4 { margin-bottom: 16px; } .ac-mb-6 { margin-bottom: 24px; } .ac-mb-8 { margin-bottom: 32px; } .ac-rounded-full { border-radius: var(--ac-radius-full); } .ac-rounded-lg { border-radius: var(--ac-radius-lg); } .ac-relative { position: relative; } .ac-absolute { position: absolute; } .ac-overflow-hidden { overflow: hidden; } /* ============================================================================= 46 Fluid Animation Core ============================================================================= */ @keyframes ac-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ac-slide-up { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes ac-scale-up { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes ac-pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(108, 78, 255, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(108, 78, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(108, 78, 255, 0); } } @keyframes ac-float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .ac-animate-fade-in { animation: ac-fade-in var(--ac-transition-medium) forwards; } .ac-animate-slide-up { animation: ac-slide-up var(--ac-transition-medium) forwards; } .ac-animate-scale-up { animation: ac-scale-up var(--ac-transition-medium) forwards; } .ac-animate-pulse { animation: ac-pulse-glow 2.5s infinite; } .ac-animate-float { animation: ac-float 5s ease-in-out infinite; } /* ============================================================================= 47 Responsive Engine (1600 | 1440 | 1200 | 992 | 768 | 576 | 420) ============================================================================= */ /* 1600px breakpoint */ @media (max-width: 1600px) { :root { --ac-max-width: 1360px; } } /* 1440px breakpoint */ @media (max-width: 1440px) { :root { --ac-max-width: 1440px; } .ac-hero-name { font-size: 2.5rem !important; background: linear-gradient(135deg, #111827 40%, var(--ac-secondary) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none !important; } } /* 1200px breakpoint */ @media (max-width: 1200px) { :root { --ac-max-width: 960px; } .ac-profile-layout { grid-template-columns: 1fr; /* Stack sidebar on tablet landscape */ gap: 32px; } .ac-sidebar-sticky { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ac-booking-card { height: fit-content; } .ac-trust-card { height: fit-content; } } /* 992px breakpoint */ @media (max-width: 992px) { :root { --ac-max-width: 720px; } .ac-cover-wrapper { aspect-ratio: var(--ac-aspect-cover-mobile); } .ac-hero-content-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; margin-top: -100px !important; /* Pulls profile pic halfway onto cover */ padding: 0 20px !important; } .ac-hero-info { flex-direction: column !important; align-items: center !important; width: 100% !important; } .ac-hero-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; max-width:900px; } /* 4. Badges Row (Centered) */ .ac-hero-badges-row { justify-content: center !important; margin-bottom: 10px !important; } .ac-hero-title-row { justify-content: center; } .ac-hero-quick-stats { justify-content: center; } .ac-hero-actions-container { justify-content: center; width: 100%; } .ac-sidebar-sticky { grid-template-columns: 1fr; } .ac-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-pricing-grid { grid-template-columns: 1fr; gap: 24px; } .ac-masonry-grid { columns: 2; } .ac-reviews-summary-card { grid-template-columns: 1fr; gap: 32px; } .ac-reviews-overall-score { border-right: none; padding-right: 0; border-bottom: 1px solid var(--ac-border-color); padding-bottom: 32px; } .ac-brands-grid { gap: 30px; } } /* 768px breakpoint */ @media (max-width: 768px) { :root { --ac-max-width: 540px; } body { padding-bottom: 96px; /* Offset for sticky mobile bottom bar */ } .ac-container { padding-left: 20px; padding-right: 20px; } .ac-mobile-sticky-cta { display: flex; /* Show sticky mobile bottom bar */ } .ac-sidebar-sticky .ac-booking-card { display: none; /* Hide standard booking card in sidebar since mobile cta handles it */ } .ac-about-bento-grid { grid-template-columns: 1fr; } .ac-package-row { grid-template-columns: 1fr; gap: 16px; text-align: center; } .ac-package-row-btn { width: 100%; } .ac-calendar-days-grid { gap: 6px; } .ac-calendar-day { font-size: 0.85rem; } } /* 576px breakpoint */ @media (max-width: 576px) { .ac-hero-name { font-size: 2.5rem !important; background: linear-gradient(135deg, #111827 40%, var(--ac-secondary) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none !important; } .ac-profile-avatar-wrapper { width: 140px; height: 140px; } .ac-hero-stats-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .ac-hero-stat-bento-card { border-right: 1px solid rgba(255,255,255,.08); } .ac-hero-stat-bento-card:nth-child(odd) { border-right: 1px solid var(--ac-border-color); } .ac-gallery-grid { grid-template-columns: 1fr; } .ac-masonry-grid { columns: 1; } } /* 420px breakpoint */ @media (max-width: 420px) { .ac-hero-name { font-size: 1.95rem !important; /* Even smaller for tiny screens */ } .ac-portfolio-tabs { gap: 20px; overflow-x: auto; white-space: nowrap; padding-bottom: 6px; } .ac-timeline { padding-left: 24px; } .ac-timeline::before { left: 7px; } .ac-timeline-marker { left: -24px; width: 16px; height: 16px; } } /* Theme Adaptive Form Select Icons */ .ac-form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } [data-theme="dark"] .ac-form-select { background-image: url("data:image/svg+xml;utf8,"); } /* ============================================================================= MOBILE OVERRIDES (768px and below) ============================================================================= */ @media (max-width: 768px) { /* Stack everything vertically */ .ac-hero-content-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; margin-top: -100px !important; } .ac-hero-info { flex-direction: column !important; align-items: center !important; gap: 20px !important; } .ac-hero-meta { align-items: center !important; text-align: center !important; } .ac-hero-badges-row { justify-content: center !important; } /* Black Gradient for Mobile visibility on White background */ .ac-hero-name { font-size: 2.5rem !important; background: linear-gradient(135deg, #111827 40%, var(--ac-secondary) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none !important; } .ac-hero-category { color: #4B5563 !important; /* Dark text for mobile */ justify-content: center !important; } .ac-hero-quick-stats { justify-content: center !important; color: #6B7280 !important; } .ac-hero-actions-container { width: 100% !important; justify-content: center !important; } .ac-profile-avatar-wrapper { width: 180px !important; height: 180px !important; } } /* ============================================================================= PROFILE V3 — UX Director Redesign Layer Glassmorphism · Scroll reveal · Skeleton · App-like mobile · Premium cards ============================================================================= */ :root { --ac-section-gap: 40px; --ac-card-padding: 28px; --ac-glass-surface: rgba(255, 255, 255, 0.72); --ac-glass-border: rgba(108, 78, 255, 0.12); } .ac-profile-page { padding-top: 8px; padding-bottom: 48px; opacity: 0; transition: opacity 0.45s ease; } .ac-profile-page.ac-profile-ready { opacity: 1; } .ac-profile-main { display: flex; flex-direction: column; gap: var(--ac-section-gap); } .ac-profile-sidebar-col { position: relative; } /* ── Skeleton overlay ───────────────────────────────────── */ .ac-profile-skeleton { position: fixed; inset: 0; z-index: 10000; background: var(--ac-bg); display: flex; flex-direction: column; gap: 24px; padding: 24px; transition: opacity 0.45s ease, visibility 0.45s ease; } .ac-profile-skeleton.ac-skeleton-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .ac-skeleton-hero { height: 280px; border-radius: var(--ac-radius-xl); } .ac-skeleton-row { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; flex: 1; } .ac-skeleton-block { border-radius: var(--ac-radius-lg); min-height: 120px; } .ac-skeleton-hero, .ac-skeleton-block { background: linear-gradient(90deg, #E8ECF4 25%, #F4F6FA 50%, #E8ECF4 75%); background-size: 200% 100%; animation: ac-shimmer 1.4s infinite; } @media (max-width: 992px) { .ac-skeleton-row { grid-template-columns: 1fr; } } /* ── Section cards (glass premium) ──────────────────────── */ .ac-section-card { background: var(--ac-glass-surface); backdrop-filter: blur(var(--ac-glass-blur)); -webkit-backdrop-filter: blur(var(--ac-glass-blur)); border: 1px solid var(--ac-glass-border); border-radius: var(--ac-radius-xl); padding: var(--ac-card-padding); box-shadow: var(--ac-shadow-md); transition: border-color var(--ac-transition-medium), box-shadow var(--ac-transition-medium); } .ac-section-card:hover { border-color: rgba(108, 78, 255, 0.22); box-shadow: var(--ac-shadow-lg); } .ac-section-card .ac-section-header { margin-bottom: 24px; } .ac-section-card .ac-title-lg { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ac-text-main); } /* ── Scroll reveal ──────────────────────────────────────── */ .ac-reveal, .ac-section-card { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--ac-reveal-delay, 0ms); } .ac-revealed { opacity: 1; transform: translateY(0); } /* ── Mobile section nav (app-like) ──────────────────────── */ .ac-profile-section-nav { display: none; position: sticky; top: 0; z-index: 50; margin: 0 -4px 16px; padding: 10px 4px; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: rgba(248, 250, 252, 0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--ac-border-color); } .ac-profile-section-nav::-webkit-scrollbar { display: none; } .ac-profile-section-nav a { flex-shrink: 0; padding: 8px 16px; font-size: 0.82rem; font-weight: 700; color: var(--ac-text-muted); border-radius: var(--ac-radius-full); border: 1px solid transparent; transition: all var(--ac-transition-fast); } .ac-profile-section-nav a:hover, .ac-profile-section-nav a.active { color: var(--ac-primary); background: rgba(108, 78, 255, 0.08); border-color: rgba(108, 78, 255, 0.2); } @media (max-width: 992px) { .ac-profile-section-nav { display: flex; } } /* ── Hero refinements ───────────────────────────────────── */ .ac-hero { padding-bottom: 32px; } .ac-hero-actions-container { position: relative; top: auto; right: auto; margin-top: 8px; flex-wrap: wrap; justify-content: flex-start; } .ac-hero-content-wrapper { margin-top: -140px; gap: 40px; flex-wrap: wrap; } .ac-hero-stats-bento { margin-top: 28px; background: var(--ac-glass-surface); backdrop-filter: blur(20px); border: 1px solid var(--ac-glass-border); box-shadow: var(--ac-shadow-md); } .ac-hero-stats-bento::before { display: none; } .ac-hero-stat-bento-val { font-size: 32px; background: linear-gradient(135deg, var(--ac-text-main), var(--ac-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ac-hero-stat-bento-label { color: var(--ac-text-muted); } /* ── Gallery masonry upgrade ────────────────────────────── */ .ac-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ac-gallery-item { position: relative; overflow: hidden; border-radius: var(--ac-radius-lg); border: 1px solid var(--ac-border-color); cursor: pointer; transition: transform var(--ac-transition-medium), box-shadow var(--ac-transition-medium); min-height: 220px; } .ac-gallery-item:hover { transform: translateY(-4px); box-shadow: var(--ac-shadow-lg); } .ac-gallery-item .ac-gallery-image { width: 100%; height: 100%; object-fit: cover; min-height: 220px; } .ac-gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 42, 0.88) 0%, transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; opacity: 0; transition: opacity var(--ac-transition-medium); } .ac-gallery-item:hover .ac-gallery-overlay { opacity: 1; } .ac-gallery-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 0.72rem; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; border-radius: 6px; padding: 4px 10px; } .ac-gallery-overlay-label { font-size: 0.72rem; font-weight: 700; color: var(--ac-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .ac-gallery-overlay-title { font-size: 0.95rem; font-weight: 600; color: #fff; margin: 0; } /* ── Video cards ────────────────────────────────────────── */ .ac-portfolio-tabs { display: flex; gap: 8px; border-bottom: none; margin-bottom: 24px; padding-bottom: 0; flex-wrap: wrap; } .ac-portfolio-tabs .ac-tab-btn { padding: 10px 18px; border-radius: var(--ac-radius-full); border: 1px solid var(--ac-border-color); background: var(--ac-surface); font-weight: 600; font-size: 0.88rem; color: var(--ac-text-muted); transition: all var(--ac-transition-fast); } .ac-portfolio-tabs .ac-tab-btn.active { background: linear-gradient(135deg, var(--ac-primary), #7C3AED); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(108, 78, 255, 0.35); } /* ── Video cards ────────────────────────────────────────── */ .ac-video-card { background: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-lg); overflow: hidden; cursor: pointer; transition: all var(--ac-transition-medium); } .ac-video-card:hover { transform: translateY(-6px); border-color: rgba(108, 78, 255, 0.35); box-shadow: var(--ac-shadow-lg); } .ac-play-circle { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; background: linear-gradient(135deg, var(--ac-primary), var(--ac-secondary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 12px 32px rgba(108, 78, 255, 0.4); transition: transform var(--ac-transition-elastic); } .ac-video-card:hover .ac-play-circle { transform: scale(1.12); } .ac-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .ac-video-poster-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0f172a; } .ac-video-poster { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ac-transition-slow); } .ac-video-card:hover .ac-video-poster { transform: scale(1.05); } .ac-video-poster-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); } .ac-video-card-body { padding: 16px; } .ac-video-card-title { font-size: 0.95rem; font-weight: 600; color: var(--ac-text-main); margin-bottom: 4px; line-height: 1.4; } .ac-video-card-meta { font-size: 0.8rem; color: var(--ac-text-muted); } /* ── Availability calendar (full styles) ────────────────── */ .ac-availability-container { background: transparent; } .ac-availability-container .ac-calendar-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .ac-availability-container .ac-header-text .ac-text-subtitle { font-size: 0.88rem; color: var(--ac-text-muted); margin-top: 4px; } .ac-month-nav { display: flex; align-items: center; gap: 12px; background: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-full); padding: 6px 12px; } .ac-nav-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ac-text-main); border: 1px solid var(--ac-border-color); transition: all var(--ac-transition-fast); } .ac-nav-btn:hover { background: rgba(108, 78, 255, 0.1); border-color: var(--ac-primary); color: var(--ac-primary); } .ac-month-label { font-weight: 700; font-size: 0.95rem; min-width: 120px; text-align: center; } .ac-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .ac-weekday { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ac-text-subtle); text-align: center; padding-bottom: 8px; } .ac-day-empty { aspect-ratio: 1; } .ac-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 600; border-radius: var(--ac-radius-md); border: 1px solid var(--ac-border-color); background: var(--ac-surface); cursor: pointer; transition: all var(--ac-transition-fast); } .ac-day-available { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.25); color: var(--ac-success); } .ac-day-available:hover { background: var(--ac-success); color: #fff; transform: scale(1.06); } .ac-day-hold { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: var(--ac-warning); } .ac-day-unavailable { background: rgba(239, 68, 68, 0.06); color: var(--ac-danger); opacity: 0.55; cursor: not-allowed; } .ac-day-past { opacity: 0.35; cursor: not-allowed; } .ac-day-selected { border: 2px solid var(--ac-primary) !important; box-shadow: 0 0 0 4px rgba(108, 78, 255, 0.2); transform: scale(1.05); } .ac-calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ac-border-color); font-size: 0.82rem; } .ac-legend-item { display: flex; align-items: center; gap: 8px; color: var(--ac-text-muted); } .ac-dot { width: 10px; height: 10px; border-radius: 50%; } .ac-bg-available { background: var(--ac-success); } .ac-bg-hold { background: var(--ac-warning); } .ac-bg-unavailable { background: var(--ac-danger); } .ac-action-panel { margin-top: 20px; padding: 20px; border-radius: var(--ac-radius-lg); background: rgba(108, 78, 255, 0.06); border: 1px solid rgba(108, 78, 255, 0.15); opacity: 0; transform: translateY(8px); transition: all var(--ac-transition-medium); } .ac-action-panel.ac-action-panel-visible { opacity: 1; transform: translateY(0); } .ac-panel-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .ac-panel-info h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; } .ac-panel-info p { font-size: 0.88rem; color: var(--ac-text-muted); margin: 0; } .ac-status-pill { display: inline-flex; padding: 4px 12px; border-radius: var(--ac-radius-full); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .ac-status-available { background: rgba(34, 197, 94, 0.15); color: var(--ac-success); } .ac-status-hold { background: rgba(245, 158, 11, 0.15); color: var(--ac-warning); } .ac-status-unavailable, .ac-status-past { background: rgba(239, 68, 68, 0.1); color: var(--ac-danger); } /* ── Pricing / packages ─────────────────────────────────── */ .ac-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .ac-pricing-card { background: var(--ac-glass-surface); backdrop-filter: blur(16px); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-xl); padding: 28px; display: flex; flex-direction: column; transition: all var(--ac-transition-medium); } .ac-pricing-card-recommended { border: 2px solid var(--ac-primary); box-shadow: 0 16px 40px rgba(108, 78, 255, 0.12); } .ac-recommended-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--ac-primary), #7C3AED); color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 14px; border-radius: var(--ac-radius-full); white-space: nowrap; box-shadow: 0 8px 20px rgba(108, 78, 255, 0.35); } /* ── Reviews ────────────────────────────────────────────── */ .ac-reviews-summary-card { background: var(--ac-glass-surface); backdrop-filter: blur(16px); border: 1px solid var(--ac-glass-border); border-radius: var(--ac-radius-xl); padding: 32px; margin-bottom: 28px; } .ac-review-card { background: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-lg); padding: 24px; transition: border-color var(--ac-transition-medium), box-shadow var(--ac-transition-medium); } .ac-review-card:hover { border-color: rgba(108, 78, 255, 0.25); box-shadow: var(--ac-shadow-md); } /* ── Brands marquee ─────────────────────────────────────── */ .ac-brands-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ac-brands-marquee-inner { display: flex; width: max-content; animation: ac-marquee 28s linear infinite; } .ac-brands-marquee-track { display: flex; align-items: center; gap: 24px; padding: 8px 12px; } @keyframes ac-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ac-brand-logo-card { flex-shrink: 0; width: 140px; height: 72px; display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-md); transition: all var(--ac-transition-medium); } .ac-brand-logo-card:hover { transform: translateY(-3px); border-color: rgba(108, 78, 255, 0.35); box-shadow: var(--ac-shadow-md); } .ac-brand-logo-img { max-height: 36px; max-width: 100%; object-fit: contain; filter: grayscale(1) opacity(0.45); transition: filter var(--ac-transition-medium); } .ac-brand-logo-card:hover .ac-brand-logo-img { filter: grayscale(0) opacity(1); } .ac-brand-logo-text { font-size: 0.82rem; font-weight: 700; color: var(--ac-text-subtle); letter-spacing: 0.05em; text-transform: uppercase; } .ac-brand-logo-card:hover .ac-brand-logo-text { color: var(--ac-primary); } /* ── FAQ glass accordion ────────────────────────────────── */ .ac-faq-accordion-group { display: flex; flex-direction: column; gap: 10px; } .ac-faq-item { background: var(--ac-surface); border: 1px solid var(--ac-border-color); border-radius: var(--ac-radius-lg); overflow: hidden; transition: border-color var(--ac-transition-medium); } .ac-faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: transparent; cursor: pointer; text-align: left; font-size: 1rem; font-weight: 600; color: var(--ac-text-main); } .ac-faq-content { max-height: 0; overflow: hidden; padding: 0 24px; transition: max-height var(--ac-transition-medium) ease-out; } .ac-faq-content p { font-size: 0.9rem; color: var(--ac-text-muted); line-height: 1.65; margin: 0; padding-bottom: 20px; } .ac-faq-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(108, 78, 255, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--ac-transition-medium), background var(--ac-transition-medium); } .ac-reviews-summary-inner { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center; } @media (max-width: 768px) { .ac-reviews-summary-inner { grid-template-columns: 1fr; } } /* ── Booking sidebar glass sticky ───────────────────────── */ .ac-sidebar-sticky { position: sticky; top: 24px; z-index: 40; } .ac-booking-card { background: var(--ac-glass-surface) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--ac-glass-border) !important; border-radius: var(--ac-radius-xl) !important; box-shadow: var(--ac-shadow-xl) !important; } .ac-booking-pulse { animation: ac-booking-pulse 1.8s ease; } @keyframes ac-booking-pulse { 0%, 100% { box-shadow: var(--ac-shadow-xl); } 50% { box-shadow: 0 0 0 4px rgba(108, 78, 255, 0.25), var(--ac-shadow-xl); } } #manager-card { background: var(--ac-glass-surface) !important; backdrop-filter: blur(20px); border: 1px solid var(--ac-glass-border) !important; } /* ── Empty states (premium) ─────────────────────────────── */ .ac-empty-state { padding: 48px 32px; background: linear-gradient(180deg, rgba(108, 78, 255, 0.04) 0%, transparent 100%); border: 1px dashed rgba(108, 78, 255, 0.2); border-radius: var(--ac-radius-xl); } .ac-empty-icon { width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; background: rgba(108, 78, 255, 0.1); border-radius: 50%; color: var(--ac-primary); } /* ── Mobile sticky CTA (light glass) ──────────────────────── */ .ac-mobile-sticky-cta { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border-top: 1px solid var(--ac-border-color); box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.08); padding: 12px 20px; gap: 12px; } .ac-mobile-cta-price-val { color: var(--ac-primary); font-size: 1.25rem; } .ac-mobile-cta-book { flex: 1; max-width: 200px; } /* ── Lightbox / modal polish ────────────────────────────── */ #ac-portfolio-lightbox-modal, #ac-portfolio-video-modal { backdrop-filter: blur(16px); } /* ── Responsive profile layout ──────────────────────────── */ @media (max-width: 1200px) { .ac-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 992px) { .ac-hero-content-wrapper { margin-top: -100px; flex-direction: column; align-items: center; text-align: center; } .ac-hero-info { flex-direction: column; align-items: center; } .ac-hero-meta { align-items: center; text-align: center; padding-bottom: 0; } .ac-hero-actions-container { justify-content: center; width: 100%; } .ac-hero-stats-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-profile-sidebar-col .ac-sidebar-sticky { position: static; } :root { --ac-section-gap: 28px; } } @media (max-width: 576px) { .ac-gallery-grid { grid-template-columns: 1fr; } .ac-calendar-grid { gap: 4px; } .ac-day { font-size: 0.8rem; border-radius: 8px; } .ac-section-card { padding: 20px; } }