:root{ --ink:#0C1A2E; --champagne:#C9A86A; --gold:#A07C3C; --paper:#FFFFFF; --paper2:#F2F3F5; --ph:#E9EBEE; /* owner 2026-07-16: no warm/beige surfaces - white or navy only */ --line:rgba(12,26,46,.14); --body:rgba(12,26,46,.66); --muted:rgba(12,26,46,.62); --sans:'General Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --serif:'EB Garamond','Times New Roman',Georgia,serif; --ease:cubic-bezier(.65,.05,.36,1); /* state changes + hovers */ --ease-out:cubic-bezier(.16,1,.3,1); /* entrances + reveals */ --shadow:0 2px 4px -2px rgba(12,26,46,.05), 0 20px 44px -26px rgba(12,26,46,.32); --shadow-lg:0 6px 16px -8px rgba(12,26,46,.14), 0 46px 88px -44px rgba(12,26,46,.46); /* ---- Phase-1 token layer (2026-07-15): single source for values that had drifted ---- */ --ink-hover:#15294A; /* hover state of ink surfaces/buttons */ --gold-deep:#8F6E33; --gold-deeper:#7A5E2B; /* gold button hover */ --gold-soft:#E4C98D; /* soft gold accents on navy bands */ --ok:#116B3C; --ok-bg:#E7F7EC; /* form + eligibility success */ --err:#9B2C20; --err-bg:#FDEBE9;/* form + eligibility error */ --r-sm:4px; --r-md:11px; --r-lg:16px; --r-pill:999px; --dur-fast:.25s; --dur-base:.4s; --dur-slow:.55s; --container:1280px; --container-wide:1440px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:auto;} /* Lenis owns scrolling — CSS smooth would fight it */ [id]{scroll-margin-top:110px;} /* fixed-header clearance for native anchor jumps */ body{font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;} img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button,input,select,textarea{font-family:inherit;} button{cursor:pointer;background:none;border:none;color:inherit;} :focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px;} ::placeholder{color:rgba(12,26,46,.65);opacity:1;} /* >=4.5:1 on paper/white */ .wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,5vw,64px);} .sec{position:relative;padding:clamp(44px,5.4vw,68px) 0;} .endpad{padding-bottom:clamp(48px,6vw,88px)!important;} /* per-page footer clearance - applied only where the page ends on white (owner 2026-07-20) */ .sec.alt{background:#fff;} .h2{font-weight:500;font-size:clamp(28px,4.2vw,52px);line-height:1.05;letter-spacing:-.012em;} .h2 em{font-style:normal;color:inherit;} .lead{font-size:15.5px;font-weight:300;line-height:1.7;color:var(--body);max-width:46ch;} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(28px,3.6vw,44px);} .sec-head.c{flex-direction:column;align-items:center;text-align:center;} .link{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink);border-bottom:1px solid var(--champagne);padding-bottom:5px;transition:color var(--dur-base) var(--ease);white-space:nowrap;} .link:hover{color:var(--gold-deep);} .link svg{width:15px;height:15px;color:var(--gold);transition:transform var(--dur-base) var(--ease);} .link:hover svg{transform:translateX(4px);} .btn-ink{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:15px 26px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;transition:background var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);} .btn-ink:hover{background:var(--ink-hover);transform:translateY(-1px);} .btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gold-deep);color:#fff;border-radius:var(--r-pill);padding:15px 26px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;transition:background var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);} .btn-gold:hover{background:var(--gold-deeper);transform:translateY(-1px);} .btn-gold[disabled]{opacity:.6;cursor:progress;} .sec > .wrap{position:relative;z-index:1;} /* Official UAE dirham symbol (CBUAE 2025) - mask takes the text colour anywhere it sits */ .dh{display:inline-block;width:.74em;height:.64em;margin-right:.13em;vertical-align:-.01em;background:currentColor;-webkit-mask:url('../img/dirham.png') center/contain no-repeat;mask:url('../img/dirham.png') center/contain no-repeat;} /* ============ INTRO LOADER — logo + wordmark on black, curtain lifts to reveal ============ Black, not navy: the owner picked the pre-redesign intro. On black the gold gradient wordmark reads brighter and the curtain reveal has more contrast. */ .loader{position:fixed;inset:0;z-index:200;background:#070707;display:flex;align-items:center;justify-content:center;transition:transform 1.1s var(--ease);} .loader.done{transform:translateY(-101%);} .loader-in{display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 20px;text-align:center;} .loader img{height:clamp(100px,15vw,160px);width:auto;opacity:0;transform:translateY(14px) scale(.96);animation:ldrIn 1.3s var(--ease-out) .35s both;} /* ~5x wordmark size, per the official lockup proportions */ .loader-mask{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;} .loader .wm{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(18px,2.9vw,30px);letter-spacing:.22em;text-indent:.22em;background:linear-gradient(105deg,#E9CF9A,#C9A863 45%,#97742F);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;transform:translateY(110%);animation:ldrRise 1.25s var(--ease-out) .85s both;} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .loader .wm{background:none;color:#C9A863;} } .loader .bar{width:min(240px,48vw);height:2px;background:rgba(233,207,154,.16);overflow:hidden;opacity:0;animation:entFade 1s var(--ease-out) .3s both;} .loader .bar i{display:block;height:100%;background:linear-gradient(90deg,#97742F,#C9A863,#E9CF9A);transform:scaleX(0);transform-origin:left;animation:ldrBar 2s var(--ease) .5s both;} /* completes at 2.5s, curtain lifts at 2.6s */ @keyframes ldrIn{to{opacity:1;transform:translateY(0) scale(1);}} @keyframes ldrRise{to{transform:translateY(0);}} @keyframes ldrBar{to{transform:scaleX(1);}} body.lock{overflow:hidden;} /* ============ CUSTOM SCROLLBAR — interactive; native hidden only once JS adds .cscroll ============ */ html.cscroll{scrollbar-width:none;-ms-overflow-style:none;} html.cscroll::-webkit-scrollbar{width:0;height:0;} .sbar{position:fixed;top:0;right:0;bottom:0;width:16px;z-index:140;opacity:0;transition:opacity var(--dur-slow) var(--ease);touch-action:none;} .sbar.on,.sbar:hover,.sbar.drag{opacity:1;} .sbar::before{content:"";position:absolute;top:0;bottom:0;right:6px;width:1px;background:rgba(12,26,46,.1);opacity:0;transition:opacity var(--dur-base) var(--ease);} .sbar:hover::before,.sbar.drag::before{opacity:1;} .sbar i{position:absolute;top:0;right:4px;width:4px;border-radius:99px;background:rgba(12,26,46,.35);cursor:grab;transition:background var(--dur-base) var(--ease);} .sbar:hover i,.sbar.drag i{background:var(--champagne);} .sbar.drag,.sbar.drag i{cursor:grabbing;} .no-js .sbar{display:none;} /* ============ HEADER — utility strip + centered wordmark lockup (light frosted) ============ */ .hdr{position:fixed;top:0;left:0;right:0;z-index:100;opacity:0;transform:translateY(-10px);} /* ── iOS forced-zoom guard, site-wide (owner reported it twice: hero search, then "clicking a field in the contact page zooms you in. and doesnt zoom back out automatically") ──────────────────────────────────────────────────────────────── iOS Safari zooms the page whenever a focused text field renders below 16px, and it does NOT zoom back out on blur. There is no way to zoom back out from CSS; the only real fix is to never trigger it. This is one blanket rule rather than edits to the 11 component rules that were under 16px (hero search, contact form, lead modal, careers apply, property filters, sort dropdown, insights search, currency search). Patching them individually is how the contact form got missed the first time, and it would miss the next field someone adds. !important is required, not lazy: component selectors like `.hs3 .f input` (0,2,1) outrank an element/attribute selector, so without it this rule loses everywhere it matters. Overriding a font-size to prevent an unrecoverable zoom is the right trade. Range/checkbox/radio are excluded - they never trigger the zoom and 16px would visually break them. */ @media (max-width:640px){ input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), textarea, select { font-size:16px !important; } } /* Hide going down / show going up (site.js adds .hdr-up). The transition lives on the LOADED header only: .hdr starts at translateY(-10px) with opacity 0 for the entrance animation, and transitioning that would make the page-load reveal slide instead of fade. -104% rather than -100% clears the box shadow too. */ body.loaded .hdr{transition:transform .32s var(--ease);} /* !important is load-bearing here, not laziness. Two lines below, `.loaded .hdr` runs `animation:hdrIn ... forwards`, and hdrIn's `to` frame sets `transform:none`. A forwards-filled animation outranks every normal declaration in the cascade, so without !important this rule matches and is then overridden on every single scroll — the class toggles correctly and the header never moves, which is exactly what was observed. */ body.loaded .hdr.hdr-up{transform:translateY(-104%) !important;} /* Someone who has asked for less motion gets the header simply staying put: hiding it with no transition is a jarring jump, and a persistent header costs them nothing. */ @media (prefers-reduced-motion:reduce){ body.loaded .hdr.hdr-up{transform:none !important;} } .loaded .hdr{animation:hdrIn 1.05s var(--ease-out) .15s forwards;} @keyframes hdrIn{to{opacity:1;transform:none;}} .no-js .hdr{opacity:1;transform:none;animation:none;} .util{background:rgba(255,255,255,.6);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--line);transition:background var(--dur-slow) var(--ease);} .util-in{max-width:var(--container-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem clamp(20px,5vw,64px);} .util-l,.util-r{display:flex;align-items:center;gap:.4rem;} .util-r{gap:1.4rem;} .util-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:12px;letter-spacing:.03em;color:var(--body);padding:.3rem .5rem;border-radius:4px;transition:color var(--dur-base) var(--ease);} .util-chip:hover{color:var(--ink);} .util-link{display:inline-flex;align-items:center;gap:.4rem;font-size:12px;letter-spacing:.03em;color:var(--body);white-space:nowrap;transition:color var(--dur-base) var(--ease);} .util-link svg{width:14px;height:14px;color:var(--gold);flex:none;} .util-link:hover{color:var(--ink);} .mnav{background:rgba(255,255,255,.5);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.55);transition:background var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);} .hdr.scrolled .mnav{background:rgba(255,255,255,.9);box-shadow:0 14px 40px -26px rgba(12,26,46,.28);} .hdr.scrolled .util{background:rgba(255,255,255,.88);} .mnav-in{max-width:var(--container-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.7rem clamp(20px,5vw,64px);} .ng{display:flex;align-items:center;gap:1.25rem;} .ng a{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);position:relative;padding:.25rem 0;transition:color var(--dur-base) var(--ease);} .ng a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-slow) var(--ease);} .ng a:hover{color:var(--gold-deep);} .ng a:hover::after{transform:scaleX(1);transform-origin:left;} /* centered brand lockup: monogram + serif wordmark */ .lockup{display:flex;align-items:center;gap:13px;} .lockup img{height:40px;width:auto;display:block;} .lockup .wm{font-family:var(--serif);font-weight:500;font-size:clamp(15px,1.7vw,21px);letter-spacing:.14em;color:var(--ink);white-space:nowrap;} .hb{display:none;background:none;border:none;color:var(--ink);width:44px;height:44px;align-items:center;justify-content:center;} .hb svg{width:24px;height:24px;} /* mobile drawer */ /* Owner-reported 2026-07-30: tapping between two items selected whichever was nearer. Cause: the links were 23px tall (bare line-height, padding:0) separated by this 1.4rem gap, so the dead band between them was narrower than a fingertip and every tap fell through to the closest link. 23px also misses the WCAG 2.5.8 minimum of 24px. Fix below is padding on the links, so the gap shrinks while the TARGETS grow to ~45px and the boundary between them becomes predictable. Overall rhythm is near-identical: was 9x23 + 8x22.4 = 386px, now 9x45 + 8x5.6 = 450px. */ .drawer{position:fixed;inset:0;z-index:150;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease),visibility var(--dur-base) var(--ease);} .drawer.open{opacity:1;visibility:visible;} .drawer a{font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink);transition:color var(--dur-base) var(--ease);padding:11px 20px;display:block;text-align:center;} .drawer a:hover{color:var(--gold-deep);} /* Owner 2026-07-30: "make the SILVER OAK PROPERTIES in the burger menu be larger size. its too small currently". 1rem -> 1.35rem. Still gold-deep, not gold: at this size it is large-scale text by WCAG's definition, but the drawer sits on near-white and --gold measures 3.86:1, so gold-deep keeps it clearly above AA rather than borderline. Tracking eased slightly (.12 -> .1em) so the longer line does not crowd a 360px phone: at 1.35rem it measures ~250px against a 320px content box. */ .drawer .wm{font-family:var(--serif);font-weight:500;letter-spacing:.1em;color:var(--gold-deep);text-transform:uppercase;font-size:1.35rem;margin-bottom:1rem;line-height:1.25;text-align:center;} .drawer-x{position:absolute;top:1.4rem;right:1.4rem;color:var(--ink);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;} .drawer-x svg{width:24px;height:24px;} /* ============ HERO ============ */ .hero{position:relative;min-height:clamp(66svh,56.25vw,100svh); /* fills the viewport; the film starts below the header (see .hero-vid desktop rule) */display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:clamp(118px,13vh,134px) clamp(20px,5vw,64px) 40px;} .hero-inner{position:relative;z-index:2;width:100%;max-width:960px;display:flex;flex-direction:column;align-items:center;} .hero h1{font-weight:500;font-size:clamp(40px,6.6vw,84px);line-height:1.02;letter-spacing:-.015em;margin:6px 0 20px;} .hero h1 em{font-style:normal;color:inherit;} /* orchestrated entrance: header -> masked headline rise -> sub -> search -> trust -> cue */ .hl-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;} .hl-line{display:block;transform:translateY(112%);} .loaded .hl-line{animation:lineUp 1.3s var(--ease-out) .5s both;} @keyframes lineUp{to{transform:translateY(0);}} .ent{opacity:0;transform:translateY(18px);} .entf{opacity:0;} .loaded .ent{animation:entUp 1.15s var(--ease-out) both;} .loaded .entf{animation:entFade 1.2s var(--ease-out) both;} @keyframes entUp{to{opacity:1;transform:translateY(0);}} @keyframes entFade{to{opacity:1;}} /* scoped under .loaded: the gate's animation shorthand resets delay, so these must match its specificity */ .loaded .e1{animation-delay:.95s;}.loaded .e2{animation-delay:1.2s;}.loaded .e3{animation-delay:1.5s;}.loaded .e4{animation-delay:1.8s;} .hero .sub{font-size:clamp(15px,1.6vw,18px);font-weight:300;color:var(--body);max-width:44ch;margin-bottom:36px;} .trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px;margin-top:26px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--body);} .trust b{color:var(--gold);font-weight:600;} .trust .dot{width:3px;height:3px;border-radius:50%;background:rgba(12,26,46,.3);} .scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);} .scrollcue svg{width:15px;height:15px;color:var(--gold);animation:bob 2.6s var(--ease) infinite;} @keyframes bob{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(5px);opacity:1;}} /* ============ PARTNERS MARQUEE ============ */ .partners{position:relative;padding:clamp(40px,5vw,64px) 0;background:#0C1A2E;text-align:center;} /* position: containing block for .mq-toggle */ /* WCAG 2.2.2: the two marquees auto-start and loop past five seconds, so each needs a way to stop it. Same control as .hero-vtoggle, and like that one it ships hidden and is revealed by the JS that actually drives the motion - so reduced-motion users (where the rAF loop early-returns) never see a dead button. Sits outside .marquee/.aw-marquee so the edge mask cannot fade it. */ .mq-toggle{position:absolute;right:clamp(14px,3vw,30px);bottom:12px;z-index:4;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(12,26,46,.55);border:1px solid rgba(201,168,106,.55);color:var(--champagne);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);} .mq-toggle[hidden]{display:none;} .mq-toggle:hover{background:rgba(12,26,46,.8);border-color:var(--champagne);} .mq-toggle svg{width:11px;height:11px;display:block;} .mq-toggle .mq-play{display:none;} .mq-toggle.off .mq-pause{display:none;} .mq-toggle.off .mq-play{display:block;} .marquee{overflow:hidden;position:relative;margin-top:clamp(18px,2.6vw,28px);padding:14px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);} .marquee-track{display:flex;width:max-content;align-items:center;will-change:transform;} /* driven by the rAF marquee JS (pixel-exact loop, resize-proof) */ /* hover slow-down is handled in JS (Animation.updatePlaybackRate) */ /* ============ PROPERTY CARDS (listings) ============ */ .prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .prop{position:relative;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease);} .prop:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(201,168,106,.5);} .prop-img{position:relative;height:210px;overflow:hidden;background:var(--ph);} .prop-img .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s var(--ease);} .prop-img img.ph,.post-img img.ph{width:100%;height:100%;object-fit:cover;} .prop:hover .prop-img .ph{transform:scale(1.05);} .prop-badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#14100A;background:var(--champagne);padding:6px 11px;border-radius:3px;} .prop-badge svg{width:12px;height:12px;} .prop-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:11px;} .prop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;} .prop-head-l{display:flex;flex-direction:column;gap:5px;min-width:0;} .prop-dev{flex:none;padding-top:4px;} /* logo rides the right edge, top-aligned with the name */ .prop-dev img{height:18px;width:auto;max-width:110px;object-fit:contain;object-position:right center;display:block;} .prop-dev img[src*="damac"]{height:14px;padding-top:2px;} /* thin wordmark - optical parity with taller marks */ .prop-name{font-size:25px;font-weight:600;letter-spacing:-.015em;line-height:1.05;} .prop-loc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);} .prop-loc svg{width:13px;height:13px;color:var(--gold);flex:none;} .prop-price{display:flex;align-items:baseline;gap:6px;} .prop-price .amt{font-size:20px;font-weight:600;letter-spacing:-.01em;} .prop-price .per{font-size:12.5px;color:var(--muted);font-weight:500;} .prop-meta{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;padding-top:14px;border-top:1px solid var(--line);} .prop-meta span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--body);} .prop-meta svg{width:15px;height:15px;color:var(--gold);flex:none;} .prop-listed{font-size:11.5px;color:var(--muted);} /* ============ MORTGAGE CALCULATOR ============ */ input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:var(--line);outline:none;} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(12,26,46,.25);cursor:pointer;transition:transform var(--dur-base) var(--ease);} input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);} input[type=range]::-moz-range-thumb{width:18px;height:18px;border:1px solid var(--line);border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(12,26,46,.25);cursor:pointer;} /* ============ SERVICES — ledger grid ============ */ .services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);} .srv{position:relative;display:flex;flex-direction:column;gap:13px;min-height:clamp(200px,22vw,264px);padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,34px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);} /* hover surface on ::after — a transition on .srv itself is clobbered by .rev-up's transition shorthand */ .srv::after{content:"";position:absolute;inset:0;z-index:0;background:#fff;box-shadow:var(--shadow);opacity:0;transition:opacity var(--dur-slow) var(--ease);pointer-events:none;} .srv > *{position:relative;z-index:1;} .srv:hover::after{opacity:1;} .srv-n{font-size:12px;color:var(--gold-deep);letter-spacing:.14em;} .srv-name{font-size:clamp(18px,2vw,24px);font-weight:500;letter-spacing:-.01em;} .srv-desc{font-size:14px;color:var(--body);font-weight:300;line-height:1.65;max-width:32ch;} .srv .ar{margin-top:auto;align-self:flex-end;color:var(--gold);opacity:0;transform:translateX(-8px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);} .srv .ar svg{width:22px;height:22px;} .srv:hover .ar{opacity:1;transform:none;} .srv-cta{background:var(--ink);} .srv-cta::after{background:var(--ink-hover);box-shadow:var(--shadow-lg);} .srv-cta .srv-n{color:var(--champagne);} .srv-cta .srv-name{color:#fff;} .srv-cta .srv-desc{color:rgba(255,255,255,.66);} .srv-cta .ar{color:var(--champagne);opacity:1;transform:none;} @media (max-width:1024px){ .services{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .services{grid-template-columns:1fr;} .srv{min-height:0;} } /* ============ AWARDS ============ */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);margin-bottom:clamp(28px,3.6vw,44px);} .stat{text-align:center;} .stat .num{font-size:clamp(26px,3.6vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap;} .stat .num i{font-style:normal;color:inherit;} .stat .lbl{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--body);margin-top:12px;} /* full-width award loop (same mechanic as the developer marquee) — swap the badge for real award images */ .aw-marquee{overflow:hidden;position:relative;z-index:1;padding:20px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);} .aw-track{display:flex;width:max-content;align-items:center;will-change:transform;} /* hover slow-down is handled in JS (Animation.updatePlaybackRate) */ .aw-item{flex:0 0 auto;margin-right:clamp(20px,2.4vw,36px);} /* margin (not track gap) keeps the -50% loop seam exact */ .aw-badge{width:clamp(150px,13vw,182px);aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);will-change:transform;} .aw-item:hover .aw-badge{transform:translateY(-8px);box-shadow:var(--shadow-lg);} /* Awards — deep navy feature band (depth + navy anchor) */ #awards{background:#0C1A2E;} #awards .aw-marquee{margin-top:clamp(14px,2vw,26px);} /* stats above already carry margin-bottom */ #awards .h2{color:#fff;} #awards .stat .num{color:#fff;} #awards .stat .lbl{color:rgba(255,255,255,.6);} #awards .aw-badge{background:#fff;border-color:rgba(255,255,255,.14);} #awards .aw-item:hover .aw-badge{box-shadow:0 34px 66px -26px rgba(0,0,0,.55);} .aw-badge img{width:100%;height:100%;object-fit:contain;padding:0;} .aw-badge svg{width:42px;height:42px;color:var(--gold);opacity:.85;} /* ============ REVIEWS ============ */ .rev-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:clamp(26px,3.4vw,38px);flex-wrap:wrap;} .rev-google{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 22px;box-shadow:var(--shadow);} .rev-google .g-logo{width:26px;height:26px;display:block;} .rev-google .score{font-size:20px;font-weight:600;display:flex;align-items:center;gap:9px;} .rev-google .stars{color:var(--champagne);letter-spacing:.1em;margin-right:-.1em;font-size:14px;line-height:1;} /* 4.8 of 5 shown honestly: a muted 5-star row with the gold row clipped to 96% */ .starfill{position:relative;display:inline-block;font-size:14px;letter-spacing:.1em;line-height:1;white-space:nowrap;} .starfill .sf-base{color:rgba(12,26,46,.20);} .starfill .sf-fill{position:absolute;left:0;top:0;overflow:hidden;color:var(--gold-deep);} .rev-google .revn{font-size:12.5px;font-weight:400;color:var(--muted);} /* ============ BLOGS & VIDEOS ============ */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .post{display:flex;flex-direction:column;} .post-img{position:relative;height:220px;border-radius:8px;overflow:hidden;background:var(--ph);border:1px solid var(--line);margin-bottom:18px;} .post-img .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s var(--ease);} .post:hover .post-img .ph{transform:scale(1.04);} .post:hover .post-play{transform:translate(-50%,-50%) scale(1.08);} .post-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:11px;display:flex;gap:12px;} .post-meta .dot{color:rgba(12,26,46,.3);} .post h3{font-size:clamp(17px,2vw,21px);font-weight:500;line-height:1.3;letter-spacing:-.01em;} .post p{font-size:14px;color:var(--body);font-weight:300;line-height:1.6;margin-top:9px;} /* ============ FAQ ============ */ .faq{max-width:840px;margin:0 auto;border-top:1px solid var(--line);} .faq details{border-bottom:1px solid var(--line);} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:clamp(16px,1.9vw,20px);font-weight:500;transition:color var(--dur-base) var(--ease);} .faq summary::-webkit-details-marker{display:none;} .faq summary:hover{color:var(--gold-deep);} .faq .pm{flex:none;width:20px;height:20px;position:relative;} .faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--champagne);transition:transform var(--dur-base) var(--ease);} .faq .pm::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%);} .faq .pm::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%);} .faq details[open] .pm::after{transform:translateX(-50%) scaleY(0);} .faq-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease);} .faq-b p{overflow:hidden;min-height:0;opacity:0;transform:translateY(6px);transition:opacity var(--dur-slow) var(--ease-out) .1s,transform var(--dur-slow) var(--ease-out) .1s;} .faq details.exp .faq-b{grid-template-rows:1fr;} .faq details.exp .faq-b p{opacity:1;transform:translateY(0);} .faq-b p{padding:0 0 24px;font-size:15px;font-weight:300;line-height:1.75;color:var(--body);max-width:64ch;} /* ============ FOOTER ============ */ .footer{background:var(--ink);color:#fff;padding:clamp(30px,3.5vw,44px) 0 0;position:relative;overflow:hidden;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* skip link: off-screen until keyboard focus pulls it back */ /* required-field asterisk. Was defined only inside careers.html, so the same marker in the lead popups rendered in the inherited label colour. */ .rq{color:var(--gold-deeper);margin-left:1px;} .lm-fine{font-size:11.5px;color:var(--muted);line-height:1.5;margin:0 0 10px;} .lm-fine .rq,.lm-f label .rq{color:var(--gold-deeper);} .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-size:13px;font-weight:600;} .skip:focus{left:0;} .ft-cols{display:grid;grid-template-columns:1.25fr 1fr 1.15fr 1fr;gap:44px;padding-top:clamp(24px,2.8vw,36px);border-top:1px solid rgba(255,255,255,.14);} .ft-h{font-family:var(--sans);font-weight:500;font-size:15px;color:#fff;margin:0 0 18px;letter-spacing:.14em;text-transform:uppercase;} .ft-links,.ft-contact{margin:0;padding:0;list-style:none;} .ft-links a{display:block;font-size:13.5px;color:rgba(255,255,255,.65);padding:5px 0;font-weight:300;transition:color var(--dur-base) var(--ease);} .ft-links a:hover{color:var(--champagne);} .ft-contact li{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.65;margin-bottom:10px;font-weight:300;} .ft-contact a{color:rgba(255,255,255,.85);transition:color var(--dur-base) var(--ease);} .ft-contact a:hover{color:var(--champagne);} .ft-soc{display:flex;gap:12px;flex-wrap:wrap;} .ft-soc a{width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);transition:color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);} .ft-soc a:hover{color:var(--champagne);border-color:var(--champagne);} .ft-soc svg{width:16px;height:16px;} .ft-map{border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);} /* The map used to be filter:grayscale(1) with a hover that only went to grayscale(.2), so it read as broken/greyed-out and never reached full colour even on hover. Owner rejected that treatment 2026-07-30. Maps now render in their own colours; the border and radius still frame it. */ .ft-map iframe{display:block;width:100%;height:172px;border:0;} .ft-stage{position:relative;height:clamp(150px,17vw,210px);margin-top:10px;} .ft-ghost{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;width:100%;text-align:center;font-family:var(--serif);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(38px,8.4vw,120px);line-height:.95;pointer-events:none;user-select:none;background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.10) 55%,rgba(255,255,255,.05));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;} .ft-fade{position:absolute;left:0;right:0;bottom:0;height:88px;background:linear-gradient(0deg,var(--ink) 30%,rgba(12,26,46,.75) 60%,rgba(12,26,46,0));pointer-events:none;} .ft-mark{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:2;width:clamp(77px,8.4vw,110px);height:auto;filter:drop-shadow(0 0 26px rgba(201,168,106,.35));} .ft-legal{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.12);padding:16px clamp(20px,5vw,64px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.62);} .ft-legal a{color:rgba(255,255,255,.62);transition:color var(--dur-base) var(--ease);} .ft-legal a:hover{color:#fff;} /* ============ REVEAL ============ */ .rev-up{opacity:0;transform:translateY(10px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);} .rev-up.in{opacity:1;transform:none;} .d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}.d4{transition-delay:.4s;}.d5{transition-delay:.5s;} /* ============ RESPONSIVE ============ */ @media (max-width:1024px){ .prop-grid,.posts{grid-template-columns:repeat(2,1fr);} .stats{grid-template-columns:repeat(2,1fr);gap:34px;} } @media (max-width:1080px){ .ng.r{display:none;} .hb{display:inline-flex;} .lockup img{height:34px;} .lockup .wm{font-size:13px;letter-spacing:.1em;} } @media (max-width:440px){ .lockup img{height:30px;} .lockup .wm{font-size:11px;letter-spacing:.06em;} } @media (max-width:600px){ .util{display:none;} } @media (max-width:820px){ .ft-cols{grid-template-columns:1fr 1fr;gap:34px;} } @media (max-width:560px){ .prop-grid,.posts{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;} .ft-cols{grid-template-columns:1fr;} .ft-ghost{white-space:normal;font-size:clamp(34px,11vw,64px);bottom:40px;} .ft-stage{height:230px;} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;} html{scroll-behavior:auto!important;} .loader{display:none!important;} .rev-up,.ent,.hdr{opacity:1!important;transform:none!important;} .entf{opacity:1!important;} /* fade-only: never reset transform (scrollcue centres via translateX) */ .hl-line{transform:none!important;} .marquee-track,.aw-track{transform:none!important;} .faq-b{grid-template-rows:1fr!important;} .faq-b p{opacity:1!important;transform:none!important;} } .no-js .loader{display:none;} .no-js .rev-up,.no-js .ent{opacity:1;transform:none;animation:none;} .no-js .entf{opacity:1;animation:none;} .no-js .hdr{animation:none;} .no-js .hl-line{transform:none;animation:none;} .no-js .faq-b{grid-template-rows:1fr;} .no-js .faq-b p{opacity:1;transform:none;} /* ============ DARK-BAND TEXT ============ Replaces the old global monochrome !important rule (removed 2026-07-15): each dark section owns its text colors at normal specificity. */ .partners{color:#fff;} .partners-title{font-weight:500;font-size:clamp(28px,4.2vw,52px);line-height:1.05;letter-spacing:-.012em;color:#fff;max-width:18ch;margin:0 auto;} /* same scale as .h2 - section titles are 52 max everywhere */ .dev-card{flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;width:clamp(212px,16vw,248px);height:132px;padding:0 clamp(20px,2vw,30px);margin-right:clamp(16px,1.6vw,24px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);} .dev-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(201,168,106,.55);} /* --lh is each logo's hand-tuned cap (the 30 rules below); --devs is a single multiplier so the whole strip can be resized without touching any of them. */ .dev-card img{max-width:100%;--lh:52px;max-height:calc(var(--lh) * var(--devs, 1));width:auto;height:auto;object-fit:contain;} /* per-logo optical normalisation — source logos differ wildly in aspect ratio */ .dev-card img[src*="emaar"]{--lh:40px;} .dev-card img[src*="damac"]{--lh:38px;} .dev-card img[src*="danube"]{--lh:46px;} .dev-card img[src*="deyaar"]{--lh:74px;} .dev-card img[src*="ellington"]{--lh:64px;} .dev-card img[src*="ahs-properties"]{--lh:54px;} .dev-card img[src*="aqua-properties"]{--lh:34px;} .dev-card img[src*="arada"]{--lh:26px;} .dev-card img[src*="azizi-developments"]{--lh:42px;} .dev-card img[src*="binghatti-developers"]{--lh:34px;} .dev-card img[src*="hre-development"]{--lh:54px;} .dev-card img[src*="iman-developers"]{--lh:42px;} .dev-card img[src*="mag-group"]{--lh:66px;} .dev-card img[src*="object-1"]{--lh:42px;} .dev-card img[src*="omniyat"]{--lh:26px;} .dev-card img[src*="palladium-development"]{--lh:42px;} .dev-card img[src*="palma-development"]{--lh:42px;} .dev-card img[src*="prescott-development"]{--lh:26px;} .dev-card img[src*="reportage-properties"]{--lh:42px;} .dev-card img[src*="select-group"]{--lh:54px;} .dev-card img[src*="sobha-realty"]{--lh:42px;} .dev-card img[src*="tiger-properties"]{--lh:34px;} .dev-card img[src*="wasl-properties"]{--lh:42px;} .dev-card img[src*="dubai-south"]{--lh:58px;} .dev-card img[src*="union-properties"]{--lh:62px;} .dev-card img[src*="meraas"]{--lh:34px;} .dev-card img[src*="nakheel"]{--lh:62px;} .dev-card img[src*="nshama"]{--lh:64px;} .dev-card img[src*="imtiaz-developments"]{--lh:42px;} .dev-card img[src*="samana-developers"]{--lh:40px;} .dev-card img[src*="dubai-properties"]{height:88px;max-height:none;transform:translateY(-18px);} /* wordmark (70.9% down the artwork) optically centered; ~4px clearance above the tick */ /* ── Phone: compact the mortgage calculator (owner 2026-07-30) ───────────────────── Owner needed TWO screenshots to show it and asked for it to fit one screen so you can work the sliders without scrolling to read the result. MEASURED at 430x932: section 1402px tall against 861px of usable height below the 71px header, so 541px had to go. Everything here is phone-only; desktop sizes, weights and spacing are untouched, as required. Where the 541px comes from, largest first: 197 .m-rows result rows, 4 x ~49px -> ~33px each 140 heading block -> ~56px (h2 to 24px, matching the other phone headings) 79 the intro paragraph, hidden. Scoped to #mortgage: .lead is used on other sections too and must not disappear site-wide. 34 the "Rates as published: 3.99% / 4.19% / 4.80%" line, hidden. This is pure duplication - .m-presets below lists the SAME three rates as tappable buttons, so the static copy adds height and no information. + padding, slider-row and control tightening throughout. Nothing interactive is removed: all four live sliders, all three resident options and all three rate presets stay. (Rows 5-7 measure 0px - they belong to the Affordability tab and are already hidden while Mortgage is selected.) */ @media (max-width:640px){ #mortgage{padding-top:18px;padding-bottom:18px;} #mortgage .sec-head{margin-bottom:12px;} #mortgage .calc-bar{align-items:center;} #mortgage .h2{font-size:24px;} #mortgage .lead{display:none;} #mortgage .calc-bar{margin-bottom:12px;} #mortgage .m-left{padding:14px 16px 6px;} #mortgage .m-right{padding:16px 16px;} /* static rates line duplicates the tappable presets below */ #mortgage .m-sub{display:none;} #mortgage .m-resident{gap:4px;padding:3px;margin-bottom:12px;} #mortgage .m-resident button{padding:7px 11px;font-size:11px;} #mortgage .m-row{margin-bottom:8px;} #mortgage .m-row .top{margin-bottom:3px;} /* Rate pills and the tab row both wrapped on the owner's iPhone while measuring as "fits" here: at 430px Chrome put the pills at 341 of 355px and the tab row at 378 of 387px, i.e. 96-98% full. iOS Safari sets the same strings a little wider, so a couple of percent of slack is not slack at all. Both are tightened to roughly 85% fill so device font-metric differences cannot tip them onto a second line. nowrap on the pills is the belt to that braces: even if the text still overran, the row scrolls rather than silently reflowing into the two-plus-one the owner reported. */ #mortgage .m-presets{gap:5px;margin:0 0 12px;flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none;} #mortgage .m-presets::-webkit-scrollbar{display:none;} #mortgage .m-presets button{padding:7px 8px;font-size:10.5px;letter-spacing:0;flex:none;} /* Tab row: keep the currency control beside the tabs instead of on its own line. Owner: "i dont like the currency selector being in a full line of its own... can we have it be to the left of the mortgage and affordability selectors". nowrap forbids the break outright; the tabs are allowed to shrink so the currency chip always fits. */ #mortgage .calc-bar{flex-wrap:nowrap;gap:8px;align-items:center;} #mortgage .calc-bar .m-tabs{min-width:0;flex:0 1 auto;padding:3px;gap:4px;} #mortgage .calc-bar .m-tabs button{padding:8px 12px;font-size:11.5px;white-space:nowrap;} #mortgage .calc-bar .curr{flex:none;} #mortgage .calc-bar .curr-b{padding:8px 12px;font-size:11.5px;white-space:nowrap;} /* keep the headline figure prominent - it is the answer the visitor came for */ #mortgage .a-big{font-size:38px;margin-top:6px;} #mortgage .m-per{margin-top:1px;} #mortgage .m-rows{margin-top:6px;} #mortgage .m-kv{padding:5px 0;font-size:12.5px;} /* the "Upfront costs on day one" accordion toggle was 23px, under WCAG 2.5.8's 24px minimum. This one predates today's compaction; fixing it here because it is the same tap-target problem and the same section. */ #mortgage .m-acc-btn,#mortgage .m-up > button,#mortgage details > summary{min-height:34px;display:flex;align-items:center;} /* Final 57px. The CTA block was 88px because the wide "Speak to a mortgage advisor" button forces "Get pre-approved" onto a second flex line. Rather than shrink the primary action, stack them deliberately and tighten the gaps: the button goes full-width (a better phone target anyway) with the link centred under it. */ #mortgage .a-ctas{gap:8px;padding-top:12px;flex-direction:column;align-items:stretch;} #mortgage .a-ctas > a:first-child,#mortgage .a-ctas > button{width:100%;justify-content:center;} #mortgage .a-ctas > a:last-child{text-align:center;font-size:12px;} } /* ── Phone: hide the motion pause buttons (owner 2026-07-30) ─────────────────────── Owner asked for these gone. Scoped to phones ONLY, for two reasons: 1. The owner also required the desktop rendering to stay identical, and these are visible on desktop, so removing them everywhere would break that. 2. They exist for WCAG 2.2.2 (a mechanism to pause motion that runs over 5s). Removing them site-wide would be a real regression. On phones the obligation is still met because site.css's prefers-reduced-motion block sets `*{animation:none!important}`, so anyone who has asked the OS to reduce motion gets static marquees and a paused hero video regardless of these buttons. The buttons ship `hidden` and are revealed by the JS that drives the motion, so hiding them here cannot leave a dead control behind. */ /* Owner 2026-07-30, twice confirmed: "you can remove the pause buttons on pc as well. i didnt even know they existed on pc cos theyre so small". Now hidden everywhere, not just on phones. Accessibility note, recorded because this is a deliberate trade the owner made: these satisfied WCAG 2.2.2 (a mechanism to pause motion running over 5s). What still covers it is the prefers-reduced-motion block in this file, which sets *{animation:none!important} - so anyone who has asked their OS to reduce motion gets static marquees and a paused hero video regardless of these controls. The remaining gap is a sighted user who has NOT set that preference and wants to stop the motion; they no longer can. The markup and the JS that un-hides these buttons are now dead. Left in place rather than ripped out mid-launch-week: removing them touches index.html's marquee and hero-video scripts, and a CSS hide carries no risk. Flagged for a cleanup pass. */ .mq-toggle,.hero-vtoggle{display:none!important;} /* ONE exception, added after the owner asked "why is the background video paused??? when i open the website the video doesnt even play." Hiding the toggle also removed the only way to START the film when the browser refuses to autoplay it - iOS blocks autoplay outright in Low Power Mode, and Safari can reject play() for its own reasons. The result was a poster with no control and no explanation. So the control stays hidden while the video is playing (which is what the owner asked for) and reappears as a PLAY button only when the video is actually stopped and the visitor has no other way to start it. It is never a "pause" button any more. Note this does NOT cover prefers-reduced-motion: there the film is never loaded at all, deliberately, and offering a play button would defeat the point of the preference. */ .hero-vtoggle.needs-play{display:inline-flex!important;} /* ── Shared image lightbox (assets/js/lightbox.js) ───────────────────────────────── Owner asked for the award images to "expand into a full view and darken the background translucent". The scrim is the same rgba(7,14,26,.88) the property-page lightbox uses, so the two feel like one component even though they are separate implementations for now. */ .zb{position:fixed;inset:0;z-index:240;background:rgba(7,14,26,.88); display:flex;align-items:center;justify-content:center;padding:24px; opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s linear .25s;} .zb.on{opacity:1;visibility:visible;transition:opacity .25s var(--ease);} .zb img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;background:#fff;} .zb-x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%; background:rgba(255,255,255,.12);color:#fff;border:none;cursor:pointer; display:flex;align-items:center;justify-content:center;} .zb-x:hover{background:rgba(255,255,255,.22);} .zb-x svg{width:17px;height:17px;} /* iOS: overflow:hidden alone does not stop touch scrolling behind an overlay */ body.zb-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden;} /* the award badges become obviously interactive once they zoom */ [data-zoom]{cursor:zoom-in;} /* ── Phone: Awards band (owner 2026-07-30) ───────────────────────────────────────── Owner: "too zoomed in, I can only see 2 awards at a time" and the navy band carried a lot of dead space. Badge 150px + 20px gutter = 170px, so only ~2.5 fit in 430px. 104px + 12px = 116px gives ~3.7 visible. Stats block tightened too: the 4-up grid is already 2x2 below 1024px, but its 34px gap and the 12px label offset were tuned for a wide viewport and read as gaps on a phone. */ @media (max-width:640px){ #awards{padding-top:30px;padding-bottom:30px;} #awards .sec-head{margin-bottom:20px;} #awards .h2{font-size:24px;} #awards .stats{gap:18px 16px;margin-bottom:20px;} #awards .stat .num{font-size:26px;} #awards .stat .lbl{font-size:10.5px;letter-spacing:.1em;margin-top:5px;} .aw-marquee{margin-top:10px;padding:10px 0;} .aw-item{margin-right:12px;} .aw-badge{width:104px;border-radius:9px;} } /* ── Phone: footer wordmark becomes a loop (owner 2026-07-30) ────────────────────── Was `white-space:normal` on a phone, so "SILVER OAK PROPERTIES" broke into two lines and sat awkwardly behind the gold mark. Owner wants it LARGER and looping, accepting that the full phrase is never visible at once. Done without touching markup, which matters: the footer block is byte-identical across all 14 pages (MD5-verified), so a markup change would have to be repeated 14 times and any drift would show. Instead ::after supplies the second copy and the whole element is the moving track. .ft-ghost is `width:max-content` holding exactly two copies, so translateX(-50%) advances precisely one copy and the loop is seamless with no measuring. .ft-stage gets overflow:hidden so the track is clipped to the footer. prefers-reduced-motion stops it via the global animation:none rule; the wordmark then sits static, which is fine because .ft-stage is aria-hidden and purely decorative. */ @media (max-width:640px){ .ft-stage{overflow:hidden;height:150px;} .ft-ghost{ left:0;right:auto;transform:none;width:max-content;max-width:none; display:flex;flex-wrap:nowrap;white-space:nowrap;text-align:left; font-size:clamp(56px,17vw,88px);bottom:28px; animation:ft-ghost-loop 18s linear infinite; } .ft-ghost::after{content:"Silver Oak Properties";padding-left:.32em;} } @keyframes ft-ghost-loop{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ── Phone: Featured Properties becomes a swipeable carousel (owner 2026-07-30) ──── Was three full-height cards stacked vertically, so a visitor had to scroll past all three to reach the rest of the homepage. Owner asked for one card at a time, changed by swiping or arrows, with the CARD DESIGN LEFT EXACTLY AS IS. Implementation is CSS scroll-snap, so the swipe is native (momentum, rubber-banding, accessibility all come free) and JS is only needed for the arrows and dots - assets/js/prop-carousel.js, which degrades to a plain scroller if it never runs. Selector is #offplan-scoped on purpose: it must beat the generic `.prop-grid` one-column rule at max-width:560px regardless of source order, and must NOT touch the properties.html listing grid, which the owner did not ask to change. flex-basis 86% leaves the next card peeking, which is what signals "swipe me". */ @media (max-width:640px){ #offplan .prop-grid{ display:flex;grid-template-columns:none;max-width:none;margin:0 -18px;padding:0 18px 4px; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:14px; scrollbar-width:none;-ms-overflow-style:none; } #offplan .prop-grid::-webkit-scrollbar{display:none;} #offplan .prop-grid > .prop{flex:0 0 86%;scroll-snap-align:center;} /* the tilt/lift hover effects are pointer affordances; on a touch carousel they only ever fire mid-swipe, which reads as a glitch */ #offplan .prop-grid > .prop:hover{transform:none;} /* controls injected by prop-carousel.js */ .pc-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;} .pc-arrow{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center; background:#fff;border:1px solid var(--line);border-radius:50%;color:var(--ink); box-shadow:var(--shadow);transition:opacity var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);} .pc-arrow svg{width:18px;height:18px;} .pc-arrow[disabled]{opacity:.35;} .pc-dots{display:flex;align-items:center;gap:7px;} .pc-dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:rgba(12,26,46,.22);transition:background var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);} .pc-dot[aria-current="true"]{background:var(--gold-deep);transform:scale(1.35);} } /* ── Phone: same carousel for Our Services and Insights (owner 2026-07-30) ───────── Owner: "it takes 3 screenshots to fit the our services section" — six stacked service cards, then three stacked post cards, meaning a lot of scrolling to pass two sections. Same scroll-snap mechanism as the featured strip; assets/js/prop-carousel.js drives all three from one config list. .services needs extra care: on desktop it is a BORDERED grid (border-top + border-left on the container, with each cell drawing its own right/bottom edge) so the dividers come from the grid itself. As a horizontal flex track those borders would read as stray lines, so the container border is dropped here and each card becomes a self-contained panel. */ @media (max-width:640px){ #services .services{ display:flex;grid-template-columns:none;border-top:none;border-left:none; margin:0 -18px;padding:0 18px 4px; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px; scrollbar-width:none;-ms-overflow-style:none; } #services .services::-webkit-scrollbar{display:none;} #services .services > .srv{ flex:0 0 82%;scroll-snap-align:center; border:1px solid rgba(255,255,255,.14);border-radius:12px; } #insights .posts{ display:flex;grid-template-columns:none;max-width:none; margin:0 -18px;padding:0 18px 4px; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:14px; scrollbar-width:none;-ms-overflow-style:none; } #insights .posts::-webkit-scrollbar{display:none;} #insights .posts > .post{flex:0 0 86%;scroll-snap-align:center;} /* tilt/lift are pointer affordances; on a touch carousel they only fire mid-swipe */ #insights .posts > .post:hover,#services .services > .srv:hover{transform:none;} /* the nav bar sits on navy in the services band, so invert it there */ #services .pc-arrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none;} #services .pc-dot{background:rgba(255,255,255,.28);} #services .pc-dot[aria-current="true"]{background:var(--gold);} } /* the carousel is phone-only; make sure nothing leaks onto tablet/desktop */ @media (min-width:641px){ .pc-nav{display:none;} } /* ── Phone: shrink the developers band (owner 2026-07-30) ────────────────────────── At 430px only ONE card was visible at a time (248px card + 24px gap inside a 430px viewport) and the navy band's padding made it feel emptier still. Scaling approach: the 30 rules above set a DIFFERENT max-height per logo, hand-tuned for optical weight. Rewriting 30 values for mobile would be brittle and would drift from the desktop tuning the moment either changes. Instead the card box shrinks and the images are scaled VISUALLY with one transform, which preserves every per-logo ratio automatically. overflow:hidden on .dev-card already clips, and transform does not affect layout, so the smaller box is what drives the flex track. 132px -> 88px card height is the same 0.667 factor used for the scale. dubai-properties is re-declared because it is the only logo using transform already; scale() is listed first so its -18px optical offset scales with it. */ @media (max-width:640px){ .partners{padding:26px 0;} .partners-title{font-size:24px;max-width:20ch;} .marquee{margin-top:14px;padding:8px 0;} /* Owner 2026-07-30 (second pass): the first attempt scaled the CARD down and then applied transform:scale(.667) to the image. That DOUBLE-shrank every logo governed by WIDTH - max-width:100% had already reduced it to fit the narrower card, and the transform shrank that result again. Hence "the images themselves look smaller and theres bigger margins". Now there is ONE multiplier. At 430px the original card resolves to 212x132 with 20px padding and a 16px gutter (every clamp sits at its minimum), so height 132->88 is a factor of 0.6667 and EVERY dimension uses it - width, height, padding, gutter and each per-logo --lh cap. Content box lands at 114.7px = 172 x 0.6667, so the proportions are identical to desktop rather than merely close. */ .dev-card{--devs:.6667; width:calc(212px * var(--devs));height:calc(132px * var(--devs)); padding:0 calc(20px * var(--devs));margin-right:calc(16px * var(--devs)); border-radius:8px;} } /* ============ CONTEXTUAL LEAD POPUPS (assets/js/lead-modal.js) ============ */ .lm-back{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(7,14,26,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s linear .28s;} .lm-back.on{opacity:1;visibility:visible;transition:opacity .28s var(--ease);} .lm{position:relative;width:100%;max-width:470px;max-height:calc(100vh - 40px);overflow:auto;overscroll-behavior:contain;background:#fff;border-radius:18px;box-shadow:0 50px 100px -40px rgba(7,14,26,.7);padding:clamp(26px,3.4vw,38px);transform:translateY(14px) scale(.97);transition:transform .34s cubic-bezier(.22,1.2,.36,1);} .lm-back.on .lm{transform:none;} .lm.wide{max-width:560px;} .lm-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);} .lm-x:hover{background:var(--paper2);color:var(--ink);} .lm-x svg{width:15px;height:15px;} .lm-head{margin:0 34px 20px 0;} .lm-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.5vw,28px);letter-spacing:-.01em;margin:0 0 7px;} .lm-head p{font-size:13.5px;font-weight:300;line-height:1.6;color:var(--body);margin:0;} .lm-f{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;} .lm-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .lm-f label{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600;} .lm-opt{letter-spacing:0;text-transform:none;font-weight:400;opacity:.75;} .lm-f input,.lm-f select,.lm-f textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:12px 14px;font-family:inherit;font-size:14.5px;color:var(--ink);outline:none;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);} .lm-f input:focus,.lm-f select:focus,.lm-f textarea:focus{border-color:var(--champagne);box-shadow:0 0 0 3px rgba(201,168,106,.15);} .lm-f textarea{resize:vertical;min-height:60px;} .lm-consent{display:flex;gap:9px;font-size:12.5px;color:var(--body);line-height:1.55;margin:2px 0 14px;} .lm-consent a{color:var(--ink);border-bottom:1px solid var(--champagne);} .lm-send{width:100%;background:var(--gold-deep);color:#fff;border-radius:var(--r-pill);padding:15px 26px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;transition:background var(--dur-base) var(--ease),transform .15s var(--ease);} .lm-send:hover{background:var(--gold-deeper);} .lm-send:active{transform:scale(.985);} .lm-send[disabled]{opacity:.6;cursor:progress;} .lm-sum{background:var(--paper2);border-radius:12px;padding:16px 18px;margin-bottom:20px;} .lm-sum-h{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deeper);font-weight:700;margin-bottom:10px;} .lm-kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13px;padding:4px 0;color:var(--body);} .lm-kv b{color:var(--ink);font-weight:600;white-space:nowrap;} .lm-fine{font-size:11.5px;color:var(--muted);margin:9px 0 0;line-height:1.5;} .lm-embed{border-radius:12px;overflow:hidden;border:1px solid var(--line);} .lm-embed iframe{display:block;width:100%;height:min(620px,72vh);border:0;} .lm .form-status{margin-top:10px;font-size:13px;} body.lm-lock{overflow:hidden;} @media (max-width:520px){ .lm-back{padding:0;align-items:flex-end;} .lm{max-width:none;border-radius:18px 18px 0 0;max-height:92vh;padding-bottom:calc(28px + env(safe-area-inset-bottom));transform:translateY(100%);} .lm-two{grid-template-columns:1fr;} } @media (prefers-reduced-motion:reduce){ .lm-back,.lm{transition:none;} } /* ============ CUSTOM SELECT (assets/js/sop-select.js) ============ A native