/* ======================================== พงษ์เจริญเซอร์วิส - Stylesheet ======================================== Mobile-First Responsive Design PROFESSIONAL ORANGE & WHITE THEME สามารถแก้ไขสี ฟอนต์ และระยะห่างได้ตามต้องการ */ /* ======================================== CSS RESET & BASE STYLES ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { /* ======================================== FONT FAMILY - แก้ไขฟอนต์ได้ที่นี่ แนะนำใช้ Thai web fonts เช่น: - 'Prompt', sans-serif - 'Sarabun', sans-serif - 'Kanit', sans-serif วิธีเพิ่ม Google Fonts: เพิ่มบรรทัดนี้ใน ของ index.html: แล้วเปลี่ยน font-family เป็น: 'Prompt', sans-serif ======================================== */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 1rem; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); } /* ======================================== COLOR SCHEME - PROFESSIONAL ORANGE & WHITE THEME แก้ไขสีหลักได้ที่นี่ ======================================== คำแนะนำ: - --color-bg: สีพื้นหลังหลัก (ขาว) - --color-bg-alt: สีพื้นหลังสลับ (เทาอ่อนมาก) - --color-primary: สีส้มสำหรับปุ่มและลิงก์หลัก - --color-primary-dark: สีส้มเข้มสำหรับ hover - --color-accent: สีสำหรับการ์ดและพื้นหลังเนื้อหา - --color-text: สีข้อความหลัก (เทาเข้ม) - --color-text-muted: สีข้อความรอง (เทาปานกลาง) - --color-border: สีขอบและเส้นแบ่ง แก้ไขค่าเหล่านี้เพื่อเปลี่ยนธีมสีทั้งหมด */ :root { /* สีพื้นหลัง (Background Colors) */ --color-bg: #ffffff; /* พื้นหลังหลัก - ขาว */ --color-bg-alt: #f8f9fa; /* พื้นหลังสลับ - เทาอ่อนมาก */ --color-bg-card: #ffffff; /* พื้นหลังการ์ด - ขาว */ /* สีส้มหลัก (Primary Orange) */ --color-primary: #f97316; /* ส้มสด - ปุ่มและลิงก์หลัก */ --color-primary-dark: #ea580c; /* ส้มเข้ม - hover state */ --color-primary-light: #fb923c;/* ส้มอ่อน - highlights */ /* สีเสริม (Accent Colors) */ --color-accent: #fff7ed; /* ส้มอ่อนมาก - สำหรับ backgrounds */ --color-accent-hover: #ffedd5; /* ส้มอ่อน - hover backgrounds */ /* สีข้อความ (Text Colors) */ --color-text: #1f2937; /* ข้อความหลัก - เทาเข้ม */ --color-text-muted: #6b7280; /* ข้อความรอง - เทาปานกลาง */ --color-text-dark: #111827; /* ข้อความเข้มมาก */ /* สีขอบ (Border Colors) */ --color-border: #e5e7eb; /* ขอบการ์ดและ dividers */ --color-border-light: #f3f4f6; /* ขอบอ่อนกว่า */ /* สีสำเร็จและเตือน (Status Colors) */ --color-success: #22c55e; /* เขียว - สำเร็จ */ --color-warning: #eab308; /* เหลือง - เตือน */ --color-info: #0ea5e9; /* ฟ้า - ข้อมูล */ /* เงา (Shadows) */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 20px rgba(249, 115, 22, 0.25); /* เงาเรืองแสงส้ม */ /* ระยะห่าง (Spacing) */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 3rem; --spacing-xl: 4rem; /* ขนาด Container */ --container-width: 1200px; } /* ======================================== CONTAINER ======================================== */ .container { max-width: var(--container-width); margin: 0 auto; padding: 0 1rem; } /* Desktop */ @media (min-width: 768px) { .container { padding: 0 2rem; } } /* ======================================== TYPOGRAPHY ======================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--color-text); margin-bottom: 1rem; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } p { margin-bottom: 1rem; } a { color: var(--color-primary); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--color-primary-light); } /* Tablet & Desktop */ @media (min-width: 768px) { h1 { font-size: 3rem; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; } } /* ======================================== BUTTONS - แก้ไขสีปุ่มได้ที่นี่ ======================================== */ .btn { display: inline-block; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-sm); } /* ปุ่มหลัก - ส้ม (Primary Button) */ .btn-primary { background-color: var(--color-primary); color: var(--color-text); border: 2px solid var(--color-primary); } .btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-glow); color: var(--color-text); } /* ปุ่มรอง - โปร่งใสมีขอบ (Secondary/Ghost Button) */ .btn-secondary { background-color: transparent; color: var(--color-text); border: 2px solid var(--color-border-light); } .btn-secondary:hover { background-color: var(--color-accent-hover); border-color: var(--color-primary); color: var(--color-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-large { padding: 1rem 2rem; font-size: 1.125rem; } /* ======================================== HEADER - เมนูด้านบน (Sticky) แก้ไขสี Header และ Navigation ได้ที่นี่ ======================================== */ .header { background-color: var(--color-bg); box-shadow: var(--shadow-md); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 1000; padding: 1rem 0; backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.95); } .header-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo a { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); text-decoration: none; transition: color 0.3s ease; } .logo a:hover { color: var(--color-primary-light); } /* Mobile Menu Toggle Button (Hamburger) */ .menu-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1001; } .menu-toggle span { width: 25px; height: 3px; background-color: var(--color-text); border-radius: 2px; transition: all 0.3s ease; } /* Navigation Menu */ .nav { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background-color: var(--color-bg-alt); box-shadow: var(--shadow-lg); border-left: 1px solid var(--color-border); transition: right 0.3s ease; padding: 5rem 2rem 2rem; overflow-y: auto; } .nav.active { right: 0; } .nav-list { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; } .nav-list a { color: var(--color-text); font-weight: 500; font-size: 1.125rem; transition: all 0.3s ease; padding: 0.5rem 0; border-left: 3px solid transparent; padding-left: 1rem; } .nav-list a:hover { color: var(--color-primary); border-left-color: var(--color-primary); } /* Header Phone */ .header-phone { display: none; } /* Desktop Navigation */ @media (min-width: 768px) { .menu-toggle { display: none; } .nav { position: static; width: auto; height: auto; background: none; box-shadow: none; border: none; padding: 0; overflow: visible; } .nav-list { flex-direction: row; gap: 2rem; } .nav-list a { font-size: 1rem; border-left: none; padding-left: 0; border-bottom: 2px solid transparent; padding-bottom: 0.25rem; } .nav-list a:hover { border-bottom-color: var(--color-primary); border-left-color: transparent; } .header-phone { display: block; } .phone-link { display: flex; align-items: center; gap: 0.5rem; color: var(--color-primary); font-weight: 600; font-size: 1.125rem; transition: color 0.3s ease; } .phone-link:hover { color: var(--color-primary-light); } .phone-icon { font-size: 1.5rem; } } /* ======================================== SECTION GENERAL STYLES ======================================== */ section { padding: var(--spacing-lg) 0; } .section-title { text-align: center; margin-bottom: 1rem; color: var(--color-text); } .section-subtitle { text-align: center; color: var(--color-text-muted); font-size: 1.125rem; margin-bottom: var(--spacing-md); max-width: 800px; margin-left: auto; margin-right: auto; } /* ======================================== HERO SECTION - พื้นหลังไล่สีส้ม พร้อมภาพพื้นหลัง ======================================== */ .hero { background: linear-gradient(135deg, rgba(249, 115, 22, 0.9) 0%, rgba(234, 88, 12, 0.85) 50%, rgba(194, 65, 12, 0.9) 100%), url('images/car_in_lift.jpeg') center/cover no-repeat; color: #ffffff; padding: var(--spacing-xl) 0; min-height: 80vh; display: flex; align-items: center; position: relative; overflow: hidden; } /* พื้นหลังสำรอง สำหรับเบราว์เซอร์ที่ไม่รองรับ */ .hero-bg-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); pointer-events: none; z-index: 1; } /* เพิ่มเอฟเฟกต์พื้นหลังเรืองแสงเบาๆ */ .hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 1; } .hero-content { text-align: center; position: relative; z-index: 2; } .hero-title { color: #ffffff; margin-bottom: var(--spacing-md); text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); } .hero-subtitle-text { display: block; font-size: 0.6em; font-weight: 500; margin-top: 0.5rem; color: rgba(255, 255, 255, 0.9); } .hero-description { font-size: 1.125rem; max-width: 700px; margin: 0 auto var(--spacing-md); line-height: 1.8; color: rgba(255, 255, 255, 0.9); } .hero-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: var(--spacing-md); } .badge { background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); color: #ffffff; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 500; backdrop-filter: blur(10px); } .hero-cta { display: flex; flex-direction: column; gap: 1rem; align-items: center; } @media (min-width: 640px) { .hero-cta { flex-direction: row; justify-content: center; } } /* ======================================== SERVICES SECTION - พื้นหลังขาว ======================================== */ .services { background-color: var(--color-bg); } .services-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: var(--spacing-md); } @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } } .service-card { background-color: var(--color-bg-card); padding: 2rem; border-radius: 12px; box-shadow: var(--shadow-md); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; border: 2px solid var(--color-border); } .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); border-color: var(--color-primary); } .service-icon { font-size: 3rem; margin-bottom: 1rem; } .service-title { color: var(--color-primary-light); margin-bottom: 1rem; } .service-description { color: var(--color-text-muted); line-height: 1.8; } .services-note { background-color: var(--color-bg-alt); padding: 1.5rem; border-radius: 8px; border-left: 4px solid var(--color-primary); margin-top: var(--spacing-md); } .services-note p { margin-bottom: 0; color: var(--color-text-muted); } .services-note a { font-weight: 600; color: var(--color-primary); } /* ======================================== GALLERY SECTION - แกลเลอรี่ภาพอู่ซ่อมรถ ======================================== */ .gallery { background-color: var(--color-bg-alt); padding: var(--spacing-xl) 0; } .gallery-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: var(--spacing-md); } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-item { position: relative; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow-md); transition: transform 0.3s ease, box-shadow 0.3s ease; aspect-ratio: 4/3; background-color: var(--color-bg-card); } .gallery-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-glow); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(249, 115, 22, 0.95) 0%, rgba(249, 115, 22, 0.8) 70%, transparent 100%); padding: 2rem 1.5rem 1.5rem; transform: translateY(100%); transition: transform 0.3s ease; } .gallery-item:hover .gallery-overlay { transform: translateY(0); } .gallery-text h3 { color: #ffffff; font-size: 1.25rem; margin-bottom: 0.5rem; } .gallery-text p { color: rgba(255, 255, 255, 0.9); font-size: 0.9rem; margin-bottom: 0; line-height: 1.5; } /* Mobile: Show overlay by default on small screens */ @media (max-width: 767px) { .gallery-overlay { transform: translateY(0); background: linear-gradient(to top, rgba(249, 115, 22, 0.9) 0%, rgba(249, 115, 22, 0.7) 60%, transparent 100%); padding: 1.5rem 1rem 1rem; } .gallery-text h3 { font-size: 1.1rem; } .gallery-text p { font-size: 0.85rem; } } /* ======================================== WHY US SECTION - พื้นหลังสลับ ======================================== */ .why-us { background-color: var(--color-bg-alt); } .why-us-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 640px) { .why-us-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .why-us-grid { grid-template-columns: repeat(4, 1fr); } } .why-card { background-color: var(--color-bg-card); padding: 2rem; border-radius: 12px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); transition: all 0.3s ease; } .why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .why-icon { font-size: 3rem; margin-bottom: 1rem; } .why-card h3 { color: var(--color-primary-light); font-size: 1.25rem; margin-bottom: 1rem; } .why-card p { color: var(--color-text-muted); margin-bottom: 0; line-height: 1.7; } /* ======================================== REVIEWS SECTION - พื้นหลังสลับ ======================================== */ .reviews { background-color: var(--color-bg); } .reviews-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } } .review-card { background-color: var(--color-bg-card); padding: 2rem; border-radius: 12px; border-left: 4px solid var(--color-primary); box-shadow: var(--shadow-sm); transition: all 0.3s ease; } .review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .review-stars { font-size: 1.25rem; margin-bottom: 1rem; color: var(--color-warning); } .review-text { font-style: italic; color: var(--color-text); line-height: 1.7; margin-bottom: 1rem; } .review-author { font-style: normal; color: var(--color-text-muted); font-weight: 600; font-size: 0.875rem; } /* ======================================== FAQ SECTION - พื้นหลังสลับ ======================================== */ .faq { background-color: var(--color-bg-alt); } .faq-list { max-width: 900px; margin: 0 auto; } .faq-item { background-color: var(--color-bg-card); padding: 1.5rem; border-radius: 8px; margin-bottom: 1rem; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); transition: box-shadow 0.3s ease, border-color 0.3s ease; } .faq-item:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); } .faq-question { color: var(--color-primary-light); font-size: 1.125rem; margin-bottom: 0.75rem; } .faq-answer { color: var(--color-text-muted); } .faq-answer p { margin-bottom: 0; line-height: 1.8; } /* ======================================== LOCATION SECTION - พื้นหลังสลับ ======================================== */ .location { background-color: var(--color-bg); } .location-content { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: var(--spacing-md); } @media (min-width: 1024px) { .location-content { grid-template-columns: 1fr 1.5fr; gap: 3rem; } } .location-info { background-color: var(--color-bg-card); padding: 2rem; border-radius: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); } .location-info h3 { color: var(--color-primary-light); margin-bottom: 1.5rem; } .info-item { margin-bottom: 1.5rem; } .info-item:last-of-type { margin-bottom: 2rem; } .info-item strong { display: block; color: var(--color-text); margin-bottom: 0.5rem; } .info-item p { color: var(--color-text-muted); margin-bottom: 0; line-height: 1.7; } .contact-link { color: var(--color-primary); font-weight: 600; transition: color 0.3s ease; } .contact-link:hover { color: var(--color-primary-light); text-decoration: underline; } .location-buttons { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .location-buttons { flex-direction: row; } } .location-map { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); height: 450px; } .location-map iframe { width: 100%; height: 100%; border: 0; } /* ======================================== CONTACT SECTION - ไล่สีส้ม ======================================== */ .contact { background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%); color: #ffffff; padding: var(--spacing-xl) 0; position: relative; overflow: hidden; } /* เอฟเฟกต์เรืองแสง */ .contact::before { content: ''; position: absolute; bottom: -50%; left: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); pointer-events: none; } .contact .section-title, .contact .section-subtitle { color: #ffffff; position: relative; z-index: 1; } .contact-methods { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: var(--spacing-lg) 0; position: relative; z-index: 1; } @media (min-width: 768px) { .contact-methods { grid-template-columns: repeat(3, 1fr); } } .contact-method { background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); padding: 2rem; border-radius: 12px; text-align: center; backdrop-filter: blur(10px); transition: all 0.3s ease; } .contact-method:hover { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .contact-icon { font-size: 3rem; margin-bottom: 1rem; } .contact-method h3 { color: #ffffff; margin-bottom: 1rem; } .contact-link-large { color: #ffffff; font-size: 1.25rem; font-weight: 600; text-decoration: none; transition: color 0.3s ease; } .contact-link-large:hover { color: rgba(255, 255, 255, 0.8); text-decoration: underline; } .final-cta { display: flex; flex-direction: column; gap: 1rem; align-items: center; margin-top: var(--spacing-md); position: relative; z-index: 1; } @media (min-width: 640px) { .final-cta { flex-direction: row; justify-content: center; } } /* ======================================== FOOTER - ขาว ======================================== */ .footer { background-color: var(--color-bg); color: var(--color-text); padding: var(--spacing-lg) 0 var(--spacing-md); border-top: 1px solid var(--color-border); } .footer-content { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); } @media (min-width: 768px) { .footer-content { grid-template-columns: repeat(3, 1fr); } } .footer h3, .footer h4 { color: var(--color-text); margin-bottom: 1rem; } .footer p { color: var(--color-text-muted); line-height: 1.8; } .footer a { color: var(--color-text-muted); transition: color 0.3s ease; } .footer a:hover { color: var(--color-primary); } .footer-links ul { list-style: none; } .footer-links li { margin-bottom: 0.5rem; } .footer-bottom { text-align: center; color: var(--color-text-muted); } .footer-bottom p { margin-bottom: 0.5rem; } .footer-keywords { font-size: 0.875rem; opacity: 0.7; } /* ======================================== UTILITIES ======================================== */ /* Smooth Scroll Offset for Sticky Header */ section[id] { scroll-margin-top: 80px; } /* Accessibility - Skip to main content */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--primary-color); color: white; padding: 8px; text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; } /* Print Styles */ @media print { .header, .hero-cta, .location-buttons, .final-cta, .menu-toggle { display: none; } body { background-color: white; color: black; } .hero, .contact, section { background: white !important; color: black !important; } h1, h2, h3, h4, h5, h6, p, a, span { color: black !important; } }