/* Theme Name: Wings Computer Theme Theme URI: https://wingscomputer.com.hk/ Author: Cosmas Chan Author URI: https://www.cosmas.io Description: Custom WordPress theme for WINGS COMPUTER (HONG KONG) LIMITED (翼電腦(香港)有限公司). Designed for high PageSpeed performance, Local SEO, and secure IT asset recovery services. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wings-theme */ /* Google Fonts import moved to HTML for pagespeed optimization */ :root { /* Color System */ --primary: #0f172a; /* Slate 900 */ --primary-light: #1e293b; /* Slate 800 */ --primary-rgb: 15, 23, 42; --secondary: #3b82f6; /* Modern Blue */ --secondary-hover: #2563eb; --accent: #10b981; /* Emerald 500 (Eco Green) */ --accent-dark: #059669; /* Emerald 600 */ --accent-light: #34d399; /* Emerald 400 */ --accent-bg: #f0fdf4; /* Emerald 50 */ --accent-rgb: 16, 185, 129; --text-main: #334155; /* Slate 700 */ --text-dark: #0f172a; /* Slate 900 */ --text-muted: #64748b; /* Slate 500 */ --text-light: #f8fafc; /* Slate 50 */ --bg-main: #ffffff; --bg-secondary: #f8fafc; /* Slate 50 */ --bg-accent: #f1f5f9; /* Slate 100 */ --bg-dark: #0f172a; /* Footer & Dark Hero */ --bg-glass: rgba(255, 255, 255, 0.8); --border-color: #e2e8f0; /* Slate 200 */ --border-light: #f1f5f9; /* Slate 100 */ /* Shadows */ --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Border Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Layout */ --container-width: 1280px; --header-height: 80px; } /* Reset & Base Styles */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Noto Sans HK', 'Inter', sans-serif; color: var(--text-main); background-color: var(--bg-main); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Noto Sans HK', 'Outfit', sans-serif; color: var(--text-dark); font-weight: 700; line-height: 1.25; margin-bottom: 0.5em; } h1 { font-size: 2.5rem; letter-spacing: -0.02em; } h2 { font-size: 2rem; letter-spacing: -0.01em; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } p { margin-bottom: 1rem; } a { color: inherit; text-decoration: none; transition: var(--transition-fast); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } /* Utilities */ .container { width: 100%; max-width: var(--container-width); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .section { padding-top: 80px; padding-bottom: 80px; } .section-bg-sec { background-color: var(--bg-secondary); } .section-bg-dark { background-color: var(--bg-dark); color: var(--text-light); } .section-bg-dark h1, .section-bg-dark h2, .section-bg-dark h3, .section-bg-dark h4 { color: #ffffff; } .text-center { text-align: center; } .text-right { text-align: right; } .text-accent { color: var(--accent); } .font-english { font-family: 'Outfit', sans-serif; } .section-title { margin-bottom: 50px; text-align: center; position: relative; } .section-title h2 { font-size: 2.25rem; margin-bottom: 15px; } .section-title p { color: var(--text-muted); max-width: 600px; margin-left: auto; margin-right: auto; font-size: 1.1rem; } .section-title::after { content: ''; display: block; width: 60px; height: 4px; background-color: var(--accent); margin: 15px auto 0 auto; border-radius: var(--radius-full); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Noto Sans HK', sans-serif; font-weight: 500; padding: 12px 28px; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-normal); border: 1px solid transparent; font-size: 0.95rem; gap: 8px; } .btn-primary { background-color: var(--primary); color: #ffffff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-accent { background-color: var(--accent); color: #ffffff; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4); } .btn-accent:hover { background-color: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5); } .btn-outline { background-color: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background-color: var(--bg-accent); transform: translateY(-2px); } .btn-outline-white { background-color: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.4); } .btn-outline-white:hover { background-color: rgba(255, 255, 255, 0.1); border-color: #ffffff; transform: translateY(-2px); } .btn-whatsapp { background-color: #25d366; color: #ffffff; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3); } .btn-whatsapp:hover { background-color: #20ba5a; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); } /* Header & Navigation */ .header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: var(--bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); z-index: 1000; transition: var(--transition-normal); } .header.scrolled { height: 70px; box-shadow: var(--shadow-md); } .header-container { display: flex; align-items: center; justify-content: space-between; height: 100%; } .logo img { height: 60px; width: auto; transition: var(--transition-normal); } .header.scrolled .logo img { height: 50px; } .nav-list { display: flex; align-items: center; gap: 32px; } .nav-link { font-weight: 500; font-size: 1rem; color: var(--text-main); padding: 8px 0; position: relative; } .nav-link:hover { color: var(--primary); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: var(--transition-normal); } .nav-link.active { color: var(--accent-dark); font-weight: 700; } .nav-link.active::after { width: 100%; } .nav-link:hover::after { width: 100%; } .header-actions { display: flex; align-items: center; gap: 16px; } /* Hamburger Mobile Toggle */ .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; } .hamburger-box { width: 24px; height: 18px; display: block; position: relative; } .hamburger-inner { width: 100%; height: 2px; background-color: var(--text-dark); position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: var(--transition-fast); } .hamburger-inner::before, .hamburger-inner::after { content: ''; width: 100%; height: 2px; background-color: var(--text-dark); position: absolute; left: 0; transition: var(--transition-normal); } .hamburger-inner::before { top: -8px; } .hamburger-inner::after { bottom: -8px; } /* Hamburger Active State */ .hamburger.active .hamburger-inner { background-color: transparent; } .hamburger.active .hamburger-inner::before { transform: rotate(45deg); top: 0; } .hamburger.active .hamburger-inner::after { transform: rotate(-45deg); bottom: 0; } /* Mobile Nav Drawer */ .mobile-nav { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background-color: #ffffff; box-shadow: var(--shadow-xl); padding: 100px 30px 40px 30px; display: flex; flex-direction: column; gap: 24px; z-index: 999; transition: var(--transition-normal); } .mobile-nav.active { right: 0; } .mobile-nav .nav-link { font-size: 1.1rem; padding: 10px 0; } /* Hero Section */ .hero { padding-top: calc(var(--header-height) + 60px); padding-bottom: 100px; background: radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.08) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 40px; } .hero-tag { display: inline-flex; align-items: center; background-color: var(--accent-bg); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--accent-dark); font-weight: 600; font-size: 0.85rem; padding: 6px 14px; border-radius: var(--radius-full); margin-bottom: 20px; box-shadow: var(--shadow-sm); } .hero-title { font-size: 3.25rem; line-height: 1.15; margin-bottom: 20px; letter-spacing: -0.03em; } .hero-title span { background: linear-gradient(135deg, var(--accent-dark) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-desc { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 35px; max-width: 580px; } .hero-google-badge:hover { transform: translateY(-2px); opacity: 0.95; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; } .hero-stats { display: flex; gap: 40px; border-top: 1px solid var(--border-color); padding-top: 30px; } .hero-stat-item { display: flex; flex-direction: column; } .hero-stat-val { font-size: 2rem; font-weight: 700; color: var(--text-dark); font-family: 'Outfit', sans-serif; line-height: 1; margin-bottom: 5px; } .hero-stat-val span { color: var(--accent); } .hero-stat-lbl { font-size: 0.85rem; color: var(--text-muted); } .hero-image-wrapper { position: relative; width: 100%; height: 420px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); } .hero-image { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow); } .hero-image-wrapper:hover .hero-image { transform: scale(1.05); } /* Service Pillars Section */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .service-pillar-card { background-color: var(--bg-main); border-radius: var(--radius-lg); border: 1px solid var(--border-color); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-normal); display: flex; flex-direction: column; } .service-pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: rgba(16, 185, 129, 0.3); } .service-card-image { height: 240px; position: relative; overflow: hidden; } .service-card-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow); } .service-pillar-card:hover .service-card-image img { transform: scale(1.05); } .service-card-badge { position: absolute; top: 20px; left: 20px; background-color: var(--primary); color: #ffffff; font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-full); z-index: 1; box-shadow: var(--shadow-md); } .service-pillar-card:nth-child(2) .service-card-badge { background-color: var(--accent-dark); } .service-card-content { padding: 35px; flex-grow: 1; display: flex; flex-direction: column; } .service-card-content h3 { font-size: 1.6rem; margin-bottom: 15px; } .service-card-content p { color: var(--text-muted); margin-bottom: 25px; flex-grow: 1; } .service-card-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 30px; } .service-feature-item { display: flex; align-items: center; font-size: 0.9rem; font-weight: 500; color: var(--text-dark); gap: 8px; } .service-feature-item svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-dark); stroke-width: 2.5; } .service-card-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-dark); font-weight: 700; font-size: 0.95rem; } .service-card-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: var(--transition-fast); } .service-card-link:hover { color: var(--primary); } .service-card-link:hover svg { transform: translateX(4px); } /* Why Us Section */ .why-us-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: center; } .why-us-image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .why-us-image-grid img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); height: 200px; object-fit: cover; width: 100%; } .why-us-image-grid img:nth-child(2) { margin-top: 30px; } .why-us-image-grid img:nth-child(3) { margin-top: -30px; } .why-us-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .why-us-card { background-color: var(--bg-main); padding: 30px; border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: var(--transition-normal); } .why-us-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(16, 185, 129, 0.2); } .why-us-icon-wrapper { width: 54px; height: 54px; background-color: var(--accent-bg); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--accent-dark); margin-bottom: 20px; border: 1px solid rgba(16, 185, 129, 0.1); } .why-us-icon-wrapper svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; } .why-us-card h4 { font-size: 1.2rem; margin-bottom: 10px; } .why-us-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.5; } /* Call to Action Banner */ .cta-banner { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: #ffffff; padding: 60px 40px; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: -60px; position: relative; z-index: 10; } .cta-banner-content { max-width: 650px; } .cta-banner h3 { color: #ffffff; font-size: 2rem; margin-bottom: 10px; } .cta-banner p { color: rgba(255, 255, 255, 0.7); font-size: 1.1rem; margin-bottom: 0; } .cta-banner-actions { display: flex; gap: 16px; flex-shrink: 0; } /* FAQ Accordions */ .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 16px; overflow: hidden; transition: var(--transition-normal); } .faq-item:hover { border-color: rgba(16, 185, 129, 0.2); box-shadow: var(--shadow-sm); } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; cursor: pointer; user-select: none; } .faq-question h4 { font-size: 1.1rem; margin-bottom: 0; font-weight: 600; transition: var(--transition-fast); } .faq-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; position: relative; transition: var(--transition-normal); } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background-color: var(--text-muted); transition: var(--transition-normal); } .faq-icon::before { width: 14px; height: 2px; } .faq-icon::after { width: 2px; height: 14px; } .faq-answer { max-height: 0; overflow: hidden; transition: var(--transition-normal); padding: 0 28px; color: var(--text-muted); font-size: 0.95rem; border-top: 1px solid transparent; } .faq-item.active { border-color: var(--accent-dark); } .faq-item.active .faq-question h4 { color: var(--accent-dark); } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-item.active .faq-icon::before, .faq-item.active .faq-icon::after { background-color: var(--accent-dark); } .faq-item.active .faq-answer { max-height: 250px; padding-bottom: 22px; padding-top: 16px; border-color: var(--border-color); } /* Footer styling */ .footer { background-color: var(--bg-dark); color: rgba(255, 255, 255, 0.65); padding-top: 140px; /* High top padding to account for CTA banner overlapping */ padding-bottom: 40px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr; gap: 50px; margin-bottom: 60px; } .footer-col h5 { color: #ffffff; font-size: 1.15rem; margin-bottom: 25px; position: relative; padding-bottom: 10px; } .footer-col h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35px; height: 2px; background-color: var(--accent); } .footer-about p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 25px; } .footer-logo img { height: 48px; margin-bottom: 20px; } .social-links { display: flex; gap: 12px; } .social-btn { width: 38px; height: 38px; background-color: rgba(255, 255, 255, 0.05); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #ffffff; transition: var(--transition-fast); } .social-btn:hover { background-color: var(--accent); transform: translateY(-3px); } .social-btn svg { width: 18px; height: 18px; fill: currentColor; } .footer-links-list { display: flex; flex-direction: column; gap: 12px; } .footer-link-item a { font-size: 0.9rem; display: flex; align-items: center; gap: 8px; } .footer-link-item a::before { content: '›'; font-size: 1.2rem; color: var(--accent); line-height: 1; } .footer-link-item a:hover { color: #ffffff; padding-left: 5px; } .footer-contact-list { display: flex; flex-direction: column; gap: 16px; } .footer-contact-item { display: flex; gap: 12px; font-size: 0.9rem; } .footer-contact-item svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; margin-top: 3px; flex-shrink: 0; } .footer-contact-item div a:hover { color: #ffffff; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; font-size: 0.85rem; } .footer-bottom-links { display: flex; gap: 24px; } .footer-bottom-links a:hover { color: #ffffff; } /* Floating Actions */ .floating-whatsapp { position: fixed; bottom: 30px; right: 30px; z-index: 998; display: flex; align-items: center; background-color: #25d366; color: #ffffff; padding: 10px 20px 10px 14px; border-radius: var(--radius-full); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); gap: 8px; font-weight: 600; font-size: 0.95rem; transition: var(--transition-normal); cursor: pointer; } .floating-whatsapp svg { width: 26px; height: 26px; fill: currentColor; } .floating-whatsapp:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); } .whatsapp-pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--radius-full); border: 1px solid #25d366; opacity: 1; animation: pulse-out 2s infinite ease-out; pointer-events: none; } @keyframes pulse-out { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.2, 1.4); opacity: 0; } } /* Page Header (Subpages) */ .page-header { padding-top: calc(var(--header-height) + 50px); padding-bottom: 65px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: #ffffff; text-align: center; position: relative; overflow: hidden; } .page-header h1, .page-header .page-header-title-generic { color: #ffffff; font-size: 2.75rem; margin-bottom: 12px; font-weight: 700; font-family: 'Noto Sans HK', 'Outfit', sans-serif; line-height: 1.25; } .page-header-breadcrumbs { display: flex; justify-content: center; gap: 8px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); } .page-header-breadcrumbs a:hover { color: #ffffff; } .page-header-breadcrumbs span { color: rgba(255, 255, 255, 0.3); } /* About Page Content */ .about-intro-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; } .about-intro-content p { font-size: 1.05rem; color: var(--text-main); margin-bottom: 20px; } .about-intro-image { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; } .about-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .about-value-card { background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 40px 30px; text-align: center; transition: var(--transition-normal); } .about-value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(16, 185, 129, 0.2); } .about-value-icon { width: 60px; height: 60px; background-color: var(--accent-bg); color: var(--accent-dark); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto 25px auto; } .about-value-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; } .about-value-card h3 { font-size: 1.3rem; margin-bottom: 15px; } .about-value-card p { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0; } /* Recycling Page Content */ .recycling-types { padding-bottom: 0; } .recycling-types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; } .recycling-type-card { background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 30px 20px; text-align: center; transition: var(--transition-normal); } .recycling-type-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent-light); transform: translateY(-3px); } .recycling-type-icon { width: 50px; height: 50px; margin: 0 auto 15px auto; color: var(--accent-dark); display: flex; align-items: center; justify-content: center; background-color: var(--accent-bg); border-radius: var(--radius-sm); } .recycling-type-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; } .recycling-type-card h4 { font-size: 1.1rem; margin-bottom: 8px; } .recycling-type-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0; } /* 4-Step Process Section */ .process-section { position: relative; } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; } .process-grid::before { content: ''; position: absolute; top: 55px; left: 10%; width: 80%; height: 2px; background-color: var(--border-color); z-index: 1; } .process-step { text-align: center; position: relative; z-index: 2; } .process-step-num { width: 50px; height: 50px; background-color: var(--accent-dark); color: #ffffff; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; margin: 0 auto 20px auto; border: 4px solid #ffffff; box-shadow: var(--shadow-sm); font-family: 'Outfit', sans-serif; transition: var(--transition-normal); } .process-step:hover .process-step-num { background-color: var(--primary); transform: scale(1.1); } .process-step h4 { font-size: 1.25rem; margin-bottom: 12px; } .process-step p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; } /* Data Destruction Page Content */ .destruction-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .methods-grid { display: flex; flex-direction: column; gap: 40px; } .method-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-normal); } .method-section:hover { box-shadow: var(--shadow-md); border-color: rgba(16, 185, 129, 0.2); } .method-section.reverse { grid-template-columns: 1.2fr 1fr; } .method-image { height: 320px; } .method-image img { width: 100%; height: 100%; object-fit: cover; } .method-content { padding: 40px; } .method-badge { display: inline-block; background-color: var(--bg-accent); color: var(--primary-light); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: 15px; } .method-section:nth-child(1) .method-badge { background-color: rgba(59, 130, 246, 0.1); color: #2563eb; } .method-section:nth-child(2) .method-badge { background-color: rgba(245, 158, 11, 0.1); color: #d97706; } .method-section:nth-child(3) .method-badge { background-color: rgba(239, 68, 68, 0.1); color: #dc2626; } .method-content h3 { font-size: 1.75rem; margin-bottom: 15px; } .method-content p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; } .method-features-list { display: flex; flex-direction: column; gap: 8px; } .method-feature { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-dark); } .method-feature svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-dark); stroke-width: 3; } /* Contact Page Content */ .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; } .contact-info-panel { background-color: var(--bg-secondary); border-radius: var(--radius-lg); padding: 40px; border: 1px solid var(--border-color); } .contact-info-panel h3 { font-size: 1.5rem; margin-bottom: 10px; } .contact-info-panel > p { color: var(--text-muted); margin-bottom: 30px; } .contact-details { display: flex; flex-direction: column; gap: 25px; } .contact-detail-item { display: flex; gap: 16px; } .contact-icon-box { width: 48px; height: 48px; background-color: #ffffff; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--accent-dark); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); flex-shrink: 0; } .contact-icon-box svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; } .contact-detail-content h4 { font-size: 1rem; margin-bottom: 4px; } .contact-detail-content p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0; } .contact-detail-content p a:hover { color: var(--accent-dark); } .contact-form-panel { background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); } .contact-form-panel h3 { font-size: 1.6rem; margin-bottom: 10px; } .contact-form-panel > p { color: var(--text-muted); margin-bottom: 30px; } .form-group-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .form-group { margin-bottom: 22px; } .form-label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; } .form-control { width: 100%; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 16px; color: var(--text-dark); font-family: inherit; font-size: 0.95rem; transition: var(--transition-fast); } .form-control:focus { outline: none; border-color: var(--accent); background-color: #ffffff; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); } textarea.form-control { resize: vertical; min-height: 120px; } .form-alert { padding: 14px 20px; border-radius: var(--radius-md); font-size: 0.9rem; margin-bottom: 20px; display: none; } .form-alert-success { background-color: var(--accent-bg); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--accent-dark); } .form-alert-error { background-color: #fef2f2; border: 1px solid rgba(239, 68, 68, 0.2); color: #dc2626; } /* Map & Location Section */ .map-section { padding-top: 0; } .map-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); } .map-iframe { width: 100%; height: 450px; border: 0; display: block; } .transit-guide { margin-top: 40px; } .transit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .transit-card { background-color: var(--bg-secondary); border-radius: var(--radius-md); padding: 25px; border: 1px solid var(--border-color); } .transit-card h4 { font-size: 1.15rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .transit-card h4 svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-dark); stroke-width: 2.5; } .transit-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.6; } /* Custom CSS Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background-color: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background-color: var(--text-muted); border-radius: var(--radius-full); border: 2px solid var(--bg-secondary); } ::-webkit-scrollbar-thumb:hover { background-color: var(--text-main); } /* Responsive Breakpoints */ @media (max-width: 1024px) { h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; } .hero-title { font-size: 2.75rem; } .services-grid { gap: 30px; } .footer-grid { grid-template-columns: 1.2fr 0.8fr 1fr; gap: 40px; } .footer-col-contact { grid-column: span 3; } .transit-grid { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 768px) { .section { padding-top: 60px; padding-bottom: 60px; } .hamburger { display: block; } .nav-list, .header-actions .btn-outline { display: none; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-image-wrapper { height: 300px; grid-row: 1; } .hero-text-content { grid-row: 2; } .services-grid { grid-template-columns: 1fr; gap: 30px; } .why-us-grid { grid-template-columns: 1fr; gap: 40px; } .why-us-image-grid { display: none; } .why-us-list { grid-template-columns: 1fr; gap: 20px; } .cta-banner { flex-direction: column; padding: 40px 30px; text-align: center; gap: 25px; } .cta-banner-actions { width: 100%; justify-content: center; } .footer { padding-top: 100px; } .footer-grid { grid-template-columns: 1fr; gap: 35px; } .footer-col-contact { grid-column: span 1; } .footer-bottom { flex-direction: column; text-align: center; gap: 15px; } /* Subpages */ .about-intro-grid { grid-template-columns: 1fr; gap: 30px; } .about-intro-image { order: -1; } .about-values-grid { grid-template-columns: 1fr; gap: 20px; } .recycling-types-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .process-grid { grid-template-columns: 1fr; gap: 40px; } .process-grid::before { display: none; } .destruction-intro-grid { grid-template-columns: 1fr; gap: 30px; } .method-section, .method-section.reverse { grid-template-columns: 1fr; } .method-image { height: 200px; } .method-content { padding: 30px 20px; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .form-group-row { grid-template-columns: 1fr; gap: 0; } .floating-whatsapp span { display: none; } .floating-whatsapp { padding: 12px; } .map-iframe { height: 350px; } } /* Custom News / Blog Archive Grid Styles */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; } .news-card { background-color: var(--bg-main); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-normal); display: flex; flex-direction: column; } .news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(16, 185, 129, 0.2); } .news-card-image { height: 200px; overflow: hidden; border-bottom: 1px solid var(--border-color); position: relative; } .news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow); } .news-card:hover .news-card-image img { transform: scale(1.05); } .news-card-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; } .news-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 12px; font-family: 'Outfit', sans-serif; } .news-category { background-color: var(--accent-bg); color: var(--accent-dark); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); font-family: 'Noto Sans HK', sans-serif; } .news-card h3 { font-size: 1.25rem; line-height: 1.4; margin-bottom: 12px; font-weight: 700; } .news-card p { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 20px; flex-grow: 1; line-height: 1.5; } .news-read-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent-dark); font-size: 0.9rem; } .news-read-more:hover { color: var(--primary); } .news-read-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; transition: var(--transition-fast); } .news-read-more:hover svg { transform: translateX(3px); } /* Custom Single News Post Detail Styles */ .post-container { max-width: 900px; margin: 40px auto; padding: 0 20px; } .post-back-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-dark); font-weight: 700; font-size: 0.95rem; margin-bottom: 30px; } .post-back-btn:hover { color: var(--primary); } .post-back-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; } .post-header { margin-bottom: 30px; } .post-title { font-size: 2.25rem; line-height: 1.3; margin-bottom: 15px; } .post-meta-details { display: flex; gap: 20px; font-size: 0.9rem; color: var(--text-muted); font-family: 'Outfit', sans-serif; } .post-meta-cat { background-color: var(--accent-bg); color: var(--accent-dark); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); font-family: 'Noto Sans HK', sans-serif; } .post-banner-img { width: 100%; max-height: 450px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 40px; box-shadow: var(--shadow-md); } .post-content { font-size: 1.05rem; line-height: 1.8; color: var(--text-main); } .post-content p { margin-bottom: 25px; } .post-content strong { color: var(--text-dark); } @media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .news-grid { grid-template-columns: 1fr; } }