/* ============================================================ MED CONSTRUCTION — design system colors: navy #04263F · beige #C9BCA8 · olive #7B7660 · cream #F2EDE3 type: DM Sans (latin) · IBM Plex Sans Arabic (rtl) · DM Mono (labels) ============================================================ */ /* reveal: the inline critical CSS in hides until this stylesheet applies, so the page never flashes raw/unstyled while style.css downloads. This rule (loaded after the inline one) un-hides it. */ body { visibility: visible; } /* failsafe: if GSAP (CDN) never loads, the inline head script adds html.no-anim. Neutralize every reveal hidden-state so the static site shows fully, not blank. */ html.no-anim #preloader { display: none !important; } html.no-anim .reveal-line > span, html.no-anim .reveal-line > em, html.no-anim .hero__line > span { transform: none !important; } html.no-anim .reveal-fade { opacity: 1 !important; transform: none !important; } html.no-anim .nav { opacity: 1 !important; } /* hero intro + navy wash are JS-revealed on scroll; if GSAP never loads, show them */ html.no-anim .descent__media { --hero-wash: 1; } html.no-anim .descent__intro { opacity: 1 !important; visibility: visible !important; } :root { /* fixed brand colors — used by the always-dark sections (navy bands, hero, footer) which look the same in both light & dark themes */ --navy: #04263F; --navy-deep: #021A2C; --soil: #021A2C; /* deep navy — hero band + earth + plan handoff */ --beige: #C9BCA8; --olive: #7B7660; --cream: #F2EDE3; /* = light text on dark sections */ --cream-soft: #EAE3D5; /* themeable tokens — drive the LIGHT surfaces (page bg + text on it) */ --bg: #F2EDE3; --bg-soft: #EAE3D5; --text: #0A2236; --text-strong: #04263F; --text-muted: rgba(10, 34, 54, 0.74); --text-faint: rgba(10, 34, 54, 0.5); --text-place: rgba(10, 34, 54, 0.4); --line-light: rgba(4, 38, 63, 0.12); --line-dark: rgba(201, 188, 168, 0.16); --glass: color-mix(in srgb, var(--bg) 88%, transparent); --font-sans: "DM Sans", "IBM Plex Sans Arabic", -apple-system, "Segoe UI", sans-serif; --font-mono: "DM Mono", "IBM Plex Sans Arabic", "SF Mono", monospace; --pad: clamp(20px, 5vw, 80px); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-expo: cubic-bezier(0.87, 0, 0.13, 1); } /* ---------- DARK THEME ---------- */ :root[data-theme="dark"] { --bg: #0D1318; --bg-soft: #121A22; --text: #E7E1D4; --text-strong: #F4EFE5; --text-muted: rgba(231, 225, 212, 0.66); --text-faint: rgba(231, 225, 212, 0.45); --text-place: rgba(231, 225, 212, 0.4); --line-light: rgba(231, 225, 212, 0.14); --glass: color-mix(in srgb, var(--bg) 82%, transparent); --navy: #090A0C; --navy-deep: #050507; --soil: #060708; } /* no-JS fallback: follow the device unless the user picked Light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0D1318; --bg-soft: #121A22; --text: #E7E1D4; --text-strong: #F4EFE5; --text-muted: rgba(231, 225, 212, 0.66); --text-faint: rgba(231, 225, 212, 0.45); --text-place: rgba(231, 225, 212, 0.4); --line-light: rgba(231, 225, 212, 0.14); --glass: color-mix(in srgb, var(--bg) 82%, transparent); --navy: #090A0C; --navy-deep: #050507; --soil: #060708; } } * { margin: 0; padding: 0; box-sizing: border-box; } html { scrollbar-width: thin; scrollbar-color: var(--olive) var(--bg); } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out); } body.is-rtl { letter-spacing: 0 !important; } .is-rtl .mono { letter-spacing: 0.02em; } .is-rtl h1, .is-rtl h2, .is-rtl h3 { letter-spacing: 0 !important; } ::selection { background: var(--navy); color: var(--cream); } .mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 400; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; } .logo-mark { display: block; height: auto; width: auto; } /* ============================================================ PRELOADER — logo icon rises bar by bar ============================================================ */ .preloader { position: fixed; inset: 0; z-index: 1000; background: var(--navy-deep); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 30px; } .preloader__logo { width: clamp(120px, 17vw, 190px); } .preloader__logo .logo-mark { width: 100%; height: auto; filter: brightness(0) invert(1); } .preloader__word { display: flex; gap: 0.35em; overflow: hidden; } .preloader__letter { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 300; letter-spacing: 0.34em; color: var(--cream); transform: translateY(110%); } .preloader__counter { position: absolute; bottom: 36px; inset-inline-end: var(--pad); font-family: var(--font-mono); font-size: 0.8rem; color: var(--olive); letter-spacing: 0.2em; } /* ============================================================ CURSOR ============================================================ */ .cursor { position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none; } .cursor__dot { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: var(--text-strong); top: -3px; left: -3px; transition: transform 0.2s, background 0.3s, opacity 0.3s; } .cursor__ring { position: fixed; width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text-strong) 35%, transparent); top: -18px; left: -18px; transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), top 0.35s var(--ease-out), left 0.35s var(--ease-out), background 0.35s, border-color 0.35s; } .cursor__label { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--cream); opacity: 0; transition: opacity 0.25s; white-space: nowrap; text-transform: uppercase; } .cursor.-dark .cursor__dot { background: var(--beige); } .cursor.-dark .cursor__ring { border-color: rgba(201, 188, 168, 0.45); } .cursor.-hover .cursor__ring { width: 88px; height: 88px; top: -44px; left: -44px; background: var(--text-strong); border-color: var(--text-strong); } .cursor.-hover.-dark .cursor__ring { background: var(--beige); border-color: var(--beige); } .cursor.-hover .cursor__label { color: var(--bg); } .cursor.-hover.-dark .cursor__label { color: var(--navy); } .cursor.-hover .cursor__dot { opacity: 0; } .cursor.-hover .cursor__label { opacity: 1; } .cursor.-sm .cursor__ring { width: 52px; height: 52px; top: -26px; left: -26px; background: transparent; } .cursor.-sm .cursor__label { opacity: 0; } .cursor.-sm .cursor__dot { opacity: 1; } .cursor.-down .cursor__ring { scale: 0.62; } @media (hover: none) { .cursor { display: none; } } /* ============================================================ PREMIUM LAYER — grain · scroll progress · page transition ============================================================ */ /* film grain — subtle editorial texture */ .grain { position: fixed; top: -60%; left: -60%; z-index: 200; width: 220%; height: 220%; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainShift 0.5s steps(3) infinite; will-change: transform; } :root[data-theme="dark"] .grain { opacity: 0.09; } @keyframes grainShift { 0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -4%); } 100% { transform: translate(2%, 2%); } } /* scroll progress line */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 2px; background: linear-gradient(90deg, var(--olive), var(--beige)); transform: scaleX(0); transform-origin: left; pointer-events: none; } .is-rtl .scroll-progress { transform-origin: right; } /* page transition overlay */ .transition { position: fixed; inset: 0; z-index: 300; pointer-events: none; visibility: hidden; display: flex; align-items: center; justify-content: center; } .transition.-active { visibility: visible; } .transition__panel { position: absolute; inset: 0; background: var(--navy-deep); transform: scaleY(0); transform-origin: bottom; } .transition__panel--2 { background: var(--navy); } .transition__logo { position: relative; z-index: 2; width: clamp(74px, 9vw, 104px); opacity: 0; transform: translateY(10px); } .transition__logo .logo-mark { width: 100%; height: auto; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--pad); transition: transform 0.6s var(--ease-out), background 0.4s, padding 0.4s; --nav-ink: var(--cream); --nav-ink-contrast: var(--navy); } body[data-nav="light"] .nav { --nav-ink: var(--text-strong); --nav-ink-contrast: var(--bg); } .nav.-scrolled { --nav-ink: var(--text-strong); --nav-ink-contrast: var(--bg); } .menu-open .nav { --nav-ink: var(--cream) !important; --nav-ink-contrast: var(--navy) !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; } .nav.-hidden { transform: translateY(-100%); } .nav.-scrolled { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 12px var(--pad); border-bottom: 1px solid var(--line-light); } .nav__brand { display: flex; align-items: center; flex-shrink: 0; } .nav__brand-in { display: flex; align-items: center; gap: 12px; transform-origin: center center; } /* when the fullscreen menu opens, collapse the enlarged hero logo back to its nav size so it never overlaps the menu (scroll is locked, so JS won't reset it) */ .menu-open .nav__brand-in { transform: none !important; } .nav__brand .logo-mark { height: 34px; width: auto; color: var(--olive); transition: filter 0.4s; } .nav__wordmark { display: flex; flex-direction: column; line-height: 1; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.18em; color: var(--nav-ink); transition: color 0.4s; } .nav__wordmark small { font-family: var(--font-mono); font-weight: 400; font-size: 0.46rem; letter-spacing: 0.42em; margin-top: 4px; color: var(--olive); } /* brand over media (transparent nav) or open menu — icon + text fully white */ body:not([data-nav="light"]) .nav:not(.-scrolled) .nav__wordmark, body:not([data-nav="light"]) .nav:not(.-scrolled) .nav__wordmark small, .menu-open .nav__wordmark, .menu-open .nav__wordmark small { color: #fff; } body:not([data-nav="light"]) .nav:not(.-scrolled) .nav__brand .logo-mark, .menu-open .nav__brand .logo-mark { filter: brightness(0) invert(1); } /* legibility for the enlarged logo while it sits over the bright villa hero (transparent nav); the shadow disappears once the nav gains its solid bg */ body:not([data-nav="light"]) .nav:not(.-scrolled) .nav__brand-in { filter: drop-shadow(0 2px 12px rgba(0,0,0,0.38)); } .nav__links { display: flex; gap: clamp(14px, 2.2vw, 34px); } .nav__link { font-size: 0.86rem; font-weight: 500; color: var(--nav-ink); display: inline-block; position: relative; transition: color 0.4s; padding-bottom: 3px; } .nav__link::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: var(--tx-origin-out, right); transition: transform 0.45s var(--ease-expo); } .nav__link:hover::after, .nav__link.-active::after { transform: scaleX(1); transform-origin: var(--tx-origin-in, left); } .nav__right { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); } .nav__langs, .menu__langs { display: flex; align-items: center; gap: 7px; } .nav__langs i, .menu__langs i { font-style: normal; opacity: 0.3; font-size: 0.7rem; color: var(--nav-ink); } .nav__lang, .menu__lang { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--nav-ink); opacity: 0.55; transition: opacity 0.3s, color 0.4s; padding: 4px 2px; } .menu__lang { color: var(--cream); font-size: 0.85rem; } .menu__langs i { color: var(--cream); } .nav__lang.-active, .menu__lang.-active { opacity: 1; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; } .nav__lang:hover, .menu__lang:hover { opacity: 1; } /* theme toggle */ .theme-toggle { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; color: var(--nav-ink); transition: color 0.4s, transform 0.4s var(--ease-out); } .theme-toggle:hover { color: var(--olive); transform: rotate(12deg); } .theme-toggle .ti { width: 18px; height: 18px; position: absolute; transition: opacity 0.45s, transform 0.55s var(--ease-expo); } .theme-toggle .ti--sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } .theme-toggle .ti--moon { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .theme-toggle .ti--sun { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .theme-toggle .ti--moon { opacity: 0; transform: rotate(90deg) scale(0.5); } .nav__cta { font-size: 0.8rem; font-weight: 600; border: 1px solid var(--nav-ink); border-radius: 100px; padding: 10px 22px; color: var(--nav-ink); position: relative; overflow: hidden; isolation: isolate; transition: color 0.4s, border-color 0.4s; white-space: nowrap; } .nav__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nav-ink); transform: translateY(101%); border-radius: 100px 100px 0 0; transition: transform 0.5s var(--ease-expo), border-radius 0.5s var(--ease-expo), background 0.4s; } .nav__cta:hover { color: var(--nav-ink-contrast); } .nav__cta:hover::before { transform: translateY(0); border-radius: 0; } .nav__burger { display: none; flex-direction: column; gap: 6px; width: 36px; padding: 6px 4px; } .nav__burger span { display: block; height: 2px; background: var(--nav-ink); width: 100%; transition: transform 0.45s var(--ease-expo), background 0.3s; transform-origin: center; } .menu-open .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .menu-open .nav__burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } /* ============================================================ FULLSCREEN MENU ============================================================ */ .menu { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; } .menu-open .menu { visibility: visible; pointer-events: auto; } .menu__bg { position: absolute; inset: 0; background: var(--navy-deep); transform: translateY(-101%); transition: transform 0.8s var(--ease-expo); } .menu-open .menu__bg { transform: translateY(0); } .menu__inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: calc(80px + 3vh) var(--pad) 5vh; } .menu__links { display: flex; flex-direction: column; } .menu__link { position: relative; font-size: clamp(1.9rem, 6.4vh, 3.6rem); font-weight: 300; color: var(--cream); line-height: 1.25; overflow: hidden; width: fit-content; padding-inline-start: 0; transition: padding-inline-start 0.5s var(--ease-expo), color 0.4s; } .menu__link.-active { color: var(--olive); } .menu__link::before { content: attr(data-index); position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 0.7rem; color: var(--beige); opacity: 0; transition: opacity 0.4s; } .menu__link span { display: inline-block; transform: translateY(110%); transition: transform 0.7s var(--ease-expo); } .menu-open .menu__link span { transform: translateY(0); } .menu__link:hover { padding-inline-start: 48px; color: var(--beige); } .menu__link:hover::before { opacity: 1; } .menu__meta { display: flex; gap: 60px; flex-wrap: wrap; align-items: flex-end; } .menu__meta-block .label { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--olive); margin-bottom: 8px; } .menu__meta-block p { color: var(--beige); font-size: 0.92rem; } .menu__meta-block { opacity: 0; transform: translateY(20px); transition: opacity 0.6s 0.3s, transform 0.6s 0.3s var(--ease-out); } .menu-open .menu__meta-block { opacity: 1; transform: translateY(0); } /* ============================================================ SECTION SHARED ============================================================ */ .section { padding: clamp(90px, 13vh, 150px) var(--pad); position: relative; } .section--dark { background: var(--navy); color: var(--cream); } .section--soft { background: var(--bg-soft); } .section__head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 18px; margin-bottom: clamp(40px, 6vw, 70px); border-bottom: 1px solid var(--line-light); } .section--dark .section__head { border-bottom-color: var(--line-dark); } .section__index { color: var(--olive); } .section__label { letter-spacing: 0.32em; } .reveal-line { display: block; overflow: hidden; } .reveal-line > span, .reveal-line > em { display: inline-block; transform: translateY(120%); } .reveal-fade { opacity: 0; transform: translateY(36px); } .h2 { font-size: clamp(2.2rem, 5.5vw, 5rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: clamp(50px, 7vw, 90px); } /* arrow link */ .arrow-link { display: inline-flex; align-items: center; gap: 12px; font-size: 0.92rem; font-weight: 600; margin-top: clamp(28px, 4vw, 48px); position: relative; width: fit-content; } .arrow-link::after { content: ""; position: absolute; bottom: -6px; inset-inline-start: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-expo); } .arrow-link:hover::after { transform: scaleX(1); transform-origin: left; } .arrow-link i { font-style: normal; transition: transform 0.4s var(--ease-out); } .arrow-link:hover i { transform: translateX(6px); } .is-rtl .arrow-link:hover i { transform: translateX(-6px); } .is-rtl .arrow-link i { transform: scaleX(-1); } /* generic photo */ .photo { overflow: hidden; position: relative; border-radius: 2px; } .photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .photo--parallax img { height: 124%; position: absolute; inset: -12% 0; } /* ============================================================ PAGE HERO (inner pages) ============================================================ */ .page-hero { padding: calc(110px + 6vh) var(--pad) clamp(50px, 8vh, 90px); background: var(--bg); } .page-hero__label { color: var(--olive); margin-bottom: 22px; } .page-hero__title { font-size: clamp(2.8rem, 8.5vw, 7.5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.025em; color: var(--text-strong); } .page-hero__title em { font-style: normal; color: var(--olive); } .page-hero__sub { margin-top: clamp(22px, 3vw, 36px); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 300; color: var(--text-muted); max-width: 52ch; line-height: 1.65; } .page-hero__media { margin-top: clamp(40px, 6vh, 70px); aspect-ratio: 21 / 9; min-height: 260px; } @media (max-width: 600px) { .page-hero__media { aspect-ratio: 4 / 3; min-height: 0; } } /* ============================================================ HOME HERO — video ============================================================ */ .hero { min-height: 100vh; min-height: 100svh; position: relative; background: var(--navy-deep); color: var(--cream); display: flex; align-items: flex-end; overflow: hidden; } .hero__media { position: absolute; inset: 0; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.05); transform: scale(1.06); } .hero__grad { position: absolute; inset: 0; background: linear-gradient(to top, var(--navy-deep) 2%, rgba(2, 26, 44, 0.55) 38%, rgba(2, 26, 44, 0.35) 100%); } .hero__inner { position: relative; width: 100%; padding: 0 var(--pad) clamp(48px, 8vh, 90px); } .hero__tag { color: var(--beige); margin-bottom: clamp(18px, 3vh, 34px); display: block; } .hero__title { font-size: clamp(3rem, 10vw, 9rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.025em; } .hero__line { display: block; overflow: hidden; } .hero__line > span { display: inline-block; transform: translateY(115%); } .hero__line--accent { color: var(--beige); } .hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: clamp(8px, 1.6vh, 18px); gap: 30px; } .hero__sub { font-size: clamp(0.95rem, 1.4vw, 1.15rem); font-weight: 300; line-height: 1.6; color: rgba(242, 237, 227, 0.82); max-width: 46ch; } .hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--beige); } .hero__scroll-text { font-size: 0.6rem; letter-spacing: 0.3em; writing-mode: vertical-rl; } .hero__scroll-bar { width: 1px; height: 56px; background: rgba(201, 188, 168, 0.25); position: relative; overflow: hidden; } .hero__scroll-bar i { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--beige); animation: scrollHint 1.8s var(--ease-expo) infinite; } @keyframes scrollHint { 0% { top: -100%; } 55% { top: 0; } 100% { top: 100%; } } /* ============================================================ DESCENT HERO — surface villa → underground (scroll-driven) ============================================================ */ .descent { position: relative; height: 500vh; background: var(--soil); } .descent__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--soil); } .descent__world { position: absolute; inset: 0; } .descent__surface { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; } #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .descent__surface::before { content: none; position: absolute; top: 8%; left: 36%; width: 58%; height: 24%; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 16% 56%, rgba(226,232,240,0.28) 0 16%, rgba(226,232,240,0.12) 26%, transparent 43%), radial-gradient(ellipse at 34% 48%, rgba(238,242,246,0.32) 0 18%, rgba(238,242,246,0.13) 29%, transparent 46%), radial-gradient(ellipse at 55% 60%, rgba(220,226,236,0.24) 0 15%, rgba(220,226,236,0.10) 26%, transparent 44%), linear-gradient(105deg, transparent 0 20%, rgba(238,242,246,0.16) 34%, transparent 56%); filter: blur(0.7px); opacity: 0.54; mix-blend-mode: screen; transform: translate3d(0, 0, 0); animation: cloudDrift 46s linear infinite alternate; } .descent__surface::after { content: none; position: absolute; top: 19%; left: 58%; width: 36%; height: 15%; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 20% 62%, rgba(232,236,244,0.22) 0 16%, rgba(232,236,244,0.09) 26%, transparent 42%), radial-gradient(ellipse at 48% 46%, rgba(241,244,248,0.26) 0 19%, rgba(241,244,248,0.10) 30%, transparent 48%), radial-gradient(ellipse at 76% 58%, rgba(226,232,240,0.18) 0 15%, rgba(226,232,240,0.08) 26%, transparent 42%); filter: blur(0.5px); opacity: 0.46; mix-blend-mode: screen; animation: cloudDriftSmall 58s linear infinite alternate; } .descent__media { position: relative; z-index: 0; height: 100%; will-change: transform; --hero-wash: 1; } .descent__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* drone flythrough frame stack — all frames share the same box; JS cross-fades and slow-pushes them on scroll so adjacent frames blend into one continuous aerial move */ .descent__frames { position: absolute; inset: 0; overflow: hidden; background: #0d0a07; } .descent__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; will-change: opacity, transform; transform: scale(1.14); transform-origin: 50% 46%; backface-visibility: hidden; } .descent__frame:first-child { opacity: 1; } /* video hero — desktop/mobile sources swap at 900px */ .descent__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .descent__video--mobile { display: none; } /* controlled navy gradient — ONLY the left/text side is darkened so the villa render stays vivid, clean and realistic on the right. No full-frame wash. */ .descent__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--hero-wash); background: linear-gradient(95deg, rgba(2,26,44,0.70) 0%, rgba(2,26,44,0.34) 22%, rgba(2,26,44,0.06) 44%, transparent 60%); } /* Keep the hero image clean; the animated duplicate layer caused visual ghosting. */ .descent__leaves { display: none; } /* bird flocks drifting across the upper sky */ .descent__birds { position: absolute; top: 6%; left: 0; width: 100%; height: 34%; overflow: hidden; z-index: 3; pointer-events: none; } .descent__birds .flock { position: absolute; top: 0; left: 0; width: 180px; height: 56px; opacity: 0.72; filter: drop-shadow(0 1px 2px rgba(242,237,227,0.12)); animation-timing-function: linear; animation-iteration-count: infinite; } .descent__birds .flock--near { animation-name: flockDriftNear; animation-duration: 30s; } .descent__birds .flock--mid { width: 140px; height: 46px; opacity: 0.52; transform: scale(0.78); animation-name: flockDriftMid; animation-duration: 44s; animation-delay: -15s; } .descent__birds .flock--far { width: 110px; height: 36px; opacity: 0.38; transform: scale(0.58); animation-name: flockDriftFar; animation-duration: 58s; animation-delay: -28s; } .descent__birds .bird { position: absolute; width: 22px; height: 13px; overflow: visible; transform-box: fill-box; transform-origin: 50% 35%; animation: wingFlap 0.7s ease-in-out infinite; animation-delay: var(--f); } .descent__birds .bird path { fill: none; stroke: rgba(5, 21, 32, 0.78); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } @keyframes wingFlap { 0%, 100% { transform: translate(var(--x), var(--y)) scaleY(1); } 50% { transform: translate(var(--x), var(--y)) scaleY(0.46); } } @keyframes flockDriftNear { 0% { transform: translate(92vw, 11vh) scale(1); } 100% { transform: translate(-24vw, 3vh) scale(1); } } @keyframes flockDriftMid { 0% { transform: translate(104vw, 2vh) scale(0.78); } 100% { transform: translate(-22vw, 9vh) scale(0.78); } } @keyframes flockDriftFar { 0% { transform: translate(72vw, 0) scale(0.58); } 100% { transform: translate(-18vw, 5vh) scale(0.58); } } @keyframes cloudDrift { 0% { transform: translate3d(-1vw, 0, 0); } 100% { transform: translate3d(1vw, -0.2vh, 0); } } @keyframes cloudDriftSmall { 0% { transform: translate3d(0.6vw, 0, 0); } 100% { transform: translate3d(-0.8vw, -0.15vh, 0); } } /* the image already carries sky→villa→roots→soil; veil only sweetens the very bottom so the photo's soil dissolves exactly into the foundation band */ .descent__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; /* video → toprak: alt kenar düz çizgi olarak bitmesin; çok kademeli yumuşak bir gradyanla soil tonuna eriyerek geçsin */ background: linear-gradient(to bottom, rgba(2,26,44,0.16) 0%, transparent 12%, transparent 74%, rgba(2,26,44,0.30) 86%, rgba(2,26,44,0.70) 95%, var(--soil) 100%); } /* dark mode: the hero wash gradients are hardcoded bright navy (rgba(2,26,44)) which keeps the cool drone frames looking blue. Deepen toward near-black so dark mode reads dark, not navy. */ :root[data-theme="dark"] .descent__media::after { background: linear-gradient(95deg, rgba(5,10,15,0.80) 0%, rgba(5,10,15,0.42) 22%, rgba(5,10,15,0.08) 44%, transparent 60%); } :root[data-theme="dark"] .descent__veil { background: linear-gradient(to bottom, rgba(5,10,15,0.18) 0%, transparent 12%, transparent 74%, rgba(5,10,15,0.32) 86%, rgba(5,10,15,0.72) 95%, var(--soil) 100%); } /* EARTH — deep-soil band hosting the engineered foundation section. Flows directly under the hero image; same soil tone → seamless handoff. */ .descent__earth { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(26px, 4.5vh, 54px); padding: clamp(40px, 7vh, 96px) 0 clamp(56px, 9vh, 120px); overflow: hidden; background: var(--soil); isolation: isolate; } /* layperson explainer above the drawing */ .found-info { max-width: 640px; text-align: center; color: var(--cream); padding-inline: var(--pad); } .found-info__label { display: block; color: var(--olive); font-size: 0.7rem; letter-spacing: 0.28em; margin-bottom: 14px; } .found-info__title { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 300; letter-spacing: -0.02em; margin-bottom: 16px; } .found-info__text { font-size: clamp(0.95rem, 1.3vw, 1.08rem); line-height: 1.72; color: rgba(242,237,227,0.72); } .found-info__hint { display: block; margin-top: 22px; color: var(--olive); font-size: 0.62rem; letter-spacing: 0.26em; } /* big, proportional foundation drawing */ .descent__foundation { position: relative; width: auto; align-self: stretch; margin: 0; z-index: 2; pointer-events: auto; will-change: transform, opacity; } /* 360° panorama viewer — full-bleed, edge to edge, no side gaps */ .descent__foundation .pano { width: 100%; height: clamp(420px, 70vh, 820px); overflow: hidden; background: #0d0a07; } /* drag-to-explore hint overlay */ .pano-hint { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; color: #fff; transition: opacity 0.8s ease; } .pano-hint.is-gone { opacity: 0; } .pano-hint__ring { width: 80px; height: 80px; border: 1.5px solid rgba(255,255,255,0.75); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: panoRingPulse 2.4s ease-in-out infinite; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)); } .pano-hint__ring svg { width: 48px; height: 48px; color: #fff; } .pano-hint__label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.55); } @keyframes panoRingPulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.1); opacity: 1; } } /* panorama thumbnail cover card */ .pano-cover { position: relative; width: 100%; border-radius: 4px; overflow: hidden; aspect-ratio: 16/9; cursor: pointer; } .pano-cover__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .pano-cover:hover .pano-cover__img { transform: scale(1.04); } .pano-cover__overlay { position: absolute; inset: 0; background: rgba(5,12,22,0.32); display: flex; align-items: flex-end; justify-content: space-between; padding: clamp(16px, 3vw, 28px); } .pano-cover__label { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; color: rgba(255,255,255,0.9); letter-spacing: 0.2em; text-transform: uppercase; background: rgba(5,15,25,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); } .pano-cover__label svg { width: 16px; height: 16px; flex-shrink: 0; } .pano-cover__btn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .pano-cover__btn:hover { background: rgba(255,255,255,0.22); border-color: #fff; transform: scale(1.08); } .pano-cover__btn svg { width: 22px; height: 22px; } .descent__foundation .pano .pnlm-load-box { background: rgba(13,10,7,0.9); } @media (max-width: 900px) { .descent__foundation .pano { height: clamp(460px, 74vh, 720px); } } /* cursor-following explainer tooltip */ .found-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 264px; background: rgba(13,10,7,0.94); border: 1px solid rgba(201,188,168,0.26); padding: 12px 15px; border-radius: 11px; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 12px 40px rgba(0,0,0,0.5); } .found-tip.-show { opacity: 1; transform: translateY(0); } .found-tip__t { display: block; color: var(--beige); font-size: 0.84rem; font-weight: 500; margin-bottom: 5px; } .found-tip__d { display: block; color: rgba(242,237,227,0.76); font-size: 0.77rem; line-height: 1.55; } /* floor-plan drawing primitives (used by the interactive plan section) */ .bp-axis { stroke: var(--olive); stroke-width: 1; opacity: 0.3; } .bp-faint { stroke-width: 1; opacity: 0.4; } .bp-main { stroke-width: 1.8; opacity: 0.74; } .bp-thin { stroke-width: 1; opacity: 0.42; } .bp-dim { stroke: var(--beige); stroke-width: 1; opacity: 0.58; } /* surface title — kept legible over the villa with a scrim + light ink */ .descent__intro { position: absolute; left: 0; bottom: 0; z-index: 5; width: 100%; padding: 0 var(--pad) clamp(96px, 15vh, 170px); color: var(--cream); isolation: isolate; pointer-events: none; /* title overlay must not block hover on the foundation drawing below */ } .descent__intro::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -10%; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(2,26,44,0.9) 0%, rgba(2,26,44,0.55) 38%, rgba(2,26,44,0.12) 72%, transparent 100%); } :root[data-theme="dark"] .descent__intro::before { background: linear-gradient(to top, rgba(5,8,10,0.92) 0%, rgba(5,8,10,0.55) 38%, rgba(5,8,10,0.12) 72%, transparent 100%); } .descent__intro .hero__title { color: var(--cream); text-shadow: 0 2px 34px rgba(2,26,44,0.6); } .descent__intro .hero__line--accent { color: var(--beige); } /* ============================================================ VILLA FLOOR PLAN — interactive ============================================================ */ .plan { position: relative; } /* plan continues the soil colour where the earth band ends — no navy clash */ .plan.section--dark { background: var(--soil); } .plan__wrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 4vw, 70px); align-items: start; margin-top: clamp(28px, 4vw, 52px); } .plan__draw { position: relative; } .plan__scale { color: var(--olive); letter-spacing: 0.2em; margin-bottom: 16px; } .plan__hint { color: var(--olive); opacity: 0.7; margin-top: 18px; letter-spacing: 0.18em; font-size: 0.62rem; } .plan-svg { width: 100%; height: auto; display: block; background: linear-gradient(rgba(123,118,96,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(123,118,96,0.07) 1px, transparent 1px); background-size: 40px 40px; } .plan-svg__a { fill: var(--olive); font-family: var(--font-mono); font-size: 18px; } .plan-svg .rno text { fill: var(--beige); font-family: var(--font-mono); font-size: 15px; text-anchor: middle; dominant-baseline: central; } .plan-svg .rno circle { fill: var(--navy-deep); transition: fill 0.3s; } .plan-svg .plan-room { cursor: none; } .plan-svg .plan-room .hit { fill: transparent; pointer-events: all; transition: fill 0.35s; } .plan-svg .plan-room.-on .hit { fill: rgba(201, 188, 168, 0.12); } .plan-svg .plan-room.-on .rno circle { fill: var(--beige); } .plan-svg .plan-room.-on .rno text { fill: var(--navy); } .plan__legend-title { color: var(--olive); letter-spacing: 0.2em; padding-bottom: 16px; border-bottom: 1px solid var(--line-dark); } .plan__legend ul { list-style: none; } .plan__legend li { display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); cursor: pointer; transition: padding-inline-start 0.4s var(--ease-expo); } .plan__legend li:hover, .plan__legend li.-on { padding-inline-start: 8px; } .plan__no { color: var(--olive); font-size: 0.68rem; } .plan__rn { color: var(--cream); font-size: 1rem; font-weight: 300; transition: color 0.3s; } .plan__legend li:hover .plan__rn, .plan__legend li.-on .plan__rn { color: var(--beige); } .plan__legend em { font-style: normal; font-family: var(--font-mono); font-size: 0.7rem; color: rgba(242,237,227,0.5); } .plan__total { margin-top: 18px; color: var(--olive); letter-spacing: 0.16em; font-size: 0.66rem; } .plan__total em { font-style: normal; color: var(--beige); margin-inline-start: 6px; } /* cursor-following room label */ .plan-tip { position: fixed; top: 0; left: 0; z-index: 600; pointer-events: none; background: var(--beige); color: var(--navy); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; padding: 6px 11px; border-radius: 3px; white-space: nowrap; opacity: 0; transform: translate(16px, -50%) scale(0.94); transform-origin: left center; transition: opacity 0.2s, transform 0.28s var(--ease-out); } .is-rtl .plan-tip { transform: translate(calc(-100% - 16px), -50%) scale(0.94); transform-origin: right center; } .plan-tip.-show { opacity: 1; transform: translate(18px, -50%) scale(1); } .is-rtl .plan-tip.-show { transform: translate(calc(-100% - 18px), -50%) scale(1); } /* clickable rooms → render modal */ .plan-svg .plan-room .hit { cursor: pointer; } /* schedule presentation: net / gross + clickable vs informational rows */ .plan__legend li.-click { cursor: pointer; } .plan__legend li.-click .plan__rn::after { content: "›"; margin-inline-start: 8px; color: var(--olive); opacity: 0; transform: translateX(-4px); transition: opacity 0.3s, transform 0.3s; display: inline-block; } .plan__legend li.-click:hover .plan__rn::after, .plan__legend li.-click.-on .plan__rn::after { opacity: 1; transform: translateX(0); } .plan__legend li.-static { cursor: default; opacity: 0.6; } .plan__legend li.-static:hover { padding-inline-start: 0; } .plan__areas { margin-top: 20px; display: grid; gap: 8px; } .plan__area-row { display: flex; justify-content: space-between; align-items: baseline; color: var(--olive); letter-spacing: 0.14em; font-size: 0.66rem; padding-top: 12px; border-top: 1px solid var(--line-dark); } .plan__area-row:first-child { border-top: none; padding-top: 0; } .plan__area-row em { font-style: normal; color: var(--beige); font-size: 0.92rem; letter-spacing: 0.04em; } .plan__legend-note { margin-top: 16px; color: var(--olive); opacity: 0.7; font-size: 0.6rem; letter-spacing: 0.16em; } /* ============================================================ ROOM RENDER — hover preview (image only) + click lightbox (image only) ============================================================ */ /* desktop hover preview: just the render image, follows the cursor */ .roompv { position: fixed; top: 0; left: 0; z-index: 650; pointer-events: none; width: clamp(260px, 26vw, 400px); aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; border: 1px solid rgba(201,188,168,0.22); background: var(--navy-deep); box-shadow: 0 24px 70px rgba(0,0,0,0.5); opacity: 0; transform: scale(0.96); transform-origin: top left; transition: opacity 0.22s var(--ease-out), transform 0.28s var(--ease-out); } .roompv.-show { opacity: 1; transform: scale(1); } .roompv img { width: 100%; height: 100%; object-fit: cover; display: block; } /* click lightbox: enlarged render image, no text panel */ .roomx { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); visibility: hidden; opacity: 0; transition: opacity 0.4s var(--ease-out), visibility 0s 0.4s; } .roomx.-open { visibility: visible; opacity: 1; transition: opacity 0.4s var(--ease-out); } .roomx__overlay { position: absolute; inset: 0; background: rgba(2,12,22,0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .roomx__panel { position: relative; z-index: 1; width: min(1080px, 100%); max-height: 88vh; overflow: hidden; background: var(--navy-deep); border: 1px solid rgba(201,188,168,0.18); border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6); transform: translateY(24px) scale(0.98); opacity: 0; transition: transform 0.5s var(--ease-expo), opacity 0.5s var(--ease-out); } .roomx.-open .roomx__panel { transform: translateY(0) scale(1); opacity: 1; } .roomx__media { position: relative; background: var(--navy-deep); } .roomx__media img { width: 100%; max-height: 88vh; object-fit: contain; display: block; } .roomx__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(201,188,168,0.26); background: rgba(2,26,44,0.55); color: var(--cream); cursor: pointer; transition: background 0.25s, transform 0.25s, border-color 0.25s; } .roomx__close:hover { background: var(--beige); color: var(--navy); border-color: var(--beige); transform: rotate(90deg); } body.roomx-open { overflow: hidden; } @media (max-width: 760px) { .roomx { padding: 16px; } .roomx__panel { width: 100%; } .roomx__media img { max-height: 80vh; } } /* ============================================================ MARQUEE ============================================================ */ .marquee { background: var(--beige); color: var(--navy); padding: 20px 0; overflow: hidden; } .marquee__track { display: flex; align-items: center; gap: 48px; width: max-content; will-change: transform; } .marquee__track span { font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: 0.16em; white-space: nowrap; } .marquee__track i { font-style: normal; color: var(--olive); font-size: 0.9rem; } /* ============================================================ HOME — intro / statement ============================================================ */ .statement { font-size: clamp(1.5rem, 3.2vw, 2.8rem); font-weight: 300; line-height: 1.38; letter-spacing: -0.01em; max-width: 94%; } .statement .w { display: inline-block; opacity: 0.12; transform: translateY(0.2em); transition: opacity 0.5s, transform 0.5s var(--ease-out); } .statement .w.-on { opacity: 1; transform: translateY(0); } .img-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); margin-top: clamp(50px, 8vw, 100px); align-items: start; } .img-strip .photo { aspect-ratio: 4 / 3; } .about__stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(60px, 9vw, 110px); border-top: 1px solid var(--line-light); } .stat { padding: clamp(24px, 3vw, 44px) clamp(12px, 2vw, 32px); border-inline-end: 1px solid var(--line-light); } .stat:last-child { border-inline-end: 0; } .stat__num { display: block; font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 300; color: var(--text-strong); line-height: 1.1; } .stat__label { color: var(--olive); display: block; margin-top: 10px; } /* ============================================================ SERVICE CARDS (home preview) ============================================================ */ .svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 30px); } .svc-card { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; isolation: isolate; cursor: pointer; } /* 6 uniform cards in a 3×2 grid */ .svc-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out), filter 0.5s; filter: saturate(0.65); } .svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(2, 26, 44, 0.88) 0%, rgba(2, 26, 44, 0.25) 55%, rgba(2, 26, 44, 0.15) 100%); transition: background 0.5s; } .svc-card:hover img { transform: scale(1.06); filter: saturate(0.9); } .svc-card__body { padding: clamp(20px, 2.4vw, 34px); color: var(--cream); width: 100%; } .svc-card__num { color: var(--beige); display: block; margin-bottom: 10px; } .svc-card__name { font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 400; margin-bottom: 10px; } .svc-card__desc { font-size: 0.88rem; font-weight: 300; line-height: 1.6; color: rgba(242, 237, 227, 0.75); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--ease-out), opacity 0.5s; } .svc-card:hover .svc-card__desc { max-height: 120px; opacity: 1; } /* ============================================================ BANNER (Bord Kim on home) ============================================================ */ .banner { position: relative; overflow: hidden; min-height: 70vh; display: flex; align-items: center; color: var(--cream); } .banner .photo--parallax { position: absolute; inset: 0; border-radius: 0; } .banner .photo--parallax img { filter: saturate(0.55) brightness(0.85); } .banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to var(--grad-dir, right), rgba(2, 26, 44, 0.92) 15%, rgba(2, 26, 44, 0.4) 70%, rgba(2, 26, 44, 0.25)); } .is-rtl .banner { --grad-dir: left; } .banner__content { position: relative; z-index: 2; padding: clamp(70px, 10vh, 120px) var(--pad); max-width: 720px; } .banner__badge { display: inline-block; background: var(--beige); color: var(--navy); padding: 9px 16px; letter-spacing: 0.26em; font-size: 0.62rem; margin-bottom: 26px; } .banner__title { font-size: clamp(2rem, 4.6vw, 4rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 20px; } .banner__text { font-size: 1.02rem; font-weight: 300; line-height: 1.7; color: rgba(242, 237, 227, 0.85); max-width: 48ch; } /* ============================================================ PROJECT GRID ============================================================ */ .projects__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); } .project:nth-child(even) { margin-top: clamp(40px, 7vw, 110px); } .projects__grid--flat .project:nth-child(even) { margin-top: 0; } .project__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 2px; position: relative; } .project__media img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; filter: saturate(0.7); transition: transform 0.8s var(--ease-out), filter 0.5s; will-change: transform; } .project:hover .project__media img { scale: 1.05; filter: saturate(1); } .project__info { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; gap: 16px; } .project__info h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 400; } .project__info .mono { color: var(--olive); font-size: 0.62rem; } /* ============================================================ ABOUT PAGE ============================================================ */ .values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); } .value { border: 1px solid var(--line-dark); border-radius: 2px; padding: clamp(26px, 3.4vw, 48px); transition: background 0.5s, transform 0.5s var(--ease-out); } .value:hover { background: rgba(201, 188, 168, 0.06); transform: translateY(-6px); } .value__num { color: var(--olive); display: block; margin-bottom: clamp(30px, 5vw, 70px); } .value h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 400; margin-bottom: 14px; } .value p { font-size: 0.95rem; font-weight: 300; line-height: 1.7; color: rgba(242, 237, 227, 0.65); } .split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 100px); align-items: center; } .split--rev { grid-template-columns: 1.1fr 1fr; } .split__media { aspect-ratio: 4 / 5; } .split--wide .split__media { aspect-ratio: 4 / 3; } .split__title { font-size: clamp(1.9rem, 4.2vw, 3.6rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; margin-bottom: clamp(20px, 3vw, 36px); } .split__text { font-size: 1.02rem; line-height: 1.75; color: var(--text-muted); max-width: 54ch; } .section--dark .split__text { color: rgba(242, 237, 227, 0.7); } .split__cols { display: grid; gap: 22px; } /* ============================================================ SERVICES PAGE — alternating blocks ============================================================ */ .svc-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 90px); align-items: center; padding: clamp(40px, 6vh, 80px) 0; border-bottom: 1px solid var(--line-light); } .svc-block:last-child { border-bottom: 0; } .svc-block__media { aspect-ratio: 4 / 3; } .svc-block:nth-child(even) .svc-block__media { order: 2; } .is-rtl .svc-block:nth-child(even) .svc-block__media { order: 0; } .svc-block__num { color: var(--olive); display: block; margin-bottom: 16px; } .svc-block__name { font-size: clamp(1.6rem, 3.2vw, 2.8rem); font-weight: 300; letter-spacing: -0.01em; margin-bottom: 18px; color: var(--text-strong); } .svc-block__desc { font-size: 1.02rem; line-height: 1.75; color: var(--text-muted); max-width: 52ch; } /* process */ .process__steps { border-top: 1px solid var(--line-dark); } .step { display: grid; grid-template-columns: 140px 1fr; gap: clamp(20px, 4vw, 70px); padding: clamp(32px, 4.5vw, 56px) 0; border-bottom: 1px solid var(--line-dark); } .step__num { font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--olive); letter-spacing: 0.1em; } .step__body h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 400; margin-bottom: 12px; } .step__body p { font-size: 0.98rem; line-height: 1.7; color: rgba(242, 237, 227, 0.62); font-weight: 300; max-width: 56ch; } /* ============================================================ BORD KIM PAGE ============================================================ */ .bk-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 32px); } .bk-cat { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; isolation: isolate; } .bk-cat img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6); transition: transform 0.9s var(--ease-out); } .bk-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(2, 26, 44, 0.9), rgba(2, 26, 44, 0.2) 60%); } .bk-cat:hover img { transform: scale(1.05); } .bk-cat__body { padding: clamp(20px, 2.6vw, 36px); color: var(--cream); } .bk-cat__body h3 { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 400; margin-bottom: 8px; } .bk-cat__body p { font-size: 0.9rem; font-weight: 300; color: rgba(242, 237, 227, 0.75); line-height: 1.6; } .bk-why { list-style: none; } .bk-why li { display: flex; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line-light); font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 300; } .bk-why .mono { color: var(--olive); } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; } .form__title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 300; margin-bottom: clamp(26px, 3vw, 40px); } .field { position: relative; margin-bottom: 8px; } .field label { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: -6px; } .field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-light); padding: 20px 0 14px; font: inherit; color: var(--text); font-size: 1rem; resize: none; outline: none; transition: border-color 0.4s; } .field input:focus, .field textarea:focus { border-bottom-color: var(--text-strong); } .field input::placeholder, .field textarea::placeholder { color: var(--text-place); font-weight: 300; } .field:focus-within label { color: var(--text-strong); } .form__submit { margin-top: 30px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; border: 1px solid var(--text-strong); border-radius: 100px; padding: 16px 44px; color: var(--text-strong); position: relative; overflow: hidden; isolation: isolate; transition: color 0.4s; } .form__submit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--text-strong); transform: translateY(101%); transition: transform 0.5s var(--ease-expo); } .form__submit:hover { color: var(--bg); } .form__submit:hover::before { transform: translateY(0); } .contact-info .label { display: block; color: var(--olive); margin-bottom: 10px; margin-top: 34px; } .contact-info .label:first-child { margin-top: 0; } .contact-info a, .contact-info p { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 300; color: var(--text); } .contact-info a { position: relative; width: fit-content; display: inline-block; } .contact-info a::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -3px; width: 100%; height: 1px; background: var(--text-strong); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-expo); } .contact-info a:hover::after { transform: scaleX(1); transform-origin: left; } .map-wrap { margin-top: clamp(60px, 9vh, 100px); } .map-wrap iframe { width: 100%; height: clamp(320px, 50vh, 520px); border: 0; border-radius: 2px; filter: grayscale(1) sepia(0.14) contrast(0.96); } /* ============================================================ CTA + FOOTER (shared) ============================================================ */ .cta { padding: clamp(100px, 16vh, 190px) var(--pad) clamp(60px, 8vh, 100px); background: var(--navy-deep); color: var(--cream); } .cta__label { color: var(--olive); margin-bottom: 24px; } .cta__big { display: block; width: fit-content; } .cta__big-line { display: block; overflow: hidden; } .cta__big-line > span { display: inline-block; transform: translateY(115%); font-size: clamp(2.8rem, 10vw, 9rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.03em; transition: color 0.4s; } .cta__big i { font-style: normal; color: var(--beige); } .cta__big:hover span { color: var(--beige); } .footer { background: var(--navy-deep); color: var(--cream); padding: 0 var(--pad) 32px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(30px, 5vw, 80px); padding: clamp(50px, 7vh, 80px) 0; border-top: 1px solid var(--line-dark); } .footer__brand .logo-mark { height: 64px; width: auto; color: var(--olive); margin-bottom: 22px; } .footer__desc { font-size: 0.94rem; font-weight: 300; line-height: 1.7; color: rgba(242, 237, 227, 0.55); max-width: 40ch; } .footer__col { display: flex; flex-direction: column; gap: 12px; } .footer__col .label { color: var(--olive); margin-bottom: 8px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; } .footer__col a, .footer__col p { font-size: 0.94rem; font-weight: 300; color: rgba(242, 237, 227, 0.78); width: fit-content; } .footer__col a { position: relative; transition: color 0.3s; } .footer__col a:hover { color: var(--beige); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line-dark); color: rgba(201, 188, 168, 0.55); } .footer__top { color: var(--beige); transition: color 0.3s; letter-spacing: 0.14em; } .footer__top:hover { color: var(--cream); } /* ============================================================ WHATSAPP BUTTON ============================================================ */ .wa-btn { position: fixed; bottom: 26px; inset-inline-end: 26px; z-index: 85; display: flex; align-items: center; gap: 0; background: var(--navy); color: var(--cream); border: 1px solid rgba(201, 188, 168, 0.25); border-radius: 100px; padding: 14px; box-shadow: 0 8px 30px rgba(2, 26, 44, 0.25); transition: gap 0.45s var(--ease-expo), padding 0.45s var(--ease-expo), background 0.4s, transform 0.4s var(--ease-out); } .wa-btn svg { width: 24px; height: 24px; flex-shrink: 0; } .wa-btn__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; white-space: nowrap; max-width: 0; overflow: hidden; transition: max-width 0.45s var(--ease-expo); } .wa-btn:hover { gap: 10px; padding: 14px 22px 14px 16px; background: var(--beige); color: var(--navy); border-color: var(--beige); transform: translateY(-3px); } .is-rtl .wa-btn:hover { padding: 14px 16px 14px 22px; } .wa-btn:hover .wa-btn__label { max-width: 220px; } /* ============================================================ BORD KIM — products & catalog ============================================================ */ .catalog-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3.4vw, 44px); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; border: 1px solid var(--text-strong); border-radius: 100px; padding: 15px 34px; color: var(--text-strong); position: relative; overflow: hidden; isolation: isolate; transition: color 0.4s; } .catalog-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--text-strong); transform: translateY(101%); transition: transform 0.5s var(--ease-expo); } .catalog-btn:hover { color: var(--bg); } .catalog-btn:hover::before { transform: translateY(0); } .catalog-btn svg { width: 16px; height: 16px; } .catalog-btn--light { border-color: var(--beige); color: var(--beige); } .catalog-btn--light::before { background: var(--beige); } .catalog-btn--light:hover { color: var(--navy); } /* product family showcase strip */ .bk-family { position: relative; overflow: hidden; background: #a9c4d4; } .bk-family__media { width: 100%; } .bk-family__media img { width: 100%; height: auto; display: block; } /* category block */ .pcat { padding: clamp(46px, 6.5vh, 78px) 0; border-bottom: 1px solid var(--line-dark); } .pcat:first-of-type { padding-top: 0; } .pcat:last-child { border-bottom: 0; padding-bottom: 0; } .pcat__head { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(20px, 4vw, 70px); margin-bottom: clamp(26px, 3.5vw, 46px); align-items: end; } .pcat__num { color: var(--olive); display: block; margin-bottom: 14px; } .pcat__title { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 300; letter-spacing: -0.01em; } .pcat__desc { font-size: 0.98rem; font-weight: 300; line-height: 1.7; color: rgba(242, 237, 227, 0.62); max-width: 56ch; } /* product grid + card */ .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); } .pcard { display: flex; flex-direction: column; border: 1px solid var(--line-dark); border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.015); transition: transform 0.5s var(--ease-out), border-color 0.4s, background 0.5s; } .pcard:hover { transform: translateY(-6px); border-color: rgba(201,188,168,0.42); background: rgba(201,188,168,0.05); } .pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(201,188,168,0.10), transparent 70%), var(--navy-deep); display: flex; align-items: center; justify-content: center; } .pcard__media img { height: 86%; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.4)); transition: transform 0.6s var(--ease-out); } .pcard:hover .pcard__media img { transform: translateY(-4px) scale(1.03); } .pcard__body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 11px; flex: 1; } .pcard__top { display: flex; align-items: center; gap: 10px; } .pcard__code { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--navy); background: var(--beige); padding: 3px 9px; border-radius: 3px; font-weight: 500; } .pcard__class { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--olive); border: 1px solid var(--line-dark); padding: 3px 8px; border-radius: 3px; } .pcard__name { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.25; color: var(--cream); } .pcard__desc { font-size: 0.85rem; font-weight: 300; line-height: 1.6; color: rgba(242,237,227,0.6); flex: 1; } .pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; } .pcard__tags span { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242,237,227,0.7); border: 1px solid var(--line-dark); padding: 4px 8px; border-radius: 100px; } .catalog-banner { background: var(--bg-soft); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; } .catalog-banner__title { font-size: clamp(1.9rem, 4vw, 3.4rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 16px; } .catalog-banner__text { font-size: 1rem; font-weight: 300; line-height: 1.7; color: var(--text-muted); max-width: 50ch; } .catalog-banner__media { aspect-ratio: 4 / 3; } /* ============================================================ RTL fine-tuning ============================================================ */ .is-rtl .hero__scroll-text { writing-mode: vertical-rl; } .is-rtl .nav__wordmark { letter-spacing: 0.18em; } /* latin brand stays */ /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .svc-cards { grid-template-columns: 1fr 1fr; } .values { grid-template-columns: 1fr; } .pgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .nav__links, .nav__cta { display: none; } .nav__burger { display: flex; } .nav__langs { display: none; } .split, .split--rev { grid-template-columns: 1fr; } .split__media { aspect-ratio: 16 / 10; } .svc-block { grid-template-columns: 1fr; } .svc-block:nth-child(even) .svc-block__media { order: 0; } .img-strip { grid-template-columns: 1fr 1fr; } .about__stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-inline-end: 0; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line-light); } .projects__grid { grid-template-columns: 1fr; } .project:nth-child(even) { margin-top: 0; } .bk-cats { grid-template-columns: 1fr; } .pcat__head { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .step { grid-template-columns: 60px 1fr; } .hero__bottom { flex-direction: column; align-items: flex-start; } .hero__scroll { display: none; } .footer__grid { grid-template-columns: 1fr; gap: 36px; } .plan__wrap { grid-template-columns: 1fr; gap: 30px; } .descent__video--desktop { display: none; } .descent__video--mobile { display: block; } } @media (max-width: 640px) { .svc-cards { grid-template-columns: 1fr; } .svc-card { aspect-ratio: 4 / 3 !important; } .wa-btn__label { display: none; } .pgrid { grid-template-columns: 1fr; } /* image strip stacks on phones, comfortable proportion */ .img-strip { grid-template-columns: 1fr; gap: 14px; margin-top: clamp(36px, 9vw, 60px); } .img-strip .photo { aspect-ratio: 3 / 2; } .about__stats { grid-template-columns: 1fr; } .stat { border-inline-end: 0; border-bottom: 1px solid var(--line-light); } .stat:last-child { border-bottom: 0; } .values { gap: 12px; } .bk-cats { gap: 12px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; } .menu__meta { gap: 30px; } .wa-btn { bottom: 18px; inset-inline-end: 18px; } /* floor plan drawing: thicker strokes for small screens */ .bp-main { stroke-width: 2.4; opacity: 0.8; } .bp-thin { stroke-width: 1.4; opacity: 0.5; } .bp-dim { stroke-width: 1.4; opacity: 0.62; } .bp-faint { stroke-width: 1.4; } } @media (max-width: 420px) { .nav { padding: 14px var(--pad); } .nav__brand .logo-mark { height: 30px; } .map-wrap iframe { height: 300px; } } /* MOBILE/TABLET: no pin/pan choreography — hero image then foundation stack naturally, so nothing overflows, squishes, or collides with the nav. */ @media (max-width: 900px) { .descent { height: 300vh; } .descent__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; } .descent__world { position: absolute; inset: 0; } .descent__surface { height: 100%; } .descent__veil { background: rgba(5, 15, 25, 0.28); } .descent__intro { top: 0; bottom: auto; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(76px, 16vw, 110px) var(--pad) clamp(20px, 5vw, 40px); } .descent__intro .hero__line { overflow: visible; } .descent__intro .hero__line > span { transform: none; } .descent__intro .hero__title { font-size: clamp(2.8rem, 11vw, 4.5rem); } .descent__intro .hero__tag { margin-bottom: clamp(8px, 2vw, 16px); } .descent__intro .hero__sub { font-size: clamp(0.9rem, 3.4vw, 1.05rem); } .descent__earth { padding: clamp(34px,8vw,64px) 0 clamp(48px,12vw,80px); gap: clamp(22px,6vw,40px); } .descent__foundation { width: 100%; } .found-info__text { font-size: clamp(0.92rem, 3.6vw, 1.05rem); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .descent { height: 100svh; } .descent__stage { position: relative; } .descent__foundation { transform: none !important; opacity: 1 !important; visibility: visible !important; } /* reduced-motion: no scroll choreography, so show hero text + wash statically */ .descent__media { --hero-wash: 1; } .descent__intro { opacity: 1 !important; visibility: visible !important; } } /* ============================================================ UX / a11y fixes — skip link, focus rings, room caption, form status ============================================================ */ /* skip-to-content link — hidden until focused */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--navy); color: #fff; font: 500 13px/1 'DM Mono', monospace; letter-spacing: .08em; text-decoration: none; transform: translateY(-160%); transition: transform .2s ease; } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--beige); outline-offset: 2px; } /* visible keyboard focus for interactive plan pieces + key controls */ .plan-room:focus-visible, .plan__legend li.-click:focus-visible, .fhit:focus-visible, .plan__ftab:focus-visible, .form__submit:focus-visible, .roomx__close:focus-visible { outline: 2px solid var(--beige); outline-offset: 2px; border-radius: 4px; } .plan-room:focus-visible .rno circle { stroke: var(--beige); stroke-width: 2; } .plan__legend li.-click { cursor: pointer; } /* room lightbox caption */ .roomx__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 14px; } .roomx__name { font-size: 1.05rem; font-weight: 500; color: #fff; } .roomx__area { font-size: 12px; letter-spacing: .12em; color: var(--beige); } /* contact form status line */ .form__status { margin-top: 14px; font-size: 12px; letter-spacing: .04em; line-height: 1.5; color: var(--text-muted); } .form__status.-err { color: #c0392b; } /* ---- Footer social icons (admin-managed via settings.json) ---- */ .footer__social { display:flex; gap:12px; margin-top:18px; } .footer__social a { display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid var(--line, rgba(255,255,255,.18)); border-radius:50%; color:inherit; opacity:.78; transition:opacity .2s, transform .2s, border-color .2s; } .footer__social a:hover { opacity:1; transform:translateY(-2px); } .footer__social svg { width:17px; height:17px; }