@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&display=swap'); :root { color-scheme: dark; --ink: #f7f4ed; --muted: rgba(247, 244, 237, 0.68); --quiet: rgba(247, 244, 237, 0.46); --line: rgba(255, 255, 255, 0.14); --gold: #d7b46a; --aqua: #77d7d0; --rose: #b86f83; --glass: rgba(8, 12, 16, 0.42); --black: #050608; --nav-height: 82px; --tech-font: "Orbitron", "Rajdhani", "Eurostile", "Arial Black", sans-serif; --body-font: "Rajdhani", Inter, ui-sans-serif, system-ui, sans-serif; --heading-font: "Montserrat", sans-serif; --section-head-font: "Titillium Web", "Rajdhani", sans-serif; --desc-font: "Roboto", sans-serif; font-family: var(--body-font); --neon-cyan: #00e5ff; --neon-magenta: #ff2d8a; --neon-amber: #ffb547; --bg-deep: #05050d; --bg-panel: rgba(12, 14, 28, 0.72); --line: rgba(0, 229, 255, 0.22); --line-strong: rgba(0, 229, 255, 0.55); --text-mute: #a8b0c8; } * { box-sizing: border-box; } html { /* scroll-behavior: smooth breaks GSAP ScrollTrigger measurements — refresh() must jump scroll instantly; smooth turns jumps into animations and trigger bounds get computed mid-flight. */ scroll-behavior: auto; background: var(--black); /* Force html to be the scroll container so document.scrollingElement returns and Lenis' html.scrollTop writes update window.scrollY. Without this, body becomes the scroller when overflow-x is set on it, and Lenis' scrollTop writes to the wrong element. */ overflow-y: auto; } body { margin: 0; min-width: 320px; overflow-x: clip; /* clip avoids creating a scroll context (unlike hidden), keeping window as the Lenis scroll target */ background: radial-gradient(circle at 12% 16%, rgba(119, 215, 208, 0.12), transparent 28rem), radial-gradient(circle at 84% 8%, rgba(215, 180, 106, 0.1), transparent 30rem), #050608; color: var(--ink); } body.is-loading-frames { cursor: progress; } .loading-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; gap: 42px; background: #05061b; color: #16d6d6; text-align: center; transition: opacity 650ms ease, visibility 650ms ease; } body.has-frames .loading-screen { opacity: 0; pointer-events: none; visibility: hidden; } .loader-ring { position: relative; display: grid; width: clamp(190px, 20vw, 320px); aspect-ratio: 1; place-items: center; border-radius: 50%; background: radial-gradient(circle, #05061b 0 54%, transparent 55%), repeating-conic-gradient( from -90deg, rgba(22, 214, 214, 0.98) 0deg 5deg, transparent 5deg 9deg ); filter: drop-shadow(0 0 26px rgba(22, 214, 214, 0.16)); margin-left:12%; } .loader-ring::after { position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle, #05061b 0 66%, transparent 67%), conic-gradient(#16d6d6 var(--loader-progress, 0%), rgba(22, 214, 214, 0.1) 0); content: ""; mask: radial-gradient(circle, transparent 58%, #000 59%); } .loader-percent { position: relative; z-index: 1; color: rgba(22, 214, 214, 0.78); font-family: var(--tech-font); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; letter-spacing: 0.02em; } .loading-screen p { margin: 0; color: #16d6d6; font-family: var(--tech-font); font-size: clamp(0.82rem, 1.2vw, 1.35rem); font-weight: 700; letter-spacing: 0.08em; transition: color 0.4s ease; } .loader-skip { margin-top: -16px; padding: 0.55em 1.6em; background: transparent; border: 1px solid rgba(22, 214, 214, 0.45); border-radius: 4px; color: rgba(22, 214, 214, 0.7); font-family: var(--tech-font); font-size: clamp(0.72rem, 1vw, 0.9rem); font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; animation: loader-skip-fade 0.5s ease both; } .loader-skip:hover { background: rgba(22, 214, 214, 0.12); border-color: rgba(22, 214, 214, 0.8); color: #16d6d6; } @keyframes loader-skip-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ ROTATE DEVICE OVERLAY — mobile portrait only ============================================================ */ .rotate-overlay { position: fixed; inset: 0; z-index: 9999; background: #05061b; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .rotate-overlay.is-visible { opacity: 1; pointer-events: all; } .rotate-content { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 32px; text-align: center; max-width: 320px; } .rotate-icon svg { width: 80px; height: 80px; animation: phone-tilt 2.2s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.4)); } @keyframes phone-tilt { 0%, 30% { transform: rotate(0deg); } 55%, 85% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } } .rotate-title { margin: 0; font-family: var(--tech-font); font-size: clamp(1.1rem, 5vw, 1.5rem); font-weight: 700; letter-spacing: 0.12em; color: #fff; } .rotate-subtitle { margin: 0; font-family: var(--tech-font); font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.05em; line-height: 1.55; } .rotate-continue { margin-top: 8px; background: none; border: 1px solid rgba(0, 229, 255, 0.35); color: rgba(0, 229, 255, 0.7); font-family: var(--tech-font); font-size: 0.75rem; letter-spacing: 0.1em; padding: 10px 24px; border-radius: 2px; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .rotate-continue:hover { border-color: rgba(0, 229, 255, 0.75); color: #00e5ff; } a { color: inherit; text-decoration: none; } code { color: var(--gold); } .site-shell { position: relative; isolation: isolate; } .logo img { width: 70px; } .nav { position: fixed; z-index: 21; top: 0; left: 0; display: flex; width: 100%; height: var(--nav-height); align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid transparent; background: transparent; backdrop-filter: none; transition: background 300ms ease, border-color 300ms ease, height 300ms ease; } .nav.is-condensed { height: 90px; border-color: rgba(12, 148, 148, 0.18); background: rgba(4, 7, 9, 0.90); backdrop-filter: blur(20px); } .brand, .nav-links { display: flex; align-items: center; } .brand { gap: 12px; font-family: var(--tech-font); font-size: clamp(1rem, 1.6vw, 1.65rem); font-weight: 700; letter-spacing: 0.02em; text-transform: none; } .brand-mark { width: 34px; height: 34px; border: 1px solid rgba(215, 180, 106, 0.64); background: linear-gradient(135deg, rgba(215, 180, 106, 0.95), rgba(119, 215, 208, 0.2)), #15120c; box-shadow: 0 0 28px rgba(215, 180, 106, 0.22); } .nav-links { gap: clamp(18px, 3vw, 38px); font-family: var(--tech-font); font-size: clamp(0.78rem, 1.05vw, 1.18rem); font-weight: 600; letter-spacing: 0.03em; text-transform: none; color: var(--muted); transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease; flex: 1 1 auto; justify-content: flex-end; margin-right: 18px; } .nav-links a { position: relative; transition: color 180ms ease, text-shadow 180ms ease; } .nav-links a::after { position: absolute; right: 0; bottom: -10px; left: 0; height: 1px; background: #0c9494; content: ""; opacity: 0; transform: scaleX(0.2); transition: opacity 180ms ease, transform 180ms ease; } .nav-links a.is-active, .nav-links a:hover { color: #0c9494; /* text-shadow: 0 0 24px rgba(215, 180, 106, 0.44);*/ } .nav-links a.is-active::after, .nav-links a:hover::after { opacity: 1; transform: scaleX(1); } .whatsapp-link { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: #00c409; border-radius: 10px; transition: transform 0.2s ease; } .whatsapp-link:hover { color: inherit !important; transform: scale(1.1); } .whatsapp-link:hover::after { display: none !important; opacity: 0 !important; } .whatsapp-link svg { width: 22px; height: 22px; fill: currentColor; } .menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; border: 1px solid rgba(12, 148, 148, 0.7); background: rgba(5, 8, 10, 0.18); color: var(--ink); cursor: pointer; transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease; } .menu-toggle span { width: 18px; height: 1px; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; } .menu-toggle:hover { transform: translateY(-1px); background: rgba(12, 148, 148, 0.12); box-shadow: 0 0 28px rgba(12, 148, 148, 0.18); } .nav.is-condensed .menu-toggle { display: flex; } .nav.is-condensed .nav-links { position: static; display: flex; flex: 1 1 auto; justify-content: flex-end; margin-right: 18px; padding: 0; border: 0; background: transparent; backdrop-filter: none; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateX(10px); visibility: hidden; } .nav.is-condensed.menu-open .nav-links { max-width: min(760px, calc(100vw - 280px)); opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; } .nav.menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); } .nav.menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); } .global-viewer, #frame-canvas, .cinematic-fallback, .viewer-overlay { position: absolute; inset: 0; } .global-viewer { position: fixed; z-index: 0; overflow: hidden; background: #050608; pointer-events: none; } #frame-canvas { width: 100%; height: 100%; opacity: 0; transform: scale(1.015); transition: opacity 0.3s ease; will-change: transform, opacity; } body.has-frames #frame-canvas { opacity: 1; } body.has-frames .cinematic-fallback { opacity: 0; } /* When no asset frames are found, keep the cinematic fallback fully visible */ body.no-frames #frame-canvas { opacity: 0 !important; } body.no-frames .cinematic-fallback { opacity: 1 !important; } .cinematic-fallback { opacity: 1; transition: opacity 650ms ease; } .fallback-one { background: linear-gradient(92deg, rgba(5, 6, 8, 0.96) 0%, rgba(5, 6, 8, 0.55) 36%, transparent 62%), linear-gradient(115deg, transparent 0 26%, rgba(215, 180, 106, 0.18) 26.2% 26.8%, transparent 27%), linear-gradient(104deg, transparent 0 48%, rgba(119, 215, 208, 0.18) 48.2% 48.7%, transparent 49%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%), url("data:image/svg+xml,%3Csvg width='1800' height='1100' viewBox='0 0 1800 1100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1800' height='1100' fill='%23080a0d'/%3E%3Cg stroke='%23252f36' stroke-width='2' fill='none' opacity='.82'%3E%3Cpath d='M290 780 L620 230 L1290 160 L1540 790 Z'/%3E%3Cpath d='M450 790 L710 330 L1190 280 L1390 780 Z'/%3E%3Cpath d='M620 790 L790 420 L1110 390 L1250 780 Z'/%3E%3Cpath d='M290 780 H1540 M620 230 L790 420 M1290 160 L1110 390'/%3E%3C/g%3E%3Cg stroke='%23d7b46a' stroke-width='1.5' opacity='.46'%3E%3Cpath d='M710 330 L1190 280 L1390 780'/%3E%3Cpath d='M790 420 L1110 390'/%3E%3C/g%3E%3C/svg%3E"); background-position: center; background-size: cover; animation: drift 12s ease-in-out infinite alternate; } .fallback-two { background: radial-gradient(circle at 50% 50%, rgba(119, 215, 208, 0.12), transparent 28rem), linear-gradient(180deg, rgba(5, 6, 8, 0.18), rgba(5, 6, 8, 0.86)), url("data:image/svg+xml,%3Csvg width='1800' height='1100' viewBox='0 0 1800 1100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1800' height='1100' fill='%23060709'/%3E%3Cg transform='translate(900 560)' fill='none'%3E%3Cellipse rx='620' ry='260' stroke='%231b3638' stroke-width='2'/%3E%3Cellipse rx='440' ry='180' stroke='%233b3020' stroke-width='2'/%3E%3Cellipse rx='260' ry='105' stroke='%23665a36' stroke-width='2'/%3E%3Cpath d='M-700 0 H700 M0 -320 V320 M-485 -180 L485 180 M-485 180 L485 -180' stroke='%23232a30' stroke-width='2'/%3E%3C/g%3E%3Cg stroke='%23d7b46a' opacity='.42'%3E%3Cpath d='M520 715 C720 620 1080 620 1280 715'/%3E%3Cpath d='M620 810 C780 745 1020 745 1180 810'/%3E%3C/g%3E%3C/svg%3E"); background-position: center; background-size: cover; animation: drift 14s ease-in-out infinite alternate-reverse; } .viewer-overlay { z-index: 1; opacity: 0; transition: background 0.3s ease; } body[data-active-section="section-1"] .viewer-overlay { background: radial-gradient(ellipse 67% 34% at 71% 82%, rgba(5, 1, 8, 0.85) 0%, rgba(5, 6, 8, 0.5) 30%, transparent 65%); } body[data-active-section="section-2"] .viewer-overlay { background: radial-gradient(ellipse 69% 38% at 50% 78%, rgba(5, 6, 8, 0.85) 0%, rgba(5, 6, 8, 0.5) 30%, transparent 65%); } /*body[data-active-section="section-3"] .viewer-overlay { background: radial-gradient(ellipse 50% 49% at 14% 74%, rgba(5, 6, 8, 0.85) 0%, rgba(5, 6, 8, 0.5) 30%, transparent 65%); } body[data-active-section="section-4"] .viewer-overlay { background: radial-gradient(ellipse 58% 65% at 14% 70%, rgba(5, 6, 8, 0.85) 0%, rgba(5, 6, 8, 0.5) 30%, transparent 65%); } body[data-active-section="section-5"] .viewer-overlay { background: radial-gradient(ellipse 58% 65% at 14% 70%, rgba(5, 6, 8, 0.85) 0%, rgba(5, 6, 8, 0.5) 30%, transparent 65%); } body[data-active-section="section-6"] .viewer-overlay { background: radial-gradient(ellipse 58% 65% at 14% 70%, rgba(5, 6, 8, 0.85) 0%, rgba(5, 6, 8, 0.5) 30%, transparent 65%); }*/ /* Soft text-backing overlay — fades to transparent at all edges, no visible border. Excluded: section-1 (hero-content), section-2 (lens-content), section-6.5 (aipowered-content) */ .section-content:not(.hero-content):not(.lens-content):not(.aipowered-content):not(.frame):not(.lensiq-content):not(.lensspace-content)::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* background: radial-gradient(ellipse 90% 60% at 50% 100%, rgba(5, 6, 8, 0.62) 0%, transparent 100%);*/ background: radial-gradient(ellipse 58% 65% at 14% 70%, rgba(5, 6, 8, 0.85) 0%, rgba(5, 6, 8, 0.5) 30%, transparent 65%); } .section-content.lensiq-content::before { background: radial-gradient(ellipse 66% 67% at 18% 77%, rgba(5, 6, 8, 0.85) 0%, rgba(5, 6, 8, 0.6) 30%, transparent 65%); opacity: 0; } .section-content.lensspace-content::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 66% 67% at 25% 76%, rgba(5, 6, 8, 0.85) 0%, rgba(5, 6, 8, 0.8) 30%, transparent 65%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: -1; } .story-section { position: relative; z-index: 2; height: var(--scroll-length, 320vh); overflow: visible; isolation: isolate; } .section-content { position: sticky; top: 0; z-index: 2; width: min(1440px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; padding-top: var(--nav-height); } .hero-content { display: flex; max-width: 1440px; flex-direction: column; justify-content: center; align-items: flex-end; top: 30%; } .eyebrow { margin: 0 0 18px; color: var(--gold); font-size: clamp(0.72rem, 1.2vw, 0.82rem); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; } .hero-title, .massive-title, .closing-section h2 { margin: 0; max-width: 880px; font-size: clamp(3.6rem, 8.8vw, 8.75rem); font-family: var(--tech-font); line-height: 0.9; letter-spacing: 0; text-wrap: balance; } .hero-title { font-size: clamp(2.42rem, 2.46vw, 7.31rem); font-weight: 900; letter-spacing: 0.05em; text-align: right; } .hero-copy { max-width: 600px; margin: 28px 0 34px; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.75; } .button { position: relative; display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.16); color: var(--ink); font-family: var(--body-font); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .button::before { position: absolute; inset: -2px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.34), transparent); content: ""; opacity: 0; transform: translateX(-72%); transition: opacity 180ms ease, transform 520ms ease; } .button:hover { transform: translateY(-2px); border-color: rgba(215, 180, 106, 0.72); box-shadow: 0 18px 48px rgba(215, 180, 106, 0.18); } .button:hover::before { opacity: 1; transform: translateX(72%); } .button.primary { background: linear-gradient(135deg, rgba(215, 180, 106, 0.96), rgba(146, 108, 50, 0.92)); color: #080705; } .button.cta-outline { border-radius: 10px; border-color: #0c9494; background: transparent; color: var(--ink); font-size: 1.4rem; box-shadow: inset 0 0 0 1px rgba(12, 148, 148, 0.2); } .button.cta-outline:hover { border-color: #0c9494; background: rgba(12, 148, 148, 0.08); box-shadow: 0 18px 48px rgba(12, 148, 148, 0.18), inset 0 0 0 1px rgba(12, 148, 148, 0.36); } .button.ghost { background: rgba(8, 12, 16, 0.4); backdrop-filter: blur(18px); } .hero-cta-wrap { display: inline-flex; align-items: center; flex-direction: column; gap: 12px; margin-top: 34px; } .cta-caret { width: 12px; height: 12px; border-right: 5px solid #0c9494; border-bottom: 5px solid #0c9494; border-left: 0; transform: rotate(45deg); opacity: 0.88; animation: caretFloat 1.6s ease-in-out infinite; } .scroll-indicator { position: absolute; z-index: 4; right: clamp(20px, 4vw, 64px); bottom: 34px; width: 1px; height: 86px; overflow: hidden; background: rgba(255, 255, 255, 0.16); } .scroll-indicator span { display: block; width: 100%; height: 42%; background: linear-gradient(180deg, transparent, var(--gold), transparent); animation: scrollPulse 1.8s ease-in-out infinite; } .section-actions { position: absolute; z-index: 5; top: calc(var(--nav-height) + 28px); right: clamp(20px, 4vw, 64px); display: flex; gap: 12px; } .lens-content { display: grid; max-width: 1180px; align-items: end; grid-template-rows: 1fr auto auto; justify-items: center; padding-bottom: clamp(40px, 7vh, 82px); text-align: center; } .day-night-control { position: absolute; top: calc(var(--nav-height) + 18px); left: 0; display: flex; width: min(80px, calc(100vw - 40px)); align-items: flex-start; gap: clamp(12px, 0vw, 22px); transform: translateX(-50%); --time-progress: 0%; } .time-button { display: inline-flex; width: 44px; min-width: 44px; height: 44px; align-items: center; justify-content: center; border: 2px solid rgba(12, 148, 148, 0.62); border-radius: 50%; background: rgba(4, 8, 11, 0.24); color: #fff; cursor: pointer; box-shadow: inset 0 0 18px rgba(12, 148, 148, 0.12), 0 0 28px rgba(12, 148, 148, 0.12); transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease; } .time-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .time-button:hover, .time-button.is-active { border-color: #16d6d6; background: rgba(12, 148, 148, 0.14); color: #fff; box-shadow: inset 0 0 18px rgba(12, 148, 148, 0.22), 0 0 30px rgba(12, 148, 148, 0.28); transform: translateY(-1px); } .time-track { position: relative; flex: 1 1 auto; height: 44px; } .time-track::before { position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: rgba(12, 148, 148, 0.58); box-shadow: 0 0 22px rgba(12, 148, 148, 0.38); content: ""; transform: translateY(-50%); } .time-ticks { position: absolute; inset: 7px 0; opacity: 0.88; background: repeating-linear-gradient( 90deg, transparent 0 22px, rgba(12, 148, 148, 0.9) 22px 24px, transparent 24px 36px ), repeating-linear-gradient( 90deg, transparent 0 70px, rgba(255, 255, 255, 0.72) 70px 72px, transparent 72px 104px ); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); } .time-progress { position: absolute; top: 50%; left: 0; width: var(--time-progress); height: 3px; background: #0c9494; box-shadow: 0 0 24px rgba(12, 148, 148, 0.7); transform: translateY(-50%); transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1); } .time-indicator { position: absolute; top: 50%; left: var(--time-progress); width: 8px; height: 30px; background: #16d6d6; box-shadow: 0 0 24px rgba(22, 214, 214, 0.78); transform: translate(-50%, -50%); transition: left 420ms cubic-bezier(0.22, 1, 0.36, 1); } .time-indicator::after { position: absolute; right: 50%; bottom: -9px; width: 0; height: 0; border-right: 5px solid transparent; border-bottom: 0; border-left: 5px solid transparent; border-top: 6px solid #16d6d6; content: ""; transform: translateX(50%); } .rotate-elevation { position: absolute; top: calc(var(--nav-height) + 18px); left: 35%; display: flex; width: min(400px, calc(100vw - 40px)); align-items: center; gap: clamp(12px, 2vw, 22px); transform: translateX(-50%); --time-progress: 0%; } .rotate-track { position: relative; flex: 1 1 auto; height: 44px; background: linear-gradient(90deg, transparent, black, transparent); } .rotate-track::before { position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: rgba(12, 148, 148, 0.58); box-shadow: 0 0 22px rgba(12, 148, 148, 0.38); content: ""; transform: translateY(-50%); } .rotate-ticks { position: absolute; inset: 7px 0; /* opacity: 0.88; background: repeating-linear-gradient( 90deg, transparent 0 22px, rgba(12, 148, 148, 0.9) 22px 24px, transparent 24px 36px ), repeating-linear-gradient( 90deg, transparent 0 70px, rgba(255, 255, 255, 0.72) 70px 72px, transparent 72px 104px ); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);*/ background: repeating-linear-gradient( 90deg, transparent 0 14px, rgba(20,220,220,.75) 14px 15px, transparent 15px 16px ); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); opacity: .95; } .rotate-progress { position: absolute; top: 50%; left: 0; width: var(--time-progress); height: 3px; background: #0c9494; box-shadow: 0 0 24px rgba(12, 148, 148, 0.7); transform: translateY(-50%); transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1); } .rotate-indicator { position: absolute; top: 50%; left: var(--time-progress); width: 8px; height: 30px; background: #16d6d6; box-shadow: 0 0 24px rgba(22, 214, 214, 0.78); transform: translate(-50%, -50%); transition: left 420ms cubic-bezier(0.22, 1, 0.36, 1); } .rotate-indicator::after { position: absolute; right: 50%; bottom: -9px; width: 0; height: 0; border-right: 5px solid transparent; border-bottom: 0; border-left: 5px solid transparent; border-top: 6px solid #16d6d6; content: ""; transform: translateX(50%); } /* ===== Rotation stage sits BETWEEN "LENS" and "360�" ===== */ .lens-split-title { display: flex; align-items: center; justify-content: center; gap: 0; position: relative; width: 100%; } .lens-split-title h2 { flex-shrink: 0; position: relative; z-index: 2; /* text above the rotating image */ } .lens-rotation-stage { display: none; position: relative; width: clamp(220px, 28vw, 260px); /* size of the rotation area */ height: clamp(360px, 42vw, 620px); /* matches building aspect */ margin: 0 4vw; /* slight overlap with text */ z-index: 1; pointer-events: none; /* interaction handled by slider */ opacity: 0; /* hidden until rotation stage active */ transition: opacity .5s ease; } .lens-rotation-stage.is-visible { opacity: 1; } .lens-rotation-stage canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(34,230,255,.25)); } /* Optional: ambient cyan glow behind building during rotation */ .lens-rotation-stage::before { content: ""; position: absolute; inset: 10% 5%; background: radial-gradient(ellipse at center, rgba(34,230,255,.15) 0%, transparent 70%); z-index: -1; filter: blur(20px); } /* Hide all interactive controls by default � JS toggles visibility */ .day-night-control, .rotate-elevation, .service-btns { opacity: 0; visibility: hidden; transform: translateY(20px); } /* Smooth scroll-hint pulse on the rotation slider when active */ @keyframes rotate-hint-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(34,230,255,.4); } 50% { box-shadow: 0 0 24px rgba(34,230,255,.7); } } .rotate-elevation .rotate-indicator { animation: rotate-hint-pulse 1.8s ease-in-out infinite; } .service-btns { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 22px); margin-top: 20px; --time-progress: 0%; } .service-btns .learn-more, .service-btns .call-us { display: inline-flex; width: 190px; min-width: 150px; height: 50px; align-items: center; justify-content: center; /* border: 2px solid rgba(12, 148, 148, 0.62);*/ border-radius: 25px; /* background: rgba(4, 8, 11, 0.24); color: #fff;*/ cursor: pointer; box-shadow: inset 0 0 18px rgba(12, 148, 148, 0.12), 0 0 28px rgba(12, 148, 148, 0.12); transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease; } .learn-more { color: #000; background: #fff; font-size: 1rem; border: none; } .call-us { color: #000; background: rgba(12, 148, 148, 1); font-size: 1rem; border: none; } .learn-more:hover, .learn-more.is-active, .call-us:hover, .call-us.is-active { border-color: #16d6d6; background: rgba(12, 148, 148, 0.14); color: #fff; box-shadow: inset 0 0 18px rgba(12, 148, 148, 0.22), 0 0 30px rgba(12, 148, 148, 0.28); transform: translateY(-1px); } .lens-split-title { display: grid; width: min(1180px, 100%); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 160px); align-self: center; grid-row: 1; margin-top: clamp(52px, 9vh, 110px); } .lens-split-title h2 { margin: 0; color: var(--ink); font-family: var(--tech-font); font-size: clamp(5.4rem, 15vw, 8.2rem); font-weight: 900; line-height: 0.86; letter-spacing: -0.03em; text-shadow: 0 0 42px rgba(12, 148, 148, 0.18); opacity: 0; } .lens-split-title h2:first-child { text-align: left; transform: translateX(-140px); } .lens-split-title h2:last-child { text-align: center; transform: translateX(140px); } .lens-tagline { grid-row: 2; /* max-width: 1000px;*/ margin: 0 auto; color: var(--ink); font-family: var(--tech-font); font-size: clamp(1.1rem, 4vw, 3rem); font-weight: 500; line-height: 1.42; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; } .lens-description { grid-row: 3; max-width: 740px; margin: 14px auto 0; color: #fff; font-family: var(--body-font); font-size: clamp(0.98rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.22; text-align: center; } .closing-section { min-height: 78vh; display: grid; place-items: center; padding: 120px 20px; background: linear-gradient(180deg, #050608, rgba(10, 12, 14, 0.94)), radial-gradient(circle at 50% 0%, rgba(215, 180, 106, 0.12), transparent 28rem); } .closing-inner { width: min(940px, 100%); text-align: center; } .closing-section h2 { max-width: 920px; margin: 0 auto; font-size: clamp(2.8rem, 7vw, 7rem); } .closing-section p:not(.eyebrow) { max-width: 650px; margin: 28px auto 34px; color: var(--muted); font-size: 1.08rem; line-height: 1.8; } /* ============ SECTION 3 � GALLERY MORPH ============ */ .section-gallery { position: relative; min-height: var(--scroll-length, 160vh); } .section-gallery .section-content { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 60px 100px; /* max-width: 560px;*/ height: 100vh; top: 0%; /* left: -12%;*/ width: 100%; } /* Morphing gallery screen (Section 2 building -> right side display) */ .gallery-screen { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100vw; height: 100vh; z-index: 3; pointer-events: none; overflow: hidden; opacity: 0; visibility: hidden; will-change: width,height,top,left,border-radius,opacity; } .gallery-screen.is-active { visibility: visible; /* only visible when activated */ border-radius: 0 !important; } .gallery-screen canvas { width: 100%; height: 100%; display: block; transition: opacity 0.2s ease; /* fallback if GSAP misses */ will-change: opacity; } .gallery-frame-glow { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(34,230,255,0); transition: box-shadow .6s ease; } .gallery-screen.framed .gallery-frame-glow { /* box-shadow: inset 0 0 0 2px rgba(34,230,255,.55), 0 0 60px rgba(34,230,255,.3), 0 0 120px rgba(34,230,255,.12);*/ } .gallery-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; /* hidden by default; shown when video slide active */ opacity: 0; transition: opacity .35s ease; will-change: opacity; } .gallery-screen.is-video-active video { display: block; } .gallery-screen.is-video-active canvas { display: none; /* swap canvas -> video when playing video */ } /* ============ MEDIA CONTROLLER � FUTURISTIC HUD ============ */ :root { --hud-cyan: #22e6ff; --hud-cyan-glow: rgba(34,230,255,.7); --hud-cyan-soft: rgba(34,230,255,.25); --hud-bg-1: rgba(15,40,55,.55); --hud-bg-2: rgba(8,20,32,.35); } .media-controller { position: relative; width: 240px; padding: 42px 28px 26px; background: radial-gradient(ellipse at 50% 0%, rgba(34,230,255,.18) 0%, transparent 60%), linear-gradient(180deg, var(--hud-bg-1) 0%, var(--hud-bg-2) 100%); border-radius: 34px; border: 1px solid rgba(34,230,255,.35); box-shadow: 0 0 0 1px rgba(34,230,255,.15) inset, 0 0 40px rgba(34,230,255,.22), 0 20px 60px rgba(0,0,0,.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-bottom: 0px; } /* ===== Corner brackets (the [ ] shapes at corners) ===== */ .mc-bracket { position: absolute; width: 30px; height: 60px; border: 2px solid var(--hud-cyan); opacity: .85; box-shadow: 0 0 12px var(--hud-cyan-glow); } .mc-bracket--tl { top: 65px; left: 22px; border-right: none; border-bottom: none; border-top-left-radius: 35px; border-bottom-left-radius: 35px; } .mc-bracket--tr { top: 65px; right: 22px; border-left: none; border-bottom: none; border-top-right-radius: 35px; border-bottom-right-radius: 35px; } .mc-bracket--bl { top: 18px; left: 50px; border-right: none; border-bottom: none; border-top-left-radius: 8px; opacity: .0; height: 30px; width: 14px; } .mc-bracket--br { top: 18px; right: 50px; border-left: none; border-bottom: none; border-top-right-radius: 8px; opacity: .0; height: 30px; width: 14px; } /* ===== D-pad row ===== */ .mc-dpad { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } /* Left/right arrows (subtle, no chunky buttons � just triangles) */ .mc-arrow { width: 22px; height: 22px; background: transparent; border: none; cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform .3s ease, filter .3s ease; } .mc-tri { width: 0; height: 0; display: block; filter: drop-shadow(0 0 6px var(--hud-cyan-glow)); } .mc-tri--left { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 12px solid var(--hud-cyan); } .mc-tri--right { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid var(--hud-cyan); } .mc-arrow:hover { transform: scale(1.2); filter: brightness(1.4); } /* ===== Center play assembly ===== */ .mc-center { position: relative; width: 104px; height: 104px; display: grid; place-items: center; } /* Outer dashed ring */ .mc-ring--outer { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(34,230,255,.55); box-shadow: 0 0 18px rgba(34,230,255,.25), inset 0 0 14px rgba(34,230,255,.15); } /* Inner solid ring */ .mc-ring--inner { position: absolute; inset: 14px; border-radius: 50%; border: 1.5px solid rgba(34,230,255,.45); box-shadow: inset 0 0 10px rgba(34,230,255,.25); } /* Decorative top/bottom ticks on the ring */ .mc-tick { position: absolute; left: 50%; width: 2px; height: 10px; background: var(--hud-cyan); transform: translateX(-50%); box-shadow: 0 0 8px var(--hud-cyan-glow); } .mc-tick--top { top: -2px; } .mc-tick--bottom { bottom: -2px; } /* Glowing play button */ .mc-play { position: relative; z-index: 2; width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--hud-cyan); background: radial-gradient(circle at 50% 40%, rgba(34,230,255,.45) 0%, rgba(34,230,255,.15) 60%, rgba(0,0,0,0) 100%), rgba(8,30,42,.6); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 18px var(--hud-cyan-glow), 0 0 40px rgba(34,230,255,.35), inset 0 0 14px rgba(34,230,255,.4); transition: transform .25s ease, box-shadow .25s ease; } .mc-play:hover { transform: scale(1.06); box-shadow: 0 0 26px var(--hud-cyan), 0 0 60px rgba(34,230,255,.55), inset 0 0 18px rgba(34,230,255,.55); } .mc-play-icon { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid #eafdff; margin-left: 4px; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); } /* ===== Mini control row ===== */ .mc-mini-row { display: flex; justify-content: center; gap: 18px; } .mc-mini { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--hud-cyan); background: radial-gradient(circle at 50% 40%, rgba(34,230,255,.3) 0%, rgba(34,230,255,.05) 70%), rgba(8,30,42,.5); color: var(--hud-cyan); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 10px rgba(34,230,255,.4), inset 0 0 6px rgba(34,230,255,.3); transition: all .3s ease; padding: 0; } .mc-mini svg { width: 18px; height: 18px; fill: var(--hud-cyan); stroke: var(--hud-cyan); stroke-width: 1.6; filter: drop-shadow(0 0 4px var(--hud-cyan-glow)); } .mc-mini:hover { background: rgba(34,230,255,.25); box-shadow: 0 0 16px var(--hud-cyan), inset 0 0 10px rgba(34,230,255,.5); transform: translateY(-2px); } /* ===== Subtle pulsing glow on the whole panel ===== */ @keyframes hud-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(34,230,255,.15) inset, 0 0 40px rgba(34,230,255,.22), 0 20px 60px rgba(0,0,0,.4); } 50% { box-shadow: 0 0 0 1px rgba(34,230,255,.25) inset, 0 0 55px rgba(34,230,255,.32), 0 20px 60px rgba(0,0,0,.4); } } .media-controller { animation: hud-pulse 4s ease-in-out infinite; } /* ===== Playing state (swap play -> pause icon look) ===== */ .mc-play.is-playing .mc-play-icon { width: 14px; height: 18px; border: none; background: linear-gradient(to right, #eafdff 0 4px, transparent 4px 10px, #eafdff 10px 14px); margin-left: 0; } .gallery-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 4vw, 3rem); line-height: 1.1; letter-spacing: 1px; text-shadow: 0 4px 20px rgba(0,0,0,.6); margin-bottom: 0; } .gallery-description { font-size: clamp(14px,1.1vw,30px); color: rgba(255,255,255,.78); line-height: 1.6; margin-bottom: 28px; max-width: 520px; } .gallery-cta { display: flex; gap: 14px; margin-top: 25px; } .gallery-cta .learn-more, .gallery-cta .call-us { display: inline-flex; width: 150px; min-width: 150px; height: 50px; align-items: center; justify-content: center; /* border: 2px solid rgba(12, 148, 148, 0.62);*/ border-radius: 25px; /* background: rgba(4, 8, 11, 0.24); color: #fff;*/ cursor: pointer; box-shadow: inset 0 0 18px rgba(12, 148, 148, 0.12), 0 0 28px rgba(12, 148, 148, 0.12); transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease; } /* ========================================================= SECTION 4 � TANGIBLE BRANDING (Brochure Page Turn) ========================================================= */ .section-brochure { min-height: var(--scroll-length, 120vh); position: relative; } /* Text positioned at left bottom */ /*.brochure-content { position: absolute; bottom: 60px; left: 60px; max-width: 520px; text-align: left; z-index: 5; pointer-events: auto; }*/ .section-brochure .section-content, .brochure-content { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 60px 100px; height: 100vh; width: 100%; top: 0; /* left: 5%;*/ text-align: left; pointer-events: auto; opacity: 0.3; } /* Pinned state � fixed during Section 4 */ .brochure-content.is-pinned { position: fixed; bottom: 60px; left: 60px; z-index: 5; } /* Ensure reveal items start hidden (so they don't flash) */ .brochure-content .reveal-copy { visibility: hidden; } /* Title styling */ .brochure-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 4vw, 3rem); letter-spacing: 1.5px; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.5); margin-bottom: 12px; color: #fff; } /* Subtitle with gold accent */ .brochure-subtitle { font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: clamp(14px, 1.2vw, 16px); letter-spacing: 2px; color: #fff; padding: 8px 18px; background: #d4af37; /* Gold */ margin-bottom: 18px; text-transform: uppercase; } /* Description text */ .brochure-description { font-size: clamp(14px, 1.1vw, 17px); color: rgba(255,255,255,.85); line-height: 1.6; margin-bottom: 28px; width: 600px; } /* PDF Icon Button (floating near text) */ .pdf-icon-button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #d4af37; background: rgba(212, 175, 55, 0.15); display: grid; place-items: center; cursor: pointer; transition: all 0.35s ease; box-shadow: 0 0 18px rgba(212, 175, 55, 0.35); position: absolute; z-index: 3; right: 20%; bottom: 30%; } .pdf-icon-button:hover { background: rgba(212, 175, 55, 0.25); transform: scale(1.08); box-shadow: 0 0 28px rgba(212, 175, 55, 0.5); } .pdf-icon { width: 24px; height: 24px; fill: #d4af37; } /* ========================================================= PDF VIEWER POPUP � with 3D page flip ========================================================= */ .pdf-popup { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.98); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; } .pdf-popup.is-open { opacity: 1; visibility: visible; } /* Close + nav buttons */ .pdf-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; font-size: 24px; cursor: pointer; display: grid; place-items: center; transition: all 0.3s ease; z-index: 20; } .pdf-close:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); } .pdf-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; font-size: 24px; cursor: pointer; display: grid; place-items: center; transition: all 0.3s ease; z-index: 20; } .pdf-prev { left: 30px; } .pdf-next { right: 30px; } .pdf-nav:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) scale(1.1); } .pdf-nav:disabled { opacity: 0.3; cursor: not-allowed; } /* ===== PDF Viewer & Book Stage ===== */ .pdf-viewer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 60px 100px; /* space for nav buttons + close */ perspective: 2800px; perspective-origin: center center; } /* Book stage � dynamic dimensions set via JS */ .pdf-book { position: relative; display: flex; transform-style: preserve-3d; transition: width 0.6s cubic-bezier(0.5, 0, 0.5, 1), height 0.6s cubic-bezier(0.5, 0, 0.5, 1); /* width + height set by JS based on PDF aspect ratio */ } /* ===== Cover modes (single-page display) ===== */ .pdf-book.is-cover-front .pdf-page-left { display: none; } .pdf-book.is-cover-front .pdf-page-right { flex: 1 1 100%; border-radius: 4px; } .pdf-book.is-cover-front .pdf-page-right::after { display: none; /* no spine shadow on cover */ } .pdf-book.is-cover-back .pdf-page-right { display: none; } .pdf-book.is-cover-back .pdf-page-left { flex: 1 1 100%; border-radius: 4px; } .pdf-book.is-cover-back .pdf-page-left::after { display: none; } /* Mobile single-page mode (existing fallback) */ .pdf-book.is-single-page:not(.is-cover-front):not(.is-cover-back) .pdf-page-left { display: none; } .pdf-book.is-single-page:not(.is-cover-front):not(.is-cover-back) .pdf-page-right { flex: 1 1 100%; } /* Flip layer adjusts width based on mode */ .pdf-book.is-cover-front .pdf-flip-layer.flip-side-right { width: 100%; right: 0; } .pdf-book.is-cover-back .pdf-flip-layer.flip-side-left { width: 100%; left: 0; } /* ===== Static Pages (left + right) ===== */ .pdf-page-static { position: relative; flex: 1 1 50%; height: 100%; background: #fff; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.55); } .pdf-page-static canvas { display: block; width: 100%; height: 100%; object-fit: contain; } /* Book-like inner shadows near the spine */ .pdf-page-left { border-radius: 4px 0 0 4px; } .pdf-page-left::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; background: linear-gradient(to left, rgba(0,0,0,0.25), transparent); pointer-events: none; } .pdf-page-right { border-radius: 0 4px 4px 0; } .pdf-page-right::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 30px; background: linear-gradient(to right, rgba(0,0,0,0.25), transparent); pointer-events: none; } /* ===== Flip Layer (only visible during flip) ===== */ .pdf-flip-layer { position: absolute; top: 0; bottom: 0; width: 50%; perspective: 2800px; display: none; z-index: 10; } .pdf-flip-layer.is-flipping { display: block; } /* Position flip layer over the correct half */ .pdf-flip-layer.flip-side-right { right: 0; } .pdf-flip-layer.flip-side-left { left: 0; } .pdf-flip-page { position: absolute; inset: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.45, 0.05, 0.35, 1); } /* Hinge depends on which side is flipping */ .pdf-flip-layer.flip-side-right .pdf-flip-page { transform-origin: left center; } .pdf-flip-layer.flip-side-left .pdf-flip-page { transform-origin: right center; transform: rotateY(180deg); /* start flipped */ } /* Animate */ .pdf-flip-layer.flip-side-right .pdf-flip-page.is-animating { transform: rotateY(-180deg); } .pdf-flip-layer.flip-side-left .pdf-flip-page.is-animating { transform: rotateY(0deg); } /* Page faces */ .pdf-flip-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.55); } .pdf-flip-face canvas { width: 100%; height: 100%; display: block; object-fit: contain; } .pdf-flip-front { transform: rotateY(0deg); } .pdf-flip-back { transform: rotateY(180deg); } /* Realistic shadow gradient on flipping page */ .pdf-flip-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.15) 100%); pointer-events: none; opacity: 0; transition: opacity 0.5s; } .pdf-flip-page.is-animating .pdf-flip-face::after { opacity: 1; } /* Loading + indicator */ .pdf-loading { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.7); font-size: 18px; pointer-events: none; z-index: 50; } .pdf-page-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-family: 'Orbitron', sans-serif; font-size: 13px; letter-spacing: 2px; z-index: 20; } /* Single-page mode (mobile or when only 1 page) */ .pdf-book.is-single-page .pdf-page-left { display: none; } .pdf-book.is-single-page .pdf-page-right { flex: 1 1 100%; } .pdf-book.is-single-page .pdf-flip-layer { width: 100%; } /* ========================================================= SECTION 5 � ARCHITECTURAL VISUALIZATION (Bottom-Right) ========================================================= */ .section-architectural { min-height: var(--scroll-length, 120vh); position: relative; } .section-architectural .section-content, .arch-content { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; /* right-aligned column */ padding: 0 60px 100px; height: 100vh; width: 100%; top: 10%; text-align: left; pointer-events: auto; opacity: 0.3; } .arch-content .reveal-copy { visibility: hidden; } .arch-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 4vw, 3rem); line-height: 1; letter-spacing: 2px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); margin-bottom: 16px; max-width: 900px; } .arch-subtitle { display: inline-block; font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: clamp(12px, 1vw, 15px); letter-spacing: 2px; color: #fff; background: #1c8fe6; padding: 8px 18px; margin-bottom: 22px; text-transform: uppercase; } .arch-description { font-size: clamp(14px, 1.1vw, 17px); color: rgba(255,255,255,.9); line-height: 1.65; text-shadow: 0 2px 10px rgba(0,0,0,.6); max-width: 600px; } /* ========================================================= SECTION 6 � SAMPLE FLAT EXPERIENCE (Bottom-Left) ========================================================= */ .section-sampleflat { min-height: var(--scroll-length, 120vh); position: relative; } .section-sampleflat .section-content, .sampleflat-content { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; /* left-aligned column */ padding: 0 60px 100px; height: 100vh; width: 100%; top: 0; text-align: left; pointer-events: auto; opacity: 0.3; } .sampleflat-content .reveal-copy { visibility: hidden; } .sampleflat-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 4vw, 3rem); line-height: 1; letter-spacing: 1.5px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); margin-bottom: 18px; } .sampleflat-subtitle { display: inline-block; font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: clamp(12px, 1vw, 15px); letter-spacing: 2px; color: #fff; background: #1c8fe6; padding: 8px 18px; margin-bottom: 22px; text-transform: uppercase; } .sampleflat-description { font-size: clamp(14px, 1.1vw, 17px); color: rgba(255,255,255,.92); line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,.5); max-width: 600px; } /* ========================================================= SECTION 6.5 — AI-POWERED STATEMENT Full-viewport centered h1 reveal, no left-rail text panel. ========================================================= */ .section-aipowered { min-height: var(--scroll-length, 200vh); position: relative; } .section-aipowered .section-content, .aipowered-content { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; height: 100vh; width: 100%; pointer-events: none; padding: 0 24px; text-align: center; } .aipowered-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(56px, 12vw, 100px); line-height: 1; white-space: nowrap; letter-spacing: -0.02em; text-align: center; text-transform: uppercase; margin: 0; } .aipowered-prefix { color: #4a9eff; text-shadow: 0 0 60px rgba(74, 158, 255, 0.5), 0 4px 40px rgba(0, 0, 0, 0.7); } .aipowered-suffix { color: #fff; text-shadow: 0 0 80px rgba(0, 229, 255, 0.25), 0 4px 40px rgba(0, 0, 0, 0.7); } .aipowered-tagline { font-family: 'Rajdhani', sans-serif; font-size: clamp(14px, 1.8vw, 24px); font-weight: 400; color: rgba(255, 255, 255, 0.72); line-height: 1.4; letter-spacing: 0.01em; margin: 0; } .aipowered-cta { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.55); color: #fff; font-family: var(--tech-font); font-size: 15px; font-weight: 500; letter-spacing: 0.04em; padding: 13px 32px; border-radius: 999px; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .aipowered-cta:hover { background: rgba(74, 158, 255, 0.15); border-color: #4a9eff; color: #4a9eff; box-shadow: 0 0 24px rgba(74, 158, 255, 0.25); } .ai-char { display: inline-block; will-change: transform, opacity, filter; } /* ========================================================= SECTION 7� DIGITAL EDGE (Bottom-Left) ========================================================= */ .section-digital { min-height: var(--scroll-length, 120vh); position: relative; } .section-digital .section-content, .digital-content { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 60px 100px; height: 100vh; width: 100%; top: 0; text-align: left; pointer-events: auto; opacity: 0.3; } .digital-content .reveal-copy { visibility: hidden; } .digital-title { font-family: var(--section-head-font); font-weight: 700; font-size: clamp(28px, 2.5vw, 40px); line-height: 1; letter-spacing: 1.5px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); margin-bottom: 0px; } .digital-subtitle { display: inline-block; font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: clamp(12px, 1vw, 15px); letter-spacing: 2px; color: #04060d; background: #22e6ff; padding: 8px 18px; margin-bottom: 22px; text-transform: uppercase; } .digital-description { font-size: clamp(14px, 1.1vw, 17px); color: rgba(255,255,255,.92); line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,.6); max-width: 720px; } /* ===== REEL PLAYER (Right side) ===== */ .reel-player { position: absolute; top: 50%; right: 30%; transform: translateY(-50%); z-index: 5; pointer-events: auto; } .reel-player.is-fixed { position: fixed; top: 50%; right: 30%; transform: translateY(-50%); } /* Phone frame */ .reel-phone { width: 320px; height: 640px; background: linear-gradient(145deg, #1a1a2e, #0f0f1e); border-radius: 42px; padding: 12px; box-shadow: 0 0 0 2px rgba(34,230,255,0.15), 0 0 40px rgba(34,230,255,0.25), 0 30px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.08); position: relative; } /* Phone notch */ .reel-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; background: #000; border-radius: 0 0 18px 18px; z-index: 10; } /* Reel screen container */ .reel-screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #000; } .reel-video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Instagram-style overlay */ .reel-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: 2; } .reel-overlay > * { pointer-events: auto; } /* Top bar */ .reel-topbar { display: flex; align-items: center; justify-content: space-between; padding: 50px 14px 12px; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%); } .reel-user { display: flex; align-items: center; gap: 10px; } .reel-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); position: relative; } .reel-avatar::after { content: ''; position: absolute; inset: 2px; background: #1a1a2e; border-radius: 50%; } .reel-userinfo { display: flex; flex-direction: column; line-height: 1.2; } .reel-username { color: #fff; font-size: 13px; font-weight: 600; } .reel-time { color: rgba(255,255,255,0.7); font-size: 11px; } .reel-follow { background: transparent; border: 1px solid #fff; color: #fff; padding: 4px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .reel-follow:hover { background: #fff; color: #000; } /* Right-side action buttons */ .reel-actions { position: absolute; right: 10px; bottom: 90px; display: flex; flex-direction: column; gap: 20px; align-items: center; } .reel-action { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; transition: transform 0.2s; } .reel-action:hover { transform: scale(1.1); } .reel-icon { width: 28px; height: 28px; fill: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); transition: all 0.3s; } .reel-heart { transition: fill 0.3s, transform 0.3s; } .reel-action.is-liked .reel-heart { fill: #ff3040; animation: heartPop 0.5s ease; } @keyframes heartPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } } .reel-count { color: #fff; font-size: 11px; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.6); } /* Bottom caption */ .reel-caption { margin-top: auto; padding: 16px 56px 18px 14px; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%); } .reel-caption-text { color: #fff; font-size: 12px; line-height: 1.4; margin: 0 0 8px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .reel-music { color: rgba(255,255,255,0.9); font-size: 11px; margin: 0; display: flex; align-items: center; gap: 6px; } /* Floating hearts on double-tap */ .reel-floating-hearts { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; } .floating-heart { position: absolute; font-size: 60px; color: #ff3040; filter: drop-shadow(0 0 20px rgba(255,48,64,0.6)); pointer-events: none; user-select: none; animation: floatHeart 1s ease-out forwards; } @keyframes floatHeart { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(0.8); } } /* Comment popup (toast-style) */ .reel-comment-popup { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(0,0,0,0.85); color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 12px; opacity: 0; z-index: 5; white-space: nowrap; pointer-events: none; backdrop-filter: blur(8px); } .reel-comment-popup.is-show { animation: commentPop 2s ease-out forwards; } @keyframes commentPop { 0% { opacity: 0; transform: translateX(-50%) translateY(20px); } 15% { opacity: 1; transform: translateX(-50%) translateY(0); } 85% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); } } /* ========================================================= SECTION 8 � INSTANT INTELLIGENT AGENT (Top-Center) ========================================================= */ .section-agent { min-height: var(--scroll-length, 160vh); position: relative; } .section-agent .section-content, .agent-content { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; /* bottom */ align-items: flex-start; /* right */ padding: 0 60px 100px; height: 100vh; width: 100%; text-align: left; pointer-events: auto; } .agent-content.is-fixed { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; } .agent-content .reveal-copy { visibility: hidden; } .agent-title { font-family: var(--section-head-font); font-weight: 700; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.05; letter-spacing: 1.5px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); margin-bottom: 14px; } .agent-subtitle { display: inline-block; font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: clamp(12px, 1vw, 15px); letter-spacing: 2px; color: #04060d; background: #8b5cf6; /* purple/violet ribbon � chat AI vibe */ padding: 8px 18px; margin-bottom: 22px; text-transform: uppercase; } .agent-description { font-size: clamp(14px, 1.1vw, 17px); color: rgba(255,255,255,.92); line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,.5); max-width: 760px; } /* ========================================================= SECTION 9 � DATA-DRIVEN SALES / LENS IQ (Top-Left with Logo) ========================================================= */ .section-lensiq { min-height: var(--scroll-length, 160vh); position: relative; } .section-lensiq .section-content, .lensiq-content { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 60px 100px; height: 100vh; width: 100%; text-align: left; pointer-events: auto; } .lensiq-content.is-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } .lensiq-content .reveal-copy { visibility: hidden; } .lensiq-header { display: flex; align-items: flex-start; gap: 24px; max-width: 1100px; } .lensiq-logo { position: relative; flex-shrink: 0; width: 140px; height: 140px; border-radius: 28px; background: linear-gradient(145deg, #1a1f3a, #0a0f24); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 14px; } .lensiq-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .lensiq-logo-fallback { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 56px; background: linear-gradient(135deg, #ff6b9d, #ffd93d, #6bcf7f, #4dabf7); -webkit-background-clip: text; background-clip: text; color: transparent; } .lensiq-logo-text { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 13px; color: #fff; text-align: center; line-height: 1.2; } .lensiq-logo-text small { font-size: 9px; font-weight: 400; color: rgba(255,255,255,.7); } .lensiq-logo img + .lensiq-logo-fallback, .lensiq-logo img + .lensiq-logo-fallback + .lensiq-logo-text { display: none; /* hide fallback when real logo loads */ } .lensiq-titles { flex: 1; } .lensiq-title { font-family: var(--section-head-font); font-weight: 700; font-size: clamp(28px, 2.5vw, 40px); line-height: 1; letter-spacing: 1.5px; color: #fff; text-shadow: 5px 8px 14px rgba(0,0,0,.6); margin-bottom: 14px; } .lensiq-paren { font-weight: 400; opacity: 0.95; } .lensiq-subtitle { display: inline-block; font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: clamp(12px, 1vw, 14px); letter-spacing: 2px; color: #04060d; background: #22e6ff; /* cyan ribbon */ padding: 7px 16px; margin-bottom: 20px; text-transform: uppercase; } .lensiq-description { font-size: clamp(14px, 1.1vw, 17px); color: rgba(255,255,255,.92); line-height: 1.6; text-shadow: 6px 12px 10px rgba(0,0,0,.5); max-width: 720px; } /* ========================================================= SECTION 10 � INTELLIGENT PLANNING / LENSSPACE AI (Bottom-Center) ========================================================= */ .section-lensspace { min-height: var(--scroll-length, 160vh); position: relative; } .section-lensspace .section-content, .lensspace-content { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; /* bottom */ align-items: flex-start; /* left */ padding: 0 60px 100px; height: 100vh; width: 100%; text-align: left; pointer-events: auto; } .lensspace-content.is-fixed { position: fixed; bottom: 0; left: 0; width: 100%; height: 100vh; } .lensspace-content .reveal-copy { visibility: hidden; } .lensspace-title { font-family: var(--section-head-font); font-weight: 700; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.05; letter-spacing: 1.5px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); margin-bottom: 14px; } .lensspace-paren { font-weight: 400; opacity: 0.95; } .lensspace-subtitle { display: inline-block; font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: clamp(12px, 1vw, 15px); letter-spacing: 2px; color: #04060d; background: #22e6ff; /* cyan ribbon */ padding: 8px 18px; margin-bottom: 22px; text-transform: uppercase; } .lensspace-description { font-size: clamp(14px, 1.1vw, 17px); color: rgba(255,255,255,.92); line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,.5); max-width: 900px; } /* ============================================================ CLIENTS SECTION ============================================================ */ .section-clients { position: relative; padding: 140px 0 120px; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 229, 255, 0.08), transparent 60%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255, 45, 138, 0.06), transparent 60%), linear-gradient(180deg, #05050d 0%, #07091a 50%, #05050d 100%); overflow: hidden; isolation: isolate; } /* Subtle grid background */ .section-clients::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,229,255,.18) 1px, transparent 1px), radial-gradient(circle, rgba(255,45,138,.18) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); z-index: -1; } .clients-head { text-align: center; margin-bottom: 70px; } .clients-head .eyebrow { margin-bottom: 18px; } .clients-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(32px, 5vw, 56px); letter-spacing: 2px; margin: 0 0 14px; background: linear-gradient(90deg, #ffffff 0%, var(--neon-cyan) 50%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .clients-sub { color: var(--text-mute); font-size: 18px; letter-spacing: 1px; max-width: 640px; margin: 0 auto; } /* Marquee rows */ .marquee { position: relative; overflow: hidden; padding: 18px 0; } .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 180px; z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-deep), transparent); } .marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg-deep), transparent); } .marquee-track { display: flex; gap: 28px; width: max-content; will-change: transform; } .marquee--ltr .marquee-track { animation: marquee-ltr 40s linear infinite; } .marquee--rtl .marquee-track { animation: marquee-rtl 40s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* Logo card */ .client-card { flex: 0 0 auto; width: 220px; height: 110px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px 24px; backdrop-filter: blur(8px); transition: all .35s ease; position: relative; overflow: hidden; } .client-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 229, 255, 0.0), rgba(0, 229, 255, 0.0)); transition: background .35s ease; } .client-card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.15), inset 0 0 0 1px rgba(0, 229, 255, 0.25); } .client-card:hover::before { background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(255, 45, 138, 0.05)); } .client-card svg { display: block; max-width: 100%; max-height: 100%; } /* Logos enter animation when in view */ .reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Stats strip */ .clients-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 80px; padding-top: 50px; border-top: 1px solid rgba(255,255,255,0.06); } .stat-item { text-align: center; } .stat-num { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(28px, 4vw, 44px); color: var(--neon-cyan); text-shadow: 0 0 30px rgba(0, 229, 255, 0.4); line-height: 1; } .stat-label { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-mute); margin-top: 10px; } @media (max-width: 760px) { .clients-stats { grid-template-columns: repeat(2, 1fr); gap: 30px; } .section-clients { padding: 90px 0 80px; } .client-card { width: 170px; height: 90px; padding: 12px 16px; } .marquee-track { gap: 18px; } } /* ============================================================ CLIENTS MARQUEE SECTION ============================================================ */ .section-clients { position: relative; padding: 70px 0 60px; overflow: hidden; background: linear-gradient(135deg, #01050a 0%, #010202 40%, #000000 70%, #02080f 100%); border-top: 1px solid rgba(0, 180, 200, 0.12); border-bottom: 1px solid rgba(0, 180, 200, 0.12); } .clients-inner { display: flex; flex-direction: column; gap: 36px; } .clients-label { text-align: center; } .clients-heading { font-family: var(--tech-font); font-size: clamp(22px, 3vw, 36px); letter-spacing: 0.18em; color: #fff; margin: 8px 0 0; } .marquee-track-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-track { display: flex; align-items: center; gap: 48px; width: max-content; animation: marquee-scroll 55s linear infinite; } .marquee-track:hover { animation-play-state: paused; } .marquee-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 100px; } .marquee-item img { height: 80px; width: auto; /* max-width: 250px;*/ object-fit: contain; filter: brightness(0) invert(1); opacity: 0.55; transition: opacity 300ms ease, filter 300ms ease; } .marquee-item img:hover { opacity: 1; filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(160deg); } /* ============================================================ TESTIMONIALS SECTION ============================================================ */ /* Clients block embedded inside testimonials section */ .clients-inner--merged { position: relative; z-index: 6; padding: 60px 0 0; background: #050608; border-top: 1px solid rgba(0, 180, 200, 0.12); border-bottom: 1px solid rgba(0, 180, 200, 0.08); margin-bottom: 0; } .section-testimonials--tech .clients-inner--merged { background: #050a10; } .section-testimonials { position: relative; z-index: 6; background: linear-gradient(180deg, #050608 0%, #080c14 50%, #050608 100%); overflow: hidden; } .section-testimonials::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 229, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.025) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .testimonials-head { text-align: center; margin-bottom: 20px; } .testimonials-title { font-family: var(--section-head-font); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; letter-spacing: 0.06em; color: #fff; margin: 10px 0 0; text-transform: uppercase; } /* Slider layout — replaces the old grid */ .tslider { display: flex; flex-direction: column; align-items: center; gap: 28px; } .tslider-viewport { width: 100%; overflow: hidden; /* fade only the outermost edges to hint more content */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%); } .tslider-track { display: flex; transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .tslider-slide { flex: 0 0 60%; width: 60%; padding: 0 12px; opacity: 0.45; transform: scale(0.97); transition: opacity 480ms ease, transform 480ms ease; } .tslider-slide.is-slide-active { opacity: 1; transform: scale(1); } .tslider-controls { display: flex; align-items: center; gap: 20px; } .tslider-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(12, 148, 148, 0.4); background: rgba(12, 148, 148, 0.08); color: #0c9494; cursor: pointer; transition: background 200ms ease, border-color 200ms ease; } .tslider-btn:hover { background: rgba(12, 148, 148, 0.2); border-color: #0c9494; } .tslider-btn svg { width: 20px; height: 20px; } .tslider-dots { display: flex; gap: 8px; align-items: center; } .tslider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); border: none; cursor: pointer; padding: 0; transition: background 250ms ease, transform 250ms ease; } .tslider-dot.is-active { background: #0c9494; transform: scale(1.3); } /* keep old .testimonials-grid for any other usage */ .testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .testimonial-card { position: relative; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 229, 255, 0.1); border-radius: 14px; padding: 36px 32px 30px; display: flex; flex-direction: column; gap: 20px; transition: border-color 0.25s, transform 0.25s; } .testimonial-card:hover { border-color: rgba(0, 229, 255, 0.3); transform: translateY(-3px); } .testimonial-stars { display: flex; gap: 4px; } .testimonial-stars svg { width: 16px; height: 16px; fill: var(--gold, #c9a84c); color: var(--gold, #c9a84c); } .testimonial-text { font-size: 0.97rem; line-height: 1.75; color: rgba(223, 231, 245, 0.8); margin: 0; flex: 1; font-style: italic; } .testimonial-text::before { content: "\201C"; font-size: 1.6rem; line-height: 0; vertical-align: -0.45em; color: var(--gold, #c9a84c); margin-right: 4px; font-style: normal; } .testimonial-text::after { content: "\201D"; font-size: 1.6rem; line-height: 0; vertical-align: -0.45em; color: var(--gold, #c9a84c); margin-left: 4px; font-style: normal; } .testimonial-author { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(0, 229, 255, 0.08); } .testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(201, 168, 76, 0.2)); border: 1px solid rgba(0, 229, 255, 0.2); display: flex; align-items: center; justify-content: center; font-family: var(--tech-font, "Rajdhani", sans-serif); font-size: 1rem; font-weight: 700; color: rgba(0, 229, 255, 0.8); flex-shrink: 0; } .testimonial-name { font-family: var(--tech-font, "Rajdhani", sans-serif); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; text-transform: uppercase; } .testimonial-role { font-size: 0.78rem; color: rgba(0, 229, 255, 0.6); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; } @media (max-width: 700px) { .section-testimonials { padding: 70px 0 60px; } .testimonials-grid { grid-template-columns: 1fr; } .testimonial-card { padding: 28px 22px 24px; } } /* ============================================================ CONTACT SECTION ============================================================ */ .section-contact { position: relative; padding: 100px 0 40px; background: url(../assets/footer-bg.png) no-repeat right top, radial-gradient(ellipse 70% 50% at 20% 0%, rgba(0, 229, 255, 0.10), transparent 60%), radial-gradient(ellipse 70% 60% at 90% 100%, rgba(255, 45, 138, 0.10), transparent 60%), linear-gradient(180deg, #05050d 0%, #0a0c20 100%); overflow: hidden; } .section-content.frame { min-height: 70vh; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 30px; align-items: stretch; } /* Each column gets its own card to keep heights consistent */ .contact-col { position: relative; padding: 36px 28px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; } .contact-col::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--neon-cyan), transparent 40%, transparent 60%, var(--neon-magenta)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; pointer-events: none; } .contact-col--address::before { background: linear-gradient(135deg, var(--neon-magenta), transparent 40%, transparent 60%, var(--neon-amber)); } .contact-col--form::before { background: linear-gradient(135deg, var(--neon-amber), transparent 40%, transparent 60%, var(--neon-cyan)); } .col-label { font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--neon-cyan); margin-bottom: 14px; } .col-label--alt { color: var(--neon-magenta); } .col-label--form { color: var(--neon-amber); } /* Contact section logo & social links */ .contact-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-family: var(--tech-font); font-size: clamp(1rem, 1.6vw, 1.65rem); font-weight: 700; letter-spacing: 0.02em; color: #fff; } .contact-logo { height: 52px; width: auto; object-fit: contain; flex-shrink: 0; } .contact-logo--ai { filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.3)); } .contact-social { display: flex; gap: 12px; margin-top: 28px; } .social-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s; } .social-link svg { width: 17px; height: 17px; flex-shrink: 0; } .social-link--insta:hover { background: rgba(225, 48, 108, 0.15); border-color: rgba(225, 48, 108, 0.5); color: #e1306c; transform: translateY(-2px); } .social-link--yt:hover { background: rgba(255, 0, 0, 0.12); border-color: rgba(255, 0, 0, 0.4); color: #ff4444; transform: translateY(-2px); } .contact-social--ai .social-link { border-color: rgba(0, 229, 255, 0.2); background: rgba(0, 229, 255, 0.05); } .contact-social--ai .social-link--insta:hover { background: rgba(225, 48, 108, 0.15); border-color: rgba(225, 48, 108, 0.5); color: #e1306c; } .contact-social--ai .social-link--yt:hover { background: rgba(255, 0, 0, 0.12); border-color: rgba(255, 60, 60, 0.5); color: #ff4444; } /* Column 1 — "Get in touch" heading */ .contact-col--intro .contact-head .contact-title { font-size: clamp(26px, 2.6vw, 42px); line-height: 1.05; margin-bottom: 16px; } .contact-col--intro .contact-head .contact-sub { margin-bottom: 22px; } /* Mini info list for intro column */ .mini-info { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 22px; border-top: 1px dashed rgba(255,255,255,0.12); } .mini-info a { color: #fff; text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; transition: color .25s; } .mini-info a:hover { color: var(--neon-cyan); } .mini-info a svg { width: 16px; height: 16px; color: var(--neon-cyan); flex: 0 0 auto; } /* Column 2 � Address details */ .contact-col--address .info-list { gap: 18px; } .contact-col--address .map-stub { margin-top: 20px; height: 140px; } /* Column 3 � Form */ .contact-col--form { padding: 32px 28px; } .form-head-inline { font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: #fff; margin-bottom: 20px; } /* Inline single-row fields for the slimmer form column */ .contact-col--form .form-row { grid-template-columns: 1fr 1fr; } .contact-col--form .form-field { margin-bottom: 20px; } .contact-col--form .form-field input, .contact-col--form .form-field select, .contact-col--form .form-field textarea { padding: 20px 14px 10px; font-size: 14px; } .contact-col--form .form-field label { left: 14px; top: 14px; font-size: 13px; } .contact-col--form .form-field input:focus + label, .contact-col--form .form-field input:not(:placeholder-shown) + label, .contact-col--form .form-field textarea:focus + label, .contact-col--form .form-field textarea:not(:placeholder-shown) + label, .contact-col--form .form-field select:focus + label, .contact-col--form .form-field.filled label { top: 5px; font-size: 9px; } .contact-col--form .form-field textarea { min-height: 110px; padding-top: 22px; } .contact-col--form .form-submit { padding: 14px 24px; font-size: 12px; letter-spacing: 3px; } @media (max-width: 1100px) { .contact-grid { grid-template-columns: 1fr 1fr; } .contact-col--form { grid-column: 1 / -1; } } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; gap: 22px; } .contact-col--form { grid-column: auto; } } .contact-head .eyebrow { margin-bottom: 18px; } .contact-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(30px, 4.5vw, 50px); letter-spacing: 1.5px; margin: 0 0 14px; line-height: 1.1; } .contact-title .accent { background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; } .contact-sub { color: var(--text-mute); font-size: 17px; line-height: 1.6; max-width: 460px; } /* Info card (left) */ .info-card { position: relative; margin-top: 40px; padding: 32px 28px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); } .info-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--neon-cyan), transparent 40%, transparent 60%, var(--neon-magenta)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; } .info-list { display: flex; flex-direction: column; gap: 22px; } .info-item { display: flex; gap: 16px; align-items: flex-start; } .info-icon { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(255, 45, 138, 0.12)); border: 1px solid var(--line); color: var(--neon-cyan); } .info-icon svg { width: 20px; height: 20px; } .info-body .info-label { font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--neon-cyan); margin-bottom: 4px; } .info-body .info-value { font-size: 16px; color: #fff; line-height: 1.45; word-break: break-word; } .info-body a.info-value { color: #fff; text-decoration: none; transition: color .25s; } .info-body a.info-value:hover { color: var(--neon-cyan); } /* Map placeholder */ .map-stub { margin-top: 24px; position: relative; height: 170px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(ellipse at 60% 40%, rgba(0, 229, 255, 0.25), transparent 60%), linear-gradient(135deg, #0a0e22 0%, #11142a 100%); } .map-stub::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 229, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.12) 1px, transparent 1px); background-size: 30px 30px; animation: mapShift 20s linear infinite; opacity: .55; } @keyframes mapShift { from { background-position: 0 0, 0 0; } to { background-position: 60px 60px, 60px 60px; } } .map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); width: 28px; height: 28px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.2), 0 0 25px var(--neon-cyan); animation: pinPulse 1.8s ease-in-out infinite; } @keyframes pinPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.2), 0 0 25px var(--neon-cyan); } 50% { box-shadow: 0 0 0 14px rgba(0, 229, 255, 0.05), 0 0 40px var(--neon-cyan); } } .map-label { position: absolute; left: 14px; bottom: 12px; font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.6); } /* Socials */ .socials { display: flex; gap: 12px; margin-top: 26px; } .socials a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); color: #fff; background: rgba(255,255,255,0.02); transition: all .25s; } .socials a:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); transform: translateY(-2px); box-shadow: 0 0 18px rgba(0, 229, 255, 0.3); } .socials a svg { width: 18px; height: 18px; } /* Contact form (right) */ .form-card { position: relative; padding: 40px 36px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); } .form-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--neon-magenta), transparent 40%, transparent 60%, var(--neon-cyan)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; pointer-events: none; } .form-head { font-family: 'Orbitron', sans-serif; font-size: 14px; letter-spacing: 4px; text-transform: uppercase; color: #fff; margin-bottom: 26px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-field { position: relative; margin-bottom: 22px; } .form-field input, .form-field select, .form-field textarea { width: 100%; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 10px; padding: 22px 16px 12px; color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 15px; letter-spacing: 0.5px; transition: border-color .25s, box-shadow .25s, background .25s; outline: none; } .form-field textarea { min-height: 130px; resize: vertical; padding-top: 24px; } .form-field select { appearance: none; cursor: pointer; } .form-field label { position: absolute; left: 16px; top: 16px; color: var(--text-mute); font-size: 14px; letter-spacing: 1px; pointer-events: none; transition: all .25s ease; background: transparent; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12); background: rgba(0, 0, 0, 0.5); } .form-field input:focus + label, .form-field input:not(:placeholder-shown) + label, .form-field textarea:focus + label, .form-field textarea:not(:placeholder-shown) + label, .form-field select:focus + label, .form-field.filled label { top: 6px; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--neon-cyan); } .form-field .err-msg { position: absolute; left: 0; bottom: -18px; font-size: 12px; color: #ff5a7a; letter-spacing: 0.5px; opacity: 0; transform: translateY(-4px); transition: all .25s; } .form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #ff5a7a; box-shadow: 0 0 0 3px rgba(255, 90, 122, 0.12); } .form-field.has-error .err-msg { opacity: 1; transform: translateY(0); } .form-submit { position: relative; width: 100%; margin-top: 14px; padding: 16px 28px; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: #05050d; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta)); border: none; border-radius: 10px; cursor: pointer; transition: transform .2s, box-shadow .25s, filter .25s; box-shadow: 0 10px 30px rgba(0, 229, 255, 0.25); overflow: hidden; } .form-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 229, 255, 0.4); filter: brightness(1.08); } .form-submit:active { transform: translateY(0); } .form-submit[disabled] { opacity: .6; cursor: progress; } .form-success { display: none; text-align: center; padding: 40px 20px; } .form-success.is-active { display: block; animation: fadeUp .6s ease; } .form-success .check { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: rgba(0, 229, 255, 0.15); border: 2px solid var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 30px rgba(0, 229, 255, 0.4); } .form-success h4 { font-family: 'Orbitron', sans-serif; font-size: 20px; letter-spacing: 2px; margin: 0 0 8px; } .form-success p { color: var(--text-mute); margin: 0; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 50px; } .section-contact { padding: 100px 0 80px; } } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; gap: 0; } .form-card, .info-card { padding: 28px 22px; } } /* ============================================================ FOOTER ============================================================ */ .site-footer { position: relative; z-index: 1; padding: 28px; border-top: 1px solid rgba(255,255,255,0.15); background: #03030a; } /* ── Vertical section indicators — pill-card style ─────────── */ .sec-nav { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 19; display: flex; flex-direction: column; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .sec-nav.is-visible { opacity: 1; pointer-events: auto; } .sec-nav[hidden] { display: none; } .sec-nav-dot { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px 18px; background: rgba(5, 6, 8, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0.5px solid rgba(255, 255, 255, 0.1); border-right: 3px solid rgba(255, 255, 255, 0.06); border-radius: 10px; min-width: 175px; cursor: pointer; text-align: left; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .sec-nav-dot:hover { background: rgba(5, 6, 8, 0.8); border-color: rgba(255, 255, 255, 0.18); } .sec-nav-icon { flex-shrink: 0; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.45); transition: color 0.3s ease; } .sec-nav-icon svg { width: 100%; height: 100%; } .sec-nav-tip { flex: 1; font-family: var(--desc-font); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, 0.5); pointer-events: none; transition: color 0.3s ease; border-right: 2px solid rgba(12,148,148); line-height: 20px; padding-right: 16px; } /* Active state */ .sec-nav-dot.is-active .sec-nav-tip { color: #fff; } .sec-nav-dot.is-active .sec-nav-icon { color: #fff; } /* Home tab active */ .sec-nav--home .sec-nav-dot.is-active { background: rgba(5, 6, 8, 0.85); /* border-right: 2px solid #0c9494;*/ box-shadow: 0 0 0 1.5px rgba(12, 148, 148, 0.9), 0 0 8px rgba(12, 148, 148, 0.7), 0 0 20px rgba(12, 148, 148, 0.45), 0 0 40px rgba(12, 148, 148, 0.2), inset 0 0 14px rgba(12, 148, 148, 0.08); } .sec-nav--home .sec-nav-dot.is-active .sec-nav-icon { color: #0c9494; } /* AI tab active */ .sec-nav--ai .sec-nav-dot.is-active { background: rgba(5, 6, 8, 0.85); box-shadow: 0 0 0 1.5px rgba(0, 229, 255, 0.9), 0 0 8px rgba(0, 229, 255, 0.7), 0 0 20px rgba(0, 229, 255, 0.45), 0 0 40px rgba(0, 229, 255, 0.2), inset 0 0 14px rgba(0, 229, 255, 0.08); } .sec-nav--ai .sec-nav-dot.is-active .sec-nav-icon { color: #00e5ff; } @media (max-width: 768px) { .sec-nav { display: none; } } .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-copy { font-size: 12px; letter-spacing: 1.5px; color: rgba(255,255,255,0.65); } .footer-copy span { color: var(--neon-cyan); } /* ============ RESPONSIVE ============ */ @media (max-width: 1100px) { .reel-phone { width: 260px; height: 520px; } .digital-content { width: 55%; } } /* ========================================================= Pinned text containers � locks to viewport during section ========================================================= */ .brochure-content.is-fixed, .arch-content.is-fixed, .sampleflat-content.is-fixed, .digital-content.is-fixed, .gallery-content.is-fixed, .lensiq-content.is-fixed, .lensspace-content.is-fixed, .agent-content.is-fixed, .lens-content.is-fixed { position: fixed; top: 0; left: 0; right: 0; width: 100%; pointer-events: none; opacity: 1; } /*.gallery-content.is-fixed { position: fixed; width: 100%; opacity: 1; }*/ /* Make interactive children clickable */ .brochure-content.is-fixed *, .arch-content.is-fixed *, .sampleflat-content.is-fixed *, .digital-content.is-fixed *, .gallery-content.is-fixed *, .lensiq-content.is-fixed *, .lensspace-content.is-fixed *, .agent-content.is-fixed *, .lens-content.is-fixed * { pointer-events: auto; } .reveal-copy { will-change: opacity, filter, transform; /* opacity: 1 !important; transform: none !important; filter: none !important;*/ } /* Readability overlay — sections 4–10 (not 6.5) ::before is hidden by default; fades in only when the section is actively pinned (.is-fixed), so nothing is visible during scroll transitions */ .brochure-content::before, .arch-content::before, .sampleflat-content::before, .digital-content::before, .agent-content::before, .lensspace-content::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.20) 30%, transparent 52%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: -1; } .brochure-content.is-fixed::before, .arch-content.is-fixed::before, .sampleflat-content.is-fixed::before, .digital-content.is-fixed::before, .agent-content.is-fixed::before, .lensiq-content.is-fixed::before, .lensspace-content.is-fixed::before { opacity: 1; } /* Section 9 (lensiq) — ::before is taken by the heat-dot animation; use ::after */ .lensiq-content::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.20) 30%, transparent 52%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: -1; } .lensiq-content.is-fixed::after { opacity: 1; } @keyframes scrollPulse { 0% { transform: translateY(-120%); } 100% { transform: translateY(260%); } } @keyframes drift { from { transform: scale(1.03) translate3d(-0.8%, -0.5%, 0); } to { transform: scale(1.08) translate3d(0.8%, 0.5%, 0); } } @keyframes caretFloat { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(5px) rotate(45deg); } } /* Responsive adjustments */ @media (max-width: 900px) { :root { --nav-height: 72px; } .section-content { width: min(100% - 32px, 720px); } .nav.is-condensed .menu-toggle { display: flex; } .nav:not(.is-condensed) .nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 18px; font-size: 0.68rem; } .nav.is-condensed .nav-links { position: static; display: flex; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; gap: 4px 14px; margin-right: 12px; padding: 0; border: 0; background: transparent; backdrop-filter: none; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateX(10px); visibility: hidden; } .nav.is-condensed.menu-open .nav-links { max-width: calc(100vw - 160px); opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; } .hero-title, .closing-section h2 { font-size: clamp(3rem, 13vw, 6.2rem); } .hero-title { font-size: clamp(2.85rem, 12.35vw, 5.89rem); } .section-actions { top: auto; right: 16px; bottom: 28px; left: 16px; justify-content: center; } .lens-split-title { flex-direction: column; gap: 10px; } .lens-rotation-stage { margin: 0; } .section-gallery .section-content { padding: 0 24px 80px; } .brochure-content { left: 24px; bottom: 40px; } .pdf-nav { width: 40px; height: 40px; font-size: 18px; } /* Force single-page on mobile */ .pdf-book { flex-direction: column; } .pdf-nav.pdf-prev { left: 10px; } .pdf-nav.pdf-next { right: 10px; } .pdf-viewer { height: 85vh; } .arch-content { right: 24px; left: 24px; bottom: 40px; text-align: left; } .sampleflat-content, .digital-content { left: 24px; right: 24px; bottom: 40px; } .section-digital { min-height: 200vh; } .digital-content { width: 100%; height: 50vh; top: 0; padding: 60px 24px 20px; justify-content: flex-start; } .reel-player { position: absolute; top: 55%; right: 50%; transform: translate(50%, 0); } .reel-player.is-fixed { position: fixed; top: 55%; right: 50%; transform: translate(50%, 0); } .reel-phone { width: 240px; height: 480px; } .section-agent .section-content, .agent-content { padding: 80px 24px 0; } .section-lensiq .section-content, .lensiq-content { padding: 40px 24px 0; } .lensiq-header { flex-direction: column; gap: 14px; } .lensiq-logo { width: 100px; height: 100px; } .section-lensspace .section-content, .lensspace-content { padding: 0 24px 50px; } .contact-grid { grid-template-columns: 1fr; gap: 2.4rem; } .form-row { grid-template-columns: 1fr; } .client-logo { width: 160px; height: 90px; } } @media (max-width: 560px) { .nav { padding: 0 16px; } /* Always show hamburger on small screens — never show inline links */ .menu-toggle { display: flex; } .nav-links { position: absolute; top: 100%; right: 16px; left: 16px; justify-content: center; flex-wrap: wrap; padding: 18px; border: 1px solid rgba(12, 148, 148, 0.28); background: rgba(4, 7, 9, 0.92); backdrop-filter: blur(18px); max-width: none; margin-right: 0; opacity: 0; pointer-events: none; transform: translateY(-10px); visibility: hidden; transition: opacity 220ms ease, transform 220ms ease, visibility 220ms; } .nav.menu-open .nav-links { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; } .brand { font-size: 0.72rem; } .brand-mark { width: 30px; height: 30px; } .hero-content { justify-content: flex-end; padding-bottom: 118px; } .lens-content { align-content: center; padding-bottom: 104px; } .day-night-control { top: calc(var(--nav-height) + 12px); gap: 8px; } .time-button { min-width: 64px; height: 34px; font-size: 0.62rem; } .time-track { height: 34px; } .hero-title, .lens-split-title h2 { line-height: 0.96; } .hero-copy, .lens-description { line-height: 1.65; } .lens-split-title { gap: 18px; } .lens-split-title h2 { font-size: clamp(2.4rem, 11vw, 3.6rem); } .hero-title { font-size: clamp(1.7rem, 9vw, 2.8rem); } .button { min-height: 46px; padding: 0 16px; font-size: 0.68rem; } .section-actions { flex-wrap: wrap; } .section-actions .button { flex: 1 1 145px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } /* ╔══════════════════════════════════════════════════════════╗ ║ V4 ADDITIONS — new animation layer styles + layout fixes ║ ╚══════════════════════════════════════════════════════════╝ */ /* ---- Section 4: gradient sweep across the brochure title ---- */ .brochure-content .brochure-title { background: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #00e5ff 48%, #ff2d8a 54%, #ffffff 64%, #ffffff 100%); background-size: 280% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .brochure-content.is-fixed .brochure-title { animation: v4-title-sweep 1.6s cubic-bezier(0.6, 0, 0.2, 1) 0.25s both; } @keyframes v4-title-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } } /* Section 3, 5, 6 — same sweep animation as section 4 title */ .gallery-content .gallery-title, .arch-content .arch-title, .sampleflat-content .sampleflat-title { background: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #00e5ff 48%, #ff2d8a 54%, #ffffff 64%, #ffffff 100%); background-size: 280% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .gallery-content.is-fixed .gallery-title, .arch-content.is-fixed .arch-title, .sampleflat-content.is-fixed .sampleflat-title { animation: v4-title-sweep 1.6s cubic-bezier(0.6, 0, 0.2, 1) 0.25s both; } /* ---- Section 5: blueprint trace overlay ---- */ .arch-content { position: relative; } .blueprint-overlay { position: absolute; inset: -34px -40px; width: calc(100% + 80px); height: calc(100% + 68px); pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.5s ease; } .arch-content.is-fixed .blueprint-overlay { opacity: 0.55; } .bp-line { fill: none; stroke: rgba(0, 229, 255, 0.5); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1600; stroke-dashoffset: 1600; } .arch-content.is-fixed .bp-line { animation: v4-bp-draw 1.8s ease-out forwards; } .arch-content.is-fixed .bp-2 { animation-delay: 0.25s; } .arch-content.is-fixed .bp-3 { animation-delay: 0.45s; } .arch-content.is-fixed .bp-4 { animation-delay: 0.65s; } .arch-content.is-fixed .bp-5 { animation-delay: 0.85s; } @keyframes v4-bp-draw { to { stroke-dashoffset: 0; } } /* ---- Section 7: 3D space for the phone tilt ---- */ .reel-player { perspective: 1100px; } /* ---- Section 9: pulsing heat-dots behind the LensIQ header ---- */ .lensiq-content { position: relative; } .lensiq-content::before { content: ""; position: absolute; inset: -30px -40px; /* background-image: radial-gradient(rgba(0, 229, 255, 0.35) 1.5px, transparent 1.6px); background-size: 26px 26px; opacity: 0;*/ pointer-events: none; z-index: -1; /* -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 25%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 40%, #000 25%, transparent 70%);*/ } /*.lensiq-content.is-fixed::before { animation: v4-heat-pulse 3.2s ease-in-out 0.4s infinite; }*/ @keyframes v4-heat-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } } /* ---- Fix: "360°" clipping at mid viewport widths ---- */ .lens-split-title h2 { font-size: clamp(3rem, 10vw, 8.2rem); } /* ---- Fix: mobile hero copy below the fold ---- */ @media (max-width: 700px) { .hero-content { top: 0; justify-content: center; padding-bottom: 14vh; } } @media (prefers-reduced-motion: reduce) { .brochure-content.is-fixed .brochure-title, .arch-content.is-fixed .bp-line, .lensiq-content.is-fixed::before { animation: none; } .bp-line { stroke-dashoffset: 0; } } /* ╔══════════════════════════════════════════════════════════╗ ║ SERVICES OVERLAY — triggered by "Learn More" section 3 ║ ╚══════════════════════════════════════════════════════════╝ */ .sov { position: fixed; inset: 0; z-index: 500; background: #050608; overflow-y: auto; overscroll-behavior: contain; transform: translateY(100%); transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; -webkit-overflow-scrolling: touch; } .sov.is-open { transform: translateY(0); pointer-events: auto; } .sov-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 80px 40px 100px; } /* ── Close button ── */ .sov-close { position: sticky; top: 24px; float: right; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; z-index: 10; margin-bottom: -44px; } .sov-close:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); transform: rotate(90deg); } .sov-close svg { width: 18px; height: 18px; } /* ── Header ── */ .sov-header { padding-top: 20px; margin-bottom: 60px; max-width: 680px; } .sov-eyebrow { display: block; margin-bottom: 14px; color: var(--gold, #c9a84c); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; } .sov-header h2 { margin: 0 0 18px; font-family: var(--tech-font, 'Rajdhani', sans-serif); font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 900; line-height: 0.96; letter-spacing: -0.01em; color: #fff; } .sov-tagline { margin: 0; color: var(--muted, rgba(223, 231, 245, 0.62)); font-size: clamp(0.95rem, 1.4vw, 1.12rem); line-height: 1.7; } /* ── Stats bar ── */ .sov-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; overflow: hidden; margin-bottom: 80px; } .sov-stat { padding: 28px 24px; background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 6px; } .sov-stat strong { display: block; font-family: var(--tech-font, 'Rajdhani', sans-serif); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 900; color: var(--gold, #c9a84c); line-height: 1; letter-spacing: -0.01em; } .sov-stat span { font-size: 0.78rem; color: var(--muted, rgba(223, 231, 245, 0.55)); line-height: 1.4; letter-spacing: 0.02em; } /* ── Section structure ── */ .sov-section { margin-bottom: 80px; } .sov-section-head { margin: 0 0 40px; font-family: var(--section-head-font); font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold, #c9a84c); padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* ── Services grid ── */ .sov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sov-card { padding: 28px 26px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.03); transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; } .sov-card:hover { border-color: rgba(0, 229, 255, 0.3); background: rgba(0, 229, 255, 0.04); transform: translateY(-3px); } .sov-card-icon { width: 44px; height: 44px; margin-bottom: 18px; color: rgba(0, 229, 255, 0.85); } .sov-card-icon svg { width: 100%; height: 100%; } .sov-card h4 { margin: 0 0 10px; font-family: var(--tech-font, 'Rajdhani', sans-serif); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; text-transform: uppercase; } .sov-card p { margin: 0; font-size: 0.88rem; color: var(--muted, rgba(223, 231, 245, 0.62)); line-height: 1.65; } /* ── Process steps ── */ .sov-process { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; position: relative; } .sov-process::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.05)); } .sov-step { display: flex; gap: 28px; align-items: flex-start; padding: 28px 28px 28px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .sov-step:last-child { border-bottom: none; } .sov-step-num { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 229, 255, 0.35); border-radius: 50%; background: rgba(0, 229, 255, 0.07); font-family: var(--tech-font, 'Rajdhani', sans-serif); font-size: 1rem; font-weight: 700; color: rgba(0, 229, 255, 0.9); letter-spacing: 0.05em; position: relative; z-index: 1; } .sov-step-body { padding-top: 8px; } .sov-step-body h4 { margin: 0 0 8px; font-family: var(--tech-font, 'Rajdhani', sans-serif); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; color: #fff; text-transform: uppercase; } .sov-step-body p { margin: 0; font-size: 0.9rem; color: var(--muted, rgba(223, 231, 245, 0.62)); line-height: 1.7; max-width: 640px; } /* ── Bottom CTA ── */ .sov-cta-row { display: flex; justify-content: center; padding-top: 20px; } /* ── Responsive ── */ @media (max-width: 900px) { .sov-stats { grid-template-columns: repeat(2, 1fr); } .sov-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sov-inner { padding: 60px 20px 80px; } .sov-stats { grid-template-columns: repeat(2, 1fr); } .sov-grid { grid-template-columns: 1fr; } .sov-header h2 { font-size: 2.2rem; } } /* Prevent main page scroll while overlay is open */ body.sov-lock { overflow: hidden; } /* ═══════════════════════════════════════════════════════ SERVICE PAGES — shared styles (all .service-page routes) ═══════════════════════════════════════════════════════ */ .service-page { background: #050608; color: #dfe7f5; } .service-page .site-shell { display: flex; flex-direction: column; min-height: 100vh; } .service-page main { flex: 1; } .sp-hero { position: relative; padding: 140px 40px 80px; background: radial-gradient(ellipse 80% 60% at 60% 40%,rgba(0,229,255,.06) 0%,transparent 70%),linear-gradient(180deg,rgba(5,6,8,0) 0%,#050608 100%),linear-gradient(135deg,#06090f 0%,#0b1525 50%,#06090f 100%); overflow: hidden; } .sp-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px); background-size: 60px 60px; pointer-events: none; } .sp-hero-inner { position: relative; max-width: 1200px; margin: 0 auto; } .sp-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 36px; color: rgba(223,231,245,.55); font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: color .2s; } .sp-back:hover { color: rgba(0,229,255,.9); } .sp-back svg { width: 16px; height: 16px; } .sp-eyebrow { display: block; margin-bottom: 16px; color: var(--gold,#c9a84c); font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: .78rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; } .sp-hero h1 { margin: 0 0 20px; font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: clamp(2.8rem,6vw,5rem); font-weight: 900; line-height: .95; color: #fff; } .sp-tagline { margin: 0; max-width: 560px; color: rgba(223,231,245,.62); font-size: clamp(.95rem,1.4vw,1.1rem); line-height: 1.7; } .sp-body { max-width: 1200px; margin: 0 auto; padding: 0 40px 100px; } .sp-cta { display: flex; justify-content: center; gap: 16px; padding-top: 20px; flex-wrap: wrap; } .sp-features { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; margin: 60px 0; } .sp-feature { background: rgba(255,255,255,.03); border: 1px solid rgba(0,229,255,.1); border-radius: 12px; padding: 32px; transition: border-color .25s; } .sp-feature:hover { border-color: rgba(0,229,255,.28); } .sp-feature-icon { width: 42px; height: 42px; color: rgba(0,229,255,.7); margin-bottom: 16px; } .sp-feature h3 { margin: 0 0 10px; font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; text-transform: uppercase; } .sp-feature p { margin: 0; color: rgba(223,231,245,0.58); font-size: 0.9rem; line-height: 1.65; } .sp-section-head { font-family: 'Titillium Web','Rajdhani',sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; margin: 60px 0 28px; text-transform: uppercase; } .sov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: rgba(0,229,255,0.1); border-radius: 12px; overflow: hidden; margin: 60px 0; } .sov-stat { background: rgba(5,6,8,0.9); padding: 32px 24px; text-align: center; } .sov-stat strong { display: block; font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: clamp(2rem,4vw,2.8rem); font-weight: 900; color: rgba(0,229,255,0.85); letter-spacing: -0.02em; } .sov-stat span { display: block; margin-top: 6px; font-size: 0.82rem; color: rgba(223,231,245,0.5); letter-spacing: 0.06em; text-transform: uppercase; } .sp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .sp-step { display: flex; gap: 20px; align-items: flex-start; padding: 20px; border-left: 2px solid rgba(0,229,255,0.15); } .sp-step-num { font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: 2rem; font-weight: 900; color: rgba(0,229,255,0.22); line-height: 1; min-width: 44px; } .sp-step-body h3 { margin: 0 0 6px; font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; } .sp-step-body p { margin: 0; color: rgba(223,231,245,0.55); font-size: 0.88rem; line-height: 1.6; } @media (max-width: 700px) { .sp-hero { padding: 120px 20px 60px; } .sp-body { padding: 0 20px 80px; } } /* ── Brochure-specific ── */ .pdf-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin: 0 0 60px; } .pdf-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 16px 22px; background: rgba(255,255,255,.03); border: 1px solid rgba(0,229,255,.12); border-radius: 12px; text-decoration: none; transition: border-color .25s,background .25s; cursor: pointer; } .pdf-card:hover { border-color: rgba(0,229,255,.4); background: rgba(0,229,255,.04); } .pdf-card-icon { width: 56px; height: 56px; flex-shrink: 0; color: rgba(0,229,255,.7); } .pdf-card-name { font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(223,231,245,.75); text-align: center; line-height: 1.4; } .pdf-card-hint { font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,229,255,.55); } @media(max-width:800px) { .pdf-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:480px) { .pdf-grid { grid-template-columns: 1fr; } } /* ── Sample Flat-specific ── */ .tour-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 60px; } .tour-card { display: flex; flex-direction: column; background: rgba(255,255,255,.03); border: 1px solid rgba(0,229,255,.1); border-radius: 12px; overflow: hidden; text-decoration: none; transition: border-color .25s,transform .2s; } .tour-card:hover { border-color: rgba(0,229,255,.35); transform: translateY(-3px); } .tour-card-thumb { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #0a0d13; } .tour-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .tour-card:hover .tour-card-thumb img { transform: scale(1.05); } .tour-card-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); transition: background .25s; } .tour-card:hover .tour-card-thumb-play { background: rgba(0,0,0,.1); } .tour-card-thumb-play svg { width: 44px; height: 44px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); } .tour-card-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; } .tour-card-title { font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: .95rem; font-weight: 700; letter-spacing: .08em; color: #fff; text-transform: uppercase; } .tour-card-sub { font-size: .82rem; color: rgba(223,231,245,.5); } .tour-card-cta { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--tech-font,'Rajdhani',sans-serif); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(0,229,255,.8); } @media(max-width:700px) { .tour-grid { grid-template-columns: 1fr; } } /* ── Walkthrough-specific ── */ .wt-videos { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 0 0 60px; } .wt-video-item video { width: 100%; height: auto; border-radius: 10px; display: block; background: #000; } .wt-video-label { margin: 10px 0 0; color: rgba(223,231,245,0.5); font-size: 0.82rem; text-align: center; font-family: var(--tech-font,'Rajdhani',sans-serif); letter-spacing: 0.1em; text-transform: uppercase; } @media(max-width:800px) { .wt-videos { grid-template-columns: 1fr; } } /* ── Lens360-specific ── */ .sp-hero-inner.lens360 { display: flex; align-items: center; gap: 48px; } .sp-hero-text { flex: 0 0 40%; min-width: 0; } .sp-hero-image { flex: 0 0 calc(60% - 48px); max-width: calc(60% - 48px); } .sp-hero-image img { width: 100%; height: auto; border-radius: 5px; object-fit: cover; } @media(max-width:900px) { .sp-hero-inner.lens360 { flex-direction: column; } .sp-hero-text { flex: none; } .sp-hero-image { flex: none; max-width: 100%; } } /* ── Arch-Viz-specific ── */ .viz-gallery { margin: 0 0 60px; display: flex; flex-direction: column; gap: 12px } .viz-row { display: grid; gap: 12px } .viz-row--single { grid-template-columns: 1fr } .viz-row--triple { grid-template-columns: repeat(3,1fr) } .viz-item { position: relative; overflow: hidden; border-radius: 10px; cursor: pointer; background: #0a0d13 } .viz-row--single .viz-item { height: 460px } .viz-row--triple .viz-item { height: 240px } .viz-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease } .viz-item:hover img { transform: scale(1.05) } .viz-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(5,6,8,.6) 0%,transparent 50%); opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end; padding: 16px } .viz-item:hover .viz-item-overlay { opacity: 1 } .viz-item-overlay svg { width: 22px; height: 22px; color: rgba(0,229,255,.9) } /* Lightbox */ .viz-lb { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); align-items: center; justify-content: center } .viz-lb.is-open { display: flex } .viz-lb img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 0 60px rgba(0,0,0,.8) } .viz-lb-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; opacity: .7; transition: opacity .2s } .viz-lb-close:hover { opacity: 1 } @media(max-width:700px) { .viz-row--triple { grid-template-columns: 1fr } .viz-row--single .viz-item { height: 260px } .viz-row--triple .viz-item { height: 220px } } /*------------------------Arch-Viz CSS Ends--------------------------------*/ /* ═══════════════════════════════════════════════════════ PHASE 1 — UX VISUAL POLISH ═══════════════════════════════════════════════════════ */ /* ── 2. Body descriptions — bigger, better contrast ── */ .arch-description, .sampleflat-description, .digital-description, .agent-description, .lensiq-description, .lensspace-description, .brochure-description { font-size: clamp(14px,1.1vw,30px); color: rgba(255, 255, 255, 0.78); line-height: 1.7; } /* ── 3. Hero title — v3 settings ── */ .hero-title { font-size: clamp(2.42rem, 2.46vw, 7.31rem); font-weight: 900; letter-spacing: 0.05em; text-align: right; text-shadow: 4px 2px 12px #000; } /* ── 4. WhatsApp floating button (replaces nav icon) ── */ .whatsapp-float { position: fixed; bottom: 32px; left: 32px; z-index: 50; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: #00c409; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 196, 9, 0.38); transition: transform 180ms ease, box-shadow 180ms ease; text-decoration: none; } .whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0, 196, 9, 0.52); } .whatsapp-float svg { width: 28px; height: 28px; fill: #fff; } /* ═══════════════════════════════════════════════════════ PHASE 2 — Call-Us CTA phone icon ═══════════════════════════════════════════════════════ */ .call-us.button { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .call-icon { width: 20px; height: 20px; flex-shrink: 0; stroke: rgba(12,148,148,1); } /* ═══════════════════════════════════════════════════════ PHASE 2 — FIX #8 AI Device Mockups (Sec 8 · 9 · 10) ═══════════════════════════════════════════════════════ */ /* ── Shared browser chrome ── */ .ai-browser-chrome { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .ai-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ai-dot--r { background: #ff5f57; } .ai-dot--y { background: #febc2e; } .ai-dot--g { background: #28c840; } .ai-url-bar { flex: 1; font-size: 9px; color: rgba(255, 255, 255, 0.38); background: rgba(255, 255, 255, 0.05); border-radius: 3px; padding: 2px 7px; font-family: 'Rajdhani', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; } /* ── Section 8: WhatsApp phone mockup ── */ .ai-phone-mock { position: absolute; bottom: 5%; right: 8%; width: 196px; border-radius: 22px; background: #111827; border: 1.5px solid rgba(37, 211, 102, 0.28); box-shadow: 0 0 28px rgba(37, 211, 102, 0.14), 0 18px 50px rgba(0, 0, 0, 0.55); overflow: hidden; z-index: 6; pointer-events: none; } .ai-phone-notch { width: 56px; height: 13px; background: #0d1520; border-radius: 0 0 9px 9px; margin: 0 auto; } .ai-phone-screen { display: flex; flex-direction: column; height: 320px; } .ai-wa-header { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: #1a2332; } .ai-wa-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #25D366, #128C7E); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; } .ai-wa-name { font-size: 10px; font-weight: 600; color: #fff; display: block; line-height: 1.3; } .ai-wa-status { font-size: 9px; color: #25D366; display: block; } .ai-wa-msgs { flex: 1; padding: 8px 9px 4px; background: #0b141a; display: flex; flex-direction: column; gap: 5px; overflow: hidden; } .ai-wa-msg { max-width: 82%; font-size: 9.5px; line-height: 1.4; padding: 5px 8px; border-radius: 7px; color: rgba(255, 255, 255, 0.88); } .ai-wa-in { background: #202c33; align-self: flex-start; border-bottom-left-radius: 2px; } .ai-wa-out { background: #005c4b; align-self: flex-end; border-bottom-right-radius: 2px; } .ai-wa-tick { display: block; font-size: 8px; color: #53bdeb; text-align: right; margin-top: 1px; letter-spacing: -0.5px; } .ai-wa-typing { display: flex; align-items: center; gap: 3px; padding: 7px 10px 8px; background: #0b141a; } .ai-wa-typing span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.38); animation: wa-bounce 1.3s infinite ease-in-out; } .ai-wa-typing span:nth-child(2) { animation-delay: 0.18s; } .ai-wa-typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes wa-bounce { 0%, 100% { transform: translateY(0); opacity: 0.38; } 50% { transform: translateY(-4px); opacity: 1; } } /* ── Section 9: LensIQ heatmap browser ── */ .ai-hm-mock { position: absolute; top: 50%; right: 6%; transform: translateY(-50%); width: 290px; background: rgba(6, 10, 22, 0.90); border: 1px solid rgba(34, 230, 255, 0.18); box-shadow: 0 0 28px rgba(34, 230, 255, 0.07), 0 18px 50px rgba(0, 0, 0, 0.55); border-radius: 11px; overflow: hidden; z-index: 6; pointer-events: none; } .ai-hm-body { padding: 12px 12px 10px; } .ai-hm-label { font-size: 9px; color: rgba(34, 230, 255, 0.65); font-family: 'Orbitron', sans-serif; letter-spacing: 0.8px; margin-bottom: 9px; } .ai-hm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 9px; } .ai-hm-cell { aspect-ratio: 1; border-radius: 3px; } .ai-h1 { background: rgba(0, 80, 255, 0.40); } .ai-h2 { background: rgba(0, 200, 255, 0.52); } .ai-h3 { background: rgba(60, 240, 90, 0.60); } .ai-h4 { background: rgba(255, 190, 0, 0.68); } .ai-h5 { background: rgba(255, 50, 0, 0.80); } .ai-hm-legend { display: flex; align-items: center; gap: 7px; font-size: 8.5px; color: rgba(255, 255, 255, 0.38); } .ai-leg-bar { flex: 1; height: 5px; border-radius: 3px; background: linear-gradient(to right, rgba(0,80,255,0.5), rgba(0,200,255,0.6), rgba(60,240,90,0.65), rgba(255,190,0,0.7), rgba(255,50,0,0.82)); } /* ── Section 10: LensSpace floor plan screen ── */ .ai-fp-mock { position: absolute; top: 8%; right: 6%; width: 290px; background: rgba(6, 6, 18, 0.90); border: 1px solid rgba(139, 92, 246, 0.28); box-shadow: 0 0 28px rgba(139, 92, 246, 0.10), 0 18px 50px rgba(0, 0, 0, 0.55); border-radius: 11px; overflow: hidden; z-index: 6; pointer-events: none; } .ai-fp-body { padding: 11px 12px 10px; } .ai-fp-label { font-size: 9px; color: rgba(139, 92, 246, 0.75); font-family: 'Orbitron', sans-serif; letter-spacing: 0.8px; margin-bottom: 9px; } .ai-fp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 9px; padding: 3px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 4px; } .ai-fp-room { background: rgba(139, 92, 246, 0.10); border: 1px solid rgba(139, 92, 246, 0.30); border-radius: 3px; padding: 9px 6px; display: flex; align-items: center; justify-content: center; min-height: 34px; } .ai-fp-room span { font-size: 8.5px; color: rgba(255, 255, 255, 0.65); text-align: center; line-height: 1.2; font-family: 'Rajdhani', sans-serif; } .ai-fp-r3 { grid-column: 1 / -1; background: rgba(139, 92, 246, 0.17); } .ai-fp-stat { display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-family: 'Rajdhani', sans-serif; } .ai-fp-eff { color: #22c55e; font-weight: 600; } .ai-fp-cap { color: rgba(255, 255, 255, 0.4); } /* ═══════════════════════════════════════════════════════ MOBILE LANDSCAPE — reduce heading sizes so content fits within the short viewport height (~375–430px) ═══════════════════════════════════════════════════════ */ @media (max-height: 500px) and (orientation: landscape) { /* Hero — main title + body copy */ .hero-title, .massive-title, .closing-section h2 { font-size: clamp(1.3rem, 5.5vh, 1.9rem); line-height: 1; } .hero-copy { font-size: clamp(0.7rem, 2.6vh, 0.85rem); margin: 10px 0 16px; } /* Section 2 / 360 split title */ .lens-split-title h2 { font-size: clamp(1.3rem, 5.5vh, 1.9rem); } /* Section 3 gallery */ .gallery-title { font-size: clamp(15px, 4.5vh, 22px); } /* Pinned section titles (4–10) */ .brochure-title, .arch-title, .sampleflat-title, .digital-title, .agent-title, .lensspace-title { font-size: clamp(15px, 5vh, 22px); line-height: 1.05; } .lensiq-title { font-size: clamp(14px, 4.5vh, 20px); } /* Pinned section descriptions */ .arch-description, .sampleflat-description, .digital-description, .agent-description, .lensiq-description, .lensspace-description, .brochure-description { font-size: clamp(11px, 2.6vh, 13px); line-height: 1.5; } /* Eyebrow / kicker labels */ .hero-kicker, .section-kicker, .eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; } } /* ═══════════════════════════════════════════════════════ PREMIUM UI/UX UPGRADE LAYER All overrides are additive — structure, content order, and section logic from the layers above are unchanged. Applied last so specificity naturally wins. ═══════════════════════════════════════════════════════ */ /* ── Scrollbar — slim gradient ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #050608; } ::-webkit-scrollbar-thumb { background: #9E9E9E; border-radius: 4px; } /* ── Nav: condensed desktop — keep links visible, hide hamburger ── */ @media (min-width: 960px) { .nav.is-condensed .menu-toggle { display: none !important; } .nav.is-condensed .nav-links { display: flex !important; position: static !important; max-width: none !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; visibility: visible !important; overflow: visible !important; border: 0 !important; padding: 0 !important; background: none !important; } } /* Condensed nav — richer glass background */ .nav.is-condensed { background: rgba(4, 5, 14, 0.94) !important; backdrop-filter: blur(28px) saturate(160%) !important; box-shadow: 0 1px 0 rgba(0, 229, 255, 0.07), 0 6px 28px rgba(0, 0, 0, 0.5) !important; } /* ── Section subtitles — unified style matching lens-tagline ── */ .gallery-subtitle, .brochure-subtitle, .arch-subtitle, .sampleflat-subtitle, .digital-subtitle, .lensiq-subtitle, .lensspace-subtitle { font-family: var(--tech-font) !important; font-size: clamp(0.75rem, 1.5vw, 1.1rem) !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--ink) !important; background: none !important; padding: 0 !important; margin-bottom: 10px !important; line-height: 1.42 !important; } .agent-subtitle { background: rgba(0, 229, 255, 0.88) !important; color: rgba(255, 255, 255, 0.98) !important; /* border-left: 2px solid rgba(0, 229, 255, 0.7) !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 0 !important;*/ padding: 4px 10px 4px 10px !important; letter-spacing: 2.5px !important; font-size: clamp(11px, 1vw, 13px) !important; text-shadow: 0 0 18px rgba(167, 139, 250, 0.35); } /* ── Buttons — premium hover treatment ── */ .button { border-radius: 10px !important; font-family: var(--tech-font) !important; font-size: clamp(0.7rem, 1vw, 0.84rem) !important; letter-spacing: 0.07em !important; transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 200ms ease, box-shadow 200ms ease, background 200ms ease !important; } .button:hover { transform: translateY(-3px) scale(1.025) !important; border-color: rgba(0, 229, 255, 0.75) !important; box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.22), 0 14px 44px rgba(0, 229, 255, 0.16), 0 4px 12px rgba(0, 0, 0, 0.45) !important; } .button:active { transform: translateY(-1px) scale(1.005) !important; } .button.cta-outline { border-color: rgba(0, 229, 255, 0.45) !important; box-shadow: 2px 3px 28px 8px rgba(0, 0, 0, 0.42) !important; text-shadow: 3px 3px 4px #000; } .button.cta-outline:hover { background: rgba(0, 229, 255, 0.07) !important; border-color: rgba(0, 229, 255, 0.85) !important; color: var(--neon-cyan) !important; box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.3), 0 14px 44px rgba(0, 229, 255, 0.18), inset 0 0 28px rgba(0, 229, 255, 0.04) !important; } /* Service section pill buttons — all sections */ .service-btns .button, .gallery-cta .button { border-radius: 999px !important; padding: 0 28px !important; font-size: 0.82rem !important; font-weight: 500 !important; letter-spacing: 0.06em !important; height: 50px !important; min-width: 190px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-decoration: none !important; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important; } /* Learn More — white pill with arrow */ .service-btns .learn-more, .gallery-cta .learn-more { background: #ffffff !important; color: #0a0a0a !important; border: none !important; box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important; } .service-btns .learn-more::after, .gallery-cta .learn-more::after { content: '\2192'; font-size: 1.5rem; line-height: 1; transition: transform 180ms ease; color: rgba(12,148,148,1); } .service-btns .learn-more:hover, .gallery-cta .learn-more:hover { background: #f0f0f0 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important; color: #0a0a0a !important; } .service-btns .learn-more:hover::after, .gallery-cta .learn-more:hover::after { transform: translateX(3px); } /* Call Now — dark pill with teal border glow */ .service-btns .call-us, .gallery-cta .call-us { background: radial-gradient(circle at 90% 40%, rgba(34,230,255,.45) 0%, rgba(34,230,255,.15) 60%, rgba(0,0,0,0.7) 100%), rgba(5,6,8,.6) !important; color: #ffffff !important; border: 1.5px solid rgba(12, 148, 148, 0.75) !important; box-shadow: 0 0 18px rgba(12, 148, 148, 0.25), inset 0 0 14px rgba(12, 148, 148, 0.06) !important; } .service-btns .call-us:hover, .gallery-cta .call-us:hover { background: rgba(4, 10, 18, 0.98) !important; border-color: rgba(12, 148, 148, 1) !important; box-shadow: 0 0 28px rgba(12, 148, 148, 0.45), inset 0 0 18px rgba(12, 148, 148, 0.1) !important; transform: translateY(-2px) !important; color: #ffffff !important; } /* ── Testimonial cards — glassmorphism upgrade ── */ .testimonial-card { background: rgba(7, 10, 22, 0.7) !important; backdrop-filter: blur(22px) !important; border: 1px solid rgba(0, 229, 255, 0.1) !important; border-radius: 20px !important; padding: 34px 30px 28px !important; transition: border-color 0.32s ease, transform 0.32s ease, box-shadow 0.32s ease !important; overflow: hidden; } .testimonial-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.32), transparent); opacity: 0; transition: opacity 0.32s ease; } .testimonial-card:hover { border-color: rgba(0, 229, 255, 0.26) !important; transform: translateY(-6px) !important; box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.12), 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 48px rgba(0, 229, 255, 0.05) !important; } .testimonial-card:hover::after { opacity: 1; } .testimonial-text { font-size: 0.94rem !important; line-height: 1.78 !important; color: rgba(215, 225, 242, 0.78) !important; } .testimonial-avatar { background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(255, 45, 138, 0.18)) !important; border: 1px solid rgba(0, 229, 255, 0.28) !important; font-weight: 700 !important; font-size: 0.8rem !important; letter-spacing: 0.06em !important; } .testimonial-name { font-weight: 700 !important; letter-spacing: 0.05em !important; color: #fff !important; } .testimonial-role { color: rgba(0, 229, 255, 0.65) !important; font-size: 0.7rem !important; letter-spacing: 0.18em !important; } /* ── Section headings — Montserrat Light ── */ .gallery-title, .brochure-title, .arch-title, .sampleflat-title, .lens-tagline { font-family: var(--section-head-font) !important; font-weight: 500 !important; } /* ── Section descriptions — Roboto ── */ .gallery-description, .brochure-description, .arch-description, .sampleflat-description, .lens-description { font-family: var(--desc-font) !important; font-weight: 300 !important; } /* Testimonials section title — gradient treatment */ .testimonials-title { background: linear-gradient(135deg, #fff 25%, var(--neon-cyan) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Eyebrow labels — cyan accent ── */ .eyebrow { color: var(--neon-cyan) !important; letter-spacing: 0.28em !important; opacity: 0.82; } /* ── Contact form — richer focus states ── */ .contact-col--form .form-field input, .contact-col--form .form-field select, .contact-col--form .form-field textarea, .form-field input, .form-field select, .form-field textarea { border-color: rgba(0, 229, 255, 0.16) !important; border-radius: 12px !important; background: rgba(6, 9, 22, 0.55) !important; transition: border-color 0.26s ease, box-shadow 0.26s ease, background 0.26s ease !important; } .contact-col--form .form-field input:focus, .contact-col--form .form-field select:focus, .contact-col--form .form-field textarea:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: rgba(0, 229, 255, 0.65) !important; box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.09), 0 0 22px rgba(0, 229, 255, 0.07) !important; background: rgba(0, 229, 255, 0.025) !important; outline: none !important; } /* ── Contact cards — subtle glass panels ── */ .contact-col { border-radius: 22px !important; border-color: rgba(0, 229, 255, 0.11) !important; background: rgba(6, 9, 22, 0.65) !important; backdrop-filter: blur(22px) !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } .contact-col:hover { border-color: rgba(0, 229, 255, 0.2) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45) !important; } /* ── Form submit — richer gradient + glow ── */ .form-submit { border-radius: 12px !important; background: linear-gradient(90deg, #00d4ff, #7c3aed, #ff2d8a) !important; background-size: 200% auto !important; box-shadow: 0 8px 32px rgba(0, 229, 255, 0.22) !important; transition: transform 0.22s ease, box-shadow 0.26s ease, background-position 0.45s ease !important; } .form-submit:hover { background-position: right center !important; transform: translateY(-2px) !important; box-shadow: 0 14px 52px rgba(0, 229, 255, 0.38) !important; } /* ── WhatsApp float button — springy ── */ .whatsapp-float { border-radius: 16px !important; box-shadow: 0 4px 24px rgba(0, 200, 5, 0.38) !important; transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease !important; } .whatsapp-float:hover { transform: translateY(-4px) scale(1.07) !important; box-shadow: 0 10px 36px rgba(0, 200, 5, 0.55) !important; } /* ── Menu toggle — crisper styling ── */ .menu-toggle { border-radius: 10px !important; border-color: rgba(0, 229, 255, 0.28) !important; background: rgba(0, 229, 255, 0.04) !important; transition: background 200ms ease, box-shadow 200ms ease !important; } .menu-toggle:hover { background: rgba(0, 229, 255, 0.1) !important; box-shadow: 0 0 24px rgba(0, 229, 255, 0.14) !important; } /* ═══════════════════════════════════════════════════════════════════════════ TAB SYSTEM — nav-tabs + tab panels + AI badge + pending overlay ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tab buttons inside nav ── */ .nav-tabs { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 10px; background: rgba(0, 229, 255, 0.05); border: 1px solid rgba(0, 229, 255, 0.14); } .tab-btn { position: relative; display: flex; align-items: center; gap: 5px; background: none; border: none; color: var(--text-mute); font-family: var(--tech-font); font-size: 0.85rem; letter-spacing: 0.1em; font-weight: 600; padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: color 0.2s, background 0.2s; white-space: nowrap; } .tab-btn:hover { color: #fff; background: rgba(0, 229, 255, 0.08); } .tab-btn--active { color: var(--neon-cyan); background: rgba(0, 229, 255, 0.12); } /* When tab-btn lives inside nav-links, match nav link appearance exactly */ .nav-links .tab-btn { background: none; border: none; border-radius: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: var(--muted); transition: color 180ms ease; } .nav-links .tab-btn::after { position: absolute; right: 0; bottom: -10px; left: 0; height: 1px; background: #0c9494; content: ""; opacity: 0; transform: scaleX(0.2); transition: opacity 180ms ease, transform 180ms ease; } .nav-links .tab-btn:hover, .nav-links .tab-btn.tab-btn--active { background: none; color: #0c9494; } .nav-links .tab-btn:hover::after, .nav-links .tab-btn.tab-btn--active::after { opacity: 1; transform: scaleX(1); } /* ── AI-tab navbar background ───────────────────────────────────── */ /* deep navy + subtle blue border when AI nav is condensed */ .nav.ai-tab-active.is-condensed { background: rgba(2, 6, 20, 0.97); border-color: rgba(30, 80, 220, 0.35); } /* canvas for wave animation */ #nav-ai-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 800ms ease; } #nav-ai-canvas.is-visible { opacity: 1; } /* scan div kept in DOM but unused visually */ .nav-ai-scan { display: none; } /* Ensure nav inner children sit above the canvas */ .nav-inner, .brand, .nav-links, .menu-toggle { position: relative; z-index: 2; } /* ── AI-tab active nav state ────────────────────────────────────── */ @keyframes ai-nav-sweep { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes ai-nav-glow-pulse { 0%, 100% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.7), 0 0 12px rgba(0, 229, 255, 0.3); } 50% { box-shadow: 0 0 8px rgba(0, 229, 255, 0.9), 0 0 18px rgba(0, 229, 255, 0.5); } } .nav.ai-tab-active .nav-links a.is-active, .nav.ai-tab-active .nav-links .tab-btn.tab-btn--active { background: linear-gradient(90deg, #ffffff 0%, #ffffff 30%, #00e5ff 50%, #ffffff 70%, #ffffff 100%); background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: ai-nav-sweep 2.8s linear infinite; } .nav.ai-tab-active .nav-links a.is-active::after, .nav.ai-tab-active .nav-links .tab-btn.tab-btn--active::after { opacity: 0; } /* Sliding underline indicator */ .tab-indicator { position: absolute; bottom: 3px; height: 2px; background: var(--neon-cyan); border-radius: 2px; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* AI badge — pulsing dot, hidden when all AI frames ready */ .tab-ai-badge { font-size: 0.45rem; color: var(--neon-amber); animation: tab-badge-pulse 1.6s ease-in-out infinite; line-height: 1; } body.ai-ready .tab-ai-badge { display: none; } @keyframes tab-badge-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } /* ── Tab panels ── */ .tab-panel { display: none; } .tab-panel.is-active { display: block; } /* ── AI pending overlay ── */ .ai-pending-overlay { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: rgba(5, 5, 13, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.4s ease, visibility 0.4s ease; } .ai-pending-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .ai-pending-ring { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(0, 229, 255, 0.15); border-top-color: var(--neon-cyan); animation: ai-spin 0.9s linear infinite; } @keyframes ai-spin { to { transform: rotate(360deg); } } .ai-pending-label { font-family: var(--tech-font); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--neon-cyan); opacity: 0.7; margin: 0; } /* ═══════════════════════════════════════════════════════════════ AI-POWERED CTA SECTION (end of Home tab) ═══════════════════════════════════════════════════════════════ */ .section-ai-cta { position: relative; z-index: 20; min-height: 85vh; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; } /* Dot-grid background */ .ai-cta-grid-bg { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,229,255,.18) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%); pointer-events: none; } /* Expanding rings */ .ai-cta-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0,229,255,.12); pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ai-cta-pulse 4s ease-out infinite; } .ai-cta-ring--1 { width: 420px; height: 420px; animation-delay: 0s; } .ai-cta-ring--2 { width: 680px; height: 680px; animation-delay: 1.4s; } @keyframes ai-cta-pulse { 0% { opacity: .5; transform: translate(-50%,-50%) scale(.9); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); } } .ai-cta-inner { position: relative; z-index: 1; text-align: center; padding: 4rem 1rem; max-width: 835px; } .ai-cta-eyebrow { font-family: var(--tech-font); font-size: .65rem; letter-spacing: .28em; color: var(--neon-cyan); margin: 0 0 1.4rem; opacity: .8; } .ai-cta-title { font-family: var(--tech-font); font-size: clamp(3.5rem, 10vw, 6.5rem); font-weight: 900; letter-spacing: .04em; line-height: 1; color: #fff; margin: 0 0 1.6rem; text-shadow: 0 0 60px rgba(0,229,255,.35); } .ai-cta-dash { color: var(--neon-cyan); margin: 0 .2em; } .ai-cta-desc { font-size: clamp(.9rem, 1.5vw, 1.05rem); color: rgba(255,255,255,.55); line-height: 1.7; margin: 0 0 2.8rem; } .ai-cta-btn { display: inline-flex; align-items: center; gap: .7rem; padding: .9rem 2.2rem; background: transparent; border: 1.5px solid var(--neon-cyan); color: var(--neon-cyan); font-family: var(--tech-font); font-size: .82rem; letter-spacing: .18em; cursor: pointer; text-transform: uppercase; transition: background .25s, color .25s, box-shadow .25s; position: relative; overflow: hidden; } .ai-cta-btn::before { content: ''; position: absolute; inset: 0; background: var(--neon-cyan); transform: translateX(-100%); transition: transform .3s ease; } .ai-cta-btn:hover::before { transform: translateX(0); } .ai-cta-btn:hover { color: #000; box-shadow: 0 0 28px rgba(0,229,255,.4); } .ai-cta-btn span, .ai-cta-btn svg { position: relative; z-index: 1; } .ai-cta-btn svg { width: 18px; height: 18px; } /* ═══════════════════════════════════════════════════════════════ TECH TESTIMONIALS (AI Tab) ═══════════════════════════════════════════════════════════════ */ .section-testimonials--tech { background: #050a10; position: relative; } /* Scanline overlay */ .tech-scan-overlay { position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,229,255,.025) 3px, rgba(0,229,255,.025) 4px ); pointer-events: none; z-index: 0; } .section-testimonials--tech .section-content { position: relative; z-index: 1; } .tech-eyebrow { font-family: var(--tech-font) !important; color: var(--neon-cyan) !important; letter-spacing: .22em !important; opacity: .85; } .tech-accent { color: var(--neon-cyan); } .tech-meta { font-family: var(--tech-font); font-size: .65rem; letter-spacing: .2em; color: rgba(0,229,255,.6); margin-top: .5rem; } /* Tech card */ .testimonial-card--tech { background: rgba(0,229,255,.04) !important; border: 1px solid rgba(0,229,255,.2) !important; position: relative; transition: border-color .3s, box-shadow .3s !important; } .testimonial-card--tech::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--neon-cyan); } .testimonial-card--tech:hover { border-color: rgba(0,229,255,.5) !important; box-shadow: 0 0 24px rgba(0,229,255,.1) !important; } .tech-card-tag { font-family: var(--tech-font); font-size: .58rem; letter-spacing: .2em; color: var(--neon-cyan); margin-bottom: 1rem; opacity: .8; } .tech-avatar { background: rgba(0,229,255,.12) !important; border: 1px solid rgba(0,229,255,.4) !important; color: var(--neon-cyan) !important; } .tech-role { font-size: .7rem; } .tech-verified { font-family: var(--tech-font); font-size: .6rem; letter-spacing: .12em; color: var(--neon-cyan); opacity: .75; } /* ═══════════════════════════════════════════════════════════════ TECH CONTACT (AI Tab) ═══════════════════════════════════════════════════════════════ */ .section-contact--tech { background: url(../assets/footer-bg.png) no-repeat right top, radial-gradient(ellipse 70% 50% at 20% 0%, rgba(0, 229, 255, 0.10), transparent 60%), radial-gradient(ellipse 70% 60% at 90% 100%, rgba(255, 45, 138, 0.10), transparent 60%), linear-gradient(180deg, #05050d 0%, #0a0c20 100%); position: relative; } .section-contact--tech .section-content { position: relative; z-index: 1; } .tech-col-label { font-family: var(--tech-font) !important; color: var(--neon-cyan) !important; letter-spacing: .2em !important; font-size: .62rem !important; opacity: .8; } /* Stat row below intro text */ .tech-contact-stats { display: flex; gap: 1.5rem; margin-top: 2rem; } .tech-stat { display: flex; flex-direction: column; gap: .2rem; } .tech-stat-val { font-family: var(--tech-font); font-size: 1.3rem; font-weight: 700; color: var(--neon-cyan); line-height: 1; } .tech-stat-lbl { font-family: var(--tech-font); font-size: .55rem; letter-spacing: .15em; color: rgba(255,255,255,.4); text-transform: uppercase; } /* Tech form fields — cyan glow on focus */ .section-contact--tech .form-field input, .section-contact--tech .form-field textarea, .tech-field input, .tech-field textarea { background: rgba(0,229,255,.04); border-color: rgba(0,229,255,.2); color: #fff; transition: border-color .25s, box-shadow .25s; } .section-contact--tech .form-field input:focus, .section-contact--tech .form-field textarea:focus, .tech-field input:focus, .tech-field textarea:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 2px rgba(0,229,255,.12); outline: none; } .section-contact--tech .form-field label, .tech-field label { color: rgba(255,255,255,.45); } /* Tech submit button */ .form-submit--tech { background: transparent !important; border: 1.5px solid var(--neon-cyan) !important; color: var(--neon-cyan) !important; font-family: var(--tech-font) !important; letter-spacing: .15em !important; position: relative; overflow: hidden; } .form-submit--tech::before { content: ''; position: absolute; inset: 0; background: var(--neon-cyan); transform: translateX(-101%); transition: transform .3s ease; } .form-submit--tech:hover::before { transform: translateX(0); } .form-submit--tech:hover { color: #000 !important; box-shadow: 0 0 24px rgba(0,229,255,.3) !important; } .form-submit--tech .btn-text { position: relative; z-index: 1; } .section-contact--tech .contact-title .tech-accent { color: var(--neon-cyan); } .hp-field { display: none !important; } /* Pinned content sections must not intercept pointer events while unpinned — prevents section-4+ content blocking section-3 CTA buttons during gallery scroll. Children regain pointer-events via the existing .is-fixed * { pointer-events: auto } rule. */ .section-brochure, .section-architectural, .section-sampleflat, .brochure-content, .arch-content, .sampleflat-content, .lensiq-content, .lensspace-content, .agent-content { pointer-events: none !important; } /* Restore pointer events on section wrappers and their children when pinned/active */ .section-brochure:has(.brochure-content.is-fixed), .section-architectural:has(.arch-content.is-fixed), .section-sampleflat:has(.sampleflat-content.is-fixed) { pointer-events: auto; } /* ═══════════════════════════════════════════════════════════ SERVICE PANEL — right-side slide-in overlay ═══════════════════════════════════════════════════════════ */ .svc-panel { pointer-events: none; } .svc-panel.is-open { pointer-events: auto; } /* Scrim — darkens main page to the left of the drawer */ .svc-panel__scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 199; opacity: 0; transition: opacity 0.4s ease; cursor: pointer; } .svc-panel.is-open .svc-panel__scrim { opacity: 1; } /* Drawer — slides in from the right */ .svc-panel__drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100vw; max-width: 100vw; min-width: 320px; background: #09090f; border-left: 1px solid rgba(0, 229, 255, 0.22); z-index: 200; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .svc-panel.is-open .svc-panel__drawer { transform: translateX(0); } /* Close button header */ .svc-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px 13px; border-bottom: 1px solid rgba(0, 229, 255, 0.12); flex-shrink: 0; background: rgba(9, 9, 15, 0.98); backdrop-filter: blur(8px); } .svc-panel__title { font-family: var(--tech-font); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0, 229, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; } .svc-panel__close { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: rgba(247, 244, 237, 0.45); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; flex-shrink: 0; } .svc-panel__close:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; background: rgba(255, 255, 255, 0.04); } .svc-panel__close svg { width: 15px; height: 15px; flex-shrink: 0; } .svc-panel__close-esc { font-family: var(--body-font); font-size: 1.05rem; letter-spacing: 0.1em; color: #fff; opacity: 1; } /* Scrollable body */ .svc-panel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; } .svc-panel__body::-webkit-scrollbar { width: 4px; } .svc-panel__body::-webkit-scrollbar-track { background: transparent; } .svc-panel__body::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.18); border-radius: 4px; } /* Loading spinner */ .svc-panel__spinner { width: 32px; height: 32px; border: 2px solid rgba(0, 229, 255, 0.12); border-top-color: var(--neon-cyan); border-radius: 50%; animation: svcSpin 0.8s linear infinite; margin: 80px auto; } @keyframes svcSpin { to { transform: rotate(360deg); } } /* Suppress injected service-page elements we don't need inside the panel */ .svc-panel__body .nav, .svc-panel__body footer, .svc-panel__body .sp-back { display: none !important; } /* Tighten hero — no nav pushdown needed, reduce bottom gap */ .svc-panel__body .sp-hero { padding-top: 40px; padding-bottom: 48px; } /* Give body content slightly more horizontal breathing room */ .svc-panel__body .sp-body { padding-left: 32px; padding-right: 32px; padding-bottom: 64px; } @media (max-width: 768px) { .svc-panel__drawer { width: 100vw; max-width: none; border-left: none; } }