/* ========================================== RUACH FUNERALS - MAIN STYLESHEET Honouring Life With Grace Palette: Deep Plum, Silver, Sapphire, Warm Ivory, Avocado Green ========================================== */ /* CSS Variables */ :root { /* Ruach Brand Palette */ --plum: #3B1F4A; /* Deep royal plum - primary */ --plum-dark: #261337; /* Darker plum for depth */ --plum-mid: #5A3070; /* Mid plum for hover states */ --plum-pale: #F0EBF5; /* Lightest plum tint */ --plum-soft: #D4C4E3; /* Soft lavender-plum */ --silver: #C0C8D4; /* Silver accent */ --silver-light: #E8ECF0; /* Light silver */ --silver-dark: #8A96A4; /* Dark silver */ --sapphire: #1E3A6E; /* Deep sapphire blue */ --sapphire-mid: #2E5098; /* Mid sapphire */ --sapphire-pale: #E8EDF8; /* Sapphire tint */ --ivory: #F9F4ED; /* Warm ivory background */ --ivory-deep: #EDE4D3; /* Deeper ivory */ --ivory-warm: #F5EFE4; /* Warm ivory variant */ --avocado: #5C7A3E; /* Avocado green accent */ --avocado-dark: #3F5A28; --avocado-pale: #EBF2E4; --gold: #C9A84C; /* Muted gold for highlights */ --gold-pale: #F8F0DC; /* Neutrals */ --black: #0F0A14; --gray-900: #1A1020; --gray-800: #2E2438; --gray-700: #4A3D58; --gray-600: #6B5C7E; --gray-500: #9388A4; --gray-400: #B8AEC8; --gray-300: #D5CEDF; --gray-200: #EAE6EF; --gray-100: #F5F2F8; --white: #FFFFFF; /* Functional */ --success: #5C7A3E; --error: #8B2E2E; /* Typography */ --font-primary: "Cormorant Garamond", Georgia, serif; --font-body: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; --font-display: "Cormorant Garamond", Georgia, serif; /* Spacing */ --container-max: 1280px; --section-padding: 100px; --nav-height: 80px; /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.35s ease; --transition-slow: 0.6s ease; /* Shadows */ --shadow-sm: 0 2px 8px rgba(59, 31, 74, 0.07); --shadow-md: 0 4px 20px rgba(59, 31, 74, 0.12); --shadow-lg: 0 8px 40px rgba(59, 31, 74, 0.16); --shadow-xl: 0 20px 70px rgba(59, 31, 74, 0.2); } /* ========================================== FONTS — load via @import in or here ========================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap'); /* Reset & Base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--gray-700); background-color: var(--ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } /* Container */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 32px; } /* ========================================== TYPOGRAPHY ========================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 500; line-height: 1.2; color: var(--plum-dark); letter-spacing: 0.02em; } h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); } h4 { font-size: 1.25rem; } p { color: var(--gray-600); font-weight: 300; } .text-gradient { background: linear-gradient(135deg, var(--plum) 0%, var(--gold) 60%, var(--avocado) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ========================================== ORNAMENT — decorative divider ========================================== */ .ornament { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px auto; } .ornament::before, .ornament::after { content: ''; display: block; width: 60px; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); } .ornament::after { background: linear-gradient(to left, transparent, var(--gold)); } .ornament-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); display: inline-block; } /* ========================================== MARQUEE ANNOUNCEMENT BAR ========================================== */ .marquee-bar { background: var(--plum-dark); overflow: hidden; padding: 10px 0; border-bottom: 1px solid rgba(201, 168, 76, 0.3); } .marquee-track { display: flex; white-space: nowrap; animation: marquee-scroll 30s linear infinite; } .marquee-track:hover { animation-play-state: paused; } .marquee-content { display: flex; align-items: center; gap: 0; flex-shrink: 0; padding-right: 0; } .marquee-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 40px; font-family: var(--font-body); font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.12em; text-transform: uppercase; } .marquee-item .dot { width: 4px; height: 4px; background: var(--gold); display: inline-block; transform: rotate(45deg); flex-shrink: 0; margin-left: 40px; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================== BUTTONS ========================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 36px; font-family: var(--font-body); font-size: 13px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: all var(--transition-base); text-transform: uppercase; letter-spacing: 0.18em; border-radius: 0; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--plum); color: var(--white); border-color: var(--plum); } .btn-primary:hover { background: var(--plum-mid); border-color: var(--plum-mid); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(59, 31, 74, 0.3); } .btn-outline { background: transparent; color: var(--plum); border-color: var(--plum); } .btn-outline:hover { background: var(--plum); color: var(--white); transform: translateY(-2px); } .btn-white { background: var(--white); color: var(--plum); border-color: var(--white); } .btn-white:hover { background: var(--ivory); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255, 255, 255, 0.2); } .btn-gold { background: transparent; color: var(--gold); border-color: var(--gold); } .btn-gold:hover { background: var(--gold); color: var(--plum-dark); transform: translateY(-2px); } .btn-full { width: 100%; } /* ========================================== NAVIGATION ========================================== */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: rgba(249, 244, 237, 0.97); backdrop-filter: blur(12px); z-index: 1000; transition: all var(--transition-base); border-bottom: 1px solid transparent; } .navbar.scrolled { background: rgba(249, 244, 237, 0.99); border-bottom-color: var(--ivory-deep); box-shadow: 0 2px 20px rgba(59, 31, 74, 0.08); } .nav-container { max-width: var(--container-max); margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 14px; } .nav-logo img { height: 10vh; width: auto; object-fit: contain; } .nav-logo span { font-family: var(--font-primary); font-size: 1.4rem; font-weight: 500; color: var(--plum-dark); letter-spacing: 0.06em; } .nav-menu { display: flex; align-items: center; gap: 4px; } .nav-link { padding: 10px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--gray-700); letter-spacing: 0.1em; text-transform: uppercase; transition: all var(--transition-fast); position: relative; border-radius: 0; } .nav-link:hover, .nav-link.active { color: var(--plum); } .nav-link::after { content: ''; position: absolute; bottom: 6px; left: 18px; right: 18px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform var(--transition-base); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .nav-link.nav-cta { background: var(--plum); color: var(--white); margin-left: 12px; letter-spacing: 0.12em; } .nav-link.nav-cta::after { display: none; } .nav-link.nav-cta:hover, .nav-link.nav-cta.active { background: var(--plum-mid); color: var(--white); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; } .nav-toggle span { display: block; width: 24px; height: 1px; background: var(--plum-dark); transition: all var(--transition-fast); } /* Mobile Navigation */ @media (max-width: 768px) { .nav-toggle { display: flex; } .nav-menu { position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--ivory); flex-direction: column; padding: 32px; gap: 8px; border-bottom: 1px solid var(--ivory-deep); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: all var(--transition-base); } .nav-menu.active { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-link { width: 100%; text-align: center; } .nav-link.nav-cta { margin-left: 0; margin-top: 8px; } } /* ========================================== FLASH MESSAGES ========================================== */ .flash-container { position: fixed; top: calc(var(--nav-height) + 20px); right: 20px; z-index: 1001; display: flex; flex-direction: column; gap: 10px; max-width: 400px; } .flash-message { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; animation: slideIn 0.3s ease; box-shadow: var(--shadow-md); border-radius: 0; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .flash-success { background: #e8f0e1; color: #2e4a1a; border: 1px solid #b8d4a0; } .flash-error { background: #f4e0e0; color: #5a1e1e; border: 1px solid #d4a0a0; } .flash-close { background: none; border: none; font-size: 20px; cursor: pointer; opacity: 0.6; transition: opacity var(--transition-fast); color: inherit; } .flash-close:hover { opacity: 1; } /* ========================================== HERO SECTION ========================================== */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-height); overflow: hidden; } .hero-bg, .hero-bg-wrapper { position: absolute; inset: 0; z-index: -2; } .hero-bg { background: linear-gradient(160deg, var(--plum-dark) 0%, var(--plum) 40%, var(--sapphire) 100%); } .hero-bg.image-mode, .carousel-slide { background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-bg.carousel-mode { position: relative; width: 100%; height: 100%; overflow: hidden; } .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease-in-out; z-index: -2; } .carousel-slide.active { opacity: 1; z-index: -1; } .hero-bg.image-mode::after, .hero-bg.carousel-mode::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 10, 20, 0.82) 0%, rgba(59, 31, 74, 0.5) 50%, rgba(15, 10, 20, 0.25) 100%); z-index: 1; } .hero-pattern { position: absolute; inset: 0; background-image: radial-gradient(ellipse at 20% 30%, rgba(201, 168, 76, 0.08) 0%, transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(59, 31, 74, 0.3) 0%, transparent 55%); z-index: -1; } /* Subtle texture overlay */ .hero-bg::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(201, 168, 76, 0.03) 0px, rgba(201, 168, 76, 0.03) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(201, 168, 76, 0.03) 0px, rgba(201, 168, 76, 0.03) 1px, transparent 1px, transparent 40px); z-index: 0; pointer-events: none; } .hero-content { width: 100%; } .hero-content .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-text { max-width: 600px; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px; background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.4); font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--gold); margin-bottom: 28px; text-transform: uppercase; letter-spacing: 0.2em; border-radius: 0; } .hero-text h1 { color: var(--white); margin-bottom: 12px; font-weight: 400; font-style: italic; line-height: 1.15; } .hero-text h1 em { font-style: normal; font-weight: 600; } .hero-tagline { font-family: var(--font-body); font-size: 13px; color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } .hero-tagline::before, .hero-tagline::after { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); opacity: 0.6; } .hero-text p { font-size: 1.0625rem; color: rgba(255, 255, 255, 0.65); margin-bottom: 44px; line-height: 1.9; font-weight: 300; } .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .hero-visual { position: relative; height: 500px; } .hero-shape { position: absolute; opacity: 0.1; animation: float 8s ease-in-out infinite; border-radius: 0; } .hero-shape-1 { width: 280px; height: 280px; top: 10%; right: 10%; background: linear-gradient(135deg, var(--gold), var(--plum-soft)); animation-delay: 0s; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .hero-shape-2 { width: 180px; height: 180px; bottom: 20%; right: 30%; background: linear-gradient(135deg, var(--avocado), var(--sapphire)); animation-delay: -3s; } .hero-shape-3 { width: 120px; height: 120px; top: 40%; right: 5%; background: var(--silver); animation-delay: -5s; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } } .hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.4); font-family: var(--font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; } .scroll-indicator { width: 20px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.3); position: relative; border-radius: 0; } .scroll-indicator::after { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 7px; background: var(--gold); animation: scrollAnim 2.5s ease infinite; border-radius: 0; } @keyframes scrollAnim { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; } 60% { transform: translateX(-50%) translateY(12px); opacity: 0; } } @media (max-width: 992px) { .hero-content .container { grid-template-columns: 1fr; text-align: center; } .hero-text { max-width: 100%; } .hero-buttons { justify-content: center; } .hero-tagline { justify-content: center; } .hero-visual { display: none; } } /* ========================================== SECTION COMPONENTS ========================================== */ .section-header { text-align: center; max-width: 680px; margin: 0 auto 64px; } .section-badge { display: inline-block; padding: 5px 16px; background: var(--plum-pale); color: var(--plum); font-family: var(--font-body); font-size: 11px; font-weight: 500; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.2em; border-radius: 0; } .section-header h2 { margin-bottom: 20px; } .section-header p { font-size: 1.0625rem; line-height: 1.8; } /* ========================================== FEATURES SECTION ========================================== */ .features { padding: var(--section-padding) 0; background: var(--ivory-warm); border-top: 1px solid var(--ivory-deep); } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--ivory-deep); border: 1px solid var(--ivory-deep); } .feature-card { background: var(--white); padding: 44px 32px; text-align: center; transition: all var(--transition-base); position: relative; overflow: hidden; border-radius: 0; } .feature-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--plum), var(--gold)); transform: scaleX(0); transition: transform var(--transition-base); } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); z-index: 1; } .feature-card:hover::before { transform: scaleX(1); } .feature-icon { width: 64px; height: 64px; margin: 0 auto 24px; background: var(--plum-pale); display: flex; align-items: center; justify-content: center; border-radius: 0; position: relative; } .feature-icon::after { content: ''; position: absolute; inset: -3px; border: 1px solid var(--plum-soft); opacity: 0.4; } .feature-icon svg { width: 28px; height: 28px; stroke: var(--plum); } .feature-card h3 { margin-bottom: 12px; font-size: 1.2rem; font-weight: 500; color: var(--plum-dark); } .feature-card p { font-size: 14px; line-height: 1.8; } @media (max-width: 992px) { .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .features-grid { grid-template-columns: 1fr; } } /* ========================================== STATS SECTION ========================================== */ .stats { padding: 80px 0; background: var(--plum-dark); position: relative; overflow: hidden; } .stats::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(201, 168, 76, 0.04) 0px, rgba(201, 168, 76, 0.04) 1px, transparent 1px, transparent 30px); pointer-events: none; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; position: relative; z-index: 1; } .stat-item { text-align: center; } .stat-number { font-family: var(--font-primary); font-size: 3.5rem; font-weight: 400; color: var(--gold); line-height: 1; margin-bottom: 8px; } .stat-number::after { content: "+"; } .stat-label { font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.2em; } @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================== ABOUT PREVIEW SECTION ========================================== */ .about-preview { padding: var(--section-padding) 0; background: var(--ivory); } .about-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-preview-image { position: relative; } .image-frame { position: relative; overflow: hidden; background: var(--plum-pale); aspect-ratio: 4/3; border-radius: 0; } .image-frame.large { aspect-ratio: 1; } .image-frame::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(201, 168, 76, 0.25); pointer-events: none; z-index: 1; } .image-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--plum-pale), var(--ivory-deep)); } .image-placeholder svg { width: 70px; height: 70px; stroke: var(--plum-soft); } .experience-badge { position: absolute; bottom: -24px; right: -24px; background: var(--plum); color: var(--white); padding: 28px 32px; text-align: center; box-shadow: var(--shadow-xl); border-radius: 0; border: 1px solid rgba(201, 168, 76, 0.3); } .exp-number { display: block; font-family: var(--font-primary); font-size: 2.8rem; font-weight: 400; color: var(--gold); line-height: 1; } .exp-text { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.8; font-weight: 400; } .about-preview-content h2 { margin-bottom: 24px; } .about-preview-content > p { font-size: 1.0625rem; margin-bottom: 36px; line-height: 1.9; } .about-list { margin-bottom: 44px; } .about-list li { display: flex; align-items: center; gap: 14px; padding: 11px 0; color: var(--gray-700); border-bottom: 1px solid var(--gray-200); font-size: 15px; } .about-list svg { width: 18px; height: 18px; fill: var(--avocado); flex-shrink: 0; } @media (max-width: 992px) { .about-preview-grid { grid-template-columns: 1fr; gap: 60px; } .experience-badge { bottom: 20px; right: 20px; } } /* ========================================== SERVICES PREVIEW SECTION ========================================== */ .services-preview { padding: var(--section-padding) 0; background: var(--gray-100); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .service-card { background: var(--white); padding: 44px 36px; position: relative; overflow: hidden; transition: all var(--transition-base); border: 1px solid var(--gray-200); border-radius: 0; } .service-card::after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: linear-gradient(to bottom, var(--plum), var(--gold)); transition: height var(--transition-slow); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .service-card:hover::after { height: 100%; } .service-number { font-family: var(--font-primary); font-size: 5rem; font-weight: 300; color: var(--plum-pale); line-height: 1; margin-bottom: 16px; } .service-card h3 { margin-bottom: 14px; font-size: 1.4rem; font-weight: 500; } .service-card p { margin-bottom: 24px; line-height: 1.8; font-size: 15px; } .service-link { color: var(--plum); font-family: var(--font-body); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; transition: gap var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; } .service-link:hover { gap: 14px; color: var(--plum-mid); } .services-cta { text-align: center; margin-top: 50px; } @media (max-width: 992px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .services-grid { grid-template-columns: 1fr; } } /* ========================================== BLOG PREVIEW SECTION ========================================== */ .blog-preview { padding: var(--section-padding) 0; background: var(--ivory-warm); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .blog-card { background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition-base); border: 1px solid var(--gray-200); border-radius: 0; } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .blog-card-image { aspect-ratio: 16/10; overflow: hidden; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); filter: saturate(0.9); } .blog-card:hover .blog-card-image img { transform: scale(1.06); filter: saturate(1); } .blog-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--plum-pale), var(--ivory-deep)); display: flex; align-items: center; justify-content: center; } .blog-placeholder svg { width: 50px; height: 50px; stroke: var(--plum-soft); } .blog-card-content { padding: 28px; } .blog-date { font-size: 11px; color: var(--avocado); font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; } .blog-card-content h3 { margin: 10px 0 12px; font-size: 1.2rem; line-height: 1.4; font-weight: 500; } .blog-card-content h3 a { color: var(--plum-dark); transition: color var(--transition-fast); } .blog-card-content h3 a:hover { color: var(--plum-mid); } .blog-card-content p { font-size: 14px; margin-bottom: 16px; line-height: 1.7; } .blog-link { color: var(--plum); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; } .blog-cta { text-align: center; margin-top: 50px; } @media (max-width: 992px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .blog-grid { grid-template-columns: 1fr; } } /* ========================================== CTA SECTION & FOOTER — shared background ========================================== */ .cta-section, .footer { position: relative; background: var(--plum-dark); } .cta-section::before, .footer::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(201, 168, 76, 0.04) 0px, rgba(201, 168, 76, 0.04) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(45deg, rgba(192, 200, 212, 0.03) 0px, rgba(192, 200, 212, 0.03) 1px, transparent 1px, transparent 30px); pointer-events: none; z-index: 0; } .cta-section::after, .footer::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 40%, rgba(201, 168, 76, 0.07) 0%, transparent 50%), radial-gradient(ellipse at 85% 60%, rgba(59, 31, 74, 0.2) 0%, transparent 50%); pointer-events: none; z-index: 0; } .cta-section .container, .footer .container, .cta-section .cta-bg, .footer .footer-content { position: relative; z-index: 2; } .cta-section { padding: 110px 0; overflow: hidden; } .cta-bg { position: absolute; inset: 0; z-index: 1; background: transparent; } .cta-bg::after { display: none; } .cta-content { text-align: center; max-width: 680px; margin: 0 auto; } .cta-content h2 { color: var(--white); margin-bottom: 16px; font-weight: 400; font-style: italic; } .cta-content p { color: rgba(255, 255, 255, 0.6); font-size: 1.0625rem; margin-bottom: 44px; font-weight: 300; line-height: 1.9; } /* ========================================== FOOTER ========================================== */ .footer { padding-top: 60px; color: var(--gray-400); } .footer-wave { display: none; } .footer-content { padding: 60px 0 30px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 60px; } .footer-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .footer-logo img { height: 50px; width: auto; object-fit: contain; } .footer-logo span { font-family: var(--font-primary); font-size: 1.3rem; font-weight: 400; color: var(--white); letter-spacing: 0.06em; } .footer-tagline { font-family: var(--font-body); font-size: 14px; line-height: 1.9; margin-bottom: 28px; color: rgba(255, 255, 255, 0.5); font-weight: 300; } .footer-social { display: flex; gap: 10px; } .footer-social a { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); border-radius: 0; } .footer-social a:hover { background: var(--plum-mid); border-color: var(--plum-mid); transform: translateY(-3px); } .footer-social svg { width: 16px; height: 16px; fill: rgba(255, 255, 255, 0.55); transition: fill var(--transition-fast); } .footer-social a:hover svg { fill: var(--white); } .footer-links h4, .footer-contact h4 { font-family: var(--font-body); color: var(--white); font-size: 11px; font-weight: 500; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.22em; position: relative; display: inline-block; } .footer-links h4::after, .footer-contact h4::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 28px; height: 1px; background: var(--gold); } .footer-links ul { display: flex; flex-direction: column; gap: 12px; } .footer-links a { color: rgba(255, 255, 255, 0.5); font-size: 14px; font-weight: 300; transition: color var(--transition-fast); letter-spacing: 0.04em; } .footer-links a:hover { color: var(--gold); display: inline-block; transform: translateX(4px); } .footer-contact ul { display: flex; flex-direction: column; gap: 16px; } .footer-contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.7; font-weight: 300; color: rgba(255, 255, 255, 0.5); } .footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--gold); margin-top: 3px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 28px; text-align: center; position: relative; z-index: 2; } .footer-bottom p { font-size: 12px; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.1em; font-weight: 300; } @media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; } } /* ========================================== PAGE HEADER ========================================== */ .page-header { position: relative; padding: 180px 0 100px; text-align: center; overflow: hidden; } .page-header-bg { position: absolute; inset: 0; background: linear-gradient(160deg, var(--plum-dark) 0%, var(--plum) 50%, var(--sapphire) 100%); z-index: -1; } .page-header-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(ellipse at 30% 50%, rgba(201, 168, 76, 0.1) 0%, transparent 55%), radial-gradient(ellipse at 70% 50%, rgba(92, 122, 62, 0.07) 0%, transparent 55%); } .page-header-content { max-width: 800px; margin: 0 auto; } .page-badge { display: inline-block; padding: 7px 18px; background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.4); font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--gold); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.2em; border-radius: 0; } .page-header-content h1 { color: var(--white); margin-bottom: 20px; font-weight: 400; font-style: italic; } .page-header-content p { font-size: 1.125rem; color: rgba(255, 255, 255, 0.6); font-weight: 300; } /* ========================================== ABOUT PAGE ========================================== */ .about-story { padding: var(--section-padding) 0; } .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .story-content h2 { margin-bottom: 24px; } .story-content p { font-size: 1.0625rem; line-height: 1.9; margin-bottom: 20px; } .mission-vision { padding: 80px 0; background: var(--gray-100); } .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .mv-card { background: var(--white); padding: 56px 44px; text-align: center; border: 1px solid var(--gray-200); border-radius: 0; position: relative; overflow: hidden; } .mv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--plum), var(--gold), var(--avocado)); } .mv-icon { width: 72px; height: 72px; margin: 0 auto 24px; background: var(--plum-pale); display: flex; align-items: center; justify-content: center; border-radius: 0; } .mv-icon svg { width: 32px; height: 32px; stroke: var(--plum); } .mv-card h3 { margin-bottom: 16px; font-size: 1.5rem; } .mv-card p { font-size: 15px; line-height: 1.8; } .core-values { padding: var(--section-padding) 0; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .value-card { padding: 40px 36px; border: 1px solid var(--gray-200); transition: all var(--transition-base); border-radius: 0; background: var(--white); } .value-card:hover { border-color: var(--plum-soft); box-shadow: var(--shadow-md); } .value-number { font-family: var(--font-primary); font-size: 3.5rem; font-weight: 300; color: var(--plum-pale); margin-bottom: 16px; } .value-card h3 { margin-bottom: 12px; } .value-card p { font-size: 15px; line-height: 1.7; } .team-section { padding: var(--section-padding) 0; background: var(--gray-100); } @media (max-width: 992px) { .story-grid, .mv-grid { grid-template-columns: 1fr; } } @media (max-width: 576px) { .values-grid { grid-template-columns: 1fr; } } /* ========================================== SERVICES PAGE ========================================== */ .services-full { padding: var(--section-padding) 0; } .services-list { display: flex; flex-direction: column; gap: 60px; } .service-full-card { display: grid; grid-template-columns: 120px 1fr; gap: 50px; align-items: start; } .service-full-card.reverse { direction: rtl; } .service-full-card.reverse > * { direction: ltr; } .service-full-icon { width: 96px; height: 96px; background: var(--plum-pale); border: 1px solid var(--plum-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0; } .service-full-icon svg { width: 40px; height: 40px; stroke: var(--plum); } .service-full-content { position: relative; } .service-full-number { position: absolute; top: -20px; right: 0; font-family: var(--font-primary); font-size: 7rem; font-weight: 300; color: var(--gray-200); line-height: 1; z-index: -1; } .service-full-content h3 { font-size: 1.75rem; margin-bottom: 16px; } .service-full-content > p { font-size: 1.0625rem; line-height: 1.9; margin-bottom: 28px; } .service-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .service-features li { display: flex; align-items: center; gap: 10px; color: var(--gray-700); font-size: 15px; } .service-features li::before { content: ""; width: 6px; height: 6px; background: var(--gold); flex-shrink: 0; border-radius: 0; transform: rotate(45deg); } .process-section { padding: var(--section-padding) 0; background: var(--gray-100); } .process-timeline { display: flex; flex-direction: column; gap: 0; max-width: 800px; margin: 0 auto; } .process-step { display: flex; gap: 40px; padding: 40px 0; position: relative; } .process-step:not(:last-child)::after { content: ""; position: absolute; left: 35px; top: 100px; bottom: -40px; width: 1px; background: var(--gray-300); } .process-number { width: 70px; height: 70px; background: var(--plum); color: var(--white); font-family: var(--font-primary); font-size: 1.8rem; font-weight: 400; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; border-radius: 0; } .process-content h3 { font-size: 1.5rem; margin-bottom: 12px; } .process-content p { font-size: 1.0625rem; line-height: 1.7; } @media (max-width: 768px) { .service-full-card { grid-template-columns: 1fr; gap: 24px; } .service-full-card.reverse { direction: ltr; } .service-full-icon { width: 72px; height: 72px; } .service-full-number { display: none; } .service-features { grid-template-columns: 1fr; } .process-step { gap: 24px; } .process-number { width: 50px; height: 50px; font-size: 1.3rem; } .process-step:not(:last-child)::after { left: 24px; top: 80px; } } /* ========================================== CONTACT PAGE ========================================== */ .contact-section { padding: var(--section-padding) 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; } .contact-info h2 { margin-bottom: 16px; } .contact-info > p { font-size: 1.0625rem; line-height: 1.8; margin-bottom: 40px; } .contact-details { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; } .contact-item { display: flex; gap: 16px; } .contact-icon { width: 48px; height: 48px; background: var(--plum-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0; } .contact-icon svg { width: 20px; height: 20px; stroke: var(--plum); } .contact-text h4 { font-family: var(--font-body); font-size: 11px; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 4px; } .contact-text p { color: var(--gray-800); font-size: 15px; } .contact-social h4 { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 16px; } .social-links { display: flex; gap: 10px; } .social-links a { width: 42px; height: 42px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); border-radius: 0; border: 1px solid var(--gray-200); } .social-links a:hover { background: var(--plum); transform: translateY(-3px); } .social-links svg { width: 18px; height: 18px; fill: var(--gray-500); transition: fill var(--transition-fast); } .social-links a:hover svg { fill: var(--white); } .contact-form-wrapper { background: var(--white); padding: 50px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); border-radius: 0; position: relative; } .contact-form-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--plum), var(--gold), var(--avocado)); } .contact-form h3 { margin-bottom: 30px; font-size: 1.5rem; } .form-group { margin-bottom: 24px; } .form-group label { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--gray-600); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.14em; } .form-group input, .form-group textarea { width: 100%; padding: 14px 18px; font-family: var(--font-body); font-size: 15px; border: 1px solid var(--gray-300); transition: all var(--transition-fast); background: var(--ivory); border-radius: 0; color: var(--gray-800); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--plum); background: var(--white); box-shadow: 0 0 0 4px var(--plum-pale); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray-400); } .form-group textarea { resize: vertical; min-height: 120px; } .map-section { height: 400px; } .map-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--plum-pale), var(--ivory-deep)); position: relative; } .map-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .map-content { text-align: center; color: var(--plum-soft); } .map-content svg { width: 50px; height: 50px; margin-bottom: 16px; stroke: var(--plum-soft); } @media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; gap: 60px; } .contact-form-wrapper { padding: 40px; } } @media (max-width: 576px) { .contact-form-wrapper { padding: 28px 20px; } } /* ========================================== BLOG PAGE ========================================== */ .blog-section { padding: var(--section-padding) 0; } .blog-grid-full { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .blog-card-full { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); transition: all var(--transition-base); border-radius: 0; } .blog-card-full:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .blog-card-full .blog-card-image { aspect-ratio: unset; height: 100%; min-height: 250px; } .blog-card-full .blog-card-content { padding: 32px; display: flex; flex-direction: column; } .blog-meta { margin-bottom: 12px; } .blog-card-full h2 { font-size: 1.2rem; margin-bottom: 12px; line-height: 1.4; } .blog-card-full h2 a { color: var(--plum-dark); transition: color var(--transition-fast); } .blog-card-full h2 a:hover { color: var(--plum-mid); } .blog-card-full p { font-size: 14px; line-height: 1.7; margin-bottom: 20px; flex-grow: 1; } .blog-card-full .blog-link { color: var(--plum); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 60px; } .pagination-link { display: flex; align-items: center; gap: 8px; padding: 11px 20px; background: var(--white); border: 1px solid var(--gray-300); font-size: 13px; font-weight: 500; color: var(--gray-700); transition: all var(--transition-fast); border-radius: 0; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; } .pagination-link:hover { border-color: var(--plum); color: var(--plum); } .pagination-link svg { width: 14px; height: 14px; } .pagination-numbers { display: flex; gap: 8px; } .pagination-number { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--gray-700); transition: all var(--transition-fast); border-radius: 0; border: 1px solid transparent; } .pagination-number:hover { background: var(--gray-100); } .pagination-number.active { background: var(--plum); color: var(--white); } .pagination-ellipsis { width: 40px; text-align: center; color: var(--gray-500); } /* Blog Empty State */ .blog-empty { text-align: center; padding: 80px 20px; } .empty-icon { width: 90px; height: 90px; margin: 0 auto 24px; background: var(--plum-pale); display: flex; align-items: center; justify-content: center; border-radius: 0; } .empty-icon svg { width: 44px; height: 44px; stroke: var(--plum-soft); } .blog-empty h2 { margin-bottom: 12px; } .blog-empty p { font-size: 1.0625rem; } /* Newsletter */ .newsletter-section { padding: 0 0 var(--section-padding); } .newsletter-card { background: var(--plum); padding: 60px; display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: 0; position: relative; overflow: hidden; } .newsletter-card::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(201, 168, 76, 0.06) 0px, rgba(201, 168, 76, 0.06) 1px, transparent 1px, transparent 20px); pointer-events: none; } .newsletter-content h2 { color: var(--white); margin-bottom: 8px; font-weight: 400; } .newsletter-content p { color: rgba(255, 255, 255, 0.65); font-size: 1.0625rem; font-weight: 300; } .newsletter-form { display: flex; gap: 10px; flex-shrink: 0; } .newsletter-form input { padding: 14px 20px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: var(--white); font-size: 14px; width: 260px; transition: all var(--transition-fast); border-radius: 0; font-family: var(--font-body); } .newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.5); } .newsletter-form input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.12); } .newsletter-form .btn-primary { background: var(--gold); color: var(--plum-dark); border-color: var(--gold); font-weight: 600; } .newsletter-form .btn-primary:hover { background: #e0be60; border-color: #e0be60; } @media (max-width: 992px) { .blog-grid-full { grid-template-columns: 1fr; } .newsletter-card { flex-direction: column; text-align: center; padding: 48px 36px; } .newsletter-form { flex-direction: column; width: 100%; max-width: 400px; } .newsletter-form input { width: 100%; } } @media (max-width: 768px) { .blog-card-full { grid-template-columns: 1fr; } .blog-card-full .blog-card-image { min-height: 200px; } } /* ========================================== BLOG POST PAGE ========================================== */ .post-header { position: relative; padding: 180px 0 80px; overflow: hidden; } .post-header-content { max-width: 800px; margin: 0 auto; text-align: center; } .back-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.5); font-size: 12px; margin-bottom: 24px; transition: color var(--transition-fast); text-transform: uppercase; letter-spacing: 0.14em; } .back-link:hover { color: var(--gold); } .back-link svg { width: 16px; height: 16px; } .post-header-content h1 { color: var(--white); margin-bottom: 24px; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; font-style: italic; } .post-meta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .post-meta > span { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.5); font-size: 13px; } .post-meta svg { width: 14px; height: 14px; } .post-content-section { padding: var(--section-padding) 0; } .post-article { max-width: 800px; margin: 0 auto; } .post-featured-image { margin-bottom: 50px; overflow: hidden; border-radius: 0; } .post-featured-image img { width: 100%; } .post-body { font-size: 1.0625rem; line-height: 2; color: var(--gray-700); } .post-body h2, .post-body h3, .post-body h4 { margin-top: 40px; margin-bottom: 20px; } .post-body p { margin-bottom: 24px; color: var(--gray-700); } .post-body ul, .post-body ol { margin-bottom: 24px; padding-left: 24px; } .post-body li { margin-bottom: 8px; list-style: disc; } .post-body ol li { list-style: decimal; } .post-body a { color: var(--plum); text-decoration: underline; } .post-body blockquote { margin: 36px 0; padding: 28px 36px; border-left: 3px solid var(--gold); background: var(--plum-pale); font-style: italic; font-family: var(--font-primary); font-size: 1.15rem; color: var(--plum-dark); } .post-footer { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--gray-200); } .post-share { display: flex; align-items: center; gap: 16px; } .post-share > span { font-weight: 500; color: var(--gray-700); } .share-links { display: flex; gap: 10px; } .share-links a { width: 38px; height: 38px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); border-radius: 0; border: 1px solid var(--gray-200); } .share-links a:hover { background: var(--plum); border-color: var(--plum); } .share-links svg { width: 16px; height: 16px; fill: var(--gray-500); transition: fill var(--transition-fast); } .share-links a:hover svg { fill: var(--white); } .post-navigation { text-align: center; margin-top: 60px; } /* ========================================== TEAM CAROUSEL ========================================== */ .carousel-container { width: 100%; overflow: hidden; position: relative; padding: 0 60px !important; overflow: visible !important; } .team-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 24px !important; padding: 20px 0 40px !important; scrollbar-width: none !important; scroll-snap-type: x mandatory; scroll-behavior: smooth !important; } .team-grid::-webkit-scrollbar { display: none !important; } .team-card { flex: 0 0 calc(33.333% - 16px) !important; min-width: calc(33.333% - 16px) !important; max-width: calc(33.333% - 16px) !important; margin-bottom: 0 !important; background: var(--white); border: 1px solid var(--gray-200); scroll-snap-align: start; transition: all var(--transition-base); } .team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .team-image { width: 100% !important; height: 300px !important; overflow: hidden !important; } .team-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; filter: saturate(0.85); transition: filter var(--transition-base); } .team-card:hover .team-image img { filter: saturate(1); } .team-placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, var(--plum-pale), var(--ivory-deep)); display: flex; align-items: center; justify-content: center; } .team-placeholder svg { width: 70px; height: 70px; stroke: var(--plum-soft); } .team-info { padding: 28px; text-align: center; border-top: 1px solid var(--gray-200); } .team-info h3 { margin-bottom: 6px; font-size: 1.3rem; } .team-role { color: var(--plum); font-family: var(--font-body); font-weight: 500; font-size: 12px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.14em; } .team-info > p:last-child { font-size: 14px; line-height: 1.7; } .nav-btn { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 48px !important; height: 48px !important; background-color: var(--white) !important; border: 1px solid var(--plum-soft) !important; color: var(--plum) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 1000 !important; box-shadow: var(--shadow-md) !important; transition: all 0.3s ease !important; border-radius: 0 !important; } .nav-btn:hover { background-color: var(--plum) !important; color: var(--white) !important; border-color: var(--plum) !important; } .nav-btn svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; } .prev-btn { left: -25px !important; } .next-btn { right: -25px !important; } @media (max-width: 768px) { .carousel-container { padding: 0 44px !important; } .team-card { flex: 0 0 100% !important; min-width: 100% !important; max-width: 100% !important; } .nav-btn { width: 38px !important; height: 38px !important; } .nav-btn svg { width: 18px !important; height: 18px !important; } .team-grid { gap: 0 !important; } .prev-btn { left: 2px !important; } .next-btn { right: 2px !important; } }