html { color-scheme: only light !important; }
:root{
--black:#050505;--dark:#0a0a0a;--dark2:#111;
--gold:#b87333;--gold-light:#d4976a;--gold-dim:#8b5e34;
--white:#fff;--off-white:#f5f0e8;--muted:#888;
--t:0.35s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Montserrat',sans-serif;background:var(--black);color:var(--white);overflow-x:hidden;}
html[dir="rtl"] body{font-family:'Cairo','Montserrat',sans-serif;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:var(--black);}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px;}
/* Prevent dark-mode extensions from filtering logo/nav images */
.nav-logo img,
.nav-brand img,
.footer-brand img,
.contact-logo,
img[src*="logo"] {
filter: none !important;
-webkit-filter: none !important;
mix-blend-mode: normal !important;
isolation: isolate;
}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:0 5%;height:72px;
display:flex;align-items:center;justify-content:space-between;
background:rgba(5,5,5,0.96);backdrop-filter:blur(20px);
border-bottom:1px solid rgba(184,115,51,0.1);transition:var(--t);}
nav.scrolled{height:58px;background:rgba(5,5,5,0.98);}
.nav-brand{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700;letter-spacing:2.5px;
background:linear-gradient(135deg,var(--gold-dim),var(--gold),var(--gold-light));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
forced-color-adjust:none;color-scheme:dark;}
.nav-brand,.nav-brand *,.f-brand,.f-brand *{forced-color-adjust:none !important;color-scheme:dark !important;}
.nav-brand img,.f-brand img,.brand-logo-img{mix-blend-mode:normal !important;opacity:1 !important;isolation:isolate;}
.brand-logo-img{forced-color-adjust:none !important;color-scheme:dark !important;}
/* dark-mode filter override for logo removed — see bulletproof rule at end of file */
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-back{font-size:.65rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
color:var(--gold);border:1px solid rgba(184,115,51,0.35);padding:7px 16px;border-radius:2px;transition:var(--t);}
.nav-back:hover{background:rgba(184,115,51,0.1);}
/* LANG SWITCHER */
.lang-sw{display:flex;align-items:center;}
.lang-btn{background:none;border:1px solid rgba(184,115,51,0.3);color:var(--muted);
font-family:'Montserrat',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:1.5px;
text-transform:uppercase;padding:6px 11px;cursor:pointer;transition:var(--t);}
.lang-btn:first-child{border-radius:2px 0 0 2px;border-right:none;}
.lang-btn:last-child{border-radius:0 2px 2px 0;}
.lang-btn.active{background:var(--gold);color:var(--black);border-color:var(--gold);}
.lang-btn:hover:not(.active){color:var(--gold);border-color:var(--gold);}
/* HERO */
.fl-hero{position:relative;margin-top:72px;height:46vh;min-height:320px;
display:flex;align-items:flex-end;overflow:hidden;
background-color:#0a0a0a;
background-image:linear-gradient(135deg, rgba(5,5,5,0.45), rgba(10,8,4,0.85));
--banner-zoom: 110% auto;
--banner-pos: center 40%;
background-size: var(--banner-zoom);
background-position: var(--banner-pos);
background-repeat:no-repeat;
}
/* ============================================================
PER-FLOOR BANNER CONTROLS
Search "BANNER: Floor 4" (or any floor name) to jump to it.
Edit --banner-zoom → zoom (100%=no zoom, 110%=slight, 150%=more)
Edit --banner-pos → crop (center 0%=top, center 50%=mid, center 100%=bottom)
Edit height → banner height (uncomment to activate)
============================================================ */
/* BANNER: B1 Floor */
.fl-hero.floor-b1 {
--banner-zoom: 100% auto; /* Zoom */
--banner-pos: center 60%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: G Floor – Indoor Shops (?floor=g-indoor) */
.fl-hero.floor-g_indoor {
--banner-zoom: 95% auto; /* Zoom */
--banner-pos: center 50%; /* Crop position */
height: 66vh; /* Banner height */
}
/* BANNER: G Floor – Outdoor Shop (?floor=g-outdoor) */
.fl-hero.floor-g_outdoor {
--banner-zoom: 90% auto; /* Zoom */
--banner-pos: center 40%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: Floor 1 */
.fl-hero.floor-1 {
--banner-zoom: 110% auto; /* Zoom */
--banner-pos: center 40%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: Floor 2 */
.fl-hero.floor-2 {
--banner-zoom: 110% auto; /* Zoom */
--banner-pos: center 40%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: Floor 3 */
.fl-hero.floor-3 {
--banner-zoom: 100% auto; /* Zoom */
--banner-pos: center 50%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: Floor 4 */
.fl-hero.floor-4 {
--banner-zoom: 99% auto; /* Zoom */
--banner-pos: center 52%; /* Crop position */
height: 46vh; /* Banner height */
}
/* BANNER: Floor 5 */
.fl-hero.floor-5 {
--banner-zoom: 99% auto; /* Zoom */
--banner-pos: center 60%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: Floor 6 */
.fl-hero.floor-6 {
--banner-zoom: 100% auto; /* Zoom */
--banner-pos: center 52%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: Floor 7 */
.fl-hero.floor-7 {
--banner-zoom: 100% auto; /* Zoom */
--banner-pos: center 52%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: Floor 8 */
.fl-hero.floor-8 {
--banner-zoom: 110% auto; /* Zoom */
--banner-pos: center 40%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: 9th Floor (combined view) */
.fl-hero.floor-9 {
--banner-zoom: 100% auto; /* Zoom */
--banner-pos: center 50%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: 9th Floor Outdoor */
.fl-hero.floor-9_outdoor {
--banner-zoom: 110% auto; /* Zoom */
--banner-pos: center 40%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
/* BANNER: 9th Floor Indoor */
.fl-hero.floor-9_indoor {
--banner-zoom: 110% auto; /* Zoom */
--banner-pos: center 40%; /* Crop position */
/* height: 46vh; */ /* Banner height */
}
.fl-hero::before{content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(184,115,51,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(184,115,51,0.04) 1px, transparent 1px);
background-size:60px 60px;pointer-events:none;}
.fl-hero-content{position:relative;z-index:2;padding:0 5% 52px;width:100%;
animation:fadeUp .9s ease forwards;opacity:0;transform:translateY(20px);max-width:1400px;margin:0 auto;}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}
.fl-breadcrumb{font-size:.68rem;color:var(--muted);margin-bottom:16px;}
.fl-breadcrumb a{color:rgba(255,255,255,0.35);text-decoration:none;}
.fl-breadcrumb a:hover{color:var(--gold);}
.fl-breadcrumb > span:not(:last-child){color:rgba(184,115,51,0.25);margin:0 8px;}
.fl-breadcrumb #bc-name{color:var(--gold-light);font-weight:600;}
.fl-eyebrow{font-size:.62rem;letter-spacing:5px;text-transform:uppercase;color:var(--gold);
margin-bottom:12px;display:flex;align-items:center;gap:14px;}
.fl-eyebrow::before{content:'';width:32px;height:1px;background:var(--gold);}
html[dir="rtl"] .fl-eyebrow::before{background:linear-gradient(270deg,transparent,var(--gold));}
.fl-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4.5vw,3.6rem);
font-weight:700;color:var(--off-white);line-height:1.1;margin-bottom:10px;}
html[dir="rtl"] .fl-title{font-family:'Cairo',serif;}
.fl-title em{font-style:italic;color:var(--gold-light);}
.fl-subtitle{font-size:.95rem;color:var(--gold-light);letter-spacing:3px;font-weight:600;}
.fl-size-tag{display:inline-block;margin-top:14px;padding:8px 18px;
background:rgba(184,115,51,0.12);border:1px solid rgba(184,115,51,0.35);border-radius:2px;
font-size:.75rem;font-weight:700;letter-spacing:1.5px;color:var(--gold-light);}
/* LAYOUT */
.detail-wrap{display:grid;grid-template-columns:1fr 400px;gap:0;padding:0 5%;max-width:1400px;margin:0 auto;}
.detail-info{padding:56px 64px 80px 0;border-right:1px solid rgba(184,115,51,0.08);}
html[dir="rtl"] .detail-info{padding:56px 0 80px 64px;border-right:none;border-left:1px solid rgba(184,115,51,0.08);}
.book-col{padding:56px 0 80px 52px;}
html[dir="rtl"] .book-col{padding:56px 52px 80px 0;}
.book-sticky{position:sticky;top:96px;}
/* SECTION LABELS */
.sec-eye{font-size:.62rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.sec-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.4rem,2.5vw,2rem);
font-weight:700;color:var(--off-white);line-height:1.2;margin-bottom:10px;}
html[dir="rtl"] .sec-title{font-family:'Cairo',serif;}
.sec-title em{font-style:italic;color:var(--gold-light);}
.gold-line{width:48px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin:14px 0 28px;}
html[dir="rtl"] .gold-line{background:linear-gradient(270deg,var(--gold),transparent);}
/* OVERVIEW */
.overview-desc{font-size:.9rem;color:var(--muted);line-height:2;margin-bottom:36px;}
.overview-desc p+p{margin-top:14px;}
.specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:rgba(184,115,51,0.08);border:1px solid rgba(184,115,51,0.08);
border-radius:3px;overflow:hidden;margin-bottom:56px;}
.spec-item{background:#0d0d0d;padding:22px 18px;}
.spec-label{font-size:.58rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.spec-value{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--gold-light);font-weight:700;}
.spec-value.sm{font-size:.88rem;font-family:'Montserrat',sans-serif;color:var(--off-white);}
/* AMENITIES */
.amenities-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:56px;}
.amenity-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;
border-bottom:1px solid rgba(184,115,51,0.07);font-size:.84rem;color:var(--off-white);}
.amenity-item::before{content:'✓';color:var(--gold);font-weight:700;flex-shrink:0;margin-top:1px;}
/* GLOBAL IMG RULE */
img { flex-shrink: 0; object-fit: cover; object-position: center; }
/* SECTION A — FLOOR IMAGES */
.floor-gallery { padding: 56px 0; margin-bottom: 56px; border-top: 1px solid rgba(184,115,51,0.08); border-bottom: 1px solid rgba(184,115,51,0.08); }
.fg-mains { display: grid; gap: 6px; margin-bottom: 16px; }
.fg-mains.cols-2 { grid-template-columns: 1fr 1fr; }
.fg-mains.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.fg-mains img { width: 100%; height: 480px; object-fit: cover; border-radius: 3px; cursor: pointer; transition: filter 0.3s; }
.fg-mains img:hover { filter: brightness(1.1); }
.fg-thumbs-wrap { position: relative; }
.fg-thumbs { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 0; }
.fg-thumbs::-webkit-scrollbar { height: 3px; }
.fg-thumbs::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
.fg-thumbs img { width: 120px; height: 80px; object-fit: cover; border-radius: 2px; cursor: pointer; border: 1px solid transparent; transition: border-color 0.25s, opacity 0.25s; flex-shrink: 0; opacity: 0.7; }
.fg-thumbs img:hover { border-color: var(--gold); opacity: 1; }
.fg-thumbs img.active { border: 2px solid var(--gold); opacity: 1; }
.fg-simple { display: grid; gap: 6px; }
.fg-simple.cols-2 { grid-template-columns: 1fr 1fr; }
.fg-simple.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.fg-simple img { width: 100%; height: 480px; object-fit: cover; border-radius: 3px; }
.fg-arrow { background: rgba(184,115,51,0.1); border: 1px solid rgba(184,115,51,0.3); color: var(--gold); border-radius: 2px; padding: 8px 14px; cursor: pointer; transition: var(--t); font-size: 0.9rem; }
.fg-arrow:hover { background: var(--gold); color: var(--black); }
.fg-arrow:disabled { opacity: 0.3; pointer-events: none; }
.fg-arrows { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* SECTION B — IMAGINARY CAROUSEL */
.floor-renders { padding: 56px 0; margin-bottom: 56px; border-bottom: 1px solid rgba(184,115,51,0.08); }
/* Force LTR on the carousel so translateX slide math works identically in RTL pages. */
.fr-carousel { position: relative; overflow: hidden; border-radius: 3px; direction: ltr; }
.fr-track { display: flex; flex-direction: row; transition: transform 0.5s ease; direction: ltr; }
.fr-track img { width: 100%; height: 400px; object-fit: cover; flex-shrink: 0; }
.fr-arrows { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; width: 100%; padding: 0 12px; pointer-events: none; z-index: 2; }
.fr-arrows button { pointer-events: all; }
.fr-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.fr-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(184,115,51,0.3); border: none; cursor: pointer; transition: background 0.25s; }
.fr-dot.active { background: var(--gold); }
/* FIND US */
.find-us-box{width:100%;height:260px;background:
radial-gradient(circle at 50% 50%, rgba(184,115,51,0.12), transparent 70%),
#0b0906;
border:1px solid rgba(184,115,51,0.2);border-radius:4px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;cursor:pointer;transition:var(--t);position:relative;overflow:hidden;}
.find-us-box:hover{border-color:var(--gold);}
.find-us-box::before{content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(184,115,51,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(184,115,51,0.05) 1px, transparent 1px);
background-size:40px 40px;pointer-events:none;}
.find-us-box .pin{font-size:3rem;filter:drop-shadow(0 0 20px rgba(184,115,51,0.4));z-index:1;}
.find-us-box .addr{font-size:.95rem;color:var(--off-white);font-weight:600;z-index:1;}
.find-us-box .click{font-size:.65rem;color:var(--gold);letter-spacing:1.5px;
text-transform:uppercase;z-index:1;border-top:1px solid rgba(184,115,51,0.3);
padding-top:10px;}
/* BOOK VISIT CARD */
.book-card{background:linear-gradient(180deg,#0d0a06 0%,#0a0804 100%);
border:1px solid rgba(184,115,51,0.22);border-radius:4px;overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,0.4);}
.book-card-head{background:linear-gradient(135deg,var(--gold-dim),var(--gold),var(--gold-light));
padding:24px 28px;}
.book-card-head h3{font-family:'Cormorant Garamond',serif;font-size:1.2rem;
font-weight:700;color:var(--black);margin-bottom:3px;}
html[dir="rtl"] .book-card-head h3{font-family:'Cairo',serif;}
.book-card-head p{font-size:.7rem;color:rgba(5,5,5,0.7);}
.book-form{padding:26px;}
.bf-group{margin-bottom:14px;}
.bf-label{display:block;font-size:.58rem;font-weight:700;letter-spacing:2px;
text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.bf-input{width:100%;background:rgba(255,255,255,0.04);
border:1px solid rgba(184,115,51,0.18);color:var(--off-white);
font-family:inherit;font-size:.82rem;padding:11px 13px;border-radius:2px;
outline:none;transition:border-color var(--t);}
.bf-input:focus{border-color:rgba(184,115,51,0.55);}
.bf-input::placeholder{color:rgba(136,136,136,0.4);}
.bf-input option{background:#1a1200;}
textarea.bf-input{resize:vertical;min-height:80px;}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.btn-gold-full{width:100%;background:linear-gradient(135deg,var(--gold-dim),var(--gold),var(--gold-light));
color:var(--black);font-family:inherit;font-size:.7rem;font-weight:700;letter-spacing:2px;
text-transform:uppercase;padding:14px;border:none;border-radius:2px;cursor:pointer;
transition:var(--t);margin-top:6px;}
.btn-gold-full:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(184,115,51,0.4);}
.book-note{font-size:.62rem;color:var(--muted);text-align:center;margin-top:14px;line-height:1.7;}
.book-success{display:none;padding:32px;text-align:center;}
.book-success .s-icon{font-size:2.6rem;margin-bottom:14px;}
.book-success h4{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--gold-light);margin-bottom:8px;}
.book-success p{font-size:.8rem;color:var(--muted);line-height:1.7;}
.quick-contact{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
@media(max-width:520px){ .quick-contact{grid-template-columns:1fr 1fr;} }
.q-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;
text-decoration:none;color:inherit;background:rgba(255,255,255,0.02);
border:1px solid rgba(184,115,51,0.12);border-radius:3px;padding:14px;
text-align:center;transition:var(--t);cursor:pointer;}
.q-chip:hover{border-color:var(--gold);}
.q-chip .ico{font-size:1.1rem;margin-bottom:5px;display:flex;align-items:center;justify-content:center;}
.q-chip p{font-size:.6rem;color:var(--muted);margin:0;}
.q-chip span{color:var(--gold-light);font-size:.72rem;font-weight:600;margin-top:2px;}
/* FOOTER */
footer{background:#030303;border-top:1px solid rgba(184,115,51,0.08);
padding:36px 5% 24px;display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:14px;}
.f-brand{font-family:'Cormorant Garamond',serif;font-size:1.15rem;
font-weight:700;letter-spacing:2px;color:var(--gold-light);}
.f-copy{font-size:.68rem;color:rgba(255,255,255,0.2);}
/* FADE */
.fade-in{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}
@media(max-width:1024px){
.detail-wrap{grid-template-columns:1fr;}
.detail-info,html[dir="rtl"] .detail-info{padding:42px 0 0;border:none;}
.book-col,html[dir="rtl"] .book-col{padding:36px 0 60px;}
.book-sticky{position:static;}
.specs-grid{grid-template-columns:repeat(2,1fr);}
.fg-mains.cols-3{grid-template-columns:1fr 1fr;}
.fg-mains img,.fg-simple img{height:320px;}
.fr-track img{height:300px;}
}
@media(max-width:768px){
nav{padding:0 4%;height:62px;}
.nav-brand{font-size:1rem;letter-spacing:1.5px;}
.nav-back{font-size:.58rem;padding:5px 12px;}
.fl-hero{margin-top:62px;height:38vh;min-height:260px;}
.fl-hero-content{padding:0 4% 36px;}
.fl-title{font-size:clamp(1.5rem,4vw,2.4rem);}
.fl-subtitle{font-size:.78rem;letter-spacing:2px;}
.fl-size-tag{font-size:.65rem;padding:6px 14px;}
.fl-breadcrumb{font-size:.6rem;}
.detail-wrap{padding:0 4%;}
.sec-title{font-size:clamp(1.2rem,2.5vw,1.6rem);}
.overview-desc{font-size:.82rem;line-height:1.8;}
.fg-mains.cols-2,.fg-mains.cols-3{grid-template-columns:1fr;}
.fg-mains img,.fg-simple img{height:240px;}
.fg-simple.cols-2,.fg-simple.cols-3{grid-template-columns:1fr;}
.fr-track img{height:240px;}
.find-us-box{height:200px;}
.find-us-box .pin{font-size:2rem;}
.find-us-box .addr{font-size:.82rem;}
footer{padding:24px 4% 18px;flex-direction:column;text-align:center;gap:8px;}
.f-brand{display:flex;flex-direction:column;align-items:center;gap:8px;}
.f-brand img{margin-right:0 !important;}
}
@media(max-width:480px){
.fl-hero{height:32vh;min-height:220px;}
.fl-title{font-size:clamp(1.2rem,4vw,1.8rem);}
.specs-grid{grid-template-columns:1fr;}
.amenities-grid{grid-template-columns:1fr;}
.bf-row{grid-template-columns:1fr;}
.quick-contact{grid-template-columns:1fr;}
.detail-info{padding:28px 0 0;}
.fg-mains img,.fg-simple img{height:200px;}
.fr-track img{height:200px;}
.fg-thumbs img{width:90px;height:60px;}
.book-card-head{padding:18px 20px;}
.book-form{padding:18px;}
}
/* --- responsive image fixes (appended) --- */
img { max-width: 100%; height: auto; }
@media (max-width: 1024px) { /* tablet fixes */
.hero img, .banner img, [class*="hero"] img, [class*="banner"] img {
width: 100%; height: auto; object-fit: cover;
}
}
@media (max-width: 640px) {
.hero, .banner, [class*="hero"], [class*="banner"] { min-height: auto; }
img { display: block !important; }
}
/* --- availability image slot (appended) --- */
.avail-img { width:100%; object-fit:cover; background:#1a1a1a;
border:1px solid rgba(201,168,76,0.15); margin-bottom:12px;
display:block; margin-left:auto; margin-right:auto; }
/* per-floor sizing */
.avail-b1 { height: 320px; max-width: 100%; object-fit: cover; object-position: center 50%; }
.avail-g { height: 180px; max-width: 520px; object-fit: cover; object-position: center 50%; display:block; margin:0 auto 12px; }
.avail-g-indoor { height: 180px; max-width: 520px; object-fit: cover; object-position: center 50%; display:block; margin:0 auto 12px; }
.avail-g-outdoor { height: 180px; max-width: 520px; object-fit: cover; object-position: center 50%; display:block; margin:0 auto 12px; }
.avail-3 { height: 320px; max-width: 100%; object-fit: cover; object-position: center 50%; }
.avail-5 { height: 320px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.avail-9-indoor { height: 320px; max-width: 100%; object-fit: cover; object-position: center 50%; }
/* Floors whose availability graphics have a different aspect ratio:
switch to contain + auto height so the 80/160/400 m² cards never get cropped. */
.avail-4,
.avail-6,
.avail-7 {
height: 420px;
width: 100%;
object-fit: cover;
object-position: center 60%;
background: #0d0d0d;
}
.avail-9-outdoor {
height: 220px !important;
max-width: 640px;
width: 100%;
object-fit: cover;
object-position: center 75%;
background: #0d0d0d;
display: block;
margin: 0 auto 12px;
}
@media (max-width: 768px) { .avail-9-outdoor { height: 160px !important; } }
@media (max-width: 480px) { .avail-9-outdoor { height: 130px !important; } }
@media (max-width: 1024px){
.avail-4, .avail-6, .avail-7 { height: 320px; }
}
@media (max-width: 768px){
.avail-4, .avail-6, .avail-7 { height: 260px; }
}
@media (max-width: 480px){
.avail-4, .avail-6, .avail-7 { height: 200px; }
}
/* =========================================================
RTL (Arabic) minimal text-alignment fixes — do not affect EN
========================================================= */
html[dir="rtl"] .bf-label,
html[dir="rtl"] .bf-input { text-align: right; }
html[dir="rtl"] .spec-label,
html[dir="rtl"] .spec-value,
html[dir="rtl"] .amenity-item,
html[dir="rtl"] .overview-desc { text-align: right; }
/* ── Per-image gallery size rules ─────────────────────────────────────── */
.fg-4-1 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-2 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-3 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-4 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-5 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-6 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-7 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-8 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-9 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-10 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-11 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-12 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-13 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-14 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-15 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-16 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-17 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-18 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-4-19 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-5-1 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-5-2 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-1 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-2 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-3 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-4 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-5 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-6 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-7 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-8 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-9 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-10 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-11 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-6-12 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-1 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-2 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-3 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-4 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-5 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-6 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-7 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-8 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-9 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-7-10 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-b1-1 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-b1-2 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-b1-3 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-indoor-1 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-indoor-2 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-indoor-3 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-indoor-4 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-1 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-2 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-3 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-4 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-5 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-6 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-7 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-8 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-9 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-10 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-11 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-9-outdoor-12 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-g-1 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
.fg-g-2 { height: 220px; max-width: 100%; object-fit: cover; object-position: center 60%; }
/* ── Logo: always render in original colors, defeat any dark-mode / auto-darken / extension filters ── */
#navbar .nav-brand img, #navbar img, .nav-brand img, .f-brand img,
nav img[src*="logo"], header img[src*="logo"], footer img[src*="logo"],
html img.brand-logo-img, body img.brand-logo-img,
html img[src*="logo/logo.png"], body img[src*="logo/logo.png"],
html.dark img.brand-logo-img, html[data-theme="dark"] img.brand-logo-img, body.dark img.brand-logo-img,
html.dark img[src*="logo/logo.png"], html[data-theme="dark"] img[src*="logo/logo.png"], body.dark img[src*="logo/logo.png"] {
filter: none !important;
-webkit-filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
forced-color-adjust: none !important;
color-scheme: dark !important;
background: transparent !important;
isolation: isolate;
}
@media (prefers-color-scheme: light), (prefers-color-scheme: dark) {
#navbar img, .nav-brand img, .f-brand img,
nav img[src*="logo"], footer img[src*="logo"],
.brand-logo-img, img[src*="logo/logo.png"] {
filter: none !important;
-webkit-filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
}
/* Belt-and-braces: any dark-mode class, any ancestor — logo stays original. */
html.dark #navbar img, html[data-theme="dark"] #navbar img, body.dark #navbar img,
html.dark .nav-brand img, html[data-theme="dark"] .nav-brand img, body.dark .nav-brand img,
html.dark .f-brand img, html[data-theme="dark"] .f-brand img, body.dark .f-brand img,
html.dark footer img[src*="logo"], html[data-theme="dark"] footer img[src*="logo"], body.dark footer img[src*="logo"]{
filter: none !important;
-webkit-filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
/* ── Mobile navbar: keep logo icon + ALRAYYAN GROUP on one horizontal row ── */
#navbar { background: rgba(5,5,5,0.98) !important; }
#navbar > a { display: inline-flex; align-items: center; min-width: 0; }
.nav-brand { display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; }
.nav-brand img { flex-shrink: 0; }
@media (max-width: 768px) {
nav { height: 60px; padding: 0 4%; }
.nav-brand { font-size: 0.95rem; letter-spacing: 1.2px; }
.nav-brand img { height: 28px !important; margin-right: 6px !important; }
.nav-back { font-size: .55rem; padding: 5px 10px; }
.fl-hero { margin-top: 60px; }
}
@media (max-width: 480px) {
nav { height: 54px; padding: 0 3%; }
/* Keep brand text compact — logo + "ALRAYYAN GROUP" as home link */
.nav-brand { font-size: 0.62rem !important; letter-spacing: 0.8px; }
.nav-brand img { height: 24px !important; margin-right: 5px !important; }
/* Back button: arrow only */
.nav-back { font-size: 0 !important; padding: 6px 10px; border-radius: 3px; min-width: 32px; }
.nav-back::before { content: '←'; font-size: 0.85rem; display: inline; }
html[dir="rtl"] .nav-back::before { content: '→'; }
.fl-hero { margin-top: 54px; }
}
@media (max-width: 360px) {
.nav-brand { font-size: 0.56rem !important; letter-spacing: 0.5px; }
.nav-back { padding: 5px 8px; }
}
/* ── Mobile: stack floor gallery images vertically ── */
@media (max-width: 768px) {
.fg-simple.cols-3,
.fg-simple.cols-2,
.fg-mains.cols-3,
.fg-mains.cols-2 {
grid-template-columns: 1fr !important;
}
.fg-simple img,
.fg-mains img {
height: 260px;
width: 100%;
}
.fg-thumbs img {
width: 90px;
height: 60px;
}
}
/* ██████████████████████████████████████████████████████████████
PER-IMAGE CONTROLS — floor-detail.html (Floor Subpages)
Search the image filename below to jump to its rule.
Each property is labeled. Edit the value on that line only.
Class = fg-{floorId}-{number} → matches JS-generated class.
██████████████████████████████████████████████████████████████ */
/* ── B1 FLOOR ── */
/* ── IMAGE: b1-real-img-1.webp ── */
img.fg-b1-1 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: b1-real-img-2.webp ── */
img.fg-b1-2 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: b1-real-img-3.webp ── */
img.fg-b1-3 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── FLOOR 4 ── */
/* ── IMAGE: 4-real-img-1.webp ── */
img.fg-4-1 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 4-real-img-2.webp ── */
img.fg-4-2 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 4-real-img-3.webp ── */
img.fg-4-3 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 4-real-img-4.webp ── */
img.fg-4-4 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 4-real-img-5.webp ── */
img.fg-4-5 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 4-real-img-6.webp ── */
img.fg-4-6 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 4-real-img-7.webp ── */
img.fg-4-7 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── FLOOR 6 ── */
/* ── IMAGE: 6-real-img-1.webp ── */
img.fg-6-1 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 6-real-img-2.webp ── */
img.fg-6-2 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 6-real-img-3.webp ── */
img.fg-6-3 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 6-real-img-4.webp ── */
img.fg-6-4 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 6-real-img-5.webp ── */
img.fg-6-5 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 6-real-img-6.webp ── */
img.fg-6-6 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 6-real-img-7.webp ── */
img.fg-6-7 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── FLOOR 7 ── */
/* ── IMAGE: 7-real-img-1.webp ── */
img.fg-7-1 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 7-real-img-2.webp ── */
img.fg-7-2 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 7-real-img-3.webp ── */
img.fg-7-3 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 7-real-img-4.webp ── */
img.fg-7-4 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 7-real-img-5.webp ── */
img.fg-7-5 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 7-real-img-6.webp ── */
img.fg-7-6 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── 9TH FLOOR OUTDOOR ── */
/* ── IMAGE: 9-outdoor-real-img-1.webp ── */
img.fg-9-outdoor-1 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 9-outdoor-real-img-2.webp ── */
img.fg-9-outdoor-2 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 9-outdoor-real-img-3.webp ── */
img.fg-9-outdoor-3 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 9-outdoor-real-img-4.webp ── */
img.fg-9-outdoor-4 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 9-outdoor-real-img-5.webp ── */
img.fg-9-outdoor-5 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 9-outdoor-real-img-6.webp ── */
img.fg-9-outdoor-6 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── 9TH FLOOR INDOOR ── */
/* ── IMAGE: 9-indoor-real-img-1.webp ── */
img.fg-9-indoor-1 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 9-indoor-real-img-2.webp ── */
img.fg-9-indoor-2 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }
/* ── IMAGE: 9-indoor-real-img-3.webp ── */
img.fg-9-indoor-3 { /* height:320px; */ /* width:100%; */ /* object-fit:cover; */ /* object-position:center 60%; */ /* transform:rotate(5deg) scale(1.1); */ }