From a1834a8c8b10ad480231541f2ca5bcf8b1f81bc8 Mon Sep 17 00:00:00 2001 From: Del Ara <96678916+Mittensdlara@users.noreply.github.com> Date: Wed, 15 Oct 2025 22:06:58 +0330 Subject: [PATCH] Convert static layout into WordPress theme --- assets/js/main.js | 262 ++++++++++ footer.php | 19 + functions.php | 73 +++ header.php | 45 ++ index.php | 318 ++++++++++++ style.css | 1210 ++++++++++++++++++++++++++++++++++++++++++--- 6 files changed, 1851 insertions(+), 76 deletions(-) create mode 100644 assets/js/main.js create mode 100644 footer.php create mode 100644 functions.php create mode 100644 header.php create mode 100644 index.php diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..e38da95 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,262 @@ +(function () { + 'use strict'; + + window.addEventListener('load', function () { + setTimeout(function () { + var loadingScreen = document.getElementById('loadingScreen'); + if (loadingScreen) { + loadingScreen.classList.add('hidden'); + } + }, 3200); + }); + + document.addEventListener('DOMContentLoaded', function () { + var cursor = document.querySelector('.cursor'); + var cursorGlow = document.querySelector('.cursor-glow'); + + document.addEventListener('mousemove', function (event) { + if (!cursor || !cursorGlow) { + return; + } + + cursor.style.left = event.clientX + 'px'; + cursor.style.top = event.clientY + 'px'; + cursorGlow.style.left = event.clientX - 20 + 'px'; + cursorGlow.style.top = event.clientY - 20 + 'px'; + }); + + var hoverSelectors = ['a', 'button', '.service-card', 'input', 'textarea']; + var hoverElements = document.querySelectorAll(hoverSelectors.join(',')); + + hoverElements.forEach(function (element) { + element.addEventListener('mouseenter', function () { + if (!cursor || !cursorGlow) { + return; + } + cursor.classList.add('hover'); + cursorGlow.classList.add('hover'); + }); + + element.addEventListener('mouseleave', function () { + if (!cursor || !cursorGlow) { + return; + } + cursor.classList.remove('hover'); + cursorGlow.classList.remove('hover'); + }); + }); + + document.querySelectorAll('a[href^="#"]').forEach(function (anchor) { + anchor.addEventListener('click', function (event) { + var targetSelector = anchor.getAttribute('href'); + if (targetSelector && targetSelector.length > 1) { + var target = document.querySelector(targetSelector); + if (target) { + event.preventDefault(); + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + } + }); + }); + + var observer = new IntersectionObserver(function (entries) { + entries.forEach(function (entry, index) { + if (entry.isIntersecting) { + setTimeout(function () { + entry.target.classList.add('visible'); + }, index * 100); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + document.querySelectorAll('.fade-in').forEach(function (element) { + observer.observe(element); + }); + + window.addEventListener('scroll', function () { + var nav = document.querySelector('nav'); + if (!nav) { + return; + } + if (window.pageYOffset > 100) { + nav.style.background = 'rgba(0, 0, 0, 0.98)'; + nav.style.borderBottom = '1px solid rgba(212, 175, 55, 0.4)'; + } else { + nav.style.background = 'rgba(28, 28, 28, 0.95)'; + nav.style.borderBottom = '1px solid rgba(212, 175, 55, 0.3)'; + } + }); + + var contactForm = document.querySelector('.contact-form'); + if (contactForm) { + contactForm.addEventListener('submit', function (event) { + event.preventDefault(); + var button = contactForm.querySelector('.submit-btn'); + if (!button) { + return; + } + var originalText = button.textContent; + + button.textContent = 'Crafting Message...'; + button.style.background = 'linear-gradient(135deg, #B8941F, #D4AF37)'; + button.style.transform = 'scale(0.98)'; + + setTimeout(function () { + button.textContent = 'Message Delivered ✨'; + button.style.background = 'linear-gradient(135deg, #228B22, #32CD32)'; + button.style.transform = 'scale(1.02)'; + + setTimeout(function () { + button.textContent = originalText; + button.style.background = 'linear-gradient(135deg, #D4AF37, #FFD700)'; + button.style.transform = 'scale(1)'; + contactForm.reset(); + }, 2500); + }, 2000); + }); + } + + var parallaxHandler = function () { + var hero = document.querySelector('.hero'); + var particles = document.querySelectorAll('.particle'); + var scrolled = window.pageYOffset; + + if (hero) { + hero.style.transform = 'translateY(' + (scrolled * 0.3) + 'px)'; + } + + particles.forEach(function (particle, index) { + var speed = (index + 1) * 0.1; + particle.style.transform = 'translateY(' + (scrolled * speed) + 'px)'; + }); + }; + + window.addEventListener('scroll', parallaxHandler); + + document.querySelectorAll('.service-card').forEach(function (card) { + card.addEventListener('mousemove', function (event) { + var rect = card.getBoundingClientRect(); + var x = event.clientX - rect.left; + var y = event.clientY - rect.top; + var centerX = rect.width / 2; + var centerY = rect.height / 2; + var rotateX = (y - centerY) / 10; + var rotateY = (centerX - x) / 10; + + card.style.transform = 'translateY(-15px) scale(1.02) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)'; + }); + + card.addEventListener('mouseleave', function () { + card.style.transform = 'translateY(0) scale(1) rotateX(0) rotateY(0)'; + }); + }); + + var tagline = document.querySelector('.hero-tagline'); + if (tagline) { + var originalText = tagline.getAttribute('data-text') || tagline.textContent.trim(); + tagline.setAttribute('data-text', originalText); + tagline.textContent = ''; + + setTimeout(function () { + var index = 0; + (function typeWriter() { + if (index < originalText.length) { + tagline.textContent += originalText.charAt(index); + index += 1; + setTimeout(typeWriter, 50); + } + })(); + }, 2500); + } + + var testimonials = Array.prototype.slice.call(document.querySelectorAll('.testimonial-card')); + var navDots = Array.prototype.slice.call(document.querySelectorAll('.nav-dot')); + var currentTestimonial = testimonials.findIndex(function (testimonial) { + return testimonial.classList.contains('active'); + }); + if (currentTestimonial < 0) { + currentTestimonial = 0; + } + + var showTestimonial = function (index) { + testimonials.forEach(function (testimonial, i) { + if (i === index) { + testimonial.classList.add('active'); + } else { + testimonial.classList.remove('active'); + } + }); + navDots.forEach(function (dot, i) { + if (i === index) { + dot.classList.add('active'); + } else { + dot.classList.remove('active'); + } + }); + currentTestimonial = index; + }; + + navDots.forEach(function (dot) { + dot.addEventListener('click', function () { + var index = parseInt(dot.getAttribute('data-testimonial-index'), 10); + if (!isNaN(index)) { + showTestimonial(index); + } + }); + }); + + if (testimonials.length > 1) { + setInterval(function () { + var nextIndex = (currentTestimonial + 1) % testimonials.length; + showTestimonial(nextIndex); + }, 5000); + } + + var animateCounters = function () { + var counters = document.querySelectorAll('.stat-number'); + counters.forEach(function (counter) { + var original = counter.getAttribute('data-original-value'); + if (!original) { + original = counter.textContent.trim(); + counter.setAttribute('data-original-value', original); + } + var suffix = counter.getAttribute('data-suffix'); + if (suffix === null) { + suffix = original.replace(/\d/g, ''); + counter.setAttribute('data-suffix', suffix); + } + var target = parseInt(original, 10); + if (isNaN(target)) { + return; + } + var current = 0; + var increment = target / 100; + var interval = setInterval(function () { + current += increment; + if (current >= target) { + counter.textContent = target + suffix; + clearInterval(interval); + } else { + counter.textContent = Math.floor(current) + suffix; + } + }, 20); + }); + }; + + var statsSection = document.querySelector('.philosophy-stats'); + if (statsSection) { + var statsObserver = new IntersectionObserver(function (entries, obs) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + animateCounters(); + obs.disconnect(); + } + }); + }, { threshold: 0.3 }); + statsObserver.observe(statsSection); + } + }); +})(); diff --git a/footer.php b/footer.php new file mode 100644 index 0000000..b48e3da --- /dev/null +++ b/footer.php @@ -0,0 +1,19 @@ + + + + + + diff --git a/functions.php b/functions.php new file mode 100644 index 0000000..a079aea --- /dev/null +++ b/functions.php @@ -0,0 +1,73 @@ + __( 'Primary Menu', 'deluxara' ), + ) ); +} + +add_action( 'wp_enqueue_scripts', 'deluxara_enqueue_assets' ); +/** + * Enqueue theme styles and scripts. + */ +function deluxara_enqueue_assets() { + wp_enqueue_style( + 'deluxara-fonts', + 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap', + array(), + null + ); + + wp_enqueue_style( + 'deluxara-style', + get_stylesheet_uri(), + array( 'deluxara-fonts' ), + filemtime( get_stylesheet_directory() . '/style.css' ) + ); + + wp_enqueue_script( + 'deluxara-main', + get_template_directory_uri() . '/assets/js/main.js', + array(), + filemtime( get_template_directory() . '/assets/js/main.js' ), + true + ); +} + +/** + * Fallback navigation menu with in-page anchors. + */ +function deluxara_default_menu() { + $links = array( + 'home' => __( 'Experience', 'deluxara' ), + 'services' => __( 'Atelier', 'deluxara' ), + 'portfolio' => __( 'Portfolio', 'deluxara' ), + 'about' => __( 'Philosophy', 'deluxara' ), + 'contact' => __( 'Consultation', 'deluxara' ), + ); + + echo ''; +} diff --git a/header.php b/header.php new file mode 100644 index 0000000..b0955b5 --- /dev/null +++ b/header.php @@ -0,0 +1,45 @@ + section and everything up till
. + * + * @package Deluxara + */ +?> +> + + + + + +> + +
+ +
+
+
+
+
+ +
+
+ + +
diff --git a/index.php b/index.php new file mode 100644 index 0000000..26fb971 --- /dev/null +++ b/index.php @@ -0,0 +1,318 @@ + +
+
+
+

+

+ +
+ +
+ +
+ +
+
+

+
+
+
💎
+

+

+
+
+
🎭
+

+

+
+
+
✨
+

+

+
+
+
+
+ +
+
+

+

+ +
+
+
+
+
👑
+
+

+

+
+
+
+
+

+

+
+ + + +
+
+
+ +
+
+
+
💍
+
+

+

+
+
+
+
+

+

+
+ + + +
+
+
+ +
+
+
+
🏛️
+
+

+

+
+
+
+
+

+

+
+ + + +
+
+
+
+
+
+ +
+
+

+

+ +
+ '01', + 'title' => __( 'Discovery & Vision', 'deluxara' ), + 'content' => __( 'We begin with intimate conversations to understand your brand\'s soul. Through strategic workshops and cultural immersion, we uncover the essence that will define your digital presence.', 'deluxara' ), + 'details' => array( __( 'Brand Archaeology', 'deluxara' ), __( 'Market Intelligence', 'deluxara' ), __( 'Vision Crafting', 'deluxara' ) ), + ), + array( + 'number' => '02', + 'title' => __( 'Conceptual Architecture', 'deluxara' ), + 'content' => __( 'Like master architects, we design the invisible structure that will support your brand\'s digital mansion. Every interaction, every transition is meticulously planned.', 'deluxara' ), + 'details' => array( __( 'Experience Mapping', 'deluxara' ), __( 'Technical Strategy', 'deluxara' ), __( 'Aesthetic Framework', 'deluxara' ) ), + ), + array( + 'number' => '03', + 'title' => __( 'Artisanal Creation', 'deluxara' ), + 'content' => __( 'Our atelier comes alive as designers, developers, and strategists collaborate to bring your vision to life with the precision of Swiss watchmaking.', 'deluxara' ), + 'details' => array( __( 'Luxury Design', 'deluxara' ), __( 'Advanced Development', 'deluxara' ), __( 'Quality Assurance', 'deluxara' ) ), + ), + array( + 'number' => '04', + 'title' => __( 'Orchestrated Launch', 'deluxara' ), + 'content' => __( 'Your digital debut is choreographed like a premiere at the Opera House. Every detail is perfected, every moment optimized for maximum impact.', 'deluxara' ), + 'details' => array( __( 'Performance Optimization', 'deluxara' ), __( 'Strategic Deployment', 'deluxara' ), __( 'Ongoing Excellence', 'deluxara' ) ), + ), + ); + + foreach ( $process_steps as $step ) : + ?> +
+
+
+

