/* ═══════════════════════════════════════════ Glorious Garden Homes — Design System v4.0 PromisePD-inspired Premium Real Estate UI ═══════════════════════════════════════════ */ /* Google Fonts loaded via preload in HTML */ /* ═══ CSS VARIABLES ═══ */ :root { --brand: #0f3027; --brand-dark: #091f19; --brand-light: #1a5040; --gold: #c9a84c; --gold-dark: #b08f3a; --gold-light: #dfc476; --gold-pale: rgba(201,168,76,0.08); --gold-glow: rgba(201,168,76,0.18); --bg: #ffffff; --bg-soft: #f5f3ee; --bg-soft-2: #eae6de; --fg: #1a1a1a; --fg-soft: #333333; --fg-muted: #555555; --fg-faint: #888888; --border: #ddd8ce; --border-light: rgba(0,0,0,0.06); --shadow-brand: 0 4px 20px rgba(15,48,39,0.22); --shadow-brand-gold: 0 4px 20px rgba(201,168,76,0.22); --shadow-card: 0 1px 4px rgba(0,0,0,0.07); --shadow-hover: 0 10px 30px rgba(0,0,0,0.1); --shadow-btn: 0 4px 18px rgba(201,168,76,0.25); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-2xl: 1.5rem; /* Aliases for backward compat with existing classes */ --primary: var(--brand); --primary-light: var(--brand-light); --primary-dark: var(--brand-dark); --bg-light: var(--bg-soft); --bg-section: var(--bg-soft-2); --bg-white: var(--bg); --text-primary: var(--fg); --text-muted: var(--fg-muted); --text-light: var(--fg-faint); --border-line: var(--border); --dark: var(--fg); } /* ═══ RESETS ═══ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; background-color: var(--bg); color: var(--fg); line-height: 1.7; font-size: 16px; font-weight: 400; } ::selection { background: var(--gold); color: #fff; } h1, h2, h3, h4, h5, h6 { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-weight: 700; line-height: 1.2; color: var(--fg); } img { max-width: 100%; height: auto; } a { text-decoration: none; transition: color 0.3s ease; } button { cursor: pointer; } p { line-height: 1.8; margin-bottom: 1rem; } strong { font-weight: 600; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ═══ ANIMATED BLOBS ═══ */ @keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -50px) scale(1.1); } 50% { transform: translate(-20px, 20px) scale(0.9); } 75% { transform: translate(50px, 30px) scale(1.05); } } .animate-blob { animation: blob 20s ease-in-out infinite; will-change: transform; } /* ═══ MESH BACKGROUND ═══ */ .mesh-bg { background-image: radial-gradient(circle, rgba(18,55,42,0.06) 1px, transparent 1px); background-size: 24px 24px; } .mesh-bg-soft { background-image: radial-gradient(circle, rgba(18,55,42,0.04) 1px, transparent 1px); background-size: 24px 24px; } /* ═══ GRID BACKGROUND ═══ */ .grid-bg { background-image: linear-gradient(rgba(18,55,42,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(18,55,42,0.03) 1px, transparent 1px); background-size: 60px 60px; } /* ═══ NOISE TEXTURE ═══ */ .noise { position: relative; } .noise::after { content: ''; position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; } /* ═══ GRADIENT BORDER CARD ═══ */ .grad-border { position: relative; background: #fff; border-radius: 1rem; border: 1px solid var(--border); } .grad-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--brand), var(--gold)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .grad-border:hover::before { opacity: 1; } /* ═══ CARD SYSTEM ═══ */ .card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid var(--border); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } /* ═══ GRADIENT TEXT ═══ */ .text-grad { background: linear-gradient(135deg, var(--brand), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-grad-rb { background: linear-gradient(135deg, var(--gold), var(--brand)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══ SECTION TAG PILL ═══ */ .section-tag { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background: #fff; border: 1px solid var(--border); padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .section-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* ═══ TESTIMONIALS MARQUEE ═══ */ /* ═══ TESTIMONIALS DUAL MARQUEE ═══ */ @keyframes marquee-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marquee-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .animate-marquee-left { animation: marquee-left 35s linear infinite; } .animate-marquee-right { animation: marquee-right 35s linear infinite; } .animate-marquee-left:hover, .animate-marquee-right:hover { animation-play-state: paused; } #testimonials .grad-border { flex-shrink: 0; display: flex; flex-direction: column; height: 240px; } #testimonials .grad-border .flex-1 { flex: 1 1 0; min-height: 0; } #testimonials .grad-border > div:last-child { flex-shrink: 0; } /* ═══ BUTTON SHINE ═══ */ .btn-shine { position: relative; overflow: hidden; } .btn-shine::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .btn-shine:hover::after { left: 100%; } /* ═══ WHATSAPP PULSE ═══ */ @keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); } 70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } .wa-pulse { animation: wa-pulse 2s infinite; } /* ═══ SCROLLBAR ═══ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-soft-2); } ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold-light); } /* ═══ SCROLL PROGRESS ═══ */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); z-index: 10001; width: 0%; transition: width 0.05s linear; } /* ═══ PAGE LOADER ═══ */ #page-loader { position: fixed; inset: 0; z-index: 10000; background: var(--brand); display: flex; align-items: center; justify-content: center; transition: opacity 0.8s ease, visibility 0.8s ease; } #page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader-logo { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; color: #fff; letter-spacing: 0.05em; } .loader-sub { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 0.35rem; } /* ═══ GLASS ═══ */ .glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.12); } .glass-dark { background: rgba(0,0,0,0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(198,161,91,0.12); } /* ═══ TYPOGRAPHY ═══ */ .playfair { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-weight: 700; } .bangla { font-family: 'Noto Sans Bengali', sans-serif; } .tracking-ultra-wide { letter-spacing: 0.3em; } .tracking-wide-lg { letter-spacing: 0.12em; } .text-gradient { background: linear-gradient(135deg, var(--gold), var(--gold-light), #F5E6D3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══ SECTION UTILITIES ═══ */ .section-padding { padding: 6rem 0; } .section-padding-lg { padding: 7rem 0; } .section-divider { position: relative; } .section-divider::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(18,55,42,0.15), transparent); } /* ═══ NAVIGATION ═══ */ #navbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease; } /* Desktop nav links — auto-adapt to navbar state */ .nav-link-item { color: rgba(255,255,255,0.9) !important; font-weight: 600; transition: color 0.3s ease, background 0.3s ease !important; } .nav-link-item:hover { color: #c9a84c !important; background: rgba(201,168,76,0.1) !important; } .nav-link-item.nav-link-gold { color: #c9a84c !important; } .nav-link-item.nav-link-gold:hover { color: #b8993a !important; } #navbar.scrolled .nav-link-item { color: #374151 !important; } #navbar.scrolled .nav-link-item:hover { color: #c9a84c !important; } #navbar.scrolled .nav-link-item.nav-link-gold { color: #c9a84c !important; } /* Mobile inline nav links — right-aligned with hamburger */ .nav-mobile-link { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; transition: color 0.3s ease; color: rgba(255,255,255,0.7); } @media (min-width: 1024px) { .nav-mobile-link { display: none !important; } } .nav-mobile-link:hover { color: #c9a84c !important; } .nav-mobile-link.nav-mobile-gold { color: #c9a84c; } .nav-mobile-link.nav-mobile-gold:hover { color: #b8993a !important; } #navbar.scrolled .nav-mobile-link { color: #374151 !important; } #navbar.scrolled .nav-mobile-link.nav-mobile-gold { color: #c9a84c !important; } #navbar.scrolled .nav-mobile-link:hover { color: #c9a84c !important; } #navbar.scrolled { background: rgba(255,255,255,0.98) !important; backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); border-bottom: 1px solid rgba(0,0,0,0.08); padding: 0.5rem 0 !important; box-shadow: 0 2px 16px rgba(0,0,0,0.06); } #navbar.scrolled .nav-link-item { color: #1f2937 !important; font-weight: 600; } #navbar.scrolled .nav-link-item:hover { color: #c9a84c !important; background: rgba(201,168,76,0.08) !important; } #navbar.scrolled .nav-mobile-link { color: #374151 !important; font-weight: 600; } #navbar.scrolled .nav-link-item.nav-link-gold { color: #c9a84c !important; } #navbar.scrolled .navbar-logo-text { color: var(--brand) !important; } #navbar .nav-cta { transition: all 0.4s ease !important; } #navbar.scrolled #mobile-menu-btn { color: var(--brand) !important; } #navbar.scrolled #nav-logo-sub { color: var(--fg-muted) !important; } /* Mobile menu */ #mobile-menu { position: fixed !important; top: 0 !important; right: -100% !important; width: 100% !important; max-width: 400px !important; height: 100dvh !important; z-index: 10001 !important; background: white !important; transition: right 0.5s var(--ease-out-expo), visibility 0s linear 0.5s !important; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: none; visibility: hidden; pointer-events: none; } #mobile-menu.open { right: 0 !important; visibility: visible !important; pointer-events: auto !important; will-change: right; transition: right 0.5s var(--ease-out-expo), visibility 0s linear 0s !important; } #mobile-menu.open ~ .mobile-sticky-cta, body.menu-open .mobile-sticky-cta { display: none !important; } body.menu-open { padding-bottom: 0 !important; } body.menu-open { overflow: hidden !important; } body.menu-open { overscroll-behavior: none !important; } #mobile-menu .nav-links a { position: relative; display: block; padding: 1rem 1.5rem; font-size: 1.1rem; font-weight: 500; color: var(--brand); transition: color 0.3s ease; border-bottom: 1px solid rgba(255,255,255,0.04); } #mobile-menu .nav-links a:hover { color: var(--gold); } /* ═══ BUTTONS ═══ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; transition: all 0.2s ease; border: none; line-height: 1.4; cursor: pointer; text-decoration: none; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; } .btn-lg { padding: 1rem 2rem; font-size: 1rem; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-light); } .btn-gold { background: var(--gold); color: #fff; } .btn-gold:hover { background: var(--gold-dark); } .btn-outline { background: transparent; color: var(--fg); border: 1.5px solid var(--border); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.25); } .btn-outline-light:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); } .btn-shimmer { position: relative; overflow: hidden; } .btn-shimmer::before { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); transform: skewX(-20deg); transition: left 0.5s ease; } .btn-shimmer:hover::before { left: 120%; } /* Primary CTA Button — Premium Style */ .btn-cta-primary { display: inline-flex; align-items: center; gap: 0.75rem; background: var(--gold); color: var(--brand); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 1rem 2.5rem; border: none; cursor: pointer; transition: all 0.5s var(--ease-out-expo); position: relative; overflow: hidden; } .btn-cta-primary::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--brand); transition: width 0.5s var(--ease-out-expo); z-index: 0; } .btn-cta-primary:hover::before { width: 100%; } .btn-cta-primary:hover { color: #fff; } .btn-cta-primary span, .btn-cta-primary i { position: relative; z-index: 1; } .btn-cta-primary i { transition: transform 0.4s var(--ease-out-expo); } .btn-cta-primary:hover i { transform: translateX(4px); } /* Secondary CTA — Outline Light */ .btn-cta-secondary { display: inline-flex; align-items: center; gap: 0.75rem; background: transparent; color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 1rem 2.5rem; border: 1.5px solid rgba(255,255,255,0.3); cursor: pointer; transition: all 0.4s ease; } .btn-cta-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); } /* ═══ HERO ═══ */ .hero-section { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.9) 100% ); } .hero-accent { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(198,161,91,0.06) 0%, transparent 60%); pointer-events: none; } .hero-content { position: relative; z-index: 10; text-align: center; color: #fff; max-width: 900px; padding: 0 1.5rem; } .hero-subtitle { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; font-family: 'Inter', sans-serif; } .hero-title { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 700; line-height: 1.05; margin-bottom: 1.5rem; } .hero-desc { font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 300; color: rgba(255,255,255,0.65); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.7; } .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; opacity: 0.5; color: #fff; } .hero-scroll-label { font-size: 0.55rem; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 0.5rem; } .hero-scroll-line { width: 1px; height: 2rem; background: linear-gradient(to bottom, var(--gold), transparent); } /* Hero Slider Controls */ .hero-controls { position: absolute; bottom: 2.5rem; right: 3rem; z-index: 20; display: flex; align-items: center; gap: 1.5rem; } .hero-counter { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 1.5rem; font-weight: 300; color: rgba(255,255,255,0.5); } .hero-counter .current { color: var(--gold); font-weight: 600; } .hero-arrows { display: flex; gap: 0.5rem; } .hero-arrow { width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.875rem; cursor: pointer; transition: all 0.3s ease; background: transparent; } .hero-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--brand); } /* Ken Burns */ @keyframes kenburns { 0% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.06) translate(-0.5%,-0.5%); } 100% { transform: scale(1.03) translate(0.5%,0.5%); } } .ken-burns-bg { animation: kenburns 20s ease-in-out infinite alternate; } /* ═══ TRUST STRIP ═══ */ .trust-strip { background: var(--brand); padding: 1.5rem 0; } .trust-strip-item { display: flex; align-items: center; gap: 0.75rem; color: rgba(255,255,255,0.7); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; } .trust-strip-item i { color: var(--gold); font-size: 1rem; } /* ═══ CARD EXTENDED ═══ */ .card-image { position: relative; overflow: hidden; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card:hover .card-image img { transform: scale(1.05); } .card-body { padding: 1.5rem; } .card-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; } .card-badge-gold { background: rgba(198,161,91,0.1); color: var(--gold); } .card-badge-green { background: rgba(16,185,129,0.1); color: #059669; } /* Premium Card */ .card-premium { background: var(--bg); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid var(--border-light); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-premium:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(198,161,91,0.15); } /* Project Card — Premium Style */ .project-card { background: var(--bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo); } .project-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover), 0 0 30px var(--gold-glow); } .project-card .card-img-wrap { position: relative; overflow: hidden; height: 280px; } .project-card .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); } .project-card:hover .card-img-wrap img { transform: scale(1.08); } .project-card .card-status { position: absolute; top: 1rem; left: 1rem; background: var(--gold); color: var(--brand); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.35rem 0.75rem; } .project-card .card-body { padding: 1.5rem; } .project-card .card-title { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--fg); margin-bottom: 0.5rem; transition: color 0.3s ease; } .project-card:hover .card-title { color: var(--gold); } .project-card .card-location { color: var(--fg-muted); font-size: 0.875rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .project-card .card-location i { color: var(--gold); font-size: 0.75rem; } .project-card .card-price { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 0.25rem; } .project-card .card-price-value { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--gold); } .project-card .card-link { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); transition: color 0.3s ease; } .project-card:hover .card-link { color: var(--gold); } .project-card .card-link i { transition: transform 0.3s ease; } .project-card:hover .card-link i { transform: translateX(4px); } /* Featured Project Card — Large */ .featured-project-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); display: block; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo); } .featured-project-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -15px rgba(0,0,0,0.15); } .featured-project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease-out-expo); } .featured-project-card:hover img { transform: scale(1.08); } .featured-project-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,55,42,0.9) 0%, rgba(18,55,42,0.2) 50%, transparent 100%); transition: opacity 0.5s ease; } .featured-project-card:hover .overlay { opacity: 0.8; } .featured-project-card .card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; color: #fff; } /* ═══ HOVER EFFECTS ═══ */ .hover-lift { transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo); } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .hover-lift-premium { transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo); } .hover-lift-premium:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -15px rgba(0,0,0,0.12), 0 0 30px var(--gold-glow); } .hover-underline { position: relative; } .hover-underline::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width 0.5s var(--ease-out-expo); } .hover-underline:hover::after { width: 100%; } .img-zoom { overflow: hidden; } .img-zoom img { transition: transform 0.7s var(--ease-out-expo); } .img-zoom:hover img { transform: scale(1.06); } .gold-border { border: 1px solid var(--border-light); transition: border-color 0.4s ease, box-shadow 0.4s ease; } .gold-border:hover { border-color: rgba(198,161,91,0.4); box-shadow: 0 0 20px var(--gold-glow); } /* ═══ STATS ═══ */ .stat-card { text-align: center; padding: 1.5rem; } .stat-number { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; color: #fff; line-height: 1; margin-bottom: 0.5rem; } .stat-number .gold { color: var(--gold); } .stat-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.5); } /* ═══ WHY CHOOSE US ═══ */ .why-card { background: var(--bg); border-radius: var(--radius-lg); padding: 2.5rem; border: 1px solid var(--border-light); transition: all 0.5s var(--ease-out-expo); position: relative; overflow: hidden; } .why-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: var(--gold); transition: width 0.5s var(--ease-out-expo); } .why-card:hover::before { width: 100%; } .why-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); border-color: rgba(198,161,91,0.2); } .why-card .why-number { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 3rem; font-weight: 300; color: var(--border); line-height: 1; margin-bottom: 1rem; transition: color 0.4s ease; } .why-card:hover .why-number { color: var(--gold); } .why-card .why-title { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--fg); margin-bottom: 0.75rem; } .why-card .why-desc { color: var(--fg-muted); font-size: 0.875rem; line-height: 1.7; } .why-card .why-icon { width: 3rem; height: 3rem; background: var(--gold-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; color: var(--gold); font-size: 1.1rem; transition: all 0.4s ease; } .why-card:hover .why-icon { background: var(--gold); color: #fff; } /* ═══ TESTIMONIALS ═══ */ .testimonial-card { background: #fff; border-radius: var(--radius-lg); padding: 2.5rem; position: relative; border: 1px solid var(--border-light); transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo); } .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .testimonial-card::before { content: '\201C'; font-family: 'Cormorant Garamond', serif; font-size: 5rem; color: var(--gold-pale); position: absolute; top: 0.25rem; left: 1.5rem; line-height: 1; } .stars { color: var(--gold); letter-spacing: 2px; } /* ═══ FORMS ═══ */ .form-group { margin-bottom: 1.25rem; } .form-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); display: block; margin-bottom: 0.375rem; } .form-input, .form-select, .form-textarea { width: 100%; border-radius: 0.75rem; background: #fff; border: 1px solid var(--border); padding: 0.875rem 1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--fg); transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; font-family: 'Noto Sans Bengali', 'Inter', sans-serif; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18,55,42,0.1); } .form-input::placeholder, .form-textarea::placeholder { color: var(--fg-faint); } .form-textarea { resize: vertical; min-height: 120px; } /* ═══ LIGHTBOX ═══ */ .lightbox-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; } .lightbox-overlay.active { opacity: 1; visibility: visible; } .lightbox-overlay.active .lightbox-image-wrap { transform: scale(1); opacity: 1; } .lightbox-image-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transform: scale(0.92); opacity: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease; } .lightbox-image-wrap img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 0.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); user-select: none; } .lightbox-close { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 100000; width: 2.75rem; height: 2.75rem; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .lightbox-close:hover { background: rgba(255,255,255,0.2); transform: scale(1.08); } .lightbox-nav { position: fixed; top: 50%; z-index: 100000; transform: translateY(-50%); width: 3rem; height: 3rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .lightbox-nav:hover { background: rgba(198,161,91,0.25); transform: translateY(-50%) scale(1.08); } .lightbox-nav-prev { left: 1rem; } .lightbox-nav-next { right: 1rem; } .lightbox-counter { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 100000; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); padding: 0.4rem 1rem; border-radius: 999px; color: rgba(255,255,255,0.7); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; } .lightbox-counter span { color: #fff; font-weight: 600; } .lightbox-hidden { display: none !important; } /* ═══ BLOG PROSE ═══ */ .blog-prose { font-family: 'Inter', sans-serif; font-size: 1.0625rem; line-height: 1.9; color: #374151; } .blog-prose p { margin-bottom: 1.5rem; } .blog-prose h2 { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-weight: 700; color: var(--fg); margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.25; font-size: 1.6rem; } .blog-prose blockquote { border-left: 4px solid var(--gold); background: linear-gradient(135deg, var(--bg-soft), var(--bg-soft-2)); margin: 2rem 0; padding: 1.25rem 1.75rem; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-style: italic; color: #374151; font-size: 1.05rem; } .blog-prose ul { list-style: none; padding-left: 0; margin: 1.25rem 0; } .blog-prose ul li { position: relative; padding-left: 1.75rem; margin-bottom: 0.6rem; } .blog-prose ul li::before { content: ''; position: absolute; left: 0; top: 0.65rem; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; } .blog-prose > p:first-of-type::first-letter { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 4rem; font-weight: 700; color: var(--gold); float: left; line-height: 0.8; margin-right: 0.15em; margin-top: 0.1em; } /* ═══ FLOATING WHATSAPP ═══ */ .whatsapp-float { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 40; display: flex; align-items: flex-end; gap: 0.75rem; } .whatsapp-tooltip { background: #fff; border: 1px solid var(--border); border-radius: 1rem; border-bottom-right-radius: 0.25rem; padding: 0.75rem 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); max-width: 220px; } .whatsapp-btn { width: 4rem; height: 4rem; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: transform 0.3s ease; } .whatsapp-btn:hover { transform: scale(1.08); } .floating-whatsapp { animation: float 4s ease-in-out infinite; } /* ═══ SOCIAL SHARE SIDEBAR ═══ */ .social-share-sidebar { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: none; flex-direction: column; align-items: center; gap: 0.375rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border: 1px solid var(--border); border-left: none; border-radius: 0 0.75rem 0.75rem 0; padding: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } @media (min-width: 768px) { .social-share-sidebar { display: flex; } } .social-share-sidebar a { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; transition: transform 0.2s ease, background 0.2s ease; } .social-share-sidebar a:hover { transform: scale(1.1); background: var(--bg-soft); } /* ═══ SCROLL TO TOP ═══ */ .scroll-top-btn { opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo); transform: translateY(20px); } .scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top-btn .scroll-pct-text { pointer-events: none; } /* ═══ PROJECT FILTERING ═══ */ .project-item { transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo); } .filter-btn { position: relative; } .filter-btn.active { background: var(--gold) !important; color: #fff !important; } /* ═══ IMAGE REVEAL ═══ */ .img-reveal { position: relative; overflow: hidden; } .img-reveal::after { content: ''; position: absolute; inset: 0; background: var(--brand); transform: translateX(0); transition: transform 1.2s var(--ease-out-expo); } .img-reveal.revealed::after { transform: translateX(101%); } /* ═══ SKELETON LOADING ═══ */ .skeleton { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ═══ PROGRESS BAR ═══ */ .progress-bar { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 999px; transition: width 1.5s var(--ease-out-expo); } /* ═══ ANIMATIONS ═══ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes slideUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } @keyframes customFadeUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } /* GSAP-ready initial states */ .gsap-fade-up { opacity: 0; transform: translateY(40px); } .gsap-fade-left { opacity: 0; transform: translateX(-40px); } .gsap-fade-right { opacity: 0; transform: translateX(40px); } .gsap-scale { opacity: 0; transform: scale(0.9); } /* ═══ CURSOR GLOW ═══ */ .cursor-glow { position: fixed; width: min(50vw, 600px); height: min(50vw, 600px); background: radial-gradient(circle, rgba(198,161,91,0.04) 0%, rgba(198,161,91,0) 60%); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; opacity: 0; transition: opacity 0.8s ease; } body:hover .cursor-glow { opacity: 1; } /* ═══ NEWSLETTER SECTION ═══ */ .newsletter-section { background: var(--brand); position: relative; overflow: hidden; } .newsletter-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(198,161,91,0.08) 0%, transparent 70%); border-radius: 50%; } /* ═══ FOOTER ═══ */ .site-footer { background: var(--bg-soft); color: var(--fg-muted); position: relative; overflow: hidden; } .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(18,55,42,0.3), transparent); } .site-footer a { transition: color 0.3s ease; } .site-footer a:hover { color: var(--gold); } .footer-heading { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--fg); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; } .footer-heading::before { content: ''; width: 1rem; height: 1px; background: var(--gold); } /* ═══ MOBILE STICKY CTA ═══ */ .mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9990; background: var(--brand); border-top: 1px solid rgba(198,161,91,0.2); display: none; padding: 0; } @media (max-width: 768px) { .mobile-sticky-cta { display: flex; } body { padding-bottom: 60px; } } .mobile-sticky-cta a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.6rem; color: rgba(255,255,255,0.7); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.3s ease; border-right: 1px solid rgba(255,255,255,0.06); } .mobile-sticky-cta a:last-child { border-right: none; } .mobile-sticky-cta a i { font-size: 1.1rem; margin-bottom: 0.15rem; } .mobile-sticky-cta a:hover, .mobile-sticky-cta a.whatsapp-cta { color: #25D666; } .mobile-sticky-cta a.call-cta { color: var(--gold); } /* ═══ CUSTOM TAILWIND ALIASES ═══ */ .bg-bgLight { background-color: var(--bg-soft); } .bg-bgSection { background-color: var(--bg-soft-2); } .bg-bgWhite { background-color: var(--bg); } .bg-primary { background-color: var(--brand); } .bg-gold { background-color: var(--gold); } .text-textPrimary { color: var(--fg); } .text-textMuted { color: var(--fg-muted); } .text-textLight { color: var(--fg-faint); } .text-primary { color: var(--brand); } .text-gold { color: var(--gold); } .border-borderLine { border-color: var(--border); } .border-borderLight { border-color: var(--border-light); } .border-gold { border-color: var(--gold); } .hover\:bg-gold:hover { background-color: var(--gold); } .hover\:bg-primary:hover { background-color: var(--brand); } .hover\:bg-white:hover { background-color: #FFFFFF; } .hover\:text-gold:hover { color: var(--gold); } .hover\:text-primary:hover { color: var(--brand); } .hover\:text-white:hover { color: #FFFFFF; } .group:hover .group-hover\:bg-gold { background-color: var(--gold); } .group:hover .group-hover\:text-primary { color: var(--brand); } .bg-primary\/50 { background-color: rgba(18,55,42,0.5); } .bg-primary\/90 { background-color: rgba(18,55,42,0.9); } .bg-gold\/10 { background-color: rgba(198,161,91,0.1); } .bg-gold\/20 { background-color: rgba(198,161,91,0.2); } .border-gold\/20 { border-color: rgba(198,161,91,0.2); } .border-gold\/30 { border-color: rgba(198,161,91,0.3); } .hover\:shadow-gold\/20:hover { box-shadow: 0 4px 16px rgba(198,161,91,0.2); } .line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* Counter animation */ .counter { display: inline-block; } .count-up { animation: countPulse 0.3s ease; } @keyframes countPulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } /* Swiper overrides */ .swiper-pagination-bullet-active { background: var(--gold) !important; } .swiper-button-next, .swiper-button-prev { color: var(--gold) !important; } /* ═══ RESPONSIVE ═══ */ @media (max-width: 1024px) { .hero-title { font-size: clamp(2rem, 5vw, 3.5rem); } .section-padding { padding: 5rem 0; } .section-padding-lg { padding: 6rem 0; } } @media (max-width: 768px) { .cursor-glow { display: none; } .blog-prose { font-size: 1rem; } .blog-prose > p:first-of-type::first-letter { font-size: 3rem; } .stat-number { font-size: clamp(2rem, 8vw, 3rem); } .btn { padding: 0.75rem 1.5rem; font-size: 0.7rem; } .section-padding { padding: 3rem 0; } .section-padding-lg { padding: 3.5rem 0; } .container { padding-left: 1rem; padding-right: 1rem; } .hero-controls { bottom: 1.5rem; right: 1.5rem; } .hero-arrow { width: 2.5rem; height: 2.5rem; font-size: 0.75rem; } .whatsapp-float { bottom: 5rem !important; left: 1rem !important; } .scroll-top-btn { bottom: 5rem !important; right: 1rem !important; } .social-share-sidebar { display: none !important; } } @media (max-width: 480px) { .hero-title { font-size: 2rem; } .card-body { padding: 1rem; } .testimonial-card { padding: 1.5rem; } .whatsapp-tooltip { display: none; } .whatsapp-btn { width: 3rem; height: 3rem; } .scroll-top-btn { width: 2.5rem; height: 2.5rem; } } /* ═══════════════════════════════════════════ PREMIUM ANIMATIONS v1.0 ═══════════════════════════════════════════ */ /* ── Page Enter ── */ .page-enter { animation: pageEnter 0.8s var(--ease-out-expo) forwards; } @keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } } /* ── Cursor Glow (JS-controlled) ── */ /* ── Hero Staggered Reveal ── */ .hero-stagger > * { opacity: 0; transform: translateY(30px); animation: heroReveal 0.8s var(--ease-out-expo) forwards; } .hero-stagger > *:nth-child(1) { animation-delay: 0.1s; } .hero-stagger > *:nth-child(2) { animation-delay: 0.2s; } .hero-stagger > *:nth-child(3) { animation-delay: 0.35s; } .hero-stagger > *:nth-child(4) { animation-delay: 0.5s; } .hero-stagger > *:nth-child(5) { animation-delay: 0.65s; } .hero-stagger > *:nth-child(6) { animation-delay: 0.8s; } @keyframes heroReveal { to { opacity: 1; transform: translateY(0); } } /* ── Text Clip Reveal ── */ .text-reveal { clip-path: inset(0 100% 0 0); animation: textClipReveal 1s var(--ease-out-expo) forwards; } @keyframes textClipReveal { to { clip-path: inset(0 0% 0 0); } } /* ── Image Reveal ── */ .img-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-out-expo); } .img-reveal.revealed { clip-path: inset(0 0 0% 0); } /* ── Magnetic Button ── */ .magnetic-btn { position: relative; transition: transform 0.3s var(--ease-out-expo); } .magnetic-btn::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: linear-gradient(135deg, var(--gold), var(--brand)); opacity: 0; transition: opacity 0.4s ease; z-index: -1; filter: blur(12px); } .magnetic-btn:hover::before { opacity: 0.4; } .magnetic-btn:hover { transform: translateY(-2px); } /* ── Card 3D Tilt ── */ .card-3d { transform-style: preserve-3d; perspective: 1000px; } .card-3d-inner { transition: transform 0.4s var(--ease-out-expo); transform-style: preserve-3d; } .card-3d:hover .card-3d-inner { transform: rotateY(-3deg) rotateX(2deg) translateZ(10px); } /* ── Gradient Border Glow ── */ .glow-border { position: relative; overflow: hidden; } .glow-border::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, var(--gold), transparent, var(--brand), transparent); animation: glowRotate 6s linear infinite; opacity: 0; transition: opacity 0.5s ease; z-index: -1; } .glow-border:hover::after { opacity: 0.15; } @keyframes glowRotate { to { transform: rotate(360deg); } } /* ── Floating Animation ── */ .float { animation: float 6s ease-in-out infinite; } .float-delay { animation: float 6s ease-in-out 2s infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ── Shimmer Loading ── */ .shimmer { background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg-soft-2) 50%, var(--bg-soft) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Ripple Effect ── */ .ripple { position: relative; overflow: hidden; } .ripple::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.3); width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; top: 50%; left: 50%; transform: scale(0); opacity: 1; transition: transform 0.6s ease, opacity 0.6s ease; } .ripple:active::after { transform: scale(4); opacity: 0; } /* ── Section Fade Variants ── */ .fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .fade-left.visible { opacity: 1; transform: translateX(0); } .fade-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .fade-right.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.9); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .scale-in.visible { opacity: 1; transform: scale(1); } /* ── Stagger Children ── */ .stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo); } .stagger-children.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(6) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(7) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(8) { transition-delay: 0.56s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(9) { transition-delay: 0.64s; opacity: 1; transform: translateY(0); } /* ── Number Counter Pop ── */ .counter-pop { display: inline-block; transition: transform 0.3s var(--ease-out-expo); } .counter-pop.counting { animation: counterPop 0.4s var(--ease-out-expo); } @keyframes counterPop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } } /* ── Magnetic Hover for Cards ── */ .hover-lift { transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo); } .hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } /* ── Line Draw Animation ── */ .line-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.5s var(--ease-out-expo); } .line-draw.visible { stroke-dashoffset: 0; } /* ── Parallax Smooth ── */ .parallax-smooth { will-change: transform; transition: transform 0.1s linear; } /* ── Navbar Glass Effect on Scroll ── */ .navbar-glass { transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease; } .navbar-glass.scrolled { background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 20px rgba(0,0,0,0.06); } /* ── Featured Project Card Shine ── */ .featured-shine { position: relative; overflow: hidden; } .featured-shine::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.8s ease; z-index: 2; pointer-events: none; } .featured-shine:hover::before { left: 100%; } /* ── Gold Underline Hover ── */ .gold-underline { position: relative; display: inline-block; } .gold-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width 0.4s var(--ease-out-expo); } .gold-underline:hover::after { width: 100%; } /* ── Testimonial Card Hover ── */ .testimonial-hover { transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease; } .testimonial-hover:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 40px rgba(0,0,0,0.08); } /* ── Image Zoom on Hover ── */ .img-zoom { overflow: hidden; } .img-zoom img { transition: transform 0.8s var(--ease-out-expo); } .img-zoom:hover img { transform: scale(1.08); } /* ── Stat Number Glow ── */ .stat-glow { text-shadow: 0 0 20px rgba(198,161,76,0.3); transition: text-shadow 0.4s ease; } .stat-glow:hover { text-shadow: 0 0 30px rgba(198,161,76,0.5); } /* ═══════════════════════════════════════════ PREMIUM FRONTEND PAGES v2.0 Blog, Projects, Details — Admin-quality design ═══════════════════════════════════════════ */ /* ── Page Hero Sections ── */ .page-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand) 0%, #0a1f18 100%); padding: 8rem 0 4rem; } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23c9a84c" fill-opacity="0.04"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); } .page-hero::after { content: ''; position: absolute; top: -30%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(198,161,76,0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .page-hero .hero-content { position: relative; z-index: 2; } .page-hero .hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .page-hero .hero-tag::before { content: ''; width: 32px; height: 1px; background: var(--gold); } .page-hero h1 { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 0.75rem; letter-spacing: -0.02em; } .page-hero h1 .highlight { background: linear-gradient(135deg, var(--gold), #dfc476); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .page-hero .hero-desc { font-size: 1.05rem; color: rgba(255,255,255,0.5); max-width: 480px; font-weight: 400; line-height: 1.7; } .page-hero .hero-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 1.5rem; font-size: 0.75rem; color: rgba(255,255,255,0.35); } .page-hero .hero-breadcrumb a { color: rgba(255,255,255,0.5); transition: color 0.2s; } .page-hero .hero-breadcrumb a:hover { color: var(--gold); } .page-hero .hero-breadcrumb i { font-size: 8px; } /* ── Premium Blog Card ── */ .blog-card-premium { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.04); transition: all 0.5s cubic-bezier(0.16,1,0.3,1); position: relative; } .blog-card-premium::after { content: ''; position: absolute; inset: 0; border-radius: 16px; border: 1px solid transparent; transition: border-color 0.4s ease; pointer-events: none; } .blog-card-premium:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.1), 0 0 0 1px rgba(198,161,76,0.08); } .blog-card-premium:hover::after { border-color: rgba(198,161,76,0.15); } .blog-card-premium .card-thumb { position: relative; overflow: hidden; height: 240px; } .blog-card-premium .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.16,1,0.3,1); } .blog-card-premium:hover .card-thumb img { transform: scale(1.06); } .blog-card-premium .card-thumb .thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%); } .blog-card-premium .card-thumb .thumb-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; backdrop-filter: blur(8px); } .blog-card-premium .card-thumb .thumb-read-more { position: absolute; bottom: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; opacity: 0; transform: translateY(8px); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); } .blog-card-premium:hover .thumb-read-more { opacity: 1; transform: translateY(0); } .blog-card-premium .card-content { padding: 22px; } .blog-card-premium .card-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; font-size: 0.7rem; color: #999; font-weight: 500; } .blog-card-premium .card-meta i { font-size: 0.65rem; color: var(--gold); } .blog-card-premium .card-meta span { display: flex; align-items: center; gap: 5px; } .blog-card-premium .card-title { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--fg); line-height: 1.35; margin-bottom: 8px; transition: color 0.3s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-premium:hover .card-title { color: var(--gold); } .blog-card-premium .card-excerpt { font-size: 0.85rem; color: #777; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; } .blog-card-premium .card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.04); } .blog-card-premium .card-author { display: flex; align-items: center; gap: 8px; } .blog-card-premium .card-author-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-light)); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: #fff; } .blog-card-premium .card-author-name { font-size: 0.75rem; font-weight: 600; color: var(--fg); } .blog-card-premium .card-read-link { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); display: flex; align-items: center; gap: 5px; transition: gap 0.3s ease; } .blog-card-premium:hover .card-read-link { gap: 8px; } /* ── Blog Hero Card (Featured) ── */ .blog-hero-premium { display: block; position: relative; border-radius: 20px; overflow: hidden; min-height: 480px; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } .blog-hero-premium:hover { transform: translateY(-4px); } .blog-hero-premium .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(0.16,1,0.3,1); } .blog-hero-premium:hover .hero-img { transform: scale(1.03); } .blog-hero-premium .hero-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 40%, transparent 70%); } .blog-hero-premium .hero-content-inner { position: absolute; bottom: 0; left: 0; right: 0; padding: 36px 40px; } .blog-hero-premium .hero-category { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 14px; } .blog-hero-premium .hero-title { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 10px; letter-spacing: -0.01em; } .blog-hero-premium .hero-excerpt { font-size: 0.9rem; color: rgba(255,255,255,0.6); max-width: 600px; line-height: 1.7; margin-bottom: 18px; } .blog-hero-premium .hero-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .blog-hero-premium .hero-meta { display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,0.5); font-size: 0.75rem; } .blog-hero-premium .hero-meta span { display: flex; align-items: center; gap: 6px; } .blog-hero-premium .hero-meta i { color: var(--gold); font-size: 0.7rem; } .blog-hero-premium .hero-cta { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); transition: gap 0.3s ease; } .blog-hero-premium:hover .hero-cta { gap: 12px; } /* ── Premium Project Card ── */ .project-card-premium { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.04); transition: all 0.5s cubic-bezier(0.16,1,0.3,1); } .project-card-premium:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.1), 0 0 30px rgba(198,161,76,0.08); } .project-card-premium .proj-thumb { position: relative; overflow: hidden; height: 260px; } .project-card-premium .proj-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.16,1,0.3,1); } .project-card-premium:hover .proj-thumb img { transform: scale(1.06); } .project-card-premium .proj-thumb .thumb-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 50%); } .project-card-premium .proj-thumb .proj-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; } .project-card-premium .proj-thumb .proj-badge { padding: 4px 10px; border-radius: 16px; font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; backdrop-filter: blur(8px); } .project-card-premium .proj-thumb .proj-title-area { position: absolute; bottom: 14px; left: 14px; right: 14px; } .project-card-premium .proj-thumb .proj-title { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 4px; text-shadow: 0 2px 8px rgba(0,0,0,0.3); } .project-card-premium .proj-thumb .proj-location { font-size: 0.75rem; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 5px; } .project-card-premium .proj-thumb .proj-location i { color: var(--gold); font-size: 0.7rem; } .project-card-premium .proj-body { padding: 20px; } .project-card-premium .proj-progress-wrap { margin-bottom: 14px; } .project-card-premium .proj-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .project-card-premium .proj-progress-label { font-size: 0.7rem; color: #999; font-weight: 500; } .project-card-premium .proj-progress-value { font-size: 0.75rem; font-weight: 700; } .project-card-premium .proj-progress-bar { width: 100%; height: 4px; background: #f0f0f0; border-radius: 99px; overflow: hidden; } .project-card-premium .proj-progress-fill { height: 100%; border-radius: 99px; transition: width 1.5s cubic-bezier(0.16,1,0.3,1); } .project-card-premium .proj-stats { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.04); } .project-card-premium .proj-stat { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #666; } .project-card-premium .proj-stat i { color: var(--gold); font-size: 0.7rem; } .project-card-premium .proj-stat strong { color: var(--fg); font-weight: 700; } .project-card-premium .proj-link { display: flex; align-items: center; gap: 5px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand); transition: color 0.3s ease, gap 0.3s ease; } .project-card-premium:hover .proj-link { color: var(--gold); gap: 8px; } /* ── Filter Buttons (Premium) ── */ .filter-group { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 3rem; } .filter-btn-premium { padding: 8px 22px; border-radius: 99px; border: 1.5px solid rgba(0,0,0,0.08); background: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #777; cursor: pointer; transition: all 0.3s ease; font-family: 'Inter', sans-serif; } .filter-btn-premium:hover { border-color: var(--gold); color: var(--gold); } .filter-btn-premium.active { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 4px 16px rgba(198,161,76,0.25); } /* ── Blog Detail Hero ── */ .blog-detail-hero { position: relative; min-height: 55vh; overflow: hidden; } .blog-detail-hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s ease-out; } .blog-detail-hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.1) 70%); } .blog-detail-hero .hero-inner { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 0; } .blog-detail-hero .hero-back { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.4); margin-bottom: 1.25rem; transition: color 0.3s; } .blog-detail-hero .hero-back:hover { color: var(--gold); } .blog-detail-hero .hero-cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 14px; } .blog-detail-hero h1 { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 16px; max-width: 800px; letter-spacing: -0.01em; } .blog-detail-hero .hero-info { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; color: rgba(255,255,255,0.5); font-size: 0.8rem; } .blog-detail-hero .hero-info span { display: flex; align-items: center; gap: 6px; } .blog-detail-hero .hero-info i { color: var(--gold); } .blog-detail-hero .hero-socials { display: flex; gap: 8px; margin-top: 16px; } .blog-detail-hero .hero-socials a { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); font-size: 0.75rem; transition: all 0.3s; } .blog-detail-hero .hero-socials a:hover { background: var(--gold); border-color: var(--gold); color: #fff; } /* ── Reading Progress Bar ── */ .reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(0,0,0,0.06); z-index: 9999; } .reading-progress .progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--brand)); transition: width 0.15s ease; width: 0%; } /* ── Content Layout (Detail Pages) ── */ .content-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 1024px) { .content-layout { grid-template-columns: 1fr 340px; gap: 3.5rem; } } .content-main { background: #fff; border-radius: 20px; padding: 2.5rem; border: 1px solid rgba(0,0,0,0.04); } .content-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } /* ── Sidebar Card ── */ .sidebar-card { background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.04); overflow: hidden; } .sidebar-card-header { padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.04); display: flex; align-items: center; gap: 8px; } .sidebar-card-header i { color: var(--gold); font-size: 0.8rem; } .sidebar-card-header h4 { font-size: 0.85rem; font-weight: 700; color: var(--fg); } .sidebar-card-body { padding: 16px 20px; } /* ── TOC Card ── */ .toc-card { background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.04); padding: 20px; } .toc-card h4 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; } .toc-card nav a { display: block; padding: 6px 0; font-size: 0.8rem; color: #777; line-height: 1.4; border-left: 2px solid transparent; padding-left: 12px; transition: all 0.2s; } .toc-card nav a:hover { color: var(--gold); border-left-color: var(--gold); } /* ── FAQ Accordion ── */ .faq-premium { margin-top: 3rem; } .faq-premium .faq-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; } .faq-premium .faq-heading-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.85rem; } .faq-premium .faq-heading-text h2 { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--fg); } .faq-premium .faq-heading-text span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); font-weight: 700; } .faq-item-premium { border: 1px solid rgba(0,0,0,0.04); border-radius: 14px; overflow: hidden; margin-bottom: 8px; background: #fff; transition: border-color 0.3s; } .faq-item-premium:hover { border-color: rgba(198,161,76,0.2); } .faq-item-premium .faq-toggle { width: 100%; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; text-align: left; background: none; border: none; cursor: pointer; font-family: 'Noto Sans Bengali', 'Inter', sans-serif; } .faq-item-premium .faq-toggle .faq-q { font-size: 0.95rem; font-weight: 600; color: var(--fg); flex: 1; padding-right: 12px; line-height: 1.4; } .faq-item-premium .faq-toggle .faq-icon { width: 28px; height: 28px; border-radius: 50%; background: #f8f6f3; border: 1px solid rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 0.7rem; flex-shrink: 0; transition: all 0.3s; } .faq-item-premium.open .faq-toggle .faq-icon { background: var(--gold); border-color: var(--gold); color: #fff; transform: rotate(45deg); } .faq-item-premium .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.3s; padding: 0 22px; } .faq-item-premium.open .faq-answer { max-height: 500px; padding: 0 22px 20px; } .faq-item-premium .faq-answer p { font-size: 0.9rem; color: #666; line-height: 1.8; margin: 0; } /* ── CTA Banner (Detail pages) ── */ .cta-banner { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--brand) 0%, #0a1f18 100%); padding: 3rem; text-align: center; margin-top: 3rem; } .cta-banner::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(198,161,76,0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .cta-banner .cta-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 20px; border: 1px solid rgba(198,161,76,0.3); color: var(--gold); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; } .cta-banner h2 { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 0.75rem; } .cta-banner p { font-size: 0.9rem; color: rgba(255,255,255,0.5); max-width: 500px; margin: 0 auto 1.5rem; } .cta-banner .cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 12px; background: var(--gold); color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; transition: all 0.3s; border: none; cursor: pointer; } .cta-banner .cta-btn:hover { background: #b08f3a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(198,161,76,0.3); } /* ── Related Posts (Blog Details) ── */ .related-post-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.04); transition: background 0.2s; } .related-post-item:last-child { border-bottom: none; } .related-post-item:hover { background: rgba(0,0,0,0.01); } .related-post-item img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } .related-post-item .rp-cat { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 3px; } .related-post-item .rp-title { font-size: 0.85rem; font-weight: 600; color: var(--fg); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Project Detail Sections ── */ .project-gallery-grid { display: grid; gap: 8px; border-radius: 16px; overflow: hidden; margin-bottom: 3rem; } .project-gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); } .project-gallery-grid a:hover img { transform: scale(1.04); } .project-gallery-grid .gallery-main { grid-column: span 2; grid-row: span 2; min-height: 400px; } .project-gallery-grid .gallery-sub { min-height: 195px; } /* ── Project Overview Sidebar Card ── */ .project-overview-card { background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.04); overflow: hidden; position: sticky; top: 100px; } .project-overview-card .overview-header { background: linear-gradient(135deg, var(--brand), #0a1f18); padding: 20px 24px; } .project-overview-card .overview-header h3 { font-size: 1rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; } .project-overview-card .overview-header i { color: var(--gold); } .project-overview-card .overview-body { padding: 20px 24px; } .project-overview-card .overview-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.04); } .project-overview-card .overview-row:last-child { border-bottom: none; } .project-overview-card .overview-row .ov-label { font-size: 0.8rem; color: #999; display: flex; align-items: center; gap: 6px; } .project-overview-card .overview-row .ov-label i { color: var(--gold); font-size: 0.7rem; } .project-overview-card .overview-row .ov-value { font-size: 0.85rem; font-weight: 700; color: var(--fg); text-align: right; max-width: 55%; } .project-overview-card .overview-actions { padding: 16px 24px; display: flex; flex-direction: column; gap: 8px; } .project-overview-card .ov-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer; transition: all 0.3s; text-decoration: none; } .project-overview-card .ov-btn-primary { background: linear-gradient(135deg, var(--gold), #b08f3a); color: #fff; } .project-overview-card .ov-btn-primary:hover { box-shadow: 0 8px 24px rgba(198,161,76,0.3); transform: translateY(-1px); } .project-overview-card .ov-btn-secondary { background: linear-gradient(135deg, var(--brand), #0a1f18); color: #fff; } .project-overview-card .ov-btn-secondary:hover { box-shadow: 0 8px 24px rgba(18,55,42,0.3); transform: translateY(-1px); } .project-overview-card .ov-btn-whatsapp { background: #25D366; color: #fff; } .project-overview-card .ov-btn-whatsapp:hover { background: #20bd5a; transform: translateY(-1px); } /* ── Amenity Grid ── */ .amenity-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid rgba(0,0,0,0.04); transition: all 0.3s; } .amenity-item:hover { border-color: rgba(198,161,76,0.2); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); } .amenity-item .amenity-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(198,161,76,0.1), rgba(18,55,42,0.1)); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1rem; transition: transform 0.3s; } .amenity-item:hover .amenity-icon { transform: scale(1.1); } .amenity-item span { font-size: 0.8rem; font-weight: 600; color: var(--fg); text-align: center; line-height: 1.3; } /* ── Section Separator ── */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent); margin: 2rem 0; } /* ── Empty State ── */ .empty-state { text-align: center; padding: 4rem 2rem; } .empty-state .empty-icon { width: 64px; height: 64px; border-radius: 16px; background: #f8f6f3; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: #ccc; font-size: 1.5rem; } .empty-state p { font-size: 0.95rem; color: #999; max-width: 400px; margin: 0 auto; line-height: 1.6; } /* ── Responsive Grids ── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } } .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 1024px) { .project-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .project-grid { grid-template-columns: 1fr; } } /* ── Responsive Overrides ── */ @media (max-width: 768px) { .page-hero { padding: 6rem 0 2.5rem; } .page-hero h1 { font-size: 1.8rem; } .blog-hero-premium { min-height: 360px; } .blog-hero-premium .hero-content-inner { padding: 24px; } .blog-hero-premium .hero-title { font-size: 1.3rem; } .blog-card-premium .card-thumb { height: 200px; } .blog-card-premium .card-content { padding: 18px; } .project-card-premium .proj-thumb { height: 220px; } .content-main { padding: 1.5rem; } .blog-detail-hero { min-height: 45vh; } .blog-detail-hero h1 { font-size: 1.5rem; } .cta-banner { padding: 2rem 1.5rem; } .cta-banner h2 { font-size: 1.3rem; } } /* ═══════════════════════════════════════════════════════ PROJECT DETAIL — PREMIUM POLISH UI ═══════════════════════════════════════════════════════ */ .proj-hero { position: relative; min-height: 75vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--brand, #12372A); } .proj-hero-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; transform: scale(1.08); animation: projHeroZoom 25s ease-in-out infinite alternate; will-change: transform; filter: brightness(0.95) contrast(1.02); } @keyframes projHeroZoom { from { transform: scale(1.08); } to { transform: scale(1.18); } } .proj-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.82) 75%, rgba(0,0,0,0.95) 100% ); } .proj-hero-overlay::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 80%, rgba(198,161,76,0.06) 0%, transparent 60%); } .proj-hero-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to top, var(--bg-soft, #f8f6f3), transparent); z-index: 3; } .proj-hero-content { position: relative; z-index: 2; padding: 3rem 1rem 5rem; width: 100%; } .proj-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-bottom: 1.8rem; flex-wrap: wrap; } .proj-breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.3s; } .proj-breadcrumb a:hover { color: var(--gold, #C6A15B); } .proj-breadcrumb span { color: rgba(255,255,255,0.8); font-weight: 500; } .proj-hero-tags { display: flex; gap: 10px; margin-bottom: 1.2rem; flex-wrap: wrap; } .proj-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 24px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; backdrop-filter: blur(12px); transition: transform 0.3s; } .proj-tag:hover { transform: translateY(-1px); } .proj-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 800; color: #fff; margin: 0; line-height: 1.1; letter-spacing: -0.03em; max-width: 700px; text-shadow: 0 2px 30px rgba(0,0,0,0.2); } .proj-hero-loc { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7); font-size: 0.92rem; margin-top: 0.8rem; font-weight: 400; } .proj-hero-loc i { color: var(--gold, #C6A15B); font-size: 0.85rem; animation: heroPinPulse 2s ease-in-out infinite; } @keyframes heroPinPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .proj-hero-stats { display: flex; gap: 12px; margin-top: 1.8rem; flex-wrap: wrap; } .proj-hero-stat { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; backdrop-filter: blur(12px); transition: all 0.3s; } .proj-hero-stat:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); transform: translateY(-2px); } .proj-hero-stat i { color: var(--gold, #C6A15B); font-size: 1.05rem; } .proj-hero-stat div { display: flex; flex-direction: column; } .proj-hero-stat span { font-size: 0.62rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .proj-hero-stat strong { font-size: 0.92rem; color: #fff; font-weight: 700; letter-spacing: -0.01em; } .proj-content-section { padding: 4rem 0; background: var(--bg-soft, #f8f6f3); } .proj-content-grid { display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start; } @media (max-width: 1024px) { .proj-content-grid { grid-template-columns: 1fr; } } .proj-content-main { display: flex; flex-direction: column; gap: 2rem; } .proj-section { background: #fff; border-radius: 24px; padding: 2.2rem; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.03); transition: box-shadow 0.3s, transform 0.3s; } .proj-section:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.03), 0 8px 32px rgba(0,0,0,0.05); } .proj-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 1.8rem; } .proj-section-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .proj-section-head h3 { font-size: 1.25rem; font-weight: 700; color: var(--fg, #1a1a1a); margin: 0; letter-spacing: -0.02em; } .proj-section-head p { color: var(--fg-muted, #888); font-size: 0.82rem; margin: 2px 0 0; font-weight: 400; } .proj-about-text { color: #555; line-height: 1.9; font-size: 0.95rem; margin: 0; letter-spacing: 0.01em; } /* Project gallery inline */ .proj-gallery-inline { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 200px); gap: 10px; border-radius: 24px; overflow: hidden; } .proj-gallery-thumb { position: relative; overflow: hidden; border-radius: 16px; display: block; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .proj-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.5s; } .proj-gallery-thumb:hover img { transform: scale(1.08); filter: brightness(1.05); } .proj-gallery-thumb .proj-gallery-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; opacity: 0; transition: opacity 0.35s; backdrop-filter: blur(2px); } .proj-gallery-thumb:hover .proj-gallery-overlay { opacity: 1; } .proj-gallery-hero { grid-column: span 2; grid-row: span 2; } .proj-gallery-more { background: linear-gradient(135deg, rgba(0,0,0,0.75), rgba(0,0,0,0.85)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; backdrop-filter: blur(4px); } .proj-gallery-more span { font-size: 1.6rem; font-weight: 800; color: var(--gold, #C6A15B); letter-spacing: -0.02em; } .proj-gallery-more i { font-size: 0.8rem; color: rgba(255,255,255,0.6); } @media (max-width: 768px) { .proj-gallery-inline { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 180px); } .proj-gallery-hero { grid-column: span 2; grid-row: span 1; } } @media (max-width: 480px) { .proj-gallery-inline { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 160px); } } /* Amenities grid */ .proj-amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .proj-amenity-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 1.2rem 0.8rem; background: linear-gradient(145deg, #fafaf8, #f5f3f0); border-radius: 16px; border: 1px solid rgba(0,0,0,0.03); transition: all 0.35s cubic-bezier(0.16,1,0.3,1); cursor: default; text-align: center; position: relative; overflow: hidden; } .proj-amenity-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(198,161,76,0.08), transparent 60%); opacity: 0; transition: opacity 0.35s; } .proj-amenity-card:hover { border-color: rgba(198,161,76,0.2); box-shadow: 0 8px 28px rgba(198,161,76,0.1); transform: translateY(-4px); } .proj-amenity-card:hover::before { opacity: 1; } .proj-amenity-icon { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, rgba(198,161,76,0.15), rgba(198,161,76,0.05)); display: flex; align-items: center; justify-content: center; color: var(--gold, #C6A15B); font-size: 0.9rem; position: relative; z-index: 1; transition: transform 0.35s, box-shadow 0.35s; } .proj-amenity-card:hover .proj-amenity-icon { transform: scale(1.1); box-shadow: 0 4px 12px rgba(198,161,76,0.15); } .proj-amenity-card span { font-size: 0.78rem; font-weight: 600; color: #444; line-height: 1.3; position: relative; z-index: 1; } /* Map */ .proj-map-wrap { width: 100%; height: 350px; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.07); border: 1px solid rgba(0,0,0,0.04); transition: box-shadow 0.3s; } .proj-map-wrap:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); } /* Sidebar overview card */ .proj-sidebar { position: sticky; top: 100px; } .proj-overview-card { background: #fff; border-radius: 24px; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.04); overflow: hidden; transition: box-shadow 0.3s; } .proj-overview-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.03), 0 12px 36px rgba(0,0,0,0.06); } .proj-overview-head { padding: 1.3rem 1.5rem; font-size: 0.88rem; font-weight: 700; color: var(--fg, #1a1a1a); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0,0,0,0.04); background: linear-gradient(135deg, rgba(198,161,76,0.04), rgba(198,161,76,0.01)); } .proj-overview-head i { color: var(--gold, #C6A15B); } .proj-overview-rows { padding: 0 1.5rem; } .proj-ov-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(0,0,0,0.025); } .proj-ov-row:last-child { border-bottom: none; } .proj-ov-row span { font-size: 0.8rem; color: #999; display: flex; align-items: center; gap: 8px; } .proj-ov-row span i { color: var(--gold, #C6A15B); font-size: 0.72rem; } .proj-ov-row strong { font-size: 0.85rem; color: var(--fg, #1a1a1a); font-weight: 600; } .proj-progress-wrap { padding: 0.8rem 1.5rem 1.2rem; } .proj-progress-head { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #999; display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .proj-progress-head i { color: var(--gold, #C6A15B); } .proj-progress-bar-bg { width: 100%; height: 6px; background: #f0eeeb; border-radius: 99px; overflow: hidden; margin-bottom: 8px; } .proj-progress-bar { height: 100%; border-radius: 99px; transition: width 1.8s cubic-bezier(0.16,1,0.3,1); position: relative; } .proj-progress-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .proj-progress-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: #aaa; } .proj-progress-label strong { font-weight: 700; } .proj-completed-badge { display: flex; align-items: center; gap: 6px; color: #16a34a; font-size: 0.8rem; font-weight: 600; margin-top: 8px; padding: 8px 12px; background: rgba(22,163,74,0.06); border-radius: 10px; } .proj-progress-tasks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .proj-task { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #aaa; padding: 6px 10px; border-radius: 8px; transition: background 0.2s; } .proj-task:hover { background: rgba(0,0,0,0.015); } .proj-task i { font-size: 0.62rem; color: #ddd; } .proj-task.done { color: #16a34a; } .proj-task.done i { color: #22c55e; } .proj-task.done span { text-decoration: line-through; opacity: 0.7; } .proj-ov-actions { padding: 1rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 10px; } .proj-ov-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 14px; font-size: 0.84rem; font-weight: 600; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); text-decoration: none; cursor: pointer; border: none; position: relative; overflow: hidden; } .proj-ov-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition: opacity 0.3s; } .proj-ov-btn:hover::after { opacity: 1; } .proj-ov-btn-gold { background: linear-gradient(135deg, var(--gold, #C6A15B), #d4b56a); color: #fff; box-shadow: 0 2px 8px rgba(198,161,76,0.2); } .proj-ov-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(198,161,76,0.35); } .proj-ov-btn-wa { background: linear-gradient(135deg, #25D366, #20bd5a); color: #fff; box-shadow: 0 2px 8px rgba(37,211,102,0.2); } .proj-ov-btn-wa:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(37,211,102,0.3); } .proj-ov-btn-outline { background: transparent; border: 1px solid rgba(0,0,0,0.08); color: #777; } .proj-ov-btn-outline:hover { border-color: var(--gold, #C6A15B); color: var(--gold, #C6A15B); transform: translateY(-1px); } /* Gallery section */ .proj-gallery-section { padding: 5rem 0; background: #fff; border-top: 1px solid rgba(0,0,0,0.03); } .proj-gallery-head { text-align: center; margin-bottom: 3.5rem; } .proj-gallery-head h2 { font-size: 2rem; font-weight: 700; color: var(--fg, #1a1a1a); margin: 0.5rem 0 0; letter-spacing: -0.02em; } .proj-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(198,161,76,0.1); color: var(--gold, #C6A15B); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 18px; border-radius: 99px; } .proj-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .proj-gallery-item { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4/3; display: block; box-shadow: 0 2px 10px rgba(0,0,0,0.04); } .proj-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); } .proj-gallery-item:hover img { transform: scale(1.07); } .proj-gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 60%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.2rem; color: #fff; font-size: 0.82rem; font-weight: 600; gap: 6px; opacity: 0; transition: opacity 0.4s; } .proj-gallery-item:hover .proj-gallery-overlay { opacity: 1; } .proj-gallery-main { grid-column: span 2; grid-row: span 2; } @media (max-width: 768px) { .proj-gallery-grid { grid-template-columns: repeat(2, 1fr); } .proj-gallery-main { grid-column: span 2; } } @media (max-width: 480px) { .proj-gallery-grid { grid-template-columns: 1fr; } .proj-gallery-main { grid-column: span 1; } } /* Project CTA section */ .proj-cta-section { padding: 5rem 0; background: linear-gradient(135deg, #f8f6f3, #f0ede6, #f8f6f3); } .proj-cta-card { position: relative; background: linear-gradient(145deg, var(--brand, #12372A), #0a1f18); border-radius: 28px; padding: 3.5rem; overflow: hidden; text-align: center; } .proj-cta-card::before { content: ''; position: absolute; inset: 1px; border-radius: 27px; border: 1px solid rgba(255,255,255,0.06); pointer-events: none; } .proj-cta-glow { position: absolute; top: -60%; right: -25%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(198,161,76,0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; animation: ctaGlowPulse 4s ease-in-out infinite; } @keyframes ctaGlowPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } } .proj-cta-glow::after { content: ''; position: absolute; bottom: -40%; left: -30%; width: 250px; height: 250px; background: radial-gradient(circle, rgba(198,161,76,0.08) 0%, transparent 70%); border-radius: 50%; } .proj-cta-content { position: relative; z-index: 2; } .proj-cta-content h2 { font-size: 2rem; font-weight: 700; color: #fff; margin: 1rem 0 0.6rem; letter-spacing: -0.02em; } .proj-cta-content p { color: rgba(255,255,255,0.55); font-size: 0.92rem; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; } .proj-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .proj-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 14px; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); border: none; cursor: pointer; position: relative; overflow: hidden; } .proj-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition: opacity 0.3s; } .proj-btn:hover::after { opacity: 1; } .proj-btn-gold { background: linear-gradient(135deg, var(--gold, #C6A15B), #d4b56a); color: #fff; box-shadow: 0 4px 16px rgba(198,161,76,0.25); } .proj-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(198,161,76,0.4); } .proj-btn-wa { background: linear-gradient(135deg, #25D366, #20bd5a); color: #fff; box-shadow: 0 4px 16px rgba(37,211,102,0.2); } .proj-btn-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,0.3); } .proj-btn-outline { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; } .proj-btn-outline:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════ BLOG DETAIL — PREMIUM POLISH UI ═══════════════════════════════════════════════════════ */ .blog-detail-hero { position: relative; min-height: 68vh; display: flex; align-items: flex-end; overflow: hidden; background: #111; } .blog-detail-hero-bg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); object-fit: cover; transform: scale(1.08); transition: transform 2s cubic-bezier(0.16,1,0.3,1); filter: brightness(0.92) contrast(1.02); } .blog-detail-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.1) 15%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.95) 100% ); } .blog-detail-hero-overlay::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 90%, rgba(198,161,76,0.05) 0%, transparent 50%); } .blog-detail-hero-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to top, var(--bg-soft, #f8f6f3), transparent); z-index: 3; } .blog-detail-hero-content { position: relative; z-index: 2; padding: 3rem 1rem 5rem; width: 100%; } .blog-detail-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-bottom: 1.8rem; flex-wrap: wrap; } .blog-detail-breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.3s; } .blog-detail-breadcrumb a:hover { color: var(--gold, #C6A15B); } .blog-detail-breadcrumb span { color: rgba(255,255,255,0.8); font-weight: 500; } .blog-detail-tags { display: flex; gap: 10px; margin-bottom: 1.2rem; flex-wrap: wrap; } .blog-detail-cat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 24px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; } .blog-detail-read { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 24px; font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); } .blog-detail-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #fff; margin: 0; line-height: 1.1; letter-spacing: -0.03em; max-width: 750px; text-shadow: 0 2px 30px rgba(0,0,0,0.15); } .blog-detail-meta { display: flex; align-items: center; gap: 24px; margin-top: 1.4rem; color: rgba(255,255,255,0.65); font-size: 0.82rem; flex-wrap: wrap; } .blog-detail-author { display: flex; align-items: center; gap: 10px; } .blog-detail-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold, #C6A15B), #dfc476); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: var(--brand, #12372A); box-shadow: 0 2px 8px rgba(198,161,76,0.3); } .blog-detail-author div { display: flex; flex-direction: column; } .blog-detail-author strong { font-size: 0.84rem; color: #fff; } .blog-detail-author span { font-size: 0.68rem; color: rgba(255,255,255,0.45); } .blog-detail-date, .blog-detail-views { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; } .blog-detail-hero-socials { display: flex; gap: 8px; margin-top: 1.4rem; } .blog-social-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); text-decoration: none; border: none; cursor: pointer; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); backdrop-filter: blur(8px); } .blog-social-btn:hover { transform: translateY(-3px) scale(1.05); } .blog-social-btn.fb:hover { background: #1877F2; color: #fff; box-shadow: 0 4px 16px rgba(24,119,242,0.35); } .blog-social-btn.wa:hover { background: #25D366; color: #fff; box-shadow: 0 4px 16px rgba(37,211,102,0.35); } .blog-social-btn.tg:hover { background: #0088cc; color: #fff; box-shadow: 0 4px 16px rgba(0,136,204,0.35); } .blog-social-btn.cp:hover { background: var(--gold, #C6A15B); color: #fff; box-shadow: 0 4px 16px rgba(198,161,76,0.35); } /* Reading progress bar */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(0,0,0,0.04); z-index: 100; opacity: 0; transition: opacity 0.3s; } .reading-progress .progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold, #C6A15B), #e8d48b); border-radius: 0 3px 3px 0; transition: width 0.08s linear; width: 0; box-shadow: 0 0 12px rgba(198,161,76,0.4); } /* Blog content section */ .blog-detail-content-section { padding: 4rem 0; background: var(--bg-soft, #f8f6f3); } .blog-detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; } @media (max-width: 1024px) { .blog-detail-grid { grid-template-columns: 1fr; } } .blog-detail-main { display: flex; flex-direction: column; gap: 1.5rem; } .blog-detail-featured-img { border-radius: 24px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.03); } .blog-detail-featured-img img { width: 100%; height: auto; display: block; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); } .blog-detail-featured-img:hover img { transform: scale(1.02); } .blog-detail-body { background: #fff; border-radius: 24px; padding: 2.8rem; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.03); } /* Blog topics */ .blog-detail-topics { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 1.2rem 1.5rem; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.03); } .blog-detail-topics-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold, #C6A15B); display: flex; align-items: center; gap: 6px; } .blog-detail-topics-list { display: flex; gap: 6px; flex-wrap: wrap; } .blog-topic-tag { padding: 6px 14px; border-radius: 99px; font-size: 0.72rem; font-weight: 500; color: #777; background: #f8f6f3; border: 1px solid rgba(0,0,0,0.04); transition: all 0.3s; cursor: default; } .blog-topic-tag:hover { border-color: var(--gold, #C6A15B); color: var(--gold, #C6A15B); background: rgba(198,161,76,0.04); } /* Blog share bar */ .blog-detail-share-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.2rem 1.5rem; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.03); } .blog-detail-share-bar > span { font-size: 0.84rem; font-weight: 600; color: #666; display: flex; align-items: center; gap: 8px; } .blog-detail-share-bar > span i { color: var(--gold, #C6A15B); } .blog-share-btns { display: flex; gap: 8px; } .blog-share-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); text-decoration: none; border: none; cursor: pointer; background: #f8f6f3; color: #999; border: 1px solid rgba(0,0,0,0.04); } .blog-share-btn:hover { transform: translateY(-3px) scale(1.08); } .blog-share-btn.fb:hover { background: #1877F2; color: #fff; border-color: #1877F2; box-shadow: 0 4px 14px rgba(24,119,242,0.3); } .blog-share-btn.li:hover { background: #0A66C2; color: #fff; border-color: #0A66C2; box-shadow: 0 4px 14px rgba(10,102,194,0.3); } .blog-share-btn.tw:hover { background: #000; color: #fff; border-color: #000; box-shadow: 0 4px 14px rgba(0,0,0,0.3); } .blog-share-btn.wa:hover { background: #25D366; color: #fff; border-color: #25D366; box-shadow: 0 4px 14px rgba(37,211,102,0.3); } .blog-share-btn.cp:hover { background: var(--brand, #12372A); color: #fff; border-color: var(--brand, #12372A); box-shadow: 0 4px 14px rgba(18,55,42,0.3); } /* Blog feedback */ .blog-detail-feedback { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.2rem 1.5rem; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.03); } .blog-detail-feedback > span { font-size: 0.84rem; font-weight: 600; color: #666; } .blog-fb-btns { display: flex; gap: 8px; } .blog-fb-btn { display: flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; background: #fff; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); color: #666; } .blog-fb-btn:hover { border-color: var(--gold, #C6A15B); color: var(--gold, #C6A15B); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(198,161,76,0.1); } .blog-detail-feedback.voted .blog-fb-btn:not(:disabled) { opacity: 0.35; pointer-events: none; } /* Blog sections */ .blog-detail-section { background: #fff; border-radius: 24px; padding: 2.2rem; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.03); } .blog-detail-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 1.8rem; } .blog-detail-section-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .blog-detail-section-head h3 { font-size: 1.25rem; font-weight: 700; color: var(--fg, #1a1a1a); margin: 0; letter-spacing: -0.02em; } /* Blog FAQ */ .blog-faq-list { display: flex; flex-direction: column; gap: 8px; } .blog-faq-item { background: linear-gradient(145deg, #fafaf8, #f5f3f0); border-radius: 16px; border: 1px solid rgba(0,0,0,0.03); overflow: hidden; transition: all 0.35s; } .blog-faq-item:hover { border-color: rgba(198,161,76,0.15); box-shadow: 0 4px 16px rgba(198,161,76,0.06); } .blog-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1.1rem 1.3rem; cursor: pointer; user-select: none; } .blog-faq-q span { font-size: 0.9rem; font-weight: 600; color: var(--fg, #1a1a1a); line-height: 1.4; } .blog-faq-q i { color: var(--gold, #C6A15B); font-size: 0.72rem; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(198,161,76,0.08); } .blog-faq-item.open .blog-faq-q i { transform: rotate(180deg); background: rgba(198,161,76,0.15); } .blog-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1); } .blog-faq-item.open .blog-faq-a { max-height: 500px; } .blog-faq-a p { padding: 0 1.3rem 1.2rem; color: #666; line-height: 1.75; font-size: 0.88rem; margin: 0; } /* Blog CTA promo */ .blog-detail-cta-promo { position: relative; background: linear-gradient(145deg, var(--brand, #12372A), #0a1f18); border-radius: 24px; padding: 2.8rem; overflow: hidden; text-align: center; } .blog-detail-cta-promo::before { content: ''; position: absolute; inset: 1px; border-radius: 23px; border: 1px solid rgba(255,255,255,0.06); pointer-events: none; } .blog-cta-promo-glow { position: absolute; top: -50%; right: -20%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(198,161,76,0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; animation: ctaGlowPulse 4s ease-in-out infinite; } .blog-cta-promo-icon { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(198,161,76,0.12); color: var(--gold, #C6A15B); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 7px 18px; border-radius: 99px; margin-bottom: 1rem; } .blog-detail-cta-promo h3 { position: relative; z-index: 2; font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 0.6rem; letter-spacing: -0.02em; } .blog-detail-cta-promo p { position: relative; z-index: 2; color: rgba(255,255,255,0.55); font-size: 0.9rem; margin-bottom: 1.8rem; max-width: 450px; margin-left: auto; margin-right: auto; } .blog-cta-promo-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--gold, #C6A15B), #d4b56a); color: #fff; padding: 14px 32px; border-radius: 14px; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 4px 16px rgba(198,161,76,0.25); } .blog-cta-promo-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(198,161,76,0.4); } /* Blog bottom CTA banner */ .blog-detail-cta-banner { background: linear-gradient(145deg, var(--brand, #12372A), #0a1f18); border-radius: 24px; overflow: hidden; position: relative; } .blog-detail-cta-banner::before { content: ''; position: absolute; inset: 1px; border-radius: 23px; border: 1px solid rgba(255,255,255,0.06); pointer-events: none; } .blog-detail-cta-inner { padding: 3rem; text-align: center; position: relative; z-index: 2; } .blog-detail-cta-inner h3 { font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0 0 0.6rem; letter-spacing: -0.02em; } .blog-detail-cta-inner p { color: rgba(255,255,255,0.55); font-size: 0.9rem; margin-bottom: 1.8rem; } .blog-detail-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .blog-cta-link { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 14px; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; } .blog-cta-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition: opacity 0.3s; } .blog-cta-link:hover::after { opacity: 1; } .blog-cta-link.gold { background: linear-gradient(135deg, var(--gold, #C6A15B), #d4b56a); color: #fff; box-shadow: 0 4px 16px rgba(198,161,76,0.25); } .blog-cta-link.gold:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(198,161,76,0.4); } .blog-cta-link.outline { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; } .blog-cta-link.outline:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); transform: translateY(-1px); } /* Blog sidebar */ .blog-detail-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1.4rem; } .blog-sidebar-card { background: #fff; border-radius: 24px; padding: 1.6rem; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.03); transition: box-shadow 0.3s; } .blog-sidebar-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.03), 0 8px 28px rgba(0,0,0,0.05); } .blog-sidebar-head { font-size: 0.88rem; font-weight: 700; color: var(--fg, #1a1a1a); display: flex; align-items: center; gap: 8px; margin-bottom: 1.2rem; letter-spacing: -0.01em; } .blog-sidebar-head i { color: var(--gold, #C6A15B); } /* TOC */ .blog-toc-list { display: flex; flex-direction: column; gap: 2px; } .blog-toc-link { display: block; padding: 9px 14px; font-size: 0.8rem; color: #777; text-decoration: none; border-radius: 10px; transition: all 0.3s; border-left: 2px solid transparent; line-height: 1.4; } .blog-toc-link:hover { background: rgba(198,161,76,0.05); color: var(--gold, #C6A15B); border-left-color: var(--gold, #C6A15B); padding-left: 18px; } /* Author card */ .blog-author-card { text-align: center; position: relative; overflow: hidden; } .blog-author-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(135deg, rgba(198,161,76,0.08), rgba(198,161,76,0.02)); } .blog-author-avatar { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, var(--gold, #C6A15B), #dfc476); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 1.5rem; font-weight: 700; color: var(--brand, #12372A); position: relative; z-index: 1; box-shadow: 0 4px 16px rgba(198,161,76,0.25); border: 3px solid #fff; } .blog-author-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--fg, #1a1a1a); margin: 0 0 4px; position: relative; z-index: 1; } .blog-author-role { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold, #C6A15B); font-weight: 700; margin-bottom: 10px; position: relative; z-index: 1; } .blog-author-card p { font-size: 0.82rem; color: #999; line-height: 1.65; margin: 0; position: relative; z-index: 1; } /* Tags */ .blog-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; } .blog-tag { padding: 6px 14px; border-radius: 99px; font-size: 0.72rem; font-weight: 500; color: #888; background: #f8f6f3; border: 1px solid rgba(0,0,0,0.04); transition: all 0.3s; cursor: pointer; text-decoration: none; display: inline-block; } .blog-tag:hover { border-color: var(--gold, #C6A15B); color: var(--gold, #C6A15B); background: rgba(198,161,76,0.04); } /* Blog related */ .blog-related-list { display: flex; flex-direction: column; gap: 8px; } .blog-related-item { display: flex; gap: 12px; padding: 10px; border-radius: 12px; text-decoration: none; transition: all 0.3s; } .blog-related-item:hover { background: rgba(198,161,76,0.04); } .blog-related-item img { width: 72px; height: 58px; border-radius: 12px; object-fit: cover; flex-shrink: 0; transition: transform 0.3s; } .blog-related-item:hover img { transform: scale(1.05); } .blog-related-cat { font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--gold, #C6A15B); margin-bottom: 3px; } .blog-related-title { font-size: 0.8rem; font-weight: 600; color: var(--fg, #1a1a1a); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Blog share grid */ .blog-share-btns-grid { display: flex; gap: 8px; flex-wrap: wrap; } .blog-share-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); text-decoration: none; border: none; cursor: pointer; } .blog-share-icon.fb { background: #1877F2; color: #fff; } .blog-share-icon.li { background: #0A66C2; color: #fff; } .blog-share-icon.tw { background: #111; color: #fff; } .blog-share-icon.wa { background: #25D366; color: #fff; } .blog-share-icon.cp { background: var(--fg, #1a1a1a); color: #fff; } .blog-share-icon:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.2); } /* Blog CTA card */ .blog-cta-card { position: relative; background: linear-gradient(145deg, var(--brand, #12372A), #0a1f18); border-radius: 24px; padding: 2.2rem; text-align: center; overflow: hidden; } .blog-cta-card::before { content: ''; position: absolute; inset: 1px; border-radius: 23px; border: 1px solid rgba(255,255,255,0.06); pointer-events: none; } .blog-cta-glow { position: absolute; top: -50%; right: -25%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(198,161,76,0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .blog-cta-content { position: relative; z-index: 2; } .blog-cta-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(198,161,76,0.12); color: var(--gold, #C6A15B); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 7px 16px; border-radius: 99px; margin-bottom: 14px; } .blog-cta-card h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 8px; letter-spacing: -0.01em; } .blog-cta-card p { font-size: 0.82rem; color: rgba(255,255,255,0.45); margin-bottom: 1.4rem; line-height: 1.55; } .blog-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--gold, #C6A15B), #d4b56a); color: #fff; padding: 11px 24px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 2px 8px rgba(198,161,76,0.2); } .blog-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(198,161,76,0.35); } /* Blog detail responsive */ @media (max-width: 768px) { .blog-detail-hero { min-height: 55vh; } .blog-detail-hero h1 { font-size: 1.6rem; } .blog-detail-meta { gap: 12px; } .blog-detail-body { padding: 1.6rem; } .blog-detail-share-bar { flex-direction: column; align-items: flex-start; } .blog-detail-feedback { flex-direction: column; align-items: flex-start; } .blog-detail-cta-inner { padding: 2rem; } } /* ═══ TAILWIND CSS VARIABLE UTILITY CLASSES ═══ */ /* Tailwind CDN generates these on-the-fly but the compiler cannot handle CSS variable opacity modifiers */ .bg-\[var\(--brand\)\]\/5 { background-color: rgba(18,55,42,0.05); } .bg-\[var\(--gold\)\]\/10 { background-color: rgba(198,161,91,0.1); } .bg-white\/\[\.07\] { background-color: rgba(255,255,255,0.07); } .bg-white\/\[0\.06\] { background-color: rgba(255,255,255,0.06); } .bg-white\/\[0\.08\] { background-color: rgba(255,255,255,0.08); } .border-\[var\(--gold\)\]\/20 { border-color: rgba(198,161,91,0.2); } .border-white\/\[\.08\] { border-color: rgba(255,255,255,0.08); } .border-white\/\[0\.1\] { border-color: rgba(255,255,255,0.1); } .border-white\/\[0\.12\] { border-color: rgba(255,255,255,0.12); } .focus\:border-\[var\(--brand\)\]\/40:focus { border-color: rgba(18,55,42,0.4); } .focus\:ring-\[\#12372A\]\/20:focus { --tw-ring-color: rgba(18,55,42,0.2); } .focus\:ring-\[var\(--brand\)\]\/15:focus { --tw-ring-color: rgba(18,55,42,0.15); } .focus\:ring-\[var\(--brand\)\]\/20:focus { --tw-ring-color: rgba(18,55,42,0.2); } .from-\[\#12372A\]\/80 { --tw-gradient-from: rgba(18,55,42,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(18,55,42,0)); } .from-\[\#12372A\]\/90 { --tw-gradient-from: rgba(18,55,42,0.9); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(18,55,42,0)); } .from-\[var\(--brand\)\]\/10 { --tw-gradient-from: rgba(18,55,42,0.1); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(18,55,42,0)); } .hover\:bg-\[var\(--brand\)\]\/5:hover { background-color: rgba(18,55,42,0.05); } .hover\:bg-\[var\(--brand\)\]\/10:hover { background-color: rgba(18,55,42,0.1); } .hover\:bg-\[var\(--gold\)\]\/10:hover { background-color: rgba(198,161,91,0.1); } .hover\:border-\[var\(--brand\)\]\/50:hover { border-color: rgba(18,55,42,0.5); } .hover\:border-\[var\(--gold\)\]\/40:hover { border-color: rgba(198,161,91,0.4); } .hover\:ring-\[\#1877F2\]\/30:hover { --tw-ring-color: rgba(24,119,242,0.3); } .hover\:ring-\[\#25D366\]\/30:hover { --tw-ring-color: rgba(37,211,102,0.3); } .hover\:ring-\[\#FF0000\]\/30:hover { --tw-ring-color: rgba(255,0,0,0.3); } .hover\:ring-\[var\(--brand\)\]\/20:hover { --tw-ring-color: rgba(18,55,42,0.2); } .hover\:shadow-\[\#12372A\]\/20:hover { --tw-shadow-color: rgba(18,55,42,0.2); } .hover\:shadow-\[\#25D366\]\/20:hover { --tw-shadow-color: rgba(37,211,102,0.2); } .hover\:shadow-\[\#c9a84c\]\/20:hover { --tw-shadow-color: rgba(201,168,76,0.2); } .hover\:shadow-\[var\(--gold\)\]\/35:hover { --tw-shadow-color: rgba(198,161,91,0.35); } .shadow-\[\#25D366\]\/40 { --tw-shadow-color: rgba(37,211,102,0.4); } .shadow-\[var\(--gold\)\]\/20 { --tw-shadow-color: rgba(198,161,91,0.2); } .shadow-\[var\(--gold\)\]\/25 { --tw-shadow-color: rgba(198,161,91,0.25); } .text-\[var\(--brand\)\]\/60 { color: rgba(18,55,42,0.6); } .to-\[var\(--gold\)\]\/10 { --tw-gradient-to: rgba(198,161,91,0.1); } .via-\[\#12372A\]\/30 { --tw-gradient-via: rgba(18,55,42,0.3); } .via-\[var\(--brand\)\]\/30 { --tw-gradient-via: rgba(18,55,42,0.3); } /* ═══ TAILWIND RING/SHADOW/SHAPE UTILITIES ═══ */ .rounded-3xl { border-radius: 1.5rem; } .rounded-\[2rem\] { border-radius: 2rem; } .stat-card-modern { position: relative; overflow: hidden; } .ring-emerald-500\/20 { --tw-ring-color: rgba(16,185,129,0.2); } .ring-amber-500\/20 { --tw-ring-color: rgba(245,158,11,0.2); } .ring-blue-500\/20 { --tw-ring-color: rgba(59,130,246,0.2); } .ring-purple-500\/20 { --tw-ring-color: rgba(139,92,246,0.2); } .ring-1 { --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .group:hover .group-hover\:shadow-emerald-500\/10 { --tw-shadow-color: rgba(16,185,129,0.1); } .group:hover .group-hover\:shadow-amber-500\/10 { --tw-shadow-color: rgba(245,158,11,0.1); } .group:hover .group-hover\:shadow-blue-500\/10 { --tw-shadow-color: rgba(59,130,246,0.1); } .group:hover .group-hover\:shadow-purple-500\/10 { --tw-shadow-color: rgba(139,92,246,0.1); } .group:hover .group-hover\:scale-150 { transform: scale(1.5); } .font-extrabold { font-weight: 800; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .duration-500 { transition-duration: 500ms; } .duration-700 { transition-duration: 700ms; } /* ═══ CONTACT MAP ENHANCEMENTS ═══ */ #map-container iframe { border-radius: 1rem; transition: transform 0.5s ease; } #map-container:hover iframe { transform: scale(1.02); } @keyframes mapPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(18,55,42,0.3); } 50% { box-shadow: 0 0 0 12px rgba(18,55,42,0); } } #map-container .absolute .animate-pulse { animation: mapPulse 2s ease-in-out infinite; } /* ═══ CONTACT PAGE ANIMATIONS ═══ */ .contact-input { border-radius: 0.875rem; padding: 0.875rem 1rem; font-size: 0.875rem; border: 1.5px solid #e5e7eb; background: white; transition: all 0.3s ease; } .contact-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18,55,42,0.08); outline: none; } .contact-field label { color: #6b7280; letter-spacing: 0.05em; } .contact-field:focus-within label { color: var(--brand); } .contact-quick-btn { position: relative; overflow: hidden; } .contact-quick-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, rgba(18,55,42,0.03)); opacity: 0; transition: opacity 0.3s ease; } .contact-quick-btn:hover::after { opacity: 1; } .contact-map-wrapper { box-shadow: 0 20px 60px rgba(0,0,0,0.08); } @media (max-width: 1024px) { .contact-map-wrapper { min-height: 350px; } } @media print { .contact-hero-content, .contact-section-header, .contact-form-header, .contact-form-card, .contact-field, .contact-quick-btn, .contact-map-wrapper { opacity: 1 !important; transform: none !important; } } /* ═══ FOOTER ═══ */ footer .grid > div { min-width: 0; } footer a.break-all { word-break: normal; overflow-wrap: anywhere; } /* ═══════════════════════════════════════════════════════════════ FULL RESPONSIVE — All Screen Sizes (320px → 4K+) Covers: iPhone SE, iPhone 14/15, Galaxy S/A, Pixel, iPad, iPad Pro, Surface, Fold phones, Ultra-wide, 4K ═══════════════════════════════════════════════════════════════ */ /* ── iPhone Safe Area (notch, Dynamic Island, home indicator) ── */ @supports (padding: env(safe-area-inset-top)) { body { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } #navbar { padding-top: calc(0.75rem + env(safe-area-inset-top)) !important; } .mobile-sticky-cta { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important; } #mobile-lang-fab { bottom: calc(5rem + env(safe-area-inset-bottom)) !important; right: calc(1rem + env(safe-area-inset-right)) !important; } footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } } /* ── Global touch improvements (all mobile) ── */ @media (pointer: coarse) { .nav-link-item, .filter-btn, .filter-btn-premium, .lang-btn, .g-btn, button, a { min-height: 44px; min-width: 44px; } } /* ── 320px: Ultra-small phones (Galaxy Fold closed, small feature phones) ── */ @media (max-width: 359px) { body { font-size: 13px; } .playfair { font-size: 1.5rem !important; } h1 { font-size: 1.4rem !important; line-height: 1.2 !important; } h2 { font-size: 1.2rem !important; } /* Navbar: ALL links stay visible, font gets smaller */ .nav-mobile-link { font-size: 9px !important; padding: 1px 3px !important; } #navbar .max-w-7xl { padding: 0 0.5rem !important; } /* Hero */ .hero-content { padding: 0 0.75rem !important; } /* Cards */ .g-card { padding: 0.75rem !important; border-radius: 0.75rem !important; } /* Grid adjustments */ .grid { gap: 0.75rem !important; } /* Contact form */ .contact-input { padding: 0.625rem 0.75rem !important; font-size: 0.8125rem !important; } /* Footer */ footer .grid { gap: 1rem !important; } footer .grid > div { min-width: 100% !important; } /* WhatsApp float */ #whatsapp-float { bottom: 4.5rem !important; right: 0.75rem !important; width: 48px !important; height: 48px !important; } /* Scroll to top */ #scroll-top { bottom: 4.5rem !important; right: 0.75rem !important; width: 40px !important; height: 40px !important; } /* Mobile lang fab */ #mobile-lang-fab { bottom: 7rem !important; right: 0.5rem !important; } #mobile-lang-fab button { width: 36px !important; height: 36px !important; font-size: 9px !important; } } /* ── 375px: iPhone 12/13/14, iPhone SE 2nd gen, common Android — hide About+Contact+Society ── */ @media (min-width: 360px) and (max-width: 420px) { body { font-size: 14px; } /* ALL links stay, just smaller font */ .nav-mobile-link { font-size: 10px !important; padding: 1px 3px !important; } /* Hero sections */ .hero-content, section.pt-36 { padding-left: 1rem !important; padding-right: 1rem !important; } /* Section titles */ .section-tag { font-size: 0.625rem !important; letter-spacing: 0.15em !important; } /* Stat cards */ .stat-card-modern { padding: 1rem !important; } /* Contact */ .contact-input { font-size: 0.875rem !important; } /* Filter buttons scroll */ .filter-btn, .filter-btn-premium { white-space: nowrap !important; font-size: 0.625rem !important; padding: 0.375rem 0.75rem !important; } /* Newsletter */ #newsletter-heading { font-size: 1.5rem !important; } } /* ── 481px-640px: Small tablets, large phones landscape ── */ @media (min-width: 481px) and (max-width: 640px) { .nav-mobile-link { font-size: 11px !important; } footer .grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ── 421px-480px: Large phones ── */ @media (min-width: 421px) and (max-width: 480px) { .nav-mobile-link { font-size: 11px !important; } section.pt-36 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } } /* ── 641px-768px: iPad Mini, tablets portrait ── */ @media (min-width: 641px) and (max-width: 768px) { footer .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; } .stat-card-modern { padding: 1.5rem !important; } } /* ── Fold phones (open state ~600-700px wide) ── */ @media (min-width: 580px) and (max-width: 720px) and (min-height: 500px) { .nav-mobile-link { font-size: 11px !important; } footer .grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ── 1025px-1366px: Small laptops ── */ @media (min-width: 1025px) and (max-width: 1366px) { .max-w-7xl { max-width: 72rem !important; } } /* ── 1367px-1920px: Standard desktop ── */ @media (min-width: 1367px) and (max-width: 1920px) { .max-w-7xl { max-width: 80rem !important; } } /* ── 1921px+: Ultra-wide, 4K monitors ── */ @media (min-width: 1921px) { body { font-size: 17px; } .max-w-7xl { max-width: 90rem !important; } .nav-link-item { font-size: 0.9rem !important; } #navbar .max-w-7xl { max-width: 90rem !important; } footer .max-w-7xl { max-width: 90rem !important; } section { max-width: 100vw !important; overflow-x: hidden; } } /* ── Landscape phones (short height) ── */ @media (max-height: 500px) and (orientation: landscape) { #navbar { padding: 0.25rem 0 !important; } #navbar .max-w-7xl { min-height: 40px !important; } .hero-content { padding-top: 3rem !important; padding-bottom: 1rem !important; } section.pt-36 { padding-top: 4rem !important; } } /* ── High DPI / Retina displays ── */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { img { image-rendering: -webkit-optimize-contrast; } } /* ── Print styles for all pages ── */ @media print { #navbar, #whatsapp-float, #scroll-top, #mobile-lang-fab, .mobile-sticky-cta, .share-sidebar, .contact-sidebar, #page-loader, .footer-newsletter, .newsletter-section { display: none !important; } body { background: white !important; color: black !important; } .g-card { box-shadow: none !important; border: 1px solid #ddd !important; } section { break-inside: avoid; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } /* ── Dark mode support (system preference) ── */ @media (prefers-color-scheme: dark) { /* Only apply to admin panel */ .admin-main { --bg: #0f172a; --bg-soft: #1e293b; --fg: #f1f5f9; --fg-muted: #94a3b8; --border: #334155; } } /* ── Reduced motion accessibility ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } #page-loader { display: none !important; } .fade-up, .fade-left, .fade-right { opacity: 1 !important; transform: none !important; } } /* ── Mobile bottom safe spacing (for WhatsApp + sticky CTA) ── */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .mobile-sticky-cta { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); } }