html {
scroll-behavior: smooth;
}
body {
background: #fff;
color: #1e1b19;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/*
clip, not hidden — hidden turns into a scroll container and
quietly kills position:sticky and ScrollTrigger pinning
*/
@supports (overflow-x: clip) {
body {
overflow-x: clip;
}
}
/*
LAYOUT SHELL — one side-padding token; anything that
must reach the screen edge simply opts out of .shell
*/
:root {
--pad: 6.25%;
/* floor-plan room palette (schematic fallback) */
--r-living: #f3e4d6;
--r-bed: #ead7c3;
--r-kitchen: #f7ecdf;
--r-wet: #dde4e4;
--r-util: #ece5da;
--r-hall: #f9f1e7;
--r-stair: #e4d9c9;
--r-terrace: #e0e7d1;
--r-garden: #c2d89e;
--r-park: #f2ece3;
--wall: #3a322c;
}
@media (max-width: 1023px) {
:root {
--pad: 28px;
}
}
@media (max-width: 520px) {
:root {
--pad: 20px;
}
}
.shell {
padding-inline: var(--pad);
}
/* brand mark */
.logo {
font-family: "Jost", sans-serif;
font-weight: 300;
letter-spacing: 0.34em;
}
/* triangle motif */
.tri {
width: 42px;
height: 40px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
margin-bottom: 12px;
}
.tri-down {
transform: rotate(180deg);
}
@media (max-width: 640px) {
.tri {
width: 28px;
height: 26px;
}
}
/* headline mask reveal */
.line-mask {
overflow: hidden;
display: block;
}
.line-mask > span {
display: block;
will-change: transform;
}
/* quick-contact rail, pinned to the screen edge */
.rail {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 40;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 0 8px 8px 0;
box-shadow: 0 4px 24px rgba(30, 27, 25, 0.14);
overflow: hidden;
}
.rail a {
display: grid;
place-items: center;
width: 48px;
height: 50px;
color: #6b6a68;
transition:
color 0.35s ease,
background-color 0.35s ease;
}
.rail a + a {
border-top: 1px solid rgba(30, 27, 25, 0.1);
}
.rail a:hover {
color: #1e1b19;
background: #f5f3f1;
}
@media (max-width: 640px) {
.rail {
/* display: none; */
}
}
/* misc */
.link-underline {
position: relative;
}
.link-underline::after {
content: "";
position: absolute;
inset-inline-start: 0;
bottom: -4px;
height: 1px;
width: 100%;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after {
transform: scaleX(1);
}
.reveal {
opacity: 0;
}
/*
nav: transparent at the very top, solid as soon as
the page scrolls (or the mobile menu is open)
*/
#nav.is-solid {
background: rgba(255, 255, 255, 1);
backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(30, 27, 25, 0.08);
}
#nav.is-solid a,
#nav.is-solid button {
color: #1e1b19;
}
#nav.is-solid a[href="#contact"] {
border-color: rgba(30, 27, 25, 0.28);
}
#nav.is-solid a[href="#contact"]:hover {
background: #1e1b19;
color: #fff;
}
:focus-visible {
outline: 2px solid #1e1b19;
outline-offset: 3px;
}
nav a {
font-size: 18px;
}
/* burger button */
#menuToggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: 0;
cursor: pointer;
z-index: 60;
}
.burger-line {
display: block;
width: 24px;
height: 2px;
background: currentColor;
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s ease;
}
#menuToggle.is-open .burger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
#menuToggle.is-open .burger-line:nth-child(2) {
opacity: 0;
}
#menuToggle.is-open .burger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 767px) {
#menuToggle {
display: flex;
}
}
/* mobile menu panel */
.mobile-menu {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 45;
background: #fff;
padding: 88px var(--pad) 32px;
transform: translateY(-105%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 24px 48px rgba(30, 27, 25, 0.16);
}
.mobile-menu.is-open {
transform: translateY(0);
}
.mobile-menu nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-menu nav a {
display: block;
padding: 14px 0;
font-size: 18px;
color: #1e1b19;
border-bottom: 1px solid rgba(30, 27, 25, 0.08);
}
.mobile-menu .mm-nav-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 22px;
}
.mobile-menu .mm-nav-actions a,
.mobile-menu .mm-nav-actions button {
display: block;
width: 100%;
text-align: center;
padding: 13px 20px;
font-size: 15px;
}
@media (min-width: 768px) {
.mobile-menu {
display: none;
}
}
/* SITE PLAN (interactive master plan + unit modal) */
/*
on phones the full-bleed plan gets too small to tap —
let it keep a usable width and scroll sideways instead
*/
#siteScroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
#siteWrap {
min-width: 860px;
}
}
.hotspot {
cursor: pointer;
}
.hotspot .hit {
fill: transparent;
stroke: transparent;
stroke-width: 6;
}
.hotspot:focus {
outline: none;
}
.hotspot:focus-visible .hit {
stroke: #8a6a58;
}
.badge-num circle {
fill: #1e1b19;
}
.badge-type circle {
fill: #8a6a58;
}
.badge text {
fill: #fff;
font-family: "Almarai", sans-serif;
font-weight: 800;
text-anchor: middle;
dominant-baseline: central;
}
#siteOverlay.has-img .badge {
display: none;
}
.room rect {
stroke: var(--wall);
stroke-width: 0.9;
vector-effect: non-scaling-stroke;
}
.room text {
font-family: "IBM Plex Sans Arabic", sans-serif;
fill: #6b5a4c;
text-anchor: middle;
dominant-baseline: central;
}
.plan-frame {
background: #fff;
}
/*
set by the img's onload, so a cloned frame inherits it and can
never flash the schematic mid-flight
*/
.plan-frame.has-plan .schematic {
display: none;
}
/*
GSAP owns every transform on these — never write one in CSS.
position/left/top are set INLINE by placePlan(): the Tailwind CDN
sheet loads after this block, so anything written here at class
specificity can be silently overridden by the frame's `relative`
*/
.detail-plan {
backface-visibility: hidden;
}
/*
on phones a full-width 110/176 card towers past the screen —
cap the plan artwork and centre it inside the card
*/
@media (max-width: 767px) {
#floorsGrid .plan-frame {
width: min(100%, 300px);
margin-inline: auto;
}
}
/*
ghost element used for the flip/rotate transition.
absolute (not fixed) so #panelBox's overflow:hidden clips the
mid-rotation sweep — a rotating box is much larger than its
resting footprint and used to spill outside the white card.
transition:none because the ghost is cloned from a card that
carries Tailwind's `transition duration-300`, which would fight
GSAP for ownership of `transform` on every frame.
*/
#ghost {
position: absolute;
z-index: 80;
pointer-events: none;
transform-origin: 50% 50%;
transition: none !important;
animation: none !important;
}
#ghost * {
transition: none !important;
}
.fnav {
font-variant-numeric: tabular-nums;
}
.tab-active {
background: #1e1b19;
color: #fff;
}
.no-scroll {
overflow: hidden;
}
/* GALLERY SLIDER (expanding panels) */
.panel {
flex-basis: 0;
flex-shrink: 1;
min-width: 24px;
}
.panel img {
will-change: transform;
}
.panel:focus-visible,
.nav-btn:focus-visible {
outline: 2px solid #8a6a58;
outline-offset: 3px;
}
/* SCATTER SCENE (pinned image reveal) */
.tile {
position: absolute;
width: var(--w);
aspect-ratio: var(--ar);
will-change: transform, clip-path, opacity;
overflow: hidden;
}
.tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/*
the copy plate sitting under the scatter — promoted to its own
layer so the depth push stays smooth while the tiles animate
*/
#scatterCopy {
will-change: transform, opacity, filter;
transform-origin: 50% 50%;
backface-visibility: hidden;
}
/*
background-attachment:fixed is broken on iOS/most mobile
browsers (the plate zooms and judders) — fall back to scroll
*/
@media (max-width: 1023px) {
.bg-fixed {
background-attachment: scroll !important;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.reveal {
opacity: 1 !important;
transform: none !important;
}
* {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* floor card */
.floor-card {
max-height: 80%;
}
/* floor card */
/* Footer */
.site-footer {
background: #7d7a76;
padding: 70px var(--pad) 24px;
color: #111;
}
.footer-main {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 60px;
align-items: start;
}
.footer-logo {
text-align: right;
justify-self: end;
}
.footer-logo img {
width: 160px;
height: auto;
display: block;
margin-right: 0;
margin-left: auto;
transform: translateX(150px);
}
.footer-menu {
display: flex;
flex-direction: column;
gap: 12px;
text-align: right;
}
.footer-menu a {
font-family: "Readex Pro", sans-serif;
color: #111;
font-size: 14px;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 12px;
text-align: right;
justify-self: start;
}
.footer-contact a {
font-family: "Readex Pro", sans-serif;
color: #111;
font-size: 14px;
}
.footer-newsletter {
text-align: right;
}
.newsletter-row {
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.35);
padding-bottom: 10px;
margin-bottom: 15px;
}
.newsletter-row input {
font-family: "Readex Pro", sans-serif;
background: none;
border: none;
width: 100%;
outline: none;
color: #111;
}
.newsletter-row input::placeholder {
color: rgba(17, 17, 17, 0.6);
}
.newsletter-row button {
background: none;
border: none;
cursor: pointer;
color: #111;
font-size: 18px;
line-height: 1;
}
.footer-newsletter p {
font-family: "Readex Pro", sans-serif;
font-size: 13px;
line-height: 1.9;
color: #222;
}
.footer-bottom {
margin-top: 50px;
padding-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.35);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.footer-social {
display: flex;
gap: 24px;
}
.footer-social a {
font-family: "Readex Pro", sans-serif;
color: #111;
font-size: 13px;
}
.footer-copy {
font-family: "Readex Pro", sans-serif;
font-size: 12px;
}
@media (max-width: 900px) {
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.footer-logo {
grid-column: 1 / -1;
text-align: center;
justify-self: stretch;
}
.footer-logo img {
margin-inline: auto;
transform: none; /* the desktop 150px nudge pushed it off-screen */
}
.footer-contact {
text-align: right;
}
}
@media (max-width: 560px) {
.footer-main {
grid-template-columns: 1fr;
}
.footer-contact {
text-align: right;
}
.site-footer {
padding-top: 48px;
}
.footer-bottom {
justify-content: center;
text-align: center;
}
}
/* end footer */
.paragraph-home-920 {
max-width: 920px;
}
.paragraph-home-820 {
max-width: 820px;
}
.paragraph-home-640 {
max-width: 640px;
}
.mm-actions {
padding-top: 32px;
}
/*
the h2 blow-up is for the page sections only — the unit modal
h2s (#typeTitle / #detailTitle) must keep their own scale
*/
@media (max-width: 1729px) and (min-width: 1081px) {
p {
font-size: 18px;
}
h2:not(#typeTitle):not(#detailTitle) {
font-size: 42px !important;
}
.mm-actions button {
font-size: 18px;
}
.gival-about {
align-items: start !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) !important;
}
.bm-title {
font-size: 32px !important;
}
}
@media (min-width: 768px) {
.only-phone {
display: none;
}
}
/*
BOOKING MODAL — "مرحبًا بك في إنمار"
Same component as home.css / about.css.
*/
.bm-overlay {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: rgba(30, 27, 25, 0.55);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.35s ease,
visibility 0.35s ease;
}
.bm-overlay.is-open {
opacity: 1;
visibility: visible;
}
.bm-modal {
position: relative;
width: 100%;
max-width: 620px;
max-height: calc(100svh - 48px);
overflow-y: auto;
background: #fff;
border-radius: 14px;
padding: 48px 44px 36px;
box-shadow: 0 32px 80px rgba(30, 27, 25, 0.35);
transform: translateY(26px) scale(0.98);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
font-family: "Readex Pro", sans-serif;
}
.bm-overlay.is-open .bm-modal {
transform: translateY(0) scale(1);
}
.bm-close {
position: absolute;
top: 18px;
inset-inline-end: 20px;
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: none;
border: 0;
cursor: pointer;
color: #1e1b19;
border-radius: 50%;
transition: background-color 0.25s ease;
}
.bm-close:hover {
background: #f5f3f1;
}
.bm-title {
text-align: center;
color: #a47865;
font-size: 30px;
font-weight: 600;
margin-bottom: 34px;
}
.bm-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.bm-field {
margin-bottom: 22px;
}
.bm-field label {
display: block;
font-size: 14px;
color: #1e1b19;
margin-bottom: 8px;
}
.bm-field label .bm-req {
color: #a47865;
}
.bm-input {
width: 100%;
border: 1px solid #d9d5d2;
border-radius: 8px;
background: #fff;
padding: 13px 16px;
font-family: "Readex Pro", sans-serif;
font-size: 15px;
color: #1e1b19;
outline: none;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.bm-input::placeholder {
color: #b3aeaa;
}
.bm-input:focus {
border-color: #a47865;
box-shadow: 0 0 0 3px rgba(164, 120, 101, 0.12);
}
.bm-phone-row {
display: flex;
gap: 12px;
}
.bm-cc {
position: relative;
flex: none;
}
.bm-cc-btn {
display: flex;
align-items: center;
gap: 10px;
height: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #d9d5d2;
border-radius: 8px;
background: #fff;
cursor: pointer;
font-family: "Readex Pro", sans-serif;
font-size: 14px;
color: #1e1b19;
transition: border-color 0.25s ease;
}
.bm-cc-btn:hover,
.bm-cc.is-open .bm-cc-btn {
border-color: #a47865;
}
.bm-cc-btn img {
width: 26px;
height: 18px;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(30, 27, 25, 0.08);
}
.bm-cc-chev {
display: grid;
place-items: center;
transition: transform 0.3s ease;
}
.bm-cc.is-open .bm-cc-chev {
transform: rotate(180deg);
}
.bm-cc-list {
position: absolute;
top: calc(100% + 6px);
inset-inline-start: 0;
min-width: 230px;
max-height: 240px;
overflow-y: auto;
background: #fff;
border: 1px solid #e3e0dd;
border-radius: 10px;
box-shadow: 0 18px 48px rgba(30, 27, 25, 0.18);
padding: 6px;
margin: 0;
list-style: none;
z-index: 5;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity 0.25s ease,
transform 0.25s ease,
visibility 0.25s ease;
}
.bm-cc.is-open .bm-cc-list {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bm-cc-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 7px;
font-size: 14px;
cursor: pointer;
}
.bm-cc-list li:hover {
background: #f5f0ee;
}
.bm-cc-list li img {
width: 24px;
height: 17px;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(30, 27, 25, 0.08);
}
.bm-cc-list li .bm-dial {
margin-inline-start: auto;
color: #6b6a68;
direction: ltr;
}
.bm-phone-row .bm-input {
flex: 1;
min-width: 0;
}
.bm-radios {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 4px;
}
.bm-radio {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: #1e1b19;
cursor: pointer;
width: fit-content;
}
.bm-radio input {
appearance: none;
width: 20px;
height: 20px;
border: 1.5px solid #b3aeaa;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0;
cursor: pointer;
transition: border-color 0.25s ease;
}
.bm-radio input::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: #1e1b19;
transform: scale(0);
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-radio input:checked {
border-color: #1e1b19;
}
.bm-radio input:checked::after {
transform: scale(1);
}
.bm-terms {
margin: 26px 0 22px;
font-size: 14px;
color: #1e1b19;
line-height: 1.9;
}
.bm-terms a {
font-weight: 700;
color: #1e1b19;
}
.bm-terms a:hover {
color: #a47865;
}
.bm-submit {
display: block;
width: 100%;
padding: 15px 20px;
border: 0;
border-radius: 8px;
font-family: "Readex Pro", sans-serif;
font-size: 16px;
cursor: pointer;
background: #1e1b19;
color: #fff;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.bm-submit:hover {
background: #a47865;
}
.bm-submit:disabled {
background: #e7e4e2;
color: #b3aeaa;
cursor: not-allowed;
}
.bm-login {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #1e1b19;
}
.bm-login a {
font-weight: 700;
color: #1e1b19;
}
.bm-login a:hover {
color: #a47865;
}
.bm-msg {
display: none;
margin-top: 16px;
text-align: center;
font-size: 14px;
color: #a47865;
}
.bm-msg.is-visible {
display: block;
}
body.bm-locked {
overflow: hidden;
}
@media (max-width: 560px) {
.bm-modal {
padding: 44px 22px 28px;
border-radius: 12px;
}
.bm-title {
font-size: 24px;
margin-bottom: 26px;
}
.bm-row {
grid-template-columns: 1fr;
gap: 0;
}
}
/* custoooom */
@media (min-width: 1081px) {
.gival-about-content {
padding-top:64px
}
}
@media (max-width: 1920px) {
.gival-about-content h2 {
font-size: 56px
}
}