+

+
+ + + +
+
+
+ +
+
+
+ +
+
+

+ +
+ __( '“Déluxara didn\'t just redesign our website—they reimagined our entire digital presence. The result is nothing short of poetry in motion.”', 'deluxara' ), + 'name' => __( 'Isabella Marchetti', 'deluxara' ), + 'title' => __( 'Creative Director, Maison Éclat', 'deluxara' ), + 'avatar' => 'IM', + 'active' => true, + ), + array( + 'quote' => __( '“Working with Déluxara was like collaborating with digital couturiers. They understand that luxury is in the details that others overlook.”', 'deluxara' ), + 'name' => __( 'Alexandre Dubois', 'deluxara' ), + 'title' => __( 'Founder, Lumière Jewels', 'deluxara' ), + 'avatar' => 'AD', + 'active' => false, + ), + array( + 'quote' => __( '“The sophistication and intelligence behind every interaction on our new platform has elevated our brand to heights we never imagined possible.”', 'deluxara' ), + 'name' => __( 'Victoria Sterling', 'deluxara' ), + 'title' => __( 'CEO, Sterling & Associates', 'deluxara' ), + 'avatar' => 'VS', + 'active' => false, + ), + ); + + foreach ( $testimonials as $index => $testimonial ) : + $active_class = $testimonial['active'] ? ' active' : ''; + ?> +
+
+

+
+
+

+ +
+
+
+
+
+ +
+ +
+ $testimonial ) : ?> + + +
+
+
+ +
+
+
+
+

+

+

+

+

+ +
+
+
50+
+
+
+
+
98%
+
+
+
+
15
+
+
+
+
+
+
+
+
+
+
+ +
+
+

+

+ +
+ 3, + 'ignore_sticky_posts' => true, + ) + ); + + if ( $insights_query->have_posts() ) : + while ( $insights_query->have_posts() ) : + $insights_query->the_post(); + $categories = get_the_category(); + ?> +
> +
+ + + name ); ?> + +
+

+

+ +
+ + + +
+

+

+
+ +
+
+
+ +
+
+
+

+

+ +
+
+ + +
+ + + +
+
+
+
+ a, +.nav-links .current_page_item > a { + color: #D4AF37; + background: rgba(212, 175, 55, 0.1); + transform: translateY(-2px); +} + +.nav-links a::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent); + border-radius: 25px; + opacity: 0; + transition: opacity 0.3s ease; +} + +.nav-links a:hover::before, +.nav-links .current-menu-item > a::before, +.nav-links .current_page_item > a::before { + opacity: 1; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -5px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 2px; + background: linear-gradient(90deg, #D4AF37, #FFD700); + transition: width 0.3s ease; + border-radius: 1px; +} + +.nav-links a:hover::after, +.nav-links .current-menu-item > a::after, +.nav-links .current_page_item > a::after { + width: 80%; +} + +.hero { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.15) 0%, var(--charcoal) 50%, var(--black) 100%); + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + animation: float 20s ease-in-out infinite; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(1deg); } +} + +.hero-content { + text-align: center; + z-index: 2; + position: relative; +} + +.hero-subtitle { + font-size: 0.9rem; + color: var(--gold); + letter-spacing: 4px; + margin-bottom: 1.5rem; + font-weight: 300; + opacity: 0; + animation: fadeInUp 1.2s ease 0.5s forwards; + text-transform: uppercase; +} + +.hero-title { + font-family: 'Playfair Display', serif; + font-size: clamp(4rem, 10vw, 8rem); + font-weight: 700; + margin-bottom: 1rem; + background: var(--gold-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + opacity: 0; + animation: fadeInUp 1.2s ease 1s forwards; + position: relative; + text-shadow: 0 0 30px rgba(212, 175, 55, 0.3); +} + +.hero-tagline { + font-size: 1.3rem; + color: var(--ivory); + margin-bottom: 3rem; + font-weight: 300; + opacity: 0; + animation: fadeInUp 1.2s ease 1.5s forwards; + font-style: italic; + letter-spacing: 1px; +} + +.cta-button { + display: inline-block; + padding: 1rem 3rem; + background: linear-gradient(135deg, #D4AF37, #FFD700); + color: #000000; + text-decoration: none; + font-weight: 600; + letter-spacing: 1px; + border-radius: 50px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + opacity: 0; + animation: fadeInUp 1s ease 2s forwards; +} + +.cta-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; +} + +.cta-button:hover::before { + left: 100%; +} + +.cta-button:hover { + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3); +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.services { + padding: 8rem 0; + background: linear-gradient(180deg, var(--black) 0%, var(--charcoal) 50%, var(--black) 100%); + position: relative; +} + +.services::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; +} + +.section-title { + font-family: 'Playfair Display', serif; + font-size: 3rem; + text-align: center; + margin-bottom: 4rem; + background: var(--gold-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + position: relative; + z-index: 2; +} + +.section-title::after { + content: ''; + position: absolute; + bottom: -15px; + left: 50%; + transform: translateX(-50%); + width: 120px; + height: 3px; + background: var(--gold-gradient); + border-radius: 2px; + box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 3rem; + margin-top: 4rem; +} + +.service-card { + background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(28, 28, 28, 0.9)); + padding: 3rem 2rem; + border-radius: 20px; + border: 1px solid rgba(212, 175, 55, 0.2); + transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); +} + +.service-card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%); + opacity: 0; + transition: all 0.6s ease; + transform: scale(0); +} + +.service-card::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent); + transition: left 0.8s ease; +} + +.service-card:hover::before { + opacity: 1; + transform: scale(1); +} + +.service-card:hover::after { + left: 100%; +} + +.service-card:hover { + transform: translateY(-15px) scale(1.02); + border-color: rgba(212, 175, 55, 0.6); + box-shadow: 0 25px 50px rgba(212, 175, 55, 0.15), 0 0 0 1px rgba(212, 175, 55, 0.1); +} + +.service-card:hover .service-icon { + transform: scale(1.1) rotate(5deg); + filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6)); +} + +.service-card:hover .service-title { + color: var(--gold); +} + +.service-icon { + font-size: 3rem; + color: #D4AF37; + margin-bottom: 1.5rem; + transition: all 0.4s ease; + display: inline-block; + position: relative; +} + +.service-icon::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80px; + height: 80px; + background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%); + border-radius: 50%; + opacity: 0; + transition: all 0.4s ease; +} + +.service-card:hover .service-icon::before { + opacity: 1; + transform: translate(-50%, -50%) scale(1.2); +} + +.service-title { + font-family: 'Playfair Display', serif; + font-size: 1.5rem; + margin-bottom: 1rem; + color: #ffffff; +} + +.service-description { + color: #cccccc; + line-height: 1.8; +} + +.about { + padding: 8rem 0; + background: #000000; +} + +.about-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.about-text h2 { + font-family: 'Playfair Display', serif; + font-size: 2.5rem; + color: #D4AF37; + margin-bottom: 2rem; +} + +.about-text p { + color: #cccccc; + font-size: 1.1rem; + line-height: 1.8; + margin-bottom: 1.5rem; +} + +.about-visual { + position: relative; + height: 400px; + background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(0, 0, 0, 0.8)); + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.luxury-pattern { + position: absolute; + width: 100%; + height: 100%; + background: repeating-linear-gradient( + 45deg, + transparent, + transparent 10px, + rgba(212, 175, 55, 0.05) 10px, + rgba(212, 175, 55, 0.05) 20px + ); + animation: slide 10s linear infinite; +} + +@keyframes slide { + 0% { transform: translateX(-20px) translateY(-20px); } + 100% { transform: translateX(20px) translateY(20px); } +} + +.about-visual::after { + content: '💎'; + font-size: 4rem; + z-index: 2; + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); opacity: 0.8; } + 50% { transform: scale(1.1); opacity: 1; } +} + +.contact { + padding: 8rem 0; + background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%); +} + +.contact-content { + text-align: center; + max-width: 600px; + margin: 0 auto; +} + +.contact h2 { + font-family: 'Playfair Display', serif; + font-size: 2.5rem; + background: var(--gold-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 2rem; +} + +.contact p { + color: #cccccc; + font-size: 1.1rem; + margin-bottom: 3rem; + line-height: 1.8; +} + +.contact-form { + display: grid; + gap: 1.5rem; + margin-top: 3rem; +} + +.form-group { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; +} + +.contact-form input, +.contact-form textarea { + background: rgba(28, 28, 28, 0.8); + border: 1px solid rgba(212, 175, 55, 0.3); + border-radius: 15px; + padding: 1.2rem; + color: #ffffff; + font-family: 'Montserrat', sans-serif; + transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + position: relative; + backdrop-filter: blur(10px); +} + +.contact-form input:focus, +.contact-form textarea:focus { + outline: none; + border-color: #D4AF37; + box-shadow: 0 0 30px rgba(212, 175, 55, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.05); + transform: translateY(-2px); + background: rgba(212, 175, 55, 0.05); +} + +.contact-form input::placeholder, +.contact-form textarea::placeholder { + color: rgba(212, 175, 55, 0.6); + transition: all 0.3s ease; +} + +.contact-form input:focus::placeholder, +.contact-form textarea:focus::placeholder { + color: rgba(212, 175, 55, 0.8); + transform: translateY(-2px); +} + +.contact-form textarea { + grid-column: 1 / -1; + min-height: 120px; + resize: vertical; +} + +.submit-btn { + grid-column: 1 / -1; + justify-self: center; + padding: 1rem 3rem; + background: linear-gradient(135deg, #D4AF37, #FFD700); + color: #000000; + border: none; + border-radius: 50px; + font-weight: 600; + letter-spacing: 1px; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.submit-btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3); +} + +footer { + background: #000000; + border-top: 1px solid rgba(212, 175, 55, 0.2); + padding: 3rem 0; + text-align: center; +} + +.footer-content { + color: #666666; + font-size: 0.9rem; +} + +.footer-logo { + font-family: 'Playfair Display', serif; + font-size: 1.5rem; + color: #D4AF37; + margin-bottom: 1rem; +} + +.portfolio { + padding: 8rem 0; + background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 50%, var(--charcoal) 100%); +} + +.section-subtitle { + text-align: center; + color: rgba(212, 175, 55, 0.8); + font-size: 1.1rem; + margin-bottom: 4rem; + font-style: italic; +} + +.portfolio-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 3rem; + margin-top: 4rem; +} + +.portfolio-item { + background: rgba(28, 28, 28, 0.6); + border-radius: 20px; + overflow: hidden; + border: 1px solid rgba(212, 175, 55, 0.2); + transition: all 0.4s ease; + backdrop-filter: blur(10px); +} + +.portfolio-item:hover { + transform: translateY(-10px); + border-color: rgba(212, 175, 55, 0.5); + box-shadow: 0 20px 40px rgba(212, 175, 55, 0.1); +} + +.portfolio-image { + height: 250px; + position: relative; + overflow: hidden; +} + +.portfolio-placeholder { + width: 100%; + height: 100%; + background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(28, 28, 28, 0.9)); + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.luxury-icon { + font-size: 4rem; + opacity: 0.3; + transition: all 0.3s ease; +} + +.portfolio-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + opacity: 0; + transition: all 0.3s ease; +} + +.portfolio-item:hover .portfolio-overlay { + opacity: 1; +} + +.portfolio-item:hover .luxury-icon { + opacity: 0.1; +} + +.portfolio-overlay h4 { + color: var(--gold); + font-family: 'Playfair Display', serif; + font-size: 1.5rem; + margin-bottom: 0.5rem; } -h1, -h2, -h3 { - text-align: center !important; - margin: 0; + +.portfolio-overlay p { + color: var(--ivory); + font-size: 0.9rem; } -h1 { - font-size: 96px; +.portfolio-details { + padding: 2rem; } -h2 { - font-size: 48px; +.portfolio-details h3 { + font-family: 'Playfair Display', serif; + color: var(--gold); + margin-bottom: 1rem; + font-size: 1.3rem; } -h3 { - font-size: 24px; - opacity: 0.7; +.portfolio-details p { + color: #cccccc; + line-height: 1.6; + margin-bottom: 1.5rem; } -p { - background: var(--secondary-color); - padding: 20px; - border-radius: 4px; - font-size: 18px; - line-height: 1.5; - text-align: center; +.portfolio-tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; } -.navigation-links { - display: flex; - margin-top: 40px; - justify-content: center; +.portfolio-tags span { + background: rgba(212, 175, 55, 0.1); + color: var(--gold); + padding: 0.3rem 0.8rem; + border-radius: 15px; + font-size: 0.8rem; + border: 1px solid rgba(212, 175, 55, 0.3); } -.navigation-links a { - margin: 20px; - border-radius: 4px; - padding: 20px 15px; - text-decoration: none; - text-transform: capitalize; +.process { + padding: 8rem 0; + background: var(--black); } -.contact-link { - background: var(--primary-color); - box-shadow: var(--box-shadow); - color: white; +.process-timeline { + max-width: 800px; + margin: 0 auto; + position: relative; } -.about-link { - color: var(--primary-color); - border: 1px solid var(--primary-color); +.process-timeline::before { + content: ''; + position: absolute; + left: 50px; + top: 0; + bottom: 0; + width: 2px; + background: linear-gradient(180deg, var(--gold), rgba(212, 175, 55, 0.3)); } -.homepage-link { - color: var(--primary-color); - text-align: center; - display: block; +.process-step { + display: flex; + align-items: flex-start; + margin-bottom: 4rem; + position: relative; } -.about-paragraphs { - display: flex; - margin: 30px 0; +.step-number { + width: 100px; + height: 100px; + background: linear-gradient(135deg, var(--gold), #FFD700); + color: var(--black); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: 700; + margin-right: 3rem; + position: relative; + z-index: 2; + box-shadow: 0 0 30px rgba(212, 175, 55, 0.3); } -.about-paragraphs p { - margin: 10px; +.step-content { + flex: 1; + padding-top: 1rem; } -.email-link { - display: flex; - justify-content: center; - color: var(--primary-color); - font-size: 28px; - text-decoration: none; +.step-content h3 { + font-family: 'Playfair Display', serif; + color: var(--gold); + font-size: 1.8rem; + margin-bottom: 1rem; } -.email-link:hover { - text-decoration: underline; +.step-content p { + color: #cccccc; + line-height: 1.8; + margin-bottom: 1.5rem; } -.primary-link { - background-color: var(--primary-color); + +.step-details { + display: flex; + gap: 1rem; + flex-wrap: wrap; } -.primary-link:hover { - background-color: #d090ee; - transition: background-color 0.5s; + +.step-details span { + background: rgba(212, 175, 55, 0.1); + color: var(--gold); + padding: 0.4rem 1rem; + border-radius: 20px; + font-size: 0.9rem; + border: 1px solid rgba(212, 175, 55, 0.3); } -@media (max-width: 576px) { - h1 { - font-size: 45px; - line-height: 1.5; - } +.testimonials { + padding: 8rem 0; + background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%); } -@media (max-width: 600px) { - h2 { - font-size: 30px; - } + +.testimonials-carousel { + max-width: 800px; + margin: 0 auto; + position: relative; + height: 300px; } -@media (max-width: 600px) { - .navigation-links a { - margin: 10px; - } + +.testimonial-card { + position: absolute; + top: 0; + left: 0; + right: 0; + opacity: 0; + transform: translateX(50px); + transition: all 0.5s ease; + background: rgba(28, 28, 28, 0.6); + padding: 3rem; + border-radius: 20px; + border: 1px solid rgba(212, 175, 55, 0.2); + backdrop-filter: blur(10px); +} + +.testimonial-card.active { + opacity: 1; + transform: translateX(0); +} + +.testimonial-content p { + font-size: 1.3rem; + line-height: 1.8; + color: var(--ivory); + font-style: italic; + margin-bottom: 2rem; + text-align: center; +} + +.testimonial-author { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.author-info h4 { + color: var(--gold); + font-family: 'Playfair Display', serif; + margin-bottom: 0.2rem; +} + +.author-info span { + color: #cccccc; + font-size: 0.9rem; +} + +.author-avatar { + width: 50px; + height: 50px; + background: linear-gradient(135deg, var(--gold), #FFD700); + color: var(--black); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; +} + +.testimonial-navigation { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 3rem; +} + +.nav-dot { + width: 12px; + height: 12px; + border-radius: 50%; + border: 2px solid rgba(212, 175, 55, 0.3); + background: transparent; + cursor: pointer; + transition: all 0.3s ease; +} + +.nav-dot.active { + background: var(--gold); + border-color: var(--gold); +} + +.philosophy-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin-top: 3rem; + padding-top: 2rem; + border-top: 1px solid rgba(212, 175, 55, 0.2); +} + +.stat-item { + text-align: center; +} + +.stat-number { + font-family: 'Playfair Display', serif; + font-size: 2.5rem; + color: var(--gold); + font-weight: 700; + margin-bottom: 0.5rem; +} + +.stat-label { + color: #cccccc; + font-size: 0.9rem; + letter-spacing: 1px; +} + +.insights { + padding: 8rem 0; + background: var(--black); +} + +.insights-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; + margin-top: 4rem; +} + +.insight-card { + background: rgba(28, 28, 28, 0.6); + padding: 2rem; + border-radius: 15px; + border: 1px solid rgba(212, 175, 55, 0.2); + transition: all 0.3s ease; + backdrop-filter: blur(10px); +} + +.insight-card:hover { + transform: translateY(-5px); + border-color: rgba(212, 175, 55, 0.4); + box-shadow: 0 15px 30px rgba(212, 175, 55, 0.1); +} + +.insight-meta { + display: flex; + justify-content: space-between; + margin-bottom: 1rem; +} + +.insight-date { + color: #888; + font-size: 0.8rem; +} + +.insight-category { + background: rgba(212, 175, 55, 0.1); + color: var(--gold); + padding: 0.2rem 0.8rem; + border-radius: 10px; + font-size: 0.8rem; +} + +.insight-card h3 { + font-family: 'Playfair Display', serif; + color: var(--gold); + margin-bottom: 1rem; + font-size: 1.3rem; +} + +.insight-card p { + color: #cccccc; + line-height: 1.6; + margin-bottom: 1.5rem; +} + +.insight-link { + color: var(--gold); + text-decoration: none; + font-weight: 500; + transition: all 0.3s ease; +} + +.insight-link:hover { + color: #FFD700; +} + +.fade-in { + opacity: 0; + transform: translateY(30px); + transition: all 0.6s ease; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} + +@media (max-width: 768px) { + .nav-links { + display: none; + } + + .hero-title { + font-size: 3rem; + } + + .services-grid { + grid-template-columns: 1fr; + } + + .about-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .form-group { + grid-template-columns: 1fr; + } + + .container { + padding: 0 1rem; + } + + .portfolio-grid { + grid-template-columns: 1fr; + } }