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 on mobile, tablet, and desktop
• 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
• 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, team
• Consultation Form - Multi-field form with validation states
• Mobile Menu - Slide-in drawer with overlay
• Sticky Navbar - Scroll shadow effect with active link indicators
• Back to Top Button - Scroll-aware floating button
• Custom Scrollbar - Minimalist design matching theme
• SEO Optimized - Semantic HTML5, meta tags, Open Graph ready
• Performance Optimized - CDN-hosted libraries, GPU-accelerated animations
• No External Images - All visuals built 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, hover effects
• Project Detail - Breadcrumb, hero metadata, CSS gallery, floor plans with tooltips, accordion details
• Services - Service cards grid, design phases timeline with durations
• Studio - Story blocks with CSS scenes, team grid, awards list
• Contact - Consultation form, contact info, CSS map placeholder, newsletter
• 404 - Creative error page with broken building 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 & responsive utilities
• Vanilla JavaScript (ES6+) - All interactions, no 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 - Icon library
• Google Fonts - Playfair Display (headings) + Inter (body)

🎨 CUSTOMIZATION
• CSS Variables - Change entire color palette in seconds
• Accent Colors - Try Terracotta (#C85A3D) or Sage Green (#7A8B69)
• Typography Swap - Replace Google Fonts with one line
• Project Data - Easy project management in HTML files
• Modular Pages - Add/remove pages effortlessly
• Color Palette - Warm neutrals with earthy accent options
• Layout Adjustments - Grid-based system for easy 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 & Portfolios
• Design Magazines & 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 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 isn't just a portfolio template; it's a statement piece for your brand.
Whether you're 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