/* ============================ FONTS ========================== The designer's own faces, shipped from the package's `Document fonts/`. Fb ElitismNarrow / Fb SpoilerPas carry NO Latin glyphs (0/52 in the cmap), so every stack that may meet a Latin word names Akrobat after them - see the fonts report. */ @font-face{font-family:'Elitism';src:url('assets/fonts/FbElitismNarrow-Light.woff2') format('woff2');font-weight:300;font-display:swap} @font-face{font-family:'Elitism';src:url('assets/fonts/FbElitismNarrow-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Spoiler';src:url('assets/fonts/FbSpoilerPas-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Phantacon';src:url('assets/fonts/PhantaconExpanded.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Pathway';src:url('assets/fonts/PathwayGothicOne-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Akrobat';src:url('assets/fonts/Akrobat-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Akrobat';src:url('assets/fonts/Akrobat-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'AlmoniNeue';src:url('assets/fonts/AlmoniNeueDL40AAA-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Assistant';src:url('assets/fonts/Assistant-Regular.woff2') format('woff2');font-weight:400;font-display:swap} /* ============================ TOKENS ========================= Surfaces are sampled from the PDF render (tools/pick.py); type colours are the IDML fills, which the PDF confirms. The IDML CMYK swatches drift on conversion, the render does not. */ :root{ --ink:#101414; /* @idml u12a7 fill, the brand near-black */ --ink-pdf:#1b1d1d; /* @pdf the same surface as rendered */ --black:#000; /* @idml u1133 rule, nav type */ --paper:#fff; --silver:#dbdad9; /* @pdf p1 logo tagline */ --stone:#7b7a7a; /* @pdf p3 right panel */ --icon:#656666; /* @pdf p3 stat icons */ --e:cubic-bezier(.22,1,.36,1); --fz:1; /* accessibility text-size multiplier */ /* Per-face metrics, all unitless fractions of the em: --hh (hhea ascent - descent) / upem : the height Chrome gives the line box --ha hhea ascent / upem : where Chrome puts the baseline in that box --ba (OS/2 typo ascent - hhea ascent) / upem InDesign sets the first baseline from the TYPO ascent and from the UNSCALED point size; Chrome builds its line box from hhea and scales the whole box. The one rule on .t below reconciles both. Measured against the PDF: Phantacon URBAN sat 43px low at 285.75pt and the formula predicts 44. */ --hh-elitism:1.0571; --ha-elitism:.8208; --ba-elitism:0; --hh-spoiler:1.0815; --ha-spoiler:.8330; --ba-spoiler:-.0122; --hh-phantacon:1.053; --ha-phantacon:.904; --ba-phantacon:-.154; --hh-pathway:1.152; --ha-pathway:.954; --ba-pathway:0; --hh-akrobat:1.2; --ha-akrobat:1; --ba-akrobat:-.1; --hh-almoni:1.19; --ha-almoni:.8722; --ba-almoni:-.2245; --hh-assistant:1.308; --ha-assistant:1.021; --ba-assistant:0; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--paper);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased; font-family:'Elitism','Akrobat',Arial,sans-serif} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,textarea{font:inherit} ::selection{background:var(--ink);color:#fff} #main:focus{outline:none} /* !important because the phone's stage reset (.stg>* {position:static;width:auto;height:auto}) has the same specificity and comes later - without this every .sr heading is an invisible 31px block of dead space above its section. */ .sr{position:absolute!important;width:1px!important;height:1px!important; overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0!important;padding:0!important} .skip{position:fixed;right:12px;top:-60px;z-index:1200;background:var(--ink);color:#fff;padding:10px 18px; transition:top .2s var(--e);font-size:calc(15px*var(--fz))} .skip:focus{top:12px} .skip:focus-visible,.logo:focus-visible,.tel:focus-visible,.tel2:focus-visible, .burger:focus-visible,.nav .x:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .nav .x:focus-visible,#hero .nav.open a:focus-visible{outline-color:#fff} /* ===================== TYPE ENGINE =========================== Every text block carries its IDML numbers as custom properties, so the CSS reads like the spec: --fs point size in cqw (pt / 19.2 - the page is 1920pt wide) --lh leading / (size x V-scale) (the IDML's own line_height) --vs the IDML VerticalScale as a fraction (1 unless the designer squashed the type) --fsmin a readability floor. The stage is proportional, so at 861px every size is 861/1920 of the artboard's - the designer's 12.3pt address would land at 5.5px. The floor only bites below ~1400px; at 1920 nothing in the page is under it. --hh / --ha / --ba the face's metrics, from :root first baseline, InDesign = frameTop + typoAscent x pointSize (V is NOT applied) first baseline, CSS = frameTop + mt + V x (halfLeading + hheaAscent x pointSize) so mt = 1em x (ha + ba) - V x ( halfLeading + 1em x ha ). One rule, no per-text nudges. Horizontal/vertical scale is `scale`, never `transform` - the stage positions these elements and `transform` would fight the reveal animations (D14). */ .t{font-size:calc(max(var(--fs,1cqw),var(--fsmin,11px))*var(--fz));line-height:var(--lh,1.2);font-weight:400; margin-top:calc(1em*(var(--ha,.8208) + var(--ba,0)) - var(--vs,1)*(.5em*(var(--lh,1.2) - var(--hh,1.0571)) + 1em*var(--ha,.8208))); direction:rtl;text-align:right;color:var(--ink)} /* h1-h3 default to bold, and the display faces ship one weight only - Chrome then SMEARS them (synthetic bold): same advances, ink ~3.5% fatter. That is what made URBAN read as a size mismatch. Every .t is explicitly 400 and the Elitism Light class re-states 300. */ .t.ltr{direction:ltr;text-align:left} .f-eli{font-family:'Elitism','Akrobat',Arial,sans-serif;font-weight:400;--hh:var(--hh-elitism);--ha:var(--ha-elitism);--ba:var(--ba-elitism)} .f-eli-l{font-family:'Elitism','Akrobat',Arial,sans-serif;font-weight:300;--hh:var(--hh-elitism);--ha:var(--ha-elitism);--ba:var(--ba-elitism)} .f-spo{font-family:'Spoiler','Akrobat',Arial,sans-serif;--hh:var(--hh-spoiler);--ha:var(--ha-spoiler);--ba:var(--ba-spoiler)} .f-pha{font-family:'Phantacon',Arial,sans-serif;--hh:var(--hh-phantacon);--ha:var(--ha-phantacon);--ba:var(--ba-phantacon)} .f-pat{font-family:'Pathway',Arial,sans-serif;--hh:var(--hh-pathway);--ha:var(--ha-pathway);--ba:var(--ba-pathway)} .f-akr{font-family:'Akrobat',Arial,sans-serif;--hh:var(--hh-akrobat);--ha:var(--ha-akrobat);--ba:var(--ba-akrobat)} .f-alm{font-family:'AlmoniNeue','Akrobat',Arial,sans-serif;--hh:var(--hh-almoni);--ha:var(--ha-almoni);--ba:var(--ba-almoni)} .f-asi{font-family:'Assistant',Arial,sans-serif;--hh:var(--hh-assistant);--ha:var(--ha-assistant);--ba:var(--ba-assistant)} /* IDML Justification -> CSS (big-site-idml-text-standard §1) */ .j-r{text-align:justify;text-align-last:right} .j-l{text-align:justify;text-align-last:left} .a-c{text-align:center} .a-l{text-align:left} .ln{display:block} /* an IDML line break, so the phone can re-run the lines inline */ .pre{white-space:pre-wrap} /* the client typed a double space here - D4 says keep it, and HTML would collapse it */ .keep{white-space:nowrap} /* Two words glued together. InDesign composes a paragraph as a whole and will move a word down to even the block out; CSS breaks greedily and keeps it. Gluing the pair that must travel together reproduces the source break AND leaves the line justified - a forced
would un-justify it. */ .nw{white-space:nowrap} /* single-line IDML lockups: CSS letter-spacing adds a trailing gap that would wrap them */ /* The body paragraph that repeats on p2, p4, p5, p6, p8, p10, p14, p15: Fb ElitismNarrow Light 25pt, H102 V77, leading 21.941, tracking -10, RightJustified. InDesign SQUEEZES a justified line - its paragraph style allows MinimumLetterSpacing -20 - and CSS justification can only stretch. Measured against the PDF, -20/1000 em is the value that puts every line break on the same word as the source (tools/wrap.cjs). */ .bodyp{--fs:1.3021cqw;--lh:1.14;--vs:.77;letter-spacing:-.02em} .bodyp.lft{transform-origin:0 0} /* a left-anchored frame: the H102 scale has to grow to the left */ /* ===================== REVEAL (D14) ========================== @keyframes, never transitions: a transition can skip its first frame and snap to the end state. transform/opacity-class properties only - and `translate`/`scale`, so a positioned element keeps the geometry the stage gave it. */ @keyframes rvUp{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}} @keyframes rvFade{from{opacity:0}to{opacity:1}} @keyframes rvOpen{from{opacity:0;scale:1.05}to{opacity:1;scale:1}} @keyframes hwIn{from{opacity:0;translate:0 .45em}to{opacity:1;translate:0 0}} @keyframes ruleOut{from{opacity:0;scale:0 1}to{opacity:1;scale:1 1}} html.js .rv{opacity:0} html.js .rv.in{animation:rvUp .8s var(--e) var(--d,0s) both} html.js .rv.rvf.in{animation-name:rvFade} html.js .rv.rvo.in{animation-name:rvOpen} /* a split headline carries its motion in the words, so the block itself only fades in - otherwise the line moves twice */ html.js .rv.hw-split.in{animation-name:rvFade} /* section headlines: the words rise in one after another (dad, 7.10) */ html.js .rv .hw{display:inline-block;opacity:0;translate:0 .45em} html.js .rv.in .hw{animation:hwIn .8s var(--e) both;animation-delay:calc(var(--d,0s) + .1s + var(--k,0)*70ms)} /* rules draw out from the centre */ html.js .rule.rv.in{animation-name:ruleOut;transform-origin:50% 50%} @media (prefers-reduced-motion:reduce){ /* stop the motion, never the layout: .bodyp is set at scale 1.02 .77 (IDML H102 V77), and a blanket scale:none swelled every paragraph 30% for anyone with reduced motion on (12.10) */ html.js .rv{opacity:1!important;animation:none!important} html.js .rv .hw{opacity:1!important;animation:none!important;translate:none!important} html,*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } html.a11y-stop .rv{opacity:1!important;animation:none!important} html.a11y-stop .rv .hw{opacity:1!important;animation:none!important;translate:none!important} /* ═══ life (Omri 12.10: "מרגיש קצת דומם מדי — יותר הנפשות, יותר תנועה וחיות") ═══ Same rules as the reveals: transform/opacity only (individual translate/scale on anything already positioned), started by the reveal observer, and gone under reduced motion or the a11y "stop motion" option, which leave the page exactly as the designer drew it. */ /* 1 · photo layers. The main photos are lifted out of the baked page art (tools/plate.py --box, 200dpi) and laid exactly over their frames. A curtain in the frame's surround colour wipes off right-to-left, the photo settles out of a zoom, then breathes slowly while on screen and drifts against the scroll. A .kb without an img is a curtain only (the gym, the live photos). */ .kb,.tw{display:none} @media (min-width:861px){ html.js .kb{display:block;position:absolute;overflow:hidden;pointer-events:none} .kb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.06; transform-origin:var(--ox,50%) var(--oy,50%)} .kb .cv{position:absolute;inset:-1px;background:var(--cv,#fff);transform-origin:0 50%} html.js .kb.in img{animation:kbIn 2s var(--e) .1s both,kbBreathe 18s ease-in-out 2.2s infinite alternate} html.js .kb.in .cv{animation:kbWipe 1.15s cubic-bezier(.77,0,.18,1) var(--wd,0s) both} html.js .kb:not(.live) img{animation-play-state:paused} /* 2 · the display titles that live inside the art (PRIME, RESORT, DESIGN) rise out of their panel: a block in the panel colour retracts upwards, so the tall letters grow from the foot */ html.js .tw{display:block;position:absolute;background:var(--cv);transform-origin:50% 0;pointer-events:none} html.js .tw.in{animation:twOut 1.4s cubic-bezier(.77,0,.18,1) .3s both} } @keyframes kbIn{from{scale:1.2}to{scale:1.06}} @keyframes kbBreathe{from{scale:1.06}to{scale:1.13}} @keyframes kbWipe{from{transform:scaleX(1)}to{transform:scaleX(0)}} @keyframes twOut{from{transform:scaleY(1)}to{transform:scaleY(0)}} @supports (animation-timeline:view()){ @media (min-width:861px){ html.js .kb.in img{animation:kbIn 2s var(--e) .1s both,kbBreathe 18s ease-in-out 2.2s infinite alternate,kbPar linear both; animation-timeline:auto,auto,view();animation-range:normal,normal,cover 0% cover 100%} } } @keyframes kbPar{from{translate:0 -2.6%}to{translate:0 2.6%}} /* scale 1.06 leaves 3% each side */ /* 3 · the hero poster breathes until the film arrives */ html.js .hero-film .poster{transform-origin:50% 65%;animation:heroKB 26s ease-in-out infinite alternate} @keyframes heroKB{from{scale:1}to{scale:1.08}} /* 4 · the live English display titles arrive letter by letter */ html.js .rv.lt-split.in{animation-name:rvFade} .ltw{white-space:nowrap} html.js .rv .lt{display:inline-block;opacity:0;translate:0 .42em} html.js .rv.in .lt{animation:ltIn .95s var(--e) both;animation-delay:calc(var(--d,0s) + .15s + var(--k,0)*55ms)} @keyframes ltIn{from{opacity:0;translate:0 .42em}to{opacity:1;translate:0 0}} /* 5 · long lists run in line by line (the spec, the developers) */ html.js .rv.lns.in{animation-name:rvFade} html.js .rv.lns .ln{opacity:0;translate:0 .7em} html.js .rv.lns.in .ln{animation:lnIn .6s var(--e) both;animation-delay:calc(var(--d,0s) + var(--i,0)*26ms)} @keyframes lnIn{from{opacity:0;translate:0 .7em}to{opacity:1;translate:0 0}} /* 6 · the XPLORE buildings on the map send out a slow sonar ring */ .pin{position:absolute;width:3.4cqw;aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:1} .pin::before,.pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;opacity:0; box-shadow:0 0 0 1px rgba(17,17,17,.35),inset 0 0 0 1px rgba(17,17,17,.2);animation:pinRing 2.8s cubic-bezier(.22,.61,.36,1) infinite} .pin::after{animation-delay:1.4s} @keyframes pinRing{0%{transform:scale(.4);opacity:0}15%{opacity:1}100%{transform:scale(2.2);opacity:0}} .pin-m{display:none} .mapin{position:relative;display:block;width:max-content} @media (max-width:860px){ .pin-d{display:none} .pin-m{display:block;width:44px} } /* 7 · the room tiles answer the pointer: a light passes across and the label lifts */ /* the light lives in its own clipped layer (.sw, built in JS) so the tile itself stays unclipped: the tower blocks of §8 fall in from above it */ #plans .rb .sw{position:absolute;inset:0;overflow:hidden;pointer-events:none} #plans .rb .sw::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);translate:120% 0;transition:translate .9s var(--e)} #plans .rb:hover .sw::after,#plans .rb:focus-visible .sw::after{translate:-120% 0} #plans .rb .t{transition:translate .45s var(--e)} /* 8 · the room tiles build a tower (Omri 12.10: "כמו מגדל"). Each tile is one whole block that falls under gravity and lands with a squash and a small rebound: the bottom row first (right, then left), then the top row drops onto it and the block underneath takes the hit. Each label rises once its block has landed; when the tower stands, a light runs over the bars. On the desktop the blocks carry the tile's own art (tools/plate.py crops) over a panel-coloured cover; at the end the whole layer fades and the baked tile underneath - identical - takes over, so no seam is left and the hover states work on the button itself. On the phone the tiles are CSS colour and the button repaints. */ #plans .rb3{--tc:#595958;--ti:url(assets/web/tile3.webp);--drop:-92%;--d:700ms} #plans .rb4{--tc:#6e6e6e;--ti:url(assets/web/tile4.webp);--drop:-92%;--d:860ms} #plans .rb5{--tc:#868685;--ti:url(assets/web/tile5.webp);--drop:-200%;--d:0ms;--thud:1240ms} /* rb3 lands on it at 700+540 */ #plans .rb6{--tc:#141515;--ti:url(assets/web/tile6.webp);--drop:-200%;--d:160ms;--thud:1400ms} /* rb4 lands on it at 860+540 */ #plans .rb .twr{position:absolute;inset:0;pointer-events:none;z-index:0} #plans .rb .t{z-index:1} /* explicit: on the phone a composited block (the thud) painted over the static-flow label */ #plans .rb .sw{z-index:2} #plans .rb .blk{position:absolute;inset:0;display:block;background:var(--tc) var(--ti) 0 0/100% 100% no-repeat; opacity:0;transform-origin:50% 100%;backface-visibility:hidden} @media (min-width:861px){ #plans .rb .twr{background:#b9b9b8;box-shadow:0 0 0 1px #b9b9b8} } /* hides the baked tile (and its anti-aliased edge) until its block lands */ @media (max-width:860px){ #plans .rb .blk{background-image:none} } #plans .rb.in .blk{animation:blkDrop .9s linear var(--d) both} #plans .rb5.in .blk,#plans .rb6.in .blk{animation:blkDrop .9s linear var(--d) both,blkThud .4s var(--e) var(--thud)} #plans .rb.in .twr{animation:cubeOut .3s ease 1.8s forwards} html.js #plans .rb:not(.in) .t{opacity:0} #plans .rb.in .t{animation:lblIn .6s var(--e) calc(var(--d) + .82s) backwards} #plans .rb.in .sw::after{animation:sweepOnce 1.1s var(--e) 1.95s backwards} @media (max-width:860px){ html.js #plans .rb{background:transparent;position:relative} /* the block layer's box; static on the phone otherwise */ #plans .rb .t{position:relative} /* a static label would paint under the absolute blocks */ #plans .rb.in{animation:bgOn 0s linear 1.8s forwards} html.js #plans .rbwrap{overflow:clip} /* the blocks drop in from the top edge of the grid */ } /* gravity: ease-in to the floor, then squash, a small rebound, settle */ @keyframes blkDrop{ 0%{opacity:0;transform:translateY(var(--drop));animation-timing-function:cubic-bezier(.55,.085,.68,.53)} 12%{opacity:1} 60%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.3,1)} 70%{transform:translateY(0) scale(1.06,.88);animation-timing-function:cubic-bezier(.3,0,.3,1)} 84%{transform:translateY(-3%) scale(.98,1.03)} 94%{transform:translateY(0) scale(1.01,.99)} 100%{opacity:1;transform:none}} @keyframes blkThud{0%{transform:none}30%{transform:scale(1.025,.95)}100%{transform:none}} @keyframes cubeOut{to{opacity:0}} @keyframes lblIn{from{opacity:0;translate:0 .35em}to{opacity:1;translate:0 0}} @keyframes sweepOnce{from{translate:120% 0}to{translate:-120% 0}} @keyframes bgOn{to{background-color:var(--tc)}} #plans .rb:hover .t,#plans .rb:focus-visible .t{translate:0 -6%} @media (prefers-reduced-motion:reduce){ .kb,.tw,#plans .rb .twr{display:none!important} html.js #plans .rb .t{opacity:1!important} @media (max-width:860px){ html.js #plans .rb{background:var(--tc)!important} } html.js .rv .lt,html.js .rv.lns .ln{opacity:1!important;animation:none!important;translate:none!important} .pin::before{opacity:1;transform:none} } html.a11y-stop .kb,html.a11y-stop .tw,html.a11y-stop #plans .rb .twr{display:none!important} html.a11y-stop #plans .rb .t{opacity:1!important} @media (max-width:860px){ html.a11y-stop #plans .rb{background:var(--tc)!important} } html.a11y-stop .rv .lt,html.a11y-stop .rv.lns .ln{opacity:1!important;translate:none!important} html.a11y-stop .pin::before{opacity:1;transform:none} /* ===================== STAGE ================================= */ .stg{position:relative;width:100%;background:var(--paper)} .stg img.art{width:100%;height:100%;object-fit:cover} @media (min-width:861px){ /* Each InDesign page is 1920x1080pt. At a 1920px viewport 1 CSS px = 1 pt, and every number below is the IDML bbox in page per-cent, so the stage scales without drift. */ .stg{aspect-ratio:1920/1080;container-type:size;overflow:hidden} .stg>*{position:absolute} .stg img.art{position:absolute;inset:0} } /* ===================== HEADER / p1 =========================== */ #hero{background:var(--paper)} .logo-h{margin:0;font:inherit;font-weight:400} .logo{display:block;background:var(--ink-pdf)} .logo img{width:100%;height:100%;object-fit:cover} .hdiv{background:var(--black)} .tel{display:block;color:var(--ink)} .tel svg{width:100%;height:100%;fill:currentColor} .nav a{color:var(--black);white-space:nowrap;transition:opacity .2s var(--e)} .nav a:hover,.nav a:focus-visible{opacity:.55} .nav a:focus-visible{outline:2px solid var(--black);outline-offset:4px} .hrule{background:var(--black)} .hero-film{background:var(--ink-pdf);overflow:hidden} .hero-film .hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero-film .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero-mute{position:absolute;bottom:4.2%;right:2.4%;z-index:4; /* 23.10: right - the a11y button is fixed bottom-left */ width:clamp(44px,3.2cqw,58px);height:clamp(44px,3.2cqw,58px); border-radius:50%;background:rgba(16,20,20,.52);border:1.5px solid rgba(255,255,255,.72);color:#fff; display:flex;align-items:center;justify-content:center;transition:scale .2s var(--e),background-color .2s var(--e)} .hero-mute:hover{background:rgba(16,20,20,.75);scale:1.06} .hero-mute:active{scale:.95} .hero-mute:focus-visible{outline:2px solid #fff;outline-offset:3px} .hero-mute[hidden]{display:none} /* play button - only when the film cannot start by itself (iPhone Low Power Mode, data saver, Reduce Motion) - as in galil-yam */ .hero-play{position:absolute;left:50%;top:50%;z-index:5;width:clamp(68px,6cqw,96px);height:clamp(68px,6cqw,96px);translate:-50% -50%; border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;color:#fff;padding:0; background:rgba(16,20,20,.5);border:1.5px solid rgba(255,255,255,.75); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:scale .2s var(--e),background-color .2s var(--e)} .hero-play.on{display:flex} .hero-play:hover{background:rgba(16,20,20,.72);scale:1.06} .hero-play:active{scale:.95} .hero-play:focus-visible{outline:2px solid #fff;outline-offset:3px} .hero-play svg{width:38%;height:38%;margin-left:8%;fill:currentColor} .hero-mute svg{width:46%;height:46%;fill:currentColor} .hero-mute .ic-on{display:none}.hero-mute .ic-off{display:block} .hero-mute:not(.is-muted) .ic-on{display:block}.hero-mute:not(.is-muted) .ic-off{display:none} .burger{display:none} @media (min-width:861px){ #hero .logo-h{left:3.12%;top:3.33%;width:7.67%;height:7.67%} #hero .logo{display:block;width:100%;height:100%} /*@idml u12a7*/ #hero .hdiv{left:12.05%;top:4.20%;width:1px;height:5.97%} /*@idml u10ff 0.868pt stroke*/ #hero .tel{left:12.988%;top:5.279%;width:7.241%;height:2.635%} /*@pdf p1 ink box of the *3384 lockup*/ #hero .tel .num{position:absolute;left:0;top:0;width:77.45%;height:100%} /*@pdf 5.608 / 7.241*/ #hero .tel .ic{position:absolute;right:0;top:4.17%;width:18.63%;height:90.32%} /*@idml u10e3, to the RIGHT of the digits*/ #hero .nav{inset:0} #hero .nav .x{display:none} #hero .nav a{position:absolute;top:7.77%;--fs:1.0417cqw;--lh:1.2;--hh:var(--hh-spoiler);--ha:var(--ha-spoiler);--ba:var(--ba-spoiler);letter-spacing:-.04em} /*@idml u109f 20pt trk -40*/ /*@pdf p1 the right edge of each nav word, .n1 to .n9 right to left*/ #hero .nav .n1{right:2.239%} #hero .nav .n2{right:5.805%} #hero .nav .n3{right:13.303%} #hero .nav .n4{right:18.357%} #hero .nav .n5{right:23.151%} #hero .nav .n6{right:27.607%} #hero .nav .n7{right:31.321%} #hero .nav .n8{right:36.422%} #hero .nav .n9{right:41.037%} #hero .hrule{left:2.71%;top:12.15%;width:95.05%;height:1px;z-index:2} /*@idml u1133 ; above the film, which starts on the same row*/ /*@idml u1133*/ /* D16: page 1 is the header and nothing else - everything below the rule is the film slot */ #hero .hero-film{left:0;top:12.15%;width:100%;height:87.85%} } /* ===================== p2 URBAN ============================== */ #urban{background:var(--paper)} #urban .h-urban,#urban .h-life{color:var(--ink-pdf)} /*@pdf p2 #1b1d1d*/ #urban .h-1000,#urban .p-urban,#urban .tick{color:var(--black)} /*@pdf p2 #000000*/ @media (min-width:861px){ #urban .h-urban{left:13.36%;top:22.00%;width:20.84%; --fs:14.8828cqw;--lh:1.2;--hh:var(--hh-phantacon);--ha:var(--ha-phantacon);--ba:var(--ba-phantacon);letter-spacing:-.1em} /*@idml u196b 285.75pt trk -100 ; the typo-vs-hhea first baseline is in --ba-phantacon*/ #urban .h-life{left:14.75%;top:42.58%;width:10.11%; --fs:2.6543cqw;--lh:1.2;--hh:var(--hh-pathway);--ha:var(--ha-pathway);--ba:var(--ba-pathway);letter-spacing:.08em} /*@idml u283 50.963pt trk 80 LeftAlign*/ #urban .h-1000{right:11.54%;top:23.33%;width:6.50%; --fs:1.5823cqw;--lh:1.2;--hh:var(--hh-elitism);--ha:var(--ha-elitism);--ba:var(--ba-elitism)} /*@idml u1c1 30.38pt*/ .bodyp{scale:1.02 .77;transform-origin:100% 0} /*@idml H102 V77 ; every .bodyp width is the IDML width / 1.02*/ #urban .p-urban{right:11.46%;top:26.48%;width:27.93%} /*@idml u1935 L60.05 w28.49 T26.48, RightJustified*/ #urban .tick{right:83.95%;top:84.37%;width:6.84%;letter-spacing:-.0325em} /*@idml u1ad1 L9.07 w6.98 T84.37 ; @pdf p2 the line is set to an advance of 133.9pt against 146.7 natural - InDesign squeezed this justified single line right down to the measure, so its tracking carries more than the shared .bodyp -20/1000 */ } /* ===================== p3 NUMBERS ============================ */ #numbers{background:var(--paper)} #numbers .panel{background:var(--stone)} #numbers .num{color:var(--ink-pdf)} #numbers .lab{color:var(--black)} /*@pdf p3 #000000*/ #numbers .srule{background:rgba(16,20,20,.45)} /* 12.10: .906 drew a heavy black rule; the PDF's 0.5pt hairline reads as #9c-#b2 grey on screen - matched by eye at 1x and 2x */ /* the alpha carries the sub-pixel coverage; element opacity cannot - the reveal animation ends on opacity:1 */ #numbers .ico{color:var(--icon)} #numbers .ico svg{width:100%;height:100%;fill:currentColor} #numbers .big1000{color:#fff} #numbers .vtitle,#numbers .vtitle .t{color:#fff} @media (min-width:861px){ #numbers .srow,#numbers .rpanel,#numbers .cafe{display:contents} #numbers .srow>*,#numbers .rpanel>*,#numbers .cafe>*{position:absolute} #numbers .panel{left:39.38%;top:0;width:60.63%;height:100%} /*@idml u12ec ; @pdf #7b7a7a*/ #numbers .ph-cafe{left:39.40%;top:11.11%;width:54.35%;height:50.56%} /*@idml u149f*/ #numbers .ph-hang{left:39.38%;top:62.87%;width:23.23%;height:26.02%} /*@idml u1498*/ #numbers .ph-food{left:61.67%;top:62.78%;width:32.08%;height:25.82%} /*@idml u14a7*/ #numbers .big1000{left:45.83%;top:36.11%;width:17.60%; --fs:16.1739cqw;--lh:1.2;--hh:var(--hh-phantacon);--ha:var(--ha-phantacon);--ba:var(--ba-phantacon);letter-spacing:-.1em} /*@idml u1481 310.538pt trk -100*/ /* u12ef is a 90deg-rotated frame: the IDML bbox is its AABB, and the text measure is TextColumnFixedWidth 247.48pt. The wrapper takes the AABB, the inner line takes the measure and turns about its own centre. */ #numbers .vtitle{left:44.90%;top:34.73%;width:1.87%;height:22.92%} /*@idml u12ef AABB*/ #numbers .vtitle .t{position:absolute;left:50%;top:50%;width:12.8896cqw; --fs:2.2838cqw;--lh:1.2;rotate:90deg;translate:-50% -50%;white-space:nowrap} /*@idml u12ef 43.849pt, measure 247.48pt*/ #numbers .num{--fs:6.2884cqw;--lh:1.2;--hh:var(--hh-phantacon);--ha:var(--ha-phantacon);--ba:var(--ba-phantacon);letter-spacing:-.1em} /*@idml 120.737pt trk -100*/ #numbers .lab{--fs:1.1721cqw;--hh:var(--hh-elitism);--ha:var(--ha-elitism);--ba:var(--ba-elitism)} /*@idml 22.504pt*/ #numbers .srule{left:12.85%;width:19.96%;height:.04716cqw} /*@idml u14b5..u14ba stroke 0.9055 page-pt = 0.9055px on a 1920 stage. Chrome snaps a background box up to a whole device pixel whatever the fraction (measured identical at DPR 1 and 2), so the sub-pixel coverage is carried as opacity instead - otherwise the hairline reads a third heavier than the designer drew it.*/ /*@idml u14b5..u14ba 0.9055pt stroke ; .r1..r6 carry each rule's own T*/ #numbers .ico{left:28.47%;width:3.16%} /*@idml the icon column ; .i1..i7 carry each icon's own T and h*/ #numbers .n1{left:23.21%;top:10.90%;width:4.55%} /*@idml u136e 1.7*/ #numbers .l1a{left:21.04%;top:11.37%;width:2.67%;--lh:.966} /*@idml u1385*/ #numbers .l1b{left:24.00%;top:19.99%;width:2.50%;--lh:1.2} /*@idml u1357*/ #numbers .i1{top:10.49%;height:3.80%} #numbers .r1{top:22.69%} #numbers .n2{left:16.68%;top:24.94%;width:11.13%} /*@idml u13b3 160,000*/ #numbers .l2a{left:14.444%;top:24.37%;width:1.46%;--lh:1.2;rotate:-90deg;transform-origin:100% 0;translate:0 0} /*@idml u139c rotated -90 ; @pdf p3 x307.3 - it sat 29px right, on the 1 of 160,000*/ #numbers .l2b{left:13.01%;top:29.72%;width:4.03%;--lh:.966} /*@idml u1426*/ #numbers .i2{top:24.77%;height:3.77%} #numbers .r2{top:35.48%} #numbers .n3{left:16.79%;top:37.23%;width:11.13%} /*@idml u13ca 100,000*/ #numbers .l3{left:11.40%;top:42.62%;width:5.64%;--lh:.966} /*@idml u130f*/ #numbers .i3{top:36.88%;height:3.39%} #numbers .r3{top:47.60%} #numbers .n4{left:18.135%;top:49.57%;width:11.13%} /*@idml u13e1 25,000 ; @pdf p3 x348.2 (was 16.79% = 100,000's left: 26px into תושבים)*/ #numbers .l4{left:14.81%;top:54.96%;width:3.19%;--lh:.966} /*@idml u1328*/ #numbers .i4{top:49.29%;height:4.52%} #numbers .r4{top:59.65%} #numbers .n5{left:19.77%;top:61.74%;width:8.14%} /*@idml u13f8 6,747*/ #numbers .l5{left:17.67%;top:64.89%;width:2.06%;--lh:.966} /*@idml u1340*/ #numbers .i5{top:61.22%;height:3.82%} #numbers .r5{top:71.79%} #numbers .n6{left:22.57%;top:73.69%;width:4.88%} /*@idml u140f 110*/ #numbers .l6{left:19.25%;top:75.80%;width:3.74%;--lh:.966} /*@idml u143e*/ #numbers .i6{top:72.91%;height:5.36%} #numbers .r6{top:83.33%} #numbers .l7{left:13.12%;top:84.81%;width:13.73%;--lh:.966} /*@idml u1455*/ #numbers .i7{top:84.14%;height:4.91%} } /* ===================== p4 PRIME ============================== */ /* PRIME, the vertical rule beside it and every map label are vector art inside the page, so they arrive with the plate; only the paragraph is live. */ #prime{background:var(--paper)} .mapwrap:focus-visible{outline:3px solid var(--ink);outline-offset:-3px} #prime .p-prime{color:var(--black)} /* ".keep" on "רבים ומגוונים," - the one line where InDesign's paragraph composer and the browser's greedy breaker disagree. The copy is untouched. */ @media (min-width:861px){ .mo{display:none} #xfactor .xf-art,#resort .res-head,#design .dg-art,#plans .rbwrap,#devs .dev,#contact .telblk{display:contents} #xfactor .xf-art>*,#resort .res-head>*,#design .dg-art>*,#plans .rbwrap>*,#devs .dev>*,#contact .telblk>*{position:absolute} #prime .p-prime{right:10.22%;top:64.07%;width:8.3235%;letter-spacing:-.01em} /*@idml u92a L81.29 w8.49 T64.07, 25pt H102 V77 lead 21.94, ragged right - not justified, so it keeps the IDML tracking instead of the .bodyp squeeze; width / 1.02*/ } /* ===================== p5 THE X FACTOR ======================= */ #xfactor .stg{background:var(--ink)} #xfactor .h-xf,#xfactor .p-xf{color:#fff} #xfactor .ofliving{color:#aeadad} /*@pdf p5*/ @media (min-width:861px){ #xfactor .h-xf{right:5.18%;top:58.53%;width:19.92%; --fs:1.5823cqw;--lh:1.2} /*@idml u1517 30.38pt L74.90 w19.92*/ #xfactor .p-xf{right:5.18%;top:62.59%;width:36.9216%} /*@idml u1f8d L57.16 w37.66 RightJustified ; width / 1.02*/ #xfactor .ofliving{left:18.117%;top:79.91%;width:13.43%; --fs:6.8230cqw;--lh:1.2;letter-spacing:-.1em} /*@idml u14e9 131.001pt trk -100 LeftAlign, frame L18.43 ; -0.313% to the @pdf p5 ink*/ } /* ===================== p5b the compound at dusk ============== */ /* Dad 22.10: after THE X FACTOR, the compound at dusk across the whole screen, like the double page in the project book, then a short pause of paper before RESORT. The alfa stand-in (Cam04) came out the same day ("נחכה להדמיה האמיתית של הפרויקט") - the rules stay parked here for the real render; the markup is in _analysis/index.src.pre-dad-fixes2-2026-10-22.html. The pause between the gym and DESIGN stays. */ #night{background:var(--paper)} #night .stg{background:#2c3038} @media (min-width:861px){ #night,#gym{padding-bottom:clamp(28px,4.2vw,84px)} /* #night parked, see above */ } /* ===================== p6 RESORT ============================= */ #resort{background:var(--paper)} #resort .h-res,#resort .p-res{color:var(--black)} #resort .vparadise .t{color:#b9b9b8} /*@pdf p6 on the #656666 panel*/ @media (min-width:861px){ #resort .h-res{right:15.80%;top:32.84%;width:24.90%; --fs:1.5823cqw;--lh:1.2} /*@idml u1557 30.38pt L59.30 w24.90*/ #resort .p-res{right:15.51%;top:88.89%;width:44.9412%} /*@idml u1540 L38.65 w45.84 RightJustified ; width / 1.02*/ /* u1588 is a -90deg frame: the IDML bbox is its AABB, the measure is the bbox height */ #resort .vparadise{left:17.13%;top:42.43%;width:2.16%;height:30.92%} /*@idml u1588 AABB*/ #resort .vparadise .t{position:absolute;left:50%;top:50%;width:17.3958cqw; --fs:2.0406cqw;--lh:1.2;letter-spacing:.08em;white-space:nowrap; rotate:-90deg;translate:-50% -50%;text-align:right;direction:ltr} /* text-align:right, not left: the -90deg turn maps the END of the line to the top of the frame, which is where the source sets it flush */ /*@idml u1588 39.18pt trk 80, measure 334pt*/ } /* ===================== p7 the pool =========================== */ /* One image on the spread and nothing on the pasteboard (D17 checked in the IDML), so the chevron the designer drew stays part of the picture - there is no second slide to go to. */ #pool{background:var(--paper)} /* ===================== p8 FIND YOUR WELLNESS ================= */ /* FIND YOUR WELLNESS and the glass panel behind it are vector art in the page, so they come with the plate; the two live blocks sit on the photograph in white. */ #wellness .h-wl,#wellness .p-wl{color:#fff} @media (min-width:861px){#wellness .h-wl,#wellness .p-wl{text-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.45)}} /*@pdf p8*/ @media (min-width:861px){ /* Dad 22.10: "להגדיל את הטקסט, הוא לא קריא" - both blocks up ~30% on the photo, with a soft shadow under the white type; the heading moves up so the body keeps its place */ #wellness .h-wl{left:6.25%;top:36.4%;width:18.8%; --fs:2.06cqw;--lh:1.2} /* the box grows with the type (13.37% x 2.06/1.58) so the line still starts at the body's left edge */ /*@idml u1f2e 30.38pt*/ #wellness .p-wl{left:6.25%;top:42.2%;width:40.5%;--fs:1.70cqw;--lh:1.16} /* 12.10: RTL like every Hebrew paragraph; .j-l alone gives the IDML's LeftJustified - direction:ltr reversed the runs ("ב- XPLORE" landed at the far end) */ /*@idml u1f45 L6.25 w37.50 LeftJustified ; width / 1.02*/ } /* ===================== p9 the gym ============================ */ #gym{background:var(--paper)} /* ===================== p10 DETAILS MAKES DESIGN ============== */ #design .h-dt{color:#b9b9b8} /*@pdf p10*/ #design .h-dg,#design .p-dg{color:#fff} /*@pdf p10*/ #design .p-dg .sm{font-size:calc(max(1.0417cqw,11px)*var(--fz))} /*@idml u1be2 the Akrobat runs are 20pt, not 25*/ @media (min-width:861px){ #design .h-dt{left:62.71%;top:23.33%;width:20.91%; --fs:6.7377cqw;--lh:.928;letter-spacing:.125em} /*@idml u1642 129.363pt lead 120 trk 125 LeftAlign*/ #design .h-dg{right:43.60%;top:25.74%;width:17.82%; --fs:1.5823cqw;--lh:1.2} /*@idml u1bf9 30.38pt L38.58 w17.82*/ #design .p-dg{right:43.60%;top:29.40%;width:31.8039%} /*@idml u1be2 L23.96 w32.44 RightJustified ; width / 1.02*/ } /* ===================== p12 the living room =================== */ /* Same as p7: one image on the spread, nothing on the pasteboard, so the chevron stays part of the picture (D17). */ #interior{background:var(--paper)} /* ===================== p11 the technical spec ================ One IDML frame (u1671) with TWO text columns. CSS multicol balances arbitrarily and would drift the headings mid-column, so the two columns are two absolute divs, split at exactly the source's own break (after "פנדור או ש"ע") - big-site-idml-text-standard §8. Every line is the IDML's own line, kept with white-space:pre so the leading spaces that indent a continuation line survive. */ #spec{background:var(--paper)} #spec .spec-t,#spec .speccol,#spec .disc{color:var(--black)} #spec .speccol .ln{display:block;white-space:pre} #spec .speccol .spec-h{font-weight:400;font-family:'Elitism','Akrobat',Arial,sans-serif} #spec .speccol .ak{font-size:calc(max(.9671cqw,11px)*var(--fz));font-family:'Akrobat',Arial,sans-serif;font-weight:600} #spec .speccol .ak.akx{font-size:calc(max(1.1282cqw,11px)*var(--fz))} /*@idml the 40X3 "X" is 21.662pt, the other Latin runs are 18.568*/ @media (min-width:861px){ #spec .spec-t{right:58.07%;top:13.52%;width:14.5588%; --fs:1.4506cqw;--lh:.938;--vs:.77;letter-spacing:-.01em;scale:1.02 .77;transform-origin:100% 0} /*@idml u16a1 27.852pt H102 V77 lead 20.115 ; width 14.85 / 1.02*/ #spec .speccol{top:17.23%;width:12.3265%; --fs:1.1282cqw;--lh:1.206;--vs:.77;letter-spacing:-.006em;scale:1.02 .77;transform-origin:100% 0} /*@idml u1671 21.662pt H102 V77 lead 20.115 ; column 12.573% / 1.02*/ #spec .speccol.c1{right:58.14%} #spec .speccol.c2{right:73.596%} /*@idml u1671 frame R41.98 with a 2.724% gutter ; @pdf p11 each column edge is trimmed ~2px: the IDML lines carry their own leading-space indent and Chrome lays that space out slightly differently from InDesign. letter-spacing -6/1000 rather than the IDML's -10 for the same reason - measured line by line against the PDF. */ #spec .speccol .spec-h{margin-top:.2786em} /*@pdf p11 a heading opens 4.65pt lower than the line pitch*/ #spec .speccol .ln:first-child.spec-h{margin-top:0} #spec .disc{right:58.30%;top:79.99%;width:23.225%; --fs:.7253cqw;--lh:1.2;letter-spacing:-.008em;scale:1.2 1;transform-origin:100% 0} /*@idml u1689 13.926pt H120 ; width 27.87 / 1.2. -8/1000 is the justification squeeze, measured line by line against the PDF (tools/wrap.cjs) - the IDML tracking is 0.*/ } /* Rotem (Amram) 26.10: "עיקרי מפרט – תסדרו בבקשה בבולטים. לא מצליחה לקרוא כלום". The artboard set the spec at 21.7pt squeezed to V77 in two 12% columns - about 8px of x-height on a laptop. Desktop now reads like the phone: no squeeze, ~40% bigger type, one item per bullet, the two columns spread over the whole white page (the baked silver rule between them is painted over), the disclaimer moved to the foot. Copy and order unchanged. */ @media (min-width:861px){ #spec .stg::before{content:"";position:absolute;left:43.6%;top:12%;width:1.2%;height:66%;background:var(--paper);z-index:1} #spec .spec-t,#spec .stg .speccol,#spec .disc{z-index:2} #spec .spec-t{right:49%;top:7.2%;width:44%;scale:none;--fs:1.75cqw;--lh:1.2;letter-spacing:0;font-weight:400} #spec .stg .speccol{top:14.4%;width:21.2%;scale:none;--fs:1.02cqw;--lh:1.3;letter-spacing:0;font-weight:400} /* the regular cut, not the light - it is reading text now */ #spec .stg .speccol.c1{right:49%} #spec .stg .speccol.c2{right:72%} #spec .stg .speccol .ln{display:inline;white-space:normal} #spec .stg .speccol .ln.spec-h{display:block;margin:.95em 0 .35em;font-size:1.08em;font-weight:400} #spec .stg .speccol .ln:first-child.spec-h{margin-top:0} #spec .stg .speccol .it{display:block;position:relative;padding:.18em 1em .18em 0} #spec .stg .speccol .it::before{content:"";position:absolute;right:.1em;top:.68em;width:.34em;height:.34em;border-radius:50%;background:#8a8a89} #spec .stg .speccol .ak{font-size:calc(.86em*var(--fz))} #spec .stg .speccol .ak.akx{font-size:calc(1em*var(--fz))} #spec .disc{right:49%;top:89%;width:44%;scale:none;--fs:.66cqw;--lh:1.3;letter-spacing:0} #spec .stg .speccol .ak{font-size:calc(max(.86em,11px)*var(--fz))} } /* below ~1080px the 11px floor (1.02cqw < 11px) makes the list longer than a 16:9 page, so the page grows instead: the art (a flat dark panel + the painted-over rule) stretches, the photo is cropped by cover */ @media (min-width:861px) and (max-width:1099px){ #spec .stg{aspect-ratio:1920/1700} #spec .stg img.art{object-fit:fill} } /* ===================== p13 APARTMENT PLANS =================== */ /* The four tiles and the little rule inside each of them are the plate's own artwork, so the buttons sit over it transparently and only carry the label and the states. */ #plans .h-ap,#plans .h-pl{color:#fff} /*@pdf p13*/ #plans .rb{display:block;border:0;background:transparent;padding:0;cursor:pointer; transition:backdrop-filter .25s var(--e),background-color .25s var(--e)} #plans .rb:hover,#plans .rb:focus-visible{background:rgba(255,255,255,.14)} #plans .rb:focus-visible{outline:3px solid #fff;outline-offset:-5px} #plans .rb:active{background:rgba(255,255,255,.07)} #plans .rb .t{pointer-events:none} #plans .rb3 .t,#plans .rb4 .t,#plans .rb5 .t{color:var(--black)} /*@pdf p13*/ #plans .rb6 .t{color:#b9b9b8} /*@pdf p13*/ @media (min-width:861px){ #plans .h-ap{left:8.33%;top:37.31%;width:33.39%; --fs:13.1215cqw;--lh:1.2;letter-spacing:-.1em} /*@idml u1cd4 251.933pt trk -100 LeftAlign*/ #plans .h-pl{left:9.52%;top:54.64%;width:14.51%; --fs:5.9990cqw;--lh:.928;letter-spacing:.125em} /*@idml u1ca3 115.181pt lead 106.844 trk 125 LeftAlign*/ #plans .rb{position:absolute;width:13.53%;height:25.87%} /*@idml u1d5e u1d3f u1d9c u1d7c*/ #plans .rb4{left:65.39%;top:24.81%} #plans .rb3{left:80.10%;top:24.81%} #plans .rb6{left:65.39%;top:52.88%} #plans .rb5{left:80.22%;top:52.88%} #plans .rb .t{position:absolute;width:67.18%;--fs:3.8259cqw;--lh:.929;top:25.82%;right:25.55%} /*@idml 73.458pt lead 68.273 ; the label frame is 9.09 / 13.53 of the tile wide, T31.49 inside a tile at T24.81 h25.87, right edge 3.46% of the page in from the tile edge*/ } /* ===================== ARCHITECT (Dad 4.11.2026 - no artboard) ===== A page the design never had, built in p14's own language and mirrored so the two read as a pair: grey panel + silver bar + photo band on top, logo and justified body below. The heading pair is ours (Phantacon / Pathway like every page); the body is the office's text verbatim, its docx paragraphs 4+5 joined - one sentence split by a stray return. */ #arch .h-ar,#arch .h-ab{color:#cccccc} #arch .p-ar{color:var(--black)} #arch .ln{display:block} #arch .ln.gap{margin-top:1.14em} @media (min-width:861px){ #arch .h-ar{left:5.89%;top:17.5%;width:33%;--fs:8.6cqw;--lh:1.2;letter-spacing:-.1em} #arch .h-ab{left:6.3%;top:31%;width:30%;--fs:3.1cqw;--lh:1.2;letter-spacing:.06em} #arch .dev{display:contents} #arch .dev>*{position:absolute} #arch .arch-logo{display:block;right:7.6%;top:61%;width:10%;height:auto} #arch .p-ar{right:23.6%;top:61.2%;width:41.6%} } /* ===================== p14 BUILDING YOUR TOMORROW ============ */ #devs .h-bd,#devs .h-yt{color:#cccccc} /*@pdf p14*/ #devs .p-sh,#devs .p-aa{color:var(--black)} #devs .ln{display:block} #devs .ln.gap{margin-top:1.14em} /*@pdf p14 one empty line between paragraphs*/ #devs .ln.b,#devs .ln .b{font-weight:400;font-family:'Elitism','Akrobat',Arial,sans-serif} /* the inline run on p-sh line 2 too (PDF: FbElitismNarrow-Regular) */ #devs .p-sh .lg,#devs .p-aa .lg{font-family:'AlmoniNeue','Akrobat',Arial,sans-serif} @media (min-width:861px){ #devs .h-bd{left:65.99%;top:20.51%;width:24.64%; --fs:11.3009cqw;--lh:1.2;letter-spacing:-.1em} /*@idml u1df7 216.978pt trk -100 LeftAlign*/ #devs .h-yt{left:67.02%;top:35.02%;width:22.05%; --fs:4.2737cqw;--lh:1.2} /*@idml u1e40 82.055pt LeftAlign*/ #devs .p-sh{right:52.81%;top:63.33%;width:39.4216%} /*@idml ubfb L6.98 w40.21 RightJustified ; width / 1.02*/ #devs .p-aa{right:6.55%;top:63.33%;width:38.8235%} /*@idml ube4 L53.85 w39.60 RightJustified ; width / 1.02*/ } /* ===================== p15 the form, and the footer ========== The page's own chrome - the four field frames and the send plate - is redrawn in CSS rather than left to the plate image, so focus and error states can live on it (D15). */ #contact .stg{background:var(--paper)} #contact form{display:contents} .f{background:#fff;border:.5px solid var(--black);border-radius:5.25px;position:relative} .f label{position:absolute;right:var(--lr,7.4%);top:var(--ly);margin:0;line-height:1.2;color:var(--black); cursor:text;transform-origin:100% 0;transition:translate .35s var(--e),scale .35s var(--e);pointer-events:none} .f:focus-within label,.f:has(:is(input,textarea):not(:placeholder-shown)) label{ translate:0 var(--lf);scale:var(--ls,.74); background:var(--paper);padding-inline:.45em} /* the frame must not strike through it */ .f input,.f textarea{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;outline:0; border-radius:inherit;font-family:'Elitism','Akrobat',Arial,sans-serif;font-weight:300;color:var(--ink); resize:none;caret-color:var(--ink);padding:var(--ip,2.2% 7.4% .4%);box-sizing:border-box} .f input::placeholder,.f textarea::placeholder{color:transparent} .f input[type=tel],.f input[type=email]{direction:ltr;text-align:right} .f input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #fff inset;-webkit-text-fill-color:var(--ink)} /* focus draws a rule along the FOOT of the field - never a second frame (D15) */ .f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink); border-radius:0 0 5.25px 5.25px;scale:0 1;transform-origin:100% 50%;transition:scale .45s var(--e)} .f:focus-within::after,.f.bad::after{scale:1 1} .f.bad:focus-within::after{height:4px;background:var(--ink)} .f.bad{border-color:#b3261e} .f.bad::after{background:#b3261e} .f .err{position:absolute;left:0;top:105%;color:#b3261e;display:none;white-space:nowrap} .f.bad .err{display:block} .send{border:0;border-radius:4.73px;cursor:pointer;color:var(--black); background:linear-gradient(90deg,#8c8e91 0%,#bcbec0 24%,#c5c7c9 50%,#a9abae 76%,#8c8e91 100%); display:flex;align-items:center;justify-content:center; transition:filter .25s var(--e),scale .2s var(--e)} /*@pdf p15 the plate under שלח, sampled across*/ .send:hover{filter:brightness(1.08)} .send:active{scale:.98} .send:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .send:disabled{opacity:.6;cursor:default} .consent{display:flex;align-items:center;gap:.6em;color:var(--black);direction:rtl} .consent{padding-block:.35em} .consent input{appearance:none;-webkit-appearance:none;flex:0 0 auto;order:-1; width:1.05em;height:1.05em;border:1.2px solid var(--black);background:#fff;margin:0;cursor:pointer;position:relative} .consent input:checked{background:var(--ink);border-color:var(--ink)} .consent input:checked::after{content:"";position:absolute;left:32%;top:12%;width:26%;height:55%; border:solid #fff;border-width:0 2px 2px 0;rotate:45deg} .consent input:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .nojs{display:none} .hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;clip-path:inset(50%);pointer-events:none} .hp input{width:1px;height:1px;padding:0;border:0} #contact .tel2{display:block;color:var(--black)} #contact .tel2 svg{width:100%;height:100%;fill:currentColor} #contact .addr,#contact .disc2{color:var(--black)} #foot{background:transparent} #foot .bar{display:block;background:var(--black)} #foot .rights,#foot .year{color:#fff} #foot .spin{color:#fff;display:block} #foot .spin svg{width:100%;height:100%;fill:currentColor} .fnav{display:flex;align-items:center;gap:.6em;color:#fff;direction:rtl;font-family:'Elitism','Akrobat',Arial,sans-serif} .fnav button{color:inherit;opacity:.8;border-bottom:1px solid rgba(255,255,255,.4);padding-block:.1em} @media (max-width:860px){.fnav button{padding-block:.75em}.consent input{width:1.35em;height:1.35em}} .fnav button:hover,.fnav button:focus-visible{opacity:1;border-bottom-color:#fff} .fnav button:focus-visible{outline:2px solid #fff;outline-offset:3px} .fnav span{opacity:.45} @media (min-width:861px){ #contact .ph-pool{left:34.90%;top:11.90%;width:57.15%;height:67.73%} /*@idml ufdc*/ #contact .f{position:absolute;left:11.06%;width:18.62%;height:5.72%; border-width:.026cqw;border-radius:.2734cqw} /*@idml ua75 stroke .5pt, radius 5.25pt - page points, i.e. px on a 1920 stage*/ /*@idml ua75 uaa8 ua8f uac2*/ #contact .f1{top:22.93%} #contact .f2{top:30.75%} #contact .f3{top:38.57%} #contact .f4{top:46.39%} #contact .nojs{left:11.06%;top:24%;width:18.62%;font-size:calc(max(1cqw,13px)*var(--fz));line-height:1.5} #contact .f label{--ly:31.8%;--lr:8.25%;--lf:-96%;--ls:.74; --fs:1.3021cqw;--lh:1.14;--vs:.77;letter-spacing:-.02em;scale:1.02 .77;transform-origin:100% 0} /*@idml ua76 etc. 25pt H102 V77 ; label frame L18.44 w10.36 inside a field at L11.06 w18.62*/ #contact .f:focus-within label,#contact .f:has(:is(input,textarea):not(:placeholder-shown)) label{ scale:calc(1.02*var(--ls)) calc(.77*var(--ls))} #contact .f input,#contact .f textarea{font-size:calc(max(1.1cqw,16px)*var(--fz));padding:.9cqw 1.4cqw .3cqw} #contact .f .err{font-size:calc(max(.72cqw,11px)*var(--fz))} #contact .send{position:absolute;left:15.83%;top:54.90%;width:8.11%;height:5.15%;border-radius:.2464cqw} /*@idml uadb radius 4.73pt*/ /*@idml uadb*/ #contact .send .t{position:absolute;left:0;right:0;top:11.84%;text-align:center; --fs:2.4740cqw;--lh:1.1398;--vs:.77;letter-spacing:-.02em; scale:1.02 .77;transform-origin:50% 0} /*@idml uadc 30.16pt x frame 1.5749 = 47.50pt H102 V77 ; frame T55.51 inside a plate at T54.90 h5.15*/ /* the artboard has no row for a consent line - it is a legal requirement, not a design change (D2/D3), so it goes in the empty white below the address block */ #contact .consent{position:absolute;left:11.06%;top:69.8%;width:18.62%;justify-content:center;text-align:center; font-size:calc(max(.98cqw,13px)*var(--fz));line-height:1.35;align-items:center} /* 12.10: the form column's own width and centre line (was 24% wide, ran past the fields, 11px) */ #contact .consent input{margin-top:.15em} #contact .tel2{left:12.230%;top:63.544%;width:8.572%;height:4.027%} /*@pdf p15 the ink box of the *3384 lockup*/ #contact .telic2{left:21.25%;top:63.73%;width:2.03%;height:3.62%} /*@idml ub39*/ #contact .addr{right:72.09%;top:63.73%;width:4.9314%; --fs:.6420cqw;--lh:1.125;letter-spacing:-.01em;scale:1.02 1;transform-origin:100% 0} /*@idml ubad 12.327pt H102 ; width 5.03 / 1.02*/ #contact .disc2{left:24.686%;top:88.29%;width:50.6275%; /* centred on the page: the width was /1.02 but the left was not moved - it sat 10px left of the PDF */ --fs:.9847cqw;--lh:1.2;letter-spacing:-.01em;scale:1.02 1;transform-origin:50% 0} /*@idml ua19 18.907pt H102 CenterAlign ; width 51.64 / 1.02*/ /* the footer is ONLY its own band. An absolutely-positioned footer stretched over the whole stage would sit on top of the form and swallow every click on it. */ #contact #foot{position:absolute;left:0;top:92.31%;width:100%;height:7.69%} /*@idml ua30*/ #contact #foot>*,#foot .credit>*{position:absolute} #foot .credit{display:contents} #foot .bar{inset:0} #foot .rights{right:41.62%;top:29.26%;width:9.2157%; --fs:1.2648cqw;--lh:1.4857;letter-spacing:-.01em;scale:1.02 1;transform-origin:100% 0} /*@idml ua33 33.086pt x frame .734 = 24.285pt H102 ; T94.56 inside a band at T92.31 h7.69*/ #foot .year{right:55.573%;top:32.38%;width:2.598%; --fs:1.2648cqw;--lh:1.4857;letter-spacing:-.01em;scale:1.02 1;transform-origin:100% 0} /*@idml ua4a T94.80*/ #foot .spin{left:44.77%;top:37.58%;width:4.39%;height:27.31%} /*@idml ua62 T95.20 h2.10*/ #foot .fnav{right:3.4%;top:34.3%;font-size:calc(max(.86cqw,11px)*var(--fz))} } /* ===================== dialogs, a11y, plans chooser ========== All three sheets wear the project's own palette: paper white, near-black ink, square corners, Elitism for the type. */ .ess{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow-y:auto} .ess::backdrop{background:rgba(16,20,20,.78)} .ess__card{background:var(--paper);color:var(--ink);max-width:680px;margin:6vh auto;border-radius:0; padding:clamp(22px,4vw,36px) clamp(18px,3.6vw,34px);font-family:'Elitism','Akrobat',Arial,sans-serif; font-weight:300;line-height:1.55;direction:rtl;width:calc(100% - 32px); box-shadow:0 24px 70px -18px rgba(16,20,20,.6)} .ess__card h2{margin:0 0 .5em;font-size:calc(clamp(1.5rem,4.4vw,2rem)*var(--fz));font-weight:400;letter-spacing:-.02em; padding-bottom:.35em;border-bottom:1px solid rgba(16,20,20,.18)} .ess__card h3{margin:1.15em 0 .25em;font-size:calc(clamp(1.05rem,3.2vw,1.2rem)*var(--fz));font-weight:400;letter-spacing:-.015em} .ess__card h3::before{content:"";display:inline-block;width:.5em;height:.5em;background:var(--stone); margin-inline-end:.45em;vertical-align:.08em} .ess__card p{font-size:calc(clamp(1rem,3vw,1.06rem)*var(--fz));color:#3a3434;margin:.45em 0} .ess__card .meta{color:#6b6464;font-size:calc(.92rem*var(--fz));margin-top:1.4em} .ess__close{float:left;background:var(--ink);color:#fff;border:none;border-radius:0;padding:.6em 1.5em;cursor:pointer; font-family:inherit;font-size:calc(.98rem*var(--fz));font-weight:400;transition:background-color .2s var(--e)} .ess__close:hover{background:#2e3434} .ess__close:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* the plans chooser (D11) */ .plan-dlg .ess__card{max-width:min(1180px,96vw)} .plan-head{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;margin:0 0 .6em} .plan-head h2{border:0;padding:0;margin:0} .plan-code{font-size:calc(1.05rem*var(--fz));color:#6b6464;letter-spacing:.06em;direction:ltr} .plan-fig{margin:.6em 0 0;background:#f2f2f0} .plan-fig img{width:100%;height:auto;display:block} .plan-actions{display:flex;gap:.7em;flex-wrap:wrap;align-items:center;margin-top:1em} .plan-actions a{display:inline-flex;align-items:center;gap:.5em;background:var(--ink);color:#fff; padding:.62em 1.3em;font-size:calc(1rem*var(--fz));transition:background-color .2s var(--e)} .plan-actions a:hover{background:#2e3434} .plan-actions a:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .plan-switch{display:flex;gap:.4em;margin-inline-start:auto} .plan-switch button{border:1px solid rgba(16,20,20,.3);padding:.5em .9em;font-size:calc(.98rem*var(--fz)); transition:background-color .2s var(--e),color .2s var(--e)} .plan-switch button[aria-current="true"]{background:var(--ink);color:#fff;border-color:var(--ink)} .plan-switch button:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .plan-note{font-size:calc(.92rem*var(--fz));color:#6b6464;margin-top:.8em} @media (max-width:860px){ /* 2400px of floor plan inside a 360px card is 13% - the room labels become dots. On the phone the drawing keeps a readable scale and pans, the way a plan is read on a phone. */ .plan-fig{overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;direction:ltr; max-height:62dvh;border:1px solid rgba(16,20,20,.15)} .plan-fig img{width:auto;height:min(58dvh,620px);max-width:none} .plan-fig:focus-visible{outline:3px solid var(--ink);outline-offset:-3px} .plan-switch button{padding:.7em 1em} .ess__close{padding:.8em 1.6em} } /* accessibility essentials. In Hebrew every line starts at the right edge, so the floating button lives on the LEFT - the left edge only ever holds ragged line ends. */ #a11y-btn{position:fixed;bottom:16px;left:16px;width:52px;height:52px;border-radius:50%;background:var(--ink); border:2px solid #fff;color:#fff;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px -8px rgba(16,20,20,.5);transition:scale .2s var(--e)} #a11y-btn:hover{scale:1.06}#a11y-btn:active{scale:.96} #a11y-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px} #a11y-btn svg{width:28px;height:28px} #a11y-panel{position:fixed;bottom:78px;left:16px;width:300px;max-width:calc(100% - 32px);background:#fff;color:var(--ink); box-shadow:0 20px 60px -15px rgba(16,20,20,.5),0 2px 8px rgba(16,20,20,.14);z-index:1001;padding:16px; font-family:'Elitism','Akrobat',Arial,sans-serif;direction:rtl;max-height:calc(100dvh - 94px);overflow-y:auto; overscroll-behavior:contain;visibility:hidden;opacity:0;translate:0 10px; transition:opacity .2s,translate .2s,visibility 0s linear .2s} #a11y-panel.open{visibility:visible;opacity:1;translate:0 0;transition:opacity .2s,translate .2s} .a11y-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;font-size:calc(1.15rem*var(--fz))} .a11y-h button{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink);line-height:1;padding:0 .2em} .a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .a11y-opt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border:1px solid #d8d8d6; background:#f4f4f2;cursor:pointer;font-family:inherit;font-size:calc(.9rem*var(--fz));color:var(--ink);text-align:center; transition:border-color .15s,background-color .15s} .a11y-opt:hover{border-color:var(--ink)} .a11y-opt:focus-visible,.a11y-reset:focus-visible,.a11y-h button:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .a11y-opt[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)} .a11y-opt svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .a11y-reset{margin-top:10px;width:100%;padding:9px;border:none;background:var(--ink);color:#fff;font-family:inherit; font-size:calc(.95rem*var(--fz));cursor:pointer} /* filters go on the content, never on body - that would break position:fixed */ html.a11y-contrast :is(header,main,dialog){filter:contrast(1.45) saturate(1.25)} html.a11y-gray :is(header,main,dialog){filter:grayscale(1)} html.a11y-invert :is(header,main,dialog){filter:invert(1) hue-rotate(180deg)} html.a11y-links a{text-decoration:underline!important;text-underline-offset:2px;outline:1px dashed currentColor;outline-offset:2px} html.a11y-readable body *:not(svg):not(svg *){font-family:Arial,Helvetica,sans-serif!important} html.a11y-enlarge{--fz:1.08} @media (max-width:860px){html.a11y-enlarge{--fz:1.18}} html.a11y-stop,html.a11y-stop *,html.a11y-stop *::before,html.a11y-stop *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} /* ========================= MOBILE (<=860px) ========================= docs/mobile-composition-standard.md is binding: a phone layout is a re-composition of the designer's own material, never the desktop grid squeezed into a column. Nothing here invents copy, a heading or a CTA - every string is the artboard's. Built section by section, with the 12 audit findings of §1 applied up front. */ @media (max-width:860px){ .stg{aspect-ratio:auto;height:auto;container-type:normal;display:flex;flex-direction:column;overflow:visible} .stg>*,.srow>*,.rpanel>*,.cafe>*{position:static;inset:auto;width:auto;height:auto} /* the stage geometry does not travel: rotation, scale and the IDML first-baseline pull-up all belong to the fixed 1920x1080 board (single-page-factory §5א) */ .t{margin-top:0;rotate:none;scale:none;translate:none;transform-origin:50% 50%} .nw{white-space:normal} /* cqw resolves against the 1920 stage, which only exists on the desktop side; anything that carries a cqw size outside a media query needs a phone value here */ .bodyp{font-size:calc((clamp(15px,4.3vw,18px))*var(--fz));letter-spacing:0;max-width:34em} #spec .speccol,#contact .disc2,#spec .disc{max-width:40em;margin-inline:auto} #design .p-dg .sm,#spec .speccol .ak,#spec .speccol .ak.akx{font-size:calc((.84em)*var(--fz))} .j-r{text-align:right;text-align-last:right;line-height:1.5} /* §1-6: justify opens rivers in a phone column */ .srow br,#urban br,br.idml{display:none} /* §1-3: IDML breaks belong to the desktop measure */ #numbers .l7 br{display:block} /* two separate facts, not one sentence */ /* ---------- p1 header + film ---------- */ /* direction:ltr on the bar only, so the areas land where the artboard puts them: mark on the left, number beside it, menu on the right */ #hero .stg{display:grid;direction:ltr;grid-template-columns:auto auto 1fr auto; grid-template-areas:"logo tel . burger" "rule rule rule rule" "film film film film"; align-items:center;padding-top:12px;row-gap:0} #hero .logo-h{grid-area:logo;width:clamp(84px,24vw,112px);aspect-ratio:1920/1080;margin-inline-start:16px} #hero .logo{width:100%;height:100%} #hero .logo img{height:100%;width:100%;object-fit:cover} #hero .hdiv{display:none} #hero .tel{grid-area:tel;display:flex;align-items:center;gap:5px;height:clamp(17px,4.8vw,23px); margin-inline-start:13px;justify-self:start} #hero .tel .num{height:100%;aspect-ratio:3.784} #hero .tel .ic{height:84%;aspect-ratio:1/1.788} #hero .burger{grid-area:burger;display:flex;flex-direction:column;justify-content:center;gap:5px; width:46px;height:46px;margin-inline-end:10px;align-items:center} #hero .burger i{display:block;width:24px;height:2px;background:var(--black);transition:translate .25s var(--e),rotate .25s var(--e),opacity .2s} #hero .hrule{grid-area:rule;height:1px;background:var(--black);margin:12px 16px 0} #hero .hero-film{grid-area:film;position:relative;width:100%;aspect-ratio:16/9;margin-top:0} #hero .hero-film .poster,#hero .hero-film .hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%} #hero .hero-mute{width:46px;height:46px;bottom:12px;right:12px} /* §1 menu: a full sheet, not an 18% side panel */ #hero .nav{position:fixed;inset:0;height:100dvh;z-index:1100;background:var(--ink-pdf); display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px; padding:64px 28px 28px;overflow-y:auto;overscroll-behavior:contain; visibility:hidden;opacity:0;transition:opacity .25s var(--e),visibility 0s linear .25s} @media (max-height:520px){#hero .nav{justify-content:flex-start}} #hero .nav.open{visibility:visible;opacity:1;transition:opacity .25s var(--e)} #hero .nav a{position:static;color:#fff;font-size:calc((clamp(20px,6.1vw,28px))*var(--fz));line-height:1; min-height:46px;display:flex;align-items:center;width:100%;letter-spacing:-.02em;opacity:1!important;animation:none!important} #hero .nav .x{display:block;position:absolute;top:14px;left:16px;width:46px;height:46px; color:#fff;font-size:calc((30px)*var(--fz));line-height:1} html:has(.nav.open){overflow:hidden} /* ---------- p2 URBAN ---------- */ #urban .stg{padding:30px 0 34px} #urban .h-urban{order:0;font-size:calc((clamp(54px,17vw,96px))*var(--fz));line-height:1;letter-spacing:-.1em; margin:0 16px;text-align:left;direction:ltr} #urban .h-life{order:1;font-size:calc((clamp(15px,4.4vw,22px))*var(--fz));line-height:1.2;letter-spacing:.08em; margin:2px 16px 0;text-align:left;direction:ltr} #urban .art{order:2;width:94%;align-self:center;margin:18px 0 0;height:auto; aspect-ratio:1920/907;object-fit:cover} /* §1-4: the burnt-in crop needs a margin, not the screen edge */ #urban .h-1000{order:3;font-size:calc((clamp(19px,5.6vw,26px))*var(--fz));line-height:1.2;margin:24px 16px 0} #urban .p-urban{order:4;font-size:calc((clamp(15px,4.3vw,18px))*var(--fz));margin:10px 16px 0;letter-spacing:0} #urban .tick{order:5;font-size:calc((clamp(15px,4.3vw,18px))*var(--fz));margin:18px 16px 0;letter-spacing:0;font-weight:400} /* ---------- p13 the plans ---------- */ #plans .stg{background:#b9b9b8;padding:0 0 26px} /*@pdf p13 the page ground*/ #plans .art{display:none} #plans .m-plhead{width:100%;height:auto} /* APARTMENT / PLANS are live type on the stage; on the phone they ride inside the blueprint crop (the only crop that keeps its text), so the live pair steps aside */ #plans .h-ap,#plans .h-pl,#devs .h-bd,#devs .h-yt{ position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #plans .rb{position:static;width:auto;height:auto;display:flex;align-items:center;justify-content:center; min-height:68px;margin:0} #plans .rb .t{position:static;width:auto;font-size:calc((clamp(24px,6.4vw,28px))*var(--fz));line-height:1.05;text-align:center} #plans .rb{min-height:76px} #plans .rb .ln{display:inline} #plans .rb3{background:#595958} #plans .rb4{background:#6e6e6e} #plans .rb5{background:#868685} #plans .rb6{background:#141515} #plans .rbwrap{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 16px 0} /* ---------- p14 the developers ---------- */ #devs .stg{padding:0 0 30px} #devs .art{display:none} #devs .m-head{width:100%;height:auto;order:0} #devs .m-hand{width:100%;height:auto;order:1} #devs .dev{order:2;margin:0 16px;padding-top:min(6vw,26px)} #devs .dev+.dev{border-top:1px solid rgba(16,20,20,.18);margin-top:min(6vw,26px)} #devs .dev img{height:clamp(34px,10vw,48px);width:auto;margin-bottom:min(3.4vw,14px)} #devs .p-sh,#devs .p-aa{margin:0;font-size:calc((clamp(14.5px,4.1vw,17px))*var(--fz));letter-spacing:0} #devs .ln.gap{margin-top:1em} /* ---------- p15 the form and the footer ---------- */ #contact .stg{padding:0 0 0} #contact .ph-pool{order:0;width:100%;height:auto} #contact form{display:flex;flex-direction:column;gap:min(4.4vw,18px);order:1;padding:min(6vw,26px) 16px 0} #contact .f{position:relative;width:100%;height:clamp(54px,14vw,62px);border-radius:6px} #contact .f4{height:clamp(84px,22vw,98px)} #contact .f label{--ly:30%;--lf:-78%;--ls:.76;--lr:4.4%;font-size:calc((clamp(15px,4.3vw,17px))*var(--fz));line-height:1.2} #contact .f input,#contact .f textarea{font-size:calc((16px)*var(--fz));padding:1.5em 4.4% .5em} /* 16px: iOS must not zoom on focus */ #contact .f .err{font-size:calc((clamp(11px,3.1vw,13px))*var(--fz));top:auto;bottom:-1.25em;left:auto;right:4.4%} #contact .send{position:static;width:84%;align-self:center;min-height:52px;margin-top:min(3vw,12px);border-radius:6px} #contact .send .t{position:static;font-size:calc((clamp(20px,6vw,26px))*var(--fz));line-height:1} #contact .consent{position:static;width:auto;font-size:calc((clamp(14px,4vw,16px))*var(--fz));line-height:1.45;font-weight:400; margin-top:min(2vw,8px);align-items:center;justify-content:center;text-align:center} /* 12.10: box beside its text, both on the centre line */ #contact .consent input{margin-top:.15em} /* direction:ltr: the artboard runs the lockup left to right - digits, handset, address */ #contact .telblk{order:2;direction:ltr;display:flex;align-items:center;gap:min(3vw,14px);padding:min(6vw,26px) 16px 0} #contact .tel2{position:static;height:clamp(26px,7.4vw,34px);width:auto;aspect-ratio:3.784} #contact .telic2{position:static;height:clamp(24px,6.6vw,30px);width:auto;aspect-ratio:1/1.783} #contact .addr{position:static;width:auto;margin:0;font-size:calc((clamp(12.5px,3.5vw,14px))*var(--fz));line-height:1.3; text-align:right} #contact .disc2{order:3;margin:min(6vw,26px) 16px min(5vw,20px);font-size:calc((clamp(11px,3.1vw,13px))*var(--fz)); line-height:1.45;text-align:center} #contact #foot{order:4;position:static;background:var(--black);padding:min(5vw,20px) 16px; display:flex;flex-direction:column;align-items:center;gap:min(2.6vw,11px)} #foot .bar{display:none} #foot .credit{display:flex;align-items:center;gap:min(2.6vw,11px)} #foot .rights,#foot .year{position:static;width:auto;margin:0;font-size:calc((clamp(13px,3.7vw,15px))*var(--fz));line-height:1} #foot .spin{position:static;height:clamp(11px,3vw,13px);width:auto;aspect-ratio:2.09} #foot .fnav{position:static;font-size:calc((clamp(12.5px,3.5vw,14px))*var(--fz))} /* ---------- p8 FIND YOUR WELLNESS ---------- */ #wellness .stg{background:var(--ink-pdf);padding:0 0 30px} #wellness .art{width:100%;height:auto;aspect-ratio:1920/1080} #wellness .h-wl{margin:22px 16px 0;font-size:calc((clamp(17px,5vw,22px))*var(--fz));line-height:1.3} #wellness .p-wl{margin:12px 16px 0;font-size:calc((clamp(15px,4.3vw,18px))*var(--fz));letter-spacing:0; text-align:right;text-align-last:right;direction:rtl} /* ---------- p9 the gym ---------- */ #gym .art{display:none} #gym .m-gym{width:100%;height:auto} /* ---------- p10 DETAILS MAKES DESIGN ---------- */ #design .stg{background:#6d6460;padding:0 0 30px} /*@pdf p10 the page ground behind the copy*/ #design .dg-art{position:relative;container-type:inline-size;width:100%} #design .art{width:100%;height:auto;aspect-ratio:1920/1080} #design .h-dt{position:absolute;left:62.71%;top:23.33%;width:20.91%; font-size:calc((6.7377cqw)*var(--fz));line-height:.928;letter-spacing:.125em;margin:0} #design .h-dg{margin:22px 16px 0;font-size:calc((clamp(17px,5vw,22px))*var(--fz));line-height:1.3} #design .p-dg{margin:12px 16px 0;font-size:calc((clamp(15px,4.3vw,18px))*var(--fz));letter-spacing:0} /* ---------- p11 the technical spec ---------- */ #spec .stg{padding:0 0 30px} #spec .art{display:none} #spec .m-spec{width:100%;height:auto;order:0} #spec .spec-t{order:1;margin:24px 16px 4px;font-size:calc((clamp(18px,5.3vw,23px))*var(--fz));line-height:1.25; text-align:right;text-align-last:right} #spec .speccol{order:2;margin:0 16px;font-size:calc((clamp(14px,4vw,16.5px))*var(--fz));line-height:1.5;letter-spacing:0} #spec .speccol .ln{white-space:pre-wrap;margin-bottom:min(2.2vw,9px)} #spec .speccol .spec-h{margin-top:1.1em;font-weight:400} #spec .speccol .ln:first-child.spec-h{margin-top:.4em} #spec .speccol .ak{font-size:calc((1em)*var(--fz))} #spec .disc{order:3;margin:22px 16px 0;font-size:calc((clamp(11px,3.1vw,13px))*var(--fz));line-height:1.45; text-align:right;text-align-last:right} /* ---------- p12 the living room ---------- */ #interior .art{display:none} #interior .m-interior{width:100%;height:auto} /* ---------- p4 PRIME ---------- */ /* the map is the only element that cannot simply shrink: at 390px the street names would be 3px tall, so it keeps its own scale and pans, the way a map is read on a phone */ #prime .stg{padding:26px 0 30px} #prime .art{display:none} #prime .m-prime{order:0;width:min(52%,210px);height:auto;margin:0 16px} #prime .p-prime{order:1;margin:18px 16px 0;font-size:calc((clamp(15px,4.3vw,18px))*var(--fz));letter-spacing:0;text-align:right} /* direction:ltr so the pane opens on the west edge - the sea, alfa and XPLORE - instead of the far side of the map, which is where an RTL scroller starts */ #prime .mapwrap{order:2;margin-top:22px;direction:ltr;overflow-x:auto;overscroll-behavior-x:contain; touch-action:pan-x pan-y;scrollbar-width:thin} #prime .m-map{height:min(64vh,470px);width:auto;max-width:none} /* ---------- p5 THE X FACTOR ---------- */ /* container-type on the art wrapper lets "of living" keep the artboard's own cqw size and position over the picture, instead of being re-invented for the phone */ #xfactor .stg{padding:0 0 30px} #xfactor .xf-art{position:relative;container-type:inline-size;width:100%} #xfactor .art{width:100%;height:auto;aspect-ratio:1920/1080} #xfactor .ofliving{position:absolute;left:18.117%;top:79.91%;width:13.43%; font-size:calc((6.823cqw)*var(--fz));line-height:1.2;letter-spacing:-.1em;margin:0} #xfactor .h-xf{margin:22px 16px 0;font-size:calc((clamp(18px,5.3vw,24px))*var(--fz));line-height:1.25} #xfactor .p-xf{margin:12px 16px 0;font-size:calc((clamp(15px,4.3vw,18px))*var(--fz));letter-spacing:0} /* ---------- p6 RESORT ---------- */ #resort .stg{padding:0 0 30px} #resort .art{display:none} /* direction:ltr: the artboard puts RESORT and its strap on the LEFT of the grey panel */ #resort .res-head{background:#656666;padding:24px 16px 26px;display:flex;flex-direction:column; align-items:flex-start;gap:14px;direction:ltr} #resort .m-resort{height:clamp(140px,38vw,190px);width:auto;max-width:none} #resort .vparadise{position:static;width:auto;height:auto} #resort .vparadise .t{position:static;width:auto;font-size:calc((clamp(19px,5.2vw,23px))*var(--fz));line-height:1.2; letter-spacing:.08em;text-align:left;direction:ltr;white-space:normal} #resort .h-res{margin:24px 16px 0;font-size:calc((clamp(17px,5vw,22px))*var(--fz));line-height:1.3} #resort .m-im1{width:94%;align-self:center;margin-top:18px;height:auto} #resort .m-pair{width:94%;align-self:center;margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px;direction:ltr} #resort .m-pair img{width:100%;height:100%;object-fit:cover} #resort .p-res{margin:20px 16px 0;font-size:calc((clamp(15px,4.3vw,18px))*var(--fz));letter-spacing:0} /* ---------- p5b the compound at dusk ---------- */ #night .stg{padding:0;background:#fff} #night .art{width:100%;height:auto;aspect-ratio:16/9} /* ---------- p7 the pool ---------- */ #pool .art{display:none} #pool .m-pool{width:100%;height:auto} /* ---------- p3 the numbers ---------- */ #numbers .stg{padding:0 0 30px} #numbers .rpanel{order:0;background:var(--stone);padding:18px 0 20px;display:flex;flex-direction:column;gap:10px} #numbers .rpanel .panel{display:none} #numbers .cafe{position:relative;width:94%;align-self:center} #numbers .ph-cafe{width:100%;height:auto;aspect-ratio:1450/762;object-fit:cover} #numbers .big1000{position:absolute;left:6%;top:50%;translate:0 -50%; font-size:calc((clamp(66px,21vw,120px))*var(--fz));line-height:1;letter-spacing:-.1em;color:#fff} #numbers .vtitle{position:absolute;right:6%;top:50%;translate:0 -50%;max-width:42%} #numbers .vtitle .t{position:static;width:auto;font-size:calc((clamp(15px,4.6vw,21px))*var(--fz));line-height:1.15; text-align:right;white-space:normal} #numbers .ph-hang,#numbers .ph-food{width:94%;align-self:center;height:auto} #numbers .ph-hang{aspect-ratio:760/480;object-fit:cover} #numbers .ph-food{aspect-ratio:1040/471;object-fit:cover} /* §1-2: a vertical list, icon on the reading side, one rule per row - never a 2-up grid that leaves an orphan */ /* icon, then the figure, then its label - the artboard's own reading order */ #numbers .srow{display:grid;grid-template-columns:clamp(36px,10vw,48px) auto 1fr; grid-template-rows:auto auto;align-items:center; column-gap:min(3.4vw,14px);padding:min(3.6vw,15px) 16px;border-bottom:1px solid rgba(16,20,20,.22)} #numbers .srow:first-of-type{padding-top:min(6vw,24px)} #numbers .srow:last-of-type{border-bottom:0} #numbers .ico{grid-column:1;grid-row:1/-1;width:100%;aspect-ratio:1/1;display:flex;align-items:center} #numbers .num{grid-column:2;grid-row:1/-1;justify-self:start; font-size:calc((clamp(32px,10vw,52px))*var(--fz));line-height:.95;letter-spacing:-.1em;text-align:right;direction:ltr} #numbers .lab{grid-column:3;justify-self:start;font-size:calc((clamp(13.5px,3.9vw,16px))*var(--fz));line-height:1.3;text-align:right} #numbers .lab .ln{display:inline} #numbers .l1a,#numbers .l2a{grid-row:1;align-self:end;padding-bottom:.1em} #numbers .l1b,#numbers .l2b{grid-row:2;align-self:start} #numbers .l3,#numbers .l4,#numbers .l5,#numbers .l6{grid-row:1/-1} #numbers .l7{grid-column:2/-1;grid-row:1/-1} #numbers .l7 .ln{display:block} #numbers .srule{display:none} } /* spec items (built from the IDML lines): one box per item on the phone, nothing on the desktop */ #spec .speccol .it{display:contents} /* ===================== MOBILE · the calm layer (Omri 12.10) ================== "עמוס מדי… חייב לרדד שם רקעים ולעשות את זה יותר קלאסי ונוח" - desktop untouched. On the phone: one white ground (the grey / black / brown bands go; their type turns ink), wider gutters, bigger and looser reading type, a steady rhythm between sections, and fewer pictures in a row: the numbers collage keeps its 1000 photo only, RESORT keeps the hat, the gym band and the second developers picture step aside. Baked chevrons (decor, "no second slide") are cropped off the photos. Nothing new is written - every string is still the artboard's. */ @media (max-width:860px){ :root{--mg:22px;--air:clamp(48px,14vw,64px)} /* one ground */ #numbers .rpanel,#xfactor .stg,#resort .res-head,#wellness .stg,#design .stg,#plans .stg{background:#fff} #xfactor .h-xf,#xfactor .p-xf,#wellness .h-wl,#wellness .p-wl,#design .h-dg,#design .p-dg{color:var(--black)} #resort .vparadise .t{color:#585857} /* reading type */ #urban .p-urban,#prime .p-prime,#xfactor .p-xf,#resort .p-res,#wellness .p-wl,#design .p-dg,#devs .p-sh,#devs .p-aa{ font-size:calc((clamp(16.5px,4.6vw,19px))*var(--fz));line-height:1.68;letter-spacing:.005em; text-align:right;text-align-last:right;margin-inline:var(--mg)} #urban .h-1000,#xfactor .h-xf,#resort .h-res,#wellness .h-wl,#design .h-dg,#spec .spec-t{ font-size:calc((clamp(20px,5.9vw,25px))*var(--fz));line-height:1.3;margin-inline:var(--mg)} #urban .tick{margin-inline:var(--mg)} /* rhythm: every section opens on air, pictures sit full-bleed between the words */ #urban .stg{padding:var(--air) 0 var(--air)} #urban .h-urban,#urban .h-life{margin-inline:var(--mg)} #urban .art{width:calc(100% - 2*var(--mg));margin-top:28px} #urban .h-1000{margin-top:36px} #urban .p-urban{margin-top:14px} #numbers .stg{padding:0 0 var(--air)} #numbers .rpanel{padding:0;gap:0} #numbers .cafe{width:100%} #numbers .ph-hang,#numbers .ph-food{display:none} #numbers .srow{padding:min(4.4vw,18px) var(--mg)} #numbers .srow:first-of-type{padding-top:min(8vw,32px)} #prime .stg{padding:var(--air) 0 var(--air)} #prime .m-prime{margin:0 var(--mg)} #prime .p-prime{margin-top:24px} #prime .mapwrap{margin-top:32px} #xfactor .stg{padding:0 0 var(--air)} #xfactor .h-xf{margin-top:36px} #xfactor .p-xf{margin-top:14px} #resort .stg{padding:var(--air) 0 var(--air)} #resort .res-head{padding:0 var(--mg)} #resort .h-res{margin-top:32px} #resort .m-im1{width:100%;margin-top:24px} #resort .m-pair{display:none} #resort .p-res{margin-top:24px} #pool .m-pool,#interior .m-interior{aspect-ratio:1400/751;object-fit:cover;object-position:0 50%} /* the baked chevron sits at x 1420–1460 */ #wellness .stg{padding:var(--air) 0 var(--air)} #wellness .h-wl{margin-top:36px} #wellness .p-wl{margin-top:14px} #gym{display:none} #design .stg{padding:0 0 var(--air)} #design .h-dg{margin-top:36px} #design .p-dg{margin-top:14px} #spec .stg{padding:var(--air) 0 var(--air)} #spec .m-spec{width:calc(100% - 2*var(--mg));align-self:center} #spec .spec-t{margin-top:36px;margin-bottom:6px} #spec .speccol{margin:0 var(--mg);font-size:calc((clamp(15.5px,4.3vw,17.5px))*var(--fz));line-height:1.55} #spec .speccol .ln{white-space:normal;margin:0;display:inline} #spec .speccol .spec-h{display:block;margin:1.5em 0 .5em;font-weight:600;font-size:1.08em} #spec .speccol .it{display:block;position:relative;padding:.55em 1.1em .55em 0;border-bottom:1px solid rgba(16,20,20,.1)} #spec .speccol .it::before{content:"";position:absolute;right:.15em;top:1.02em;width:.36em;height:.36em;border-radius:50%;background:#8a8a89} #spec .speccol.c2 .it:first-child{border-top:0} #spec .disc{margin:28px var(--mg) 0} /* the line-by-line run-in was for the fixed desktop lines; the list now reflows, so it arrives as one block */ html.js #spec .rv.lns .ln,html.js #spec .rv.lns.in .ln{opacity:1;translate:none;animation:none} #plans .stg{padding:0 0 var(--air)} #plans .rbwrap{margin:16px var(--mg) 0;gap:10px} #devs .stg{padding:var(--air) 0 var(--air)} #devs .m-head{display:none} #devs .h-bd,#devs .h-yt{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal; color:var(--black);text-align:left;direction:ltr;margin-inline:var(--mg)} #devs .h-bd{order:-2;font-size:calc((clamp(54px,17vw,96px))*var(--fz));line-height:1;letter-spacing:-.1em} #devs .h-yt{order:-1;font-size:calc((clamp(15px,4.4vw,22px))*var(--fz));line-height:1.2;letter-spacing:.08em;margin-top:2px} #devs .m-hand{margin-top:28px} #devs .dev{margin:0 var(--mg);padding-top:min(9vw,36px)} #devs .dev+.dev{margin-top:min(9vw,36px)} #devs .p-sh,#devs .p-aa{margin-inline:0} #arch .stg{padding:var(--air) 0 var(--air)} #arch .art{display:none} #arch .h-ar,#arch .h-ab{position:static;width:auto;height:auto;white-space:normal;direction:ltr} #arch .h-ar{font-size:calc((clamp(44px,13.4vw,76px))*var(--fz));line-height:1;letter-spacing:-.1em} #arch .h-ab{font-size:calc((clamp(14px,4vw,20px))*var(--fz));line-height:1.2;letter-spacing:.08em;margin-top:2px} #arch .dev{margin:0 var(--mg);padding-top:min(9vw,36px)} #arch .arch-logo{display:block;width:clamp(96px,30vw,132px);height:auto;margin:0 auto min(6vw,24px)} #arch .p-ar{margin:0;font-size:calc((clamp(16.5px,4.6vw,19px))*var(--fz));line-height:1.68;letter-spacing:.005em; text-align:center;text-align-last:center} #arch .ln.gap{margin-top:1em} #contact form{padding:min(9vw,36px) var(--mg) 0} #contact .telblk{padding:min(8vw,32px) var(--mg) 0} #contact .disc2{margin-inline:var(--mg)} } /* ===================== MOBILE · titles on their pictures + a folding spec (Omri 12.10) ===== "משהו בתמונות ובטקסטים המהודרים שבאים אחד אחרי השני לא יושב טוב — תנסה לאחד תמונות וטקסטים לאותו מיקום": URBAN, RESORT and BUILDING now sit ON their picture (one grid cell), the way X FACTOR, WELLNESS, DETAILS and 1000 already do. "כל המפרט הטכני חייב להיות באופציה של הסתרה כמו באתרים הקודמים": each spec category folds (eilat / alfa pattern), closed by default. */ @media (max-width:860px){ /* URBAN / LIFE STYLE centred on the city collage */ #urban .stg{display:grid;grid-template-columns:1fr} #urban .art{grid-area:1/1/3/2;justify-self:stretch;width:100%;margin:0;aspect-ratio:1920/1100;object-fit:cover;filter:brightness(.52) contrast(1.08)} /* full-bleed and darkened: the busy collage carries a white title, like X FACTOR */ #urban .h-urban{grid-area:1/1;align-self:end;justify-self:center;text-align:center;margin:0;z-index:1;color:#fff} #urban .h-life{grid-area:2/1;align-self:start;justify-self:center;text-align:center;margin:2px 0 0;z-index:1;color:#fff} #urban .h-1000,#urban .p-urban,#urban .tick{text-align:center;text-align-last:center} /* RESORT + THE SIDE OF PARADISE on the hat picture (4:3 crop, water on the left) */ #resort .stg{display:grid;grid-template-columns:1fr;padding-top:var(--air)} #resort .m-im1{grid-area:1/1;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;margin:0} #resort .res-head{grid-area:1/1;z-index:1;align-self:stretch;padding:6% 6%;justify-content:space-between; background:linear-gradient(90deg,rgba(12,16,18,.42),rgba(12,16,18,0) 58%)} #resort .m-resort{height:44vw;max-height:none;width:auto} /* sized from the photo (100vw × 3/4), so the head never grows the cell */ #resort .vparadise .t{color:#fff} #resort .h-res{grid-row:2;text-align:center;text-align-last:center} #resort .p-res{grid-row:3;text-align:center;text-align-last:center} /* BUILDING / YOUR TOMORROW on the hands */ #devs .stg{display:grid;grid-template-columns:1fr} #devs .m-hand{grid-area:1/1/3/2;width:100%;height:auto;margin:0} #devs .h-bd{grid-area:1/1;align-self:end;justify-self:center;text-align:center;color:#fff;margin:0;z-index:1} #devs .h-yt{grid-area:2/1;align-self:start;justify-self:center;text-align:center;color:#fff;margin:2px 0 0;z-index:1} #devs .dev{text-align:center} #devs .dev img{margin-inline:auto} #devs .p-sh,#devs .p-aa{text-align:center;text-align-last:center} /* ARCHITECTURE / BY A.B ARCHITECTS on the drafting photo, darkened: the paper is too bright for white type */ #arch .stg{display:grid;grid-template-columns:1fr} #arch .m-arch{grid-area:1/1/3/2;width:100%;height:auto;margin:0;filter:brightness(.55) contrast(1.05)} #arch .h-ar{grid-area:1/1;align-self:end;justify-self:center;text-align:center;color:#fff;margin:0;z-index:1} #arch .h-ab{grid-area:2/1;align-self:start;justify-self:center;text-align:center;color:#fff;margin:2px 0 0;z-index:1} #arch .dev{grid-row:3;text-align:center} /* the spec folds: a centred category head with a chevron, its items below, closed by default */ #spec .speccol .spec-h{position:relative;display:block;cursor:pointer;text-align:center;margin:0; padding:15px 34px;border-bottom:1px solid rgba(16,20,20,.14);font-weight:600;font-size:1.12em;user-select:none} #spec .speccol .spec-h::after{content:"";position:absolute;left:10px;top:50%;width:9px;height:9px; border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -70%;transition:rotate .25s var(--e),translate .25s var(--e)} #spec .speccol .spec-h[aria-expanded="true"]::after{rotate:225deg;translate:0 -30%} #spec .speccol .spec-h:focus-visible{outline:2px solid var(--ink);outline-offset:-2px} #spec .speccol .it{display:none;text-align:center;padding:.55em .6em;border-bottom:1px solid rgba(16,20,20,.08)} #spec .speccol .it.show{display:block;animation:specIn .35s var(--e) both} #spec .speccol .it::before{display:none} #spec .spec-t{text-align:center;text-align-last:center} #spec .disc{text-align:center;text-align-last:center} } @keyframes specIn{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}} /* ===================== galleries (Omri 13.10) ================================== "מתחת לריסורט צריכה להיות גלריה, מתחת למפרט הטכני צריכה להיות גלריה — אחת חוץ ואחת פנים". p7 and p12 are the artboard's single pictures with a drawn chevron: they become carousels in the same picture box (6.25% / 11.065%, 87.5% × 77.824%), slide 1 = the picture that was there. Ported from HASDERA (12.10): a seamless loop (a copy of each end slide), RTL-correct arrows (the next slide waits on the left), axis-locked swipe, keyboard arrows, a counter, lazy slides. */ .gal{overflow:hidden;direction:rtl;background:#d9d9d7} .gal-track{display:flex;height:100%;transition:transform .62s cubic-bezier(.22,1,.36,1);will-change:transform} .gal-track>figure{flex:0 0 100%;min-width:100%;margin:0;height:100%;position:relative} .gal-track img{width:100%;height:100%;object-fit:cover;display:block} .gal-btn{position:absolute;top:50%;translate:0 -50%;z-index:2;width:clamp(44px,3.4cqw,64px);aspect-ratio:1;border:0;border-radius:50%;padding:0;cursor:pointer; display:grid;place-items:center;color:#fff;background:rgba(12,14,15,.28);backdrop-filter:blur(2px);transition:background-color .2s ease,scale .2s var(--e)} .gal-btn svg{width:46%;height:46%} .gal-btn.prev{right:1.6%}.gal-btn.next{left:1.6%} .gal-btn:hover{background:rgba(12,14,15,.5)}.gal-btn:active{scale:.94} .gal-btn:focus-visible,.gal:focus-visible{outline:3px solid #fff;outline-offset:-4px} .gal-count{position:absolute;bottom:4%;left:50%;translate:-50% 0;z-index:2;margin:0;padding:.3em .8em;border-radius:99px;direction:ltr; background:rgba(12,14,15,.45);color:#fff;font:500 calc(max(.75cqw,12px)*var(--fz))/1 'Akrobat','Elitism',Arial,sans-serif;letter-spacing:.06em} @media (min-width:861px){ #pool .gal,#interior .gal{position:absolute;left:6.25%;top:11.065%;width:87.5%;height:77.824%;z-index:3} #pool .kb,#interior .kb{display:none} /* the slides are the picture now */ } @media (max-width:860px){ #pool .m-pool,#interior .m-interior{display:none} #pool .gal,#interior .gal{position:relative;width:100%;aspect-ratio:4/3} /* mobile standard §1-12: a 4:3 window, swipe, a counter */ .gal-btn{width:42px} .gal-count{font-size:calc(12.5px*var(--fz))} } @media (prefers-reduced-motion:reduce){ .gal-track{transition:none} } html.a11y-stop .gal-track{transition:none!important} /* ===================== FLOATING CALL + CONTACT (D13) ========= bottom-RIGHT: the accessibility button owns the left corner, because in Hebrew every line starts at the right edge and a left-hand button would sit on live type. */ .fab{position:fixed;right:16px;bottom:16px;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none} /* 12.10: the empty box caught clicks meant for the footer's privacy link — only the buttons take the pointer */ .fab a{pointer-events:auto} .fab a{display:flex;align-items:center;gap:9px;height:52px;padding:0 20px 0 18px;border-radius:26px; background:var(--ink);color:#fff;font-family:'Elitism','Akrobat',Arial,sans-serif;font-size:calc(19px*var(--fz)); box-shadow:0 2px 6px rgba(16,20,20,.18),0 12px 26px -8px rgba(16,20,20,.45); transition:translate .25s var(--e),opacity .25s ease,scale .2s var(--e)} .fab a:hover{translate:0 -2px} .fab a:active{scale:.96} .fab a:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .fab .fab-lead{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),0 12px 26px -8px rgba(16,20,20,.3)} .fab svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto} .fab a.away{opacity:0;translate:0 10px;pointer-events:none} @media (max-width:860px){ .fab{right:12px;bottom:12px;gap:9px} .fab a{width:52px;height:52px;padding:0;justify-content:center} .fab a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} }