Contact Us | Piohote Support /* Apple Design System - Optimized for clarity, spacing, and visual hierarchy */ #piohote-contact-wrapper { /* Apple-inspired color palette */ --bg-primary: #f5f5f7; /* Light background (Apple light gray) */ --bg-secondary: #ffffff; /* Card background */ --text-primary: #1d1d1f; /* Primary text (Apple dark gray) */ --text-secondary: #86868b; /* Secondary text (Apple light gray) */ --text-accent: #0071e3; /* Accent color (Apple Blue) */ --border-color: #d1d1d6; /* Border color */ --success-color: #34c759; /* Success green (Apple green) */ --icon-color: #8e8e93; /* Neutral icon color (Apple System Gray) */ /* Apple Blue variations */ --primary-color: #0071e3; /* Apple Blue primary */ --primary-hover: #0056b3; /* Hover state */ --accent-color: #0071e3; /* Accent color */ /* Typography system - Apple San Francisco inspired */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Font scale - based on 17px base (Apple typical) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* Spacing system - 8px grid (Apple typical) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Layout system */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; /* Component styling */ --border-radius: 12px; /* Apple rounded corners */ --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Subtle shadow */ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Apple smooth transition */ } #piohote-contact-wrapper * { margin: 0; padding: 0; box-sizing: border-box; } /* Apple-inspired body styling */ #piohote-contact-wrapper body { font-family: var(--font-family); background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; font-size: var(--text-base); font-weight: var(--font-weight-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #piohote-contact-wrapper .container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: var(--space-12) var(--space-6); flex: 1; } #piohote-contact-wrapper .page-header { text-align: center; margin-bottom: var(--space-16); padding: 0 var(--space-4); } #piohote-contact-wrapper .page-header h1 { font-size: var(--text-4xl); color: var(--text-primary); margin-bottom: var(--space-4); font-weight: var(--font-weight-bold); line-height: 1.2; letter-spacing: -0.02em; } #piohote-contact-wrapper .page-header p { font-size: var(--text-lg); color: var(--text-secondary); max-width: 700px; margin: 0 auto; line-height: 1.6; font-weight: var(--font-weight-regular); } #piohote-contact-wrapper .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-bottom: var(--space-12); } @media (min-width: 768px) { #piohote-contact-wrapper .contact-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); } } #piohote-contact-wrapper .contact-card { background: var(--bg-secondary); border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: var(--space-8); transition: var(--transition); border: 1px solid var(--border-color); overflow: hidden; } #piohote-contact-wrapper .contact-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); border-color: #aeaeb2; /* Neutral gray border instead of Apple Blue */ } #piohote-contact-wrapper .contact-card h2 { font-size: var(--text-xl); color: var(--text-primary); margin-bottom: var(--space-6); display: flex; align-items: center; font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; } #piohote-contact-wrapper .contact-card h2 i { margin-right: var(--space-4); color: var(--icon-color); /* Neutral gray instead of Apple Blue */ } #piohote-contact-wrapper .contact-info { margin-bottom: var(--space-6); } /* Apple-style contact item with increased spacing */ #piohote-contact-wrapper .contact-item { position: static !important; top: auto !important; left: auto !important; display: flex; align-items: flex-start; margin-bottom: var(--space-6); padding: var(--space-2) 0; } #piohote-contact-wrapper .contact-detail { flex-grow: 1; word-wrap: break-word; overflow-wrap: break-word; } #piohote-contact-wrapper .contact-detail h3 { font-size: var(--text-base); color: var(--text-primary); margin-bottom: var(--space-1); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; } #piohote-contact-wrapper .contact-detail p, #piohote-contact-wrapper .contact-detail a { color: var(--text-secondary); text-decoration: none; transition: var(--transition); font-size: var(--text-sm); line-height: 1.6; font-weight: var(--font-weight-regular); } #piohote-contact-wrapper .contact-detail a:hover { color: #6d6d71; /* Darker neutral gray for hover state */ text-decoration: underline; } #piohote-contact-wrapper .contact-icon { /* Apple-style icon - Neutral Scheme */ width: 48px; height: 48px; background: rgba(142, 142, 147, 0.08); /* Apple System Gray 8% opacity */ border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: var(--space-4); flex-shrink: 0; margin-top: var(--space-1); } #piohote-contact-wrapper .contact-icon i { /* Apple-style icon color - Neutral Scheme */ font-size: 20px; line-height: 1; color: var(--icon-color) !important; /* Neutral gray instead of Apple Blue */ top: auto !important; left: auto !important; margin: 0 !important; } #piohote-contact-wrapper .hours { background: rgba(142, 142, 147, 0.04); /* Neutral gray background */ border-radius: var(--border-radius); padding: var(--space-4); margin-top: var(--space-6); border: 1px solid var(--border-color); } #piohote-contact-wrapper .hour-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-color); font-size: var(--text-sm); } #piohote-contact-wrapper .hour-row:last-child { border-bottom: none; } #piohote-contact-wrapper .hour-row span:first-child { font-weight: var(--font-weight-medium); color: var(--text-primary); } #piohote-contact-wrapper .hour-row span:last-child { color: var(--text-secondary); font-weight: var(--font-weight-regular); } #piohote-contact-wrapper .map-container { border-radius: var(--border-radius); overflow: hidden; margin-top: var(--space-6); box-shadow: var(--box-shadow); height: 300px; border: 1px solid var(--border-color); } #piohote-contact-wrapper iframe { width: 100%; height: 100%; border: 0; } #piohote-contact-wrapper .form-container { background: var(--bg-secondary); border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: var(--space-8); border: 1px solid var(--border-color); transition: var(--transition); } #piohote-contact-wrapper .form-container:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); border-color: #aeaeb2; /* Neutral gray border instead of Apple Blue */ } #piohote-contact-wrapper .form-container h2 { font-size: var(--text-xl); color: var(--text-primary); margin-bottom: var(--space-6); font-weight: var(--font-weight-semibold); text-align: center; letter-spacing: -0.01em; } #piohote-contact-wrapper .form-container form { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } #piohote-contact-wrapper .form-group { position: relative; } #piohote-contact-wrapper .form-group label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-2); color: var(--text-primary); font-weight: var(--font-weight-medium); letter-spacing: -0.01em; } #piohote-contact-wrapper .form-group input, #piohote-contact-wrapper .form-group textarea { width: 100%; padding: var(--space-4) var(--space-4); font-size: var(--text-base); border: 1px solid var(--border-color); border-radius: var(--border-radius); transition: var(--transition); background: var(--bg-primary); font-family: var(--font-family); line-height: 1.5; } #piohote-contact-wrapper .form-group input:focus, #piohote-contact-wrapper .form-group textarea:focus { border-color: #aeaeb2; /* Neutral gray border */ background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(142, 142, 147, 0.15); /* Neutral gray shadow */ } #piohote-contact-wrapper .form-group textarea { min-height: 150px; resize: vertical; line-height: 1.6; } /* Apple-style button */ #piohote-contact-wrapper .btn { background: var(--text-accent); color: white; padding: var(--space-4) var(--space-8); font-size: var(--text-base); font-weight: var(--font-weight-semibold); border: none; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); display: block; width: 100%; margin-top: var(--space-2); letter-spacing: -0.01em; text-align: center; } #piohote-contact-wrapper .btn:hover { background: var(--primary-hover); transform: translateY(-1px); } #piohote-contact-wrapper .btn i { margin-right: var(--space-2); } #piohote-contact-wrapper #confirmation { display: none; margin-top: var(--space-6); padding: var(--space-6); background: rgba(52, 199, 89, 0.1); border-radius: var(--border-radius); text-align: center; color: var(--success-color); font-weight: var(--font-weight-semibold); border: 1px solid rgba(52, 199, 89, 0.2); font-size: var(--text-base); line-height: 1.6; } #piohote-contact-wrapper .social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); } #piohote-contact-wrapper .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-secondary); color: var(--icon-color); /* Neutral gray instead of Apple Blue */ font-size: var(--text-lg); text-decoration: none; transition: var(--transition); border: 1px solid var(--border-color); } #piohote-contact-wrapper .social-links a:hover { background: rgba(142, 142, 147, 0.12); /* Slightly darker gray background */ color: #6d6d71; /* Darker gray icon color */ border-color: #aeaeb2; /* Slightly darker border */ transform: translateY(-2px); } #piohote-contact-wrapper footer { text-align: center; padding: var(--space-8) 0; color: var(--text-secondary); font-size: var(--text-sm); background: var(--bg-secondary); border-top: 1px solid var(--border-color); font-weight: var(--font-weight-regular); } /* Mobile optimization - Apple-inspired responsive design */ @media (max-width: 767px) { #piohote-contact-wrapper .container { padding: var(--space-4) var(--space-4); } #piohote-contact-wrapper .page-header h1 { font-size: var(--text-3xl); } #piohote-contact-wrapper .page-header p { font-size: var(--text-base); } #piohote-contact-wrapper .contact-card { padding: var(--space-6); } #piohote-contact-wrapper .contact-card h2 { font-size: var(--text-lg); } #piohote-contact-wrapper .form-container { padding: var(--space-6); } #piohote-contact-wrapper .form-container h2 { font-size: var(--text-lg); } /* .contact-icon mobile styles are now inline */ #piohote-contact-wrapper .map-container { height: 250px; } #piohote-contact-wrapper .btn { padding: var(--space-4); } /* Mobile hours information optimization */ #piohote-contact-wrapper .hour-row { flex-direction: column; padding: var(--space-2) 0; } #piohote-contact-wrapper .hour-row span:first-child { margin-bottom: var(--space-1); font-weight: var(--font-weight-semibold); } } @media (max-width: 480px) { #piohote-contact-wrapper .contact-item { align-items: flex-start; } #piohote-contact-wrapper .contact-icon { margin-right: var(--space-4); } #piohote-contact-wrapper .btn { font-size: var(--text-base); padding: var(--space-4); } } /* US market specific optimization */ #piohote-contact-wrapper .us-phone-format { font-weight: 600; color: var(--text-color); } /* Line break optimization for content */ #piohote-contact-wrapper .contact-detail p { word-break: break-word; } #piohote-contact-wrapper .holiday-notice { margin-top: var(--space-6); /* 24px - 使用间距系统 */ padding: var(--space-4); /* 16px - 使用间距系统 */ border-radius: var(--border-radius); background: rgba(142, 142, 147, 0.05); /* 中性灰背景，5%透明度 */ border: 1px solid rgba(142, 142, 147, 0.1); /* 中性灰边框，10%透明度 */ color: var(--text-secondary); /* 次要文本颜色 */ } #piohote-contact-wrapper .holiday-notice h3 { color: #6d6d71; /* 深中性灰 - 比正文稍深，建立视觉层次 */ margin-bottom: var(--space-2); /* 8px - 使用间距系统 */ font-size: var(--text-sm); /* 14px - 使用字体系统 */ font-weight: var(--font-weight-medium); /* 中等字重，建立重要性 */ display: flex; align-items: center; } #piohote-contact-wrapper .holiday-notice h3 i { margin-right: var(--space-2); /* 8px - 使用间距系统 */ color: #6d6d71; /* 与标题颜色一致 */ } #piohote-contact-wrapper .holiday-notice p { font-size: var(--text-sm); /* 14px - 稍小于正文 */ line-height: 1.6; margin: 0; } /* Add simple fade-in animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }