ARCHI. is a premium, production-ready multi-page website template designed for architecture firms, interior design studios, and creative agencies who want to showcase their work with cinematic elegance. Inspired by editorial design magazines and the refined aesthetics of high-end architectural practices, ARCHI. combines a breathtaking 3D scroll experience with sophisticated typography, asymmetric layouts, and a warm minimalist palette that exudes luxury and craftsmanship.

✨ KEY FEATURES
• Fully Responsive - Flawless display on mobile, tablet, and desktop devices
• 3D Scroll Experience - GSAP ScrollTrigger-powered house assembly animation
• Camera Fly-Through Transition - Cinematic flying-through-rooms effect
• 6-Layer CSS House - Pure CSS 3D-constructed architectural illustration
• Materials Layering - Interactive wall cross-section 3D assembly animation
• Warm Minimalist Theme - Off-white backgrounds, charcoal text, terracotta accents
• Editorial Typography - Playfair Display serif with fluid clamp() sizing
• Asymmetric Layouts - Magazine-style design with generous negative space
• 7 Complete Pages - Homepage, Projects, Project Detail, Services, Studio, Contact, 404
• Animated Counters - Stats section with scroll-triggered number counting
• Masonry Portfolio Grid - Filterable project gallery with category buttons
• Interactive Floor Plans - CSS-drawn 2D plans with hover tooltips
• Project Accordion - Expandable details for materials, timeline, and team
• Consultation Form - Multi-field form with clean validation states
• Mobile Menu - Slide-in drawer with smooth overlay transition
• Sticky Navbar - Scroll shadow effect with active link indicators
• Back to Top Button - Scroll-aware floating navigation button
• Custom Scrollbar - Minimalist design matching the overall theme
• SEO Optimized - Semantic HTML5, meta tags, Open Graph ready
• Performance Optimized - CDN-hosted libraries, GPU-accelerated animations
• No External Images - All visuals built purely with CSS, SVG, and FontAwesome

📑 SECTIONS INCLUDED
• Homepage - 3D hero assembly, camera fly-through, philosophy quote, featured projects, process timeline, animated stats, materials layering, testimonials, newsletter
• Projects - Filter buttons, masonry grid, CSS-illustrated buildings, elegant hover effects
• Project Detail - Breadcrumb, hero metadata, CSS gallery, floor plans with tooltips, accordion details
• Services - Service cards grid, design phases timeline with duration estimates
• Studio - Story blocks with CSS scenes, team grid, awards and recognition list
• Contact - Consultation form, contact info, CSS map placeholder, newsletter signup
• 404 - Creative error page with broken building illustration and floating bricks

🛠 TECH STACK
Built with modern, industry-standard technologies:
• HTML5 - Semantic, accessible markup
• CSS3 - Custom properties, 3D transforms, clamp(), grid, flexbox
• Bootstrap 5.3 - Grid system and responsive utilities
• Vanilla JavaScript (ES6+) - All interactions, zero framework overhead
• GSAP 3.12.5 - Core animation engine
• ScrollTrigger 3.12.5 - Scroll-driven 3D animations
• AOS 2.3.1 - Supplementary fade-in animations
• FontAwesome 6.5.1 - Comprehensive icon library
• Google Fonts - Playfair Display (headings) + Inter (body)

🎨 CUSTOMIZATION
• CSS Variables - Change the entire color palette in seconds
• Accent Colors - Easily switch between Terracotta (#C85A3D) or Sage Green (#7A8B69)
• Typography Swap - Replace Google Fonts with a single line of code
• Project Data - Easy project management directly in HTML files
• Modular Pages - Add or remove pages effortlessly
• Color Palette - Warm neutrals with earthy accent options
• Layout Adjustments - Grid-based system for easy structural modifications

🚀 PERFECT FOR
• Architecture Firms
• Interior Design Studios
• Creative Agencies
• Design Consultancies
• Urban Planning Firms
• Landscape Architects
• Boutique Design Studios
• Real Estate Developers
• Architecture Students and Portfolios
• Design Magazines and Blogs

📦 WHAT'S INCLUDED
• index.html - Homepage with 3D scroll experience
• projects.html - Portfolio page with filters
• project-detail.html - Single project showcase
• services.html - Services and design phases
• studio.html - About, team, and awards
• contact.html - Consultation form and contact info
• 404.html - Creative error page
• style.css - All custom styles (1,800+ lines)
• script.js - All JavaScript logic (500+ lines)
• documentation.html - Complete technical documentation

🌐 BROWSER SUPPORT
Chrome 90+, Firefox 88+, Safari 14+, Edge 90+, Opera 80+, iOS Safari 14+

📄 LICENSE
MIT License - Free for personal and commercial use.

🎯 WHY CHOOSE ARCHI.?
Unlike generic portfolio templates, ARCHI. delivers a cinematic, scroll-driven 3D experience that sets your firm apart. The house assembly animation, camera fly-through transition, and editorial design create an immersive showcase that converts visitors into high-value clients.
Every detail has been crafted with architectural practice in mind, from the warm terracotta accents to the asymmetric layouts to the massive serif typography. This is not just a portfolio template; it is a statement piece for your brand.
Whether you are launching a new architecture firm, building a design studio portfolio, or creating a showcase for your interior design work, ARCHI. gives you the premium, sophisticated aesthetic your clients expect.

⭐ Built with ❤️ by Lurkawindo/Lurkatheme - Engineered for architects.