/* * Stranieri Propiedades — the approved design. * * GENERATED by tools/build_theme_css.py from design/index.html. Do not edit by hand: * the mockup is what the client approved, so the mockup is the source. Change the * design there, regenerate, and `tools/validate_day10.py` will confirm the two agree. * * Loaded only on the Stranieri hosts. iProp never sees this file. */ /* ============================================================ Stranieri Propiedades — design mockup, milestone 1 day 4 Palette: the brand navy #01074F read out of the client's own CorelDRAW palette. Neutrals are biased toward it, never grey. ============================================================ */ :root{ /* Light ground, by his instruction on 12 Nov: "me gustaría que el fondo sea claro, el azul no me termina de gustar — podemos resaltar el logo de otra forma". So the navy stops being the field and becomes the accent: it now appears only on the logo, the buttons, the badges and the type. The neutrals are warm rather than blue-grey, which is what gives a white page the paper feel of the reference he chose (elliman.com) instead of the cold grey of a template. */ --navy:#01074F; --navy-deep:#000730; --navy-tint:#1C2577; --ground:#FBFAF7; --surface:#FFFFFF; --surface-2:#F5F3EE; --ink:#14161F; --muted:#5E6172; --line:#E3DFD7; --line-soft:#EFECE5; --on-navy:#FFFFFF; --on-navy-dim:#B9BDD8; --venta:#01074F; --alquiler:#0C5F54; --alquiler-soft:#E3F1EE; --warn:#8A5A00; --shadow:0 1px 2px rgba(20,22,31,.05), 0 10px 30px -14px rgba(20,22,31,.18); --radius:10px; color-scheme:light; --sans:'Archivo', 'Segoe UI', system-ui, sans-serif; --serif:'Source Serif 4', Georgia, serif; } /* No dark variant, deliberately. He asked for a light site — "me gustaría que el fondo sea claro" — so the page commits to that look and paints it explicitly rather than following the viewer's theme. A dark render would show him a site he did not approve, and would also put the navy-on-white logo on a dark bar. */ *{box-sizing:border-box} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans); font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%} img{display:block;max-width:100%} button,select,input,textarea{font:inherit;color:inherit} a{color:inherit} :focus-visible{outline:2px solid var(--navy-tint);outline-offset:2px}@media (prefers-reduced-motion:reduce) {*{transition:none!important;animation:none!important}} /* ---------- mockup chrome (not part of the site) ---------- */ /* ---------- the device frame ---------- */ /* Full-bleed on the desktop view: the site fills the screen the way it will in a real browser, rather than sitting in a centred card that makes everything inside it look smaller than it is. The phone view keeps its device frame, because that is the point of the phone view. */ .frame{container-type:inline-size;min-width:0;width:100%;max-width:none;background:var(--surface); border:0;border-radius:0;overflow:hidden} .urlbar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--surface-2); border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--muted); overflow:hidden;white-space:nowrap} .urlbar svg{flex:none;color:var(--alquiler)} .urlbar b{color:var(--ink);font-weight:500;flex:none} .urlbar span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} /* ---------- site header ---------- "Podemos resaltar el logo de otra forma." The plaque is gone with the navy field. On a white bar the navy mark is the darkest thing on the page, which is a stronger way to carry it than a box was — and it is bigger than before, which is what he actually asked for. */ .site-head{background:var(--surface);color:var(--ink);position:relative;z-index:3; border-bottom:1px solid var(--line-soft)} /* "El menú no debería tenerlo, podríamos hacer los botones flotantes." On the home screen the bar carries no mark and no ground of its own: it lifts off the page and floats over the photograph, which is what both references he named do on arrival. The stage reserves room for it so nothing is covered. */ .frame.on-home .site-head{position:relative;z-index:5;background:transparent; border-bottom:0;margin-bottom:calc(-1 * var(--head-h, 82px))} .frame.on-home .site-head .logo{display:none} .frame.on-home .nav a{color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.55)} .frame.on-home .nav a:hover{background:rgba(255,255,255,.16);color:#fff} .frame.on-home .nav a[aria-current="page"]{color:#fff;font-weight:600} .frame.on-home .nav a.btn-wa{background:rgba(10,12,20,.44);color:#fff; border-color:rgba(255,255,255,.6);backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);text-shadow:none} .frame.on-home .nav a.btn-wa:hover{background:#fff;color:var(--navy)} .frame.on-home .burger{background:rgba(10,12,20,.44);border-color:rgba(255,255,255,.5);color:#fff} .frame.on-home .site-head.open .nav{background:rgba(10,12,20,.78);border-radius:10px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;margin-top:8px} /* The bar stays in flow — absolute positioning anchored it to the frame's top, which is where the mock browser bar lives, and it disappeared under it. A negative margin of exactly its own height lets the picture rise behind it instead, and the stage pads its content clear by the same amount. The height is measured and published as --head-h, not guessed: it changes with the WhatsApp button's line-height and with the phone breakpoint. */ .frame.on-home .hero-in{padding-top:calc(var(--head-h, 82px) + 24px)} /* The mark is back in the bar on every screen: the hero is centred now, so the bar is the only place it appears and there is nothing to duplicate. */ .head-in{padding:18px 28px;display:flex;align-items:center;gap:18px} /* The mark is the strongest asset he has and he has asked for it bigger three times. At 94 px it is the dominant object in the bar rather than a label beside the navigation — which is the whole point of a wordmark this fine. */ .logo{height:94px;width:auto;flex:none}@container (max-width:1200px) {.logo{height:78px}} .nav{margin-left:auto;display:flex;gap:2px;align-items:center} .nav a{padding:9px 12px;border-radius:7px;text-decoration:none;font-size:14px;font-weight:500; color:var(--muted);transition:background .15s,color .15s} .nav a:hover{background:var(--surface-2);color:var(--ink)} .nav a[aria-current="page"]{color:var(--navy);font-weight:600} .nav a.btn-wa,.btn-wa{display:inline-flex;align-items:center;gap:8px;background:var(--surface); color:var(--navy);border:1.5px solid var(--navy);border-radius:8px;padding:11px 18px; font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;margin-left:12px} .nav a.btn-wa:hover{background:var(--navy);color:#fff} /* He wants the WhatsApp button at the foot of the screen as well: this is the one action the whole site exists to produce, and on a phone the top bar is the part of the page a reader has already scrolled past. */ .wa-float{position:fixed;right:22px;bottom:22px;z-index:40;display:inline-flex; align-items:center;gap:9px;background:var(--alquiler);color:#fff;border:0; border-radius:999px;padding:14px 20px;font-weight:600;font-size:15px;cursor:pointer; text-decoration:none;box-shadow:0 14px 34px -12px rgba(12,95,84,.75)} .wa-float:hover{filter:brightness(1.07)}@container (max-width:900px) {.wa-float{right:14px;bottom:14px;padding:13px 18px;font-size:14px}} .btn-wa svg{flex:none} .burger{margin-left:auto;display:none;background:var(--surface-2);border:1px solid var(--line); color:var(--ink);border-radius:7px;padding:9px 11px;cursor:pointer}@container (max-width:760px) { .nav{display:none;order:3} .burger{display:block;order:2} .head-in{padding:12px 14px;gap:10px;flex-wrap:wrap} .logo{height:60px} /* the burger opens the same nav, stacked under the bar */ .site-head.open .nav{display:flex;flex-direction:column;align-items:stretch; flex-basis:100%;margin-left:0;gap:2px;padding-top:8px; border-top:1px solid var(--line-soft)} .site-head.open .nav a{padding:11px 10px;font-size:15px} .site-head.open .btn-wa{justify-content:center;margin-top:6px}}@container (max-width:460px) {.logo{height:50px}} /* ---------- screens ---------- */ .wrap{max-width:1320px;margin:0 auto;padding:0 32px}@container (max-width:900px) {.wrap{padding:0 18px}}@container (max-width:460px) {.wrap{padding:0 14px}} /* ---------- section rhythm ---------- Each block gets room and a ground of its own. Alternating the surface is what turns a long scroll into a sequence of places rather than one list that keeps going: you can tell where you are without reading a heading. */ section{padding:40px 0} .sec{padding:84px 0} .sec + .sec{padding-top:84px}@container (max-width:900px) {.sec{padding:44px 0}.sec + .sec{padding-top:44px}} .sec--plain{background:var(--surface)} .sec--tint{background:var(--ground)} /* one inverted block, so the agency reads as a statement rather than a row */ .sec--deep{background:var(--navy);color:var(--on-navy)} .sec--deep .eyebrow{color:var(--on-navy-dim)} .sec--deep h2{color:var(--on-navy)} .sec .sec-head{margin-bottom:26px}@container (max-width:900px) {.sec .sec-head{margin-bottom:18px}}@container (max-width:760px) {section{padding:26px 0}} h1,h2,h3{font-weight:600;text-wrap:balance;margin:0} h1{font-size:30px;line-height:1.18;letter-spacing:-.01em} h2{font-size:21px;letter-spacing:-.005em} h3{font-size:16px}@container (max-width:760px) {h1{font-size:23px}h2{font-size:18px}} .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); font-weight:600} .lede{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--muted);max-width:60ch} .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px} .sec-head a{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--navy-tint); text-decoration:none;white-space:nowrap} .num{font-variant-numeric:tabular-nums} /* ---------- the stage ---------- He named two references, elliman.com and dacal.com.ar, and on arrival both do the same thing: one photograph fills the screen and everything else — the mark, the claim, the ways in — sits inside it rather than under it. That is the "sensación de estar inmerso" he is after, so the hero stopped being a band with a picture below it and became the picture. Height is viewport-relative but bounded, and svh not vh: on a phone vh counts the browser chrome that is about to scroll away, which is why these heroes so often sit 60px too tall on the first paint. */ .hero{position:relative;background:var(--ground);padding:0} .herostage{position:relative;overflow:hidden;isolation:isolate; min-height:clamp(600px,88svh,1040px);display:flex}@container (max-width:900px) {.herostage{min-height:clamp(520px,82svh,820px)}} .hero-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column; max-width:1320px;margin:0 auto;width:100%;padding:26px 32px 34px}@container (max-width:900px) {.hero-in{padding:18px 18px 24px}} .hero-top{display:flex;align-items:flex-start;gap:16px} .hero-mid{flex:1;display:grid;grid-template-columns:auto 1fr;gap:20px 52px; align-items:center;padding:14px 0}@container (max-width:1000px) {.hero-mid{gap:18px 34px}}@container (max-width:860px) { .hero-mid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}} /* "Que sea del tamaño del círculo verde — es la firma del sitio." So the mark is the largest object on the first screen, roughly three times what it was. Sized in cqw, not vw: the frame is the container, and vw would measure the whole window — which means the phone preview inside a desktop window would render a 290px mark in a 392px frame. */ .hero-logo{height:clamp(104px,20cqw,300px);width:auto;flex:none; filter:drop-shadow(0 10px 36px rgba(0,0,0,.6))} .hero-copy{min-width:0}@container (max-width:860px) {.hero-copy{text-align:center}} /* ---------- the claim, typed ---------- "Me gustaría que la frase apareciera como si se estuviera escribiendo." The real sentence stays in the DOM as the h1's accessible name, so a screen reader and a crawler never meet a half-written phrase — only the visible copy types. Under prefers-reduced-motion it is simply there. */ .hero-claim{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.1cqw,56px); line-height:1.1;letter-spacing:-.02em;margin:0;color:#fff;max-width:15ch; min-height:2.2em;text-shadow:0 2px 30px rgba(0,0,0,.5)} .hero-claim em{display:block;font-style:italic}@container (max-width:860px) {.hero-claim{max-width:none;margin-inline:auto}} .tw{display:inline;white-space:pre-wrap} .tw.typing::after{content:"";display:inline-block;width:2px;height:.82em; margin-left:4px;vertical-align:-.06em;background:currentColor; animation:caret 1s steps(1,end) infinite}@keyframes caret {50%{opacity:0}}@media (prefers-reduced-motion:reduce) {.tw.typing::after{display:none}} .hero-sub{font-size:16.5px;color:rgba(255,255,255,.92);margin:18px 0 0;max-width:46ch; line-height:1.55;text-shadow:0 1px 14px rgba(0,0,0,.5)}@container (max-width:900px) {.hero-sub{font-size:14.5px;margin-top:10px}}@container (max-width:860px) {.hero-sub{margin-inline:auto}} .shot{position:absolute;inset:0;opacity:0;transition:opacity 1.8s cubic-bezier(.4,0,.2,1);z-index:0} .shot img,.shot video{width:100%;height:100%;object-fit:cover;transform:scale(1.02)} .shot.on{opacity:1} .shot.on img,.shot.on video{animation:kb 14s ease-out forwards}@keyframes kb {from{transform:scale(1.04)}to{transform:scale(1.13) translate(-1.2%,-1.4%)}} .shot-veil{position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(to bottom,rgba(8,10,18,.70) 0%,rgba(8,10,18,.34) 26%, rgba(8,10,18,.44) 58%,rgba(8,10,18,.86) 100%), linear-gradient(to right,rgba(8,10,18,.54) 0%,rgba(8,10,18,.20) 48%, rgba(8,10,18,.32) 100%)}@media (prefers-reduced-motion:reduce) {.shot.on img,.shot.on video{animation:none} .shot{transition:none}} /* Its own backing rather than a heavier scrim over everything: deepening the whole gradient to carry eight words would dull the photograph that is doing the selling. Light on purpose - measured against the real pixels behind the glyphs, 34% clears AA with room (the backdrop there is ~122/255 once the top of the scrim has done its work). */ .hc-label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600; color:#fff;background:rgba(8,10,18,.34);padding:7px 12px;border-radius:999px; backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}@container (max-width:460px) {.hc-label{letter-spacing:.14em;font-size:9.5px}} .dots{margin-left:auto;display:flex;gap:6px;flex:none} .dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.55);transition:background .2s,width .2s} .dots button[aria-current="true"]{background:#fff;width:22px;border-radius:4px} /* ---------- hero search ---------- Lower down, as he asked — it now sits at the foot of the picture rather than straight under the headline. Operation stays a forced choice of the two. */ .searchbar{background:var(--surface);color:var(--ink);border:1px solid var(--line); border-radius:var(--radius);margin:-36px 0 0;position:relative;z-index:3; padding:16px;display:grid;gap:10px;grid-template-columns:1fr 1fr 1fr auto; box-shadow:0 26px 60px -26px rgba(20,22,31,.55)}@container (max-width:900px) {.searchbar{margin-top:-24px}} .opseg{grid-column:1/-1;display:flex;gap:4px;background:var(--surface-2); border:1px solid var(--line);border-radius:8px;padding:4px} .opseg button{flex:1;background:none;border:0;border-radius:6px;padding:9px 6px;cursor:pointer; font-size:14px;font-weight:600;color:var(--muted);transition:background .15s,color .15s} .opseg button[aria-pressed="true"]{background:var(--navy);color:#fff} .opseg button[aria-pressed="true"].alq{background:var(--alquiler)}@container (max-width:1100px) {.searchbar{grid-template-columns:1fr 1fr} .searchbar .btn{grid-column:1/-1}}@container (max-width:460px) {.searchbar{grid-template-columns:1fr} .searchbar .btn{grid-column:1/-1}} /* ---------- form controls, used by every form on the site ---------- */ .field{display:flex;flex-direction:column;gap:5px;min-width:0} .field label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted); font-weight:600} .field select,.field input,.field textarea{background:var(--surface-2);border:1px solid var(--line); border-radius:7px;padding:10px 11px;width:100%;color:var(--ink)} .field select:focus,.field input:focus,.field textarea:focus{border-color:var(--navy-tint)} .btn{background:var(--navy);color:#fff;border:0;border-radius:7px;padding:11px 20px; font-weight:600;cursor:pointer;align-self:end;white-space:nowrap} .btn:hover{background:var(--navy-tint)} .btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--line); border-radius:7px;padding:10px 16px;font-weight:600;cursor:pointer} .btn-ghost:hover{background:var(--surface-2)} /* ---------- search, answering as you choose ---------- */ .search-aside{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:16px 0 0} .search-count{font-size:14px;color:var(--muted)} .search-count b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .quick button{background:var(--surface);border:1px solid var(--line);border-radius:999px; padding:7px 13px;font-size:13px;color:var(--muted);cursor:pointer; transition:border-color .15s,color .15s,background .15s} .quick button:hover{border-color:var(--navy);color:var(--navy);background:var(--surface)} /* ---------- the agency ---------- The reference he chose reads as a firm, not as a listings feed, and the proposal promises a Quiénes Somos. This is the home page's share of it: who signs the operation, where the office is, and what the matrícula is. Every line here is verifiable; the two things we do not have are marked. */ .agency{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:40px 42px;box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}@container (max-width:900px) {.agency{grid-template-columns:1fr;gap:22px;padding:24px 20px}} .agency h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.14; letter-spacing:-.015em;color:var(--navy);margin:0}@container (max-width:900px) {.agency h2{font-size:26px}} .agency p{font-family:var(--serif);font-size:16.5px;line-height:1.62;color:var(--muted); margin:14px 0 0;max-width:56ch} .agency p + p{margin-top:12px} .agency-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .cred-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--line-soft); border-radius:var(--radius);overflow:hidden} .cred-row{display:flex;flex-direction:column;gap:3px;padding:14px 16px; border-bottom:1px solid var(--line-soft);background:var(--surface-2)} .cred-row:last-child{border-bottom:0} .cred-row b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);font-weight:600} .cred-row span{font-size:15px;color:var(--ink);line-height:1.4} /* ---------- reseñas ---------- The reference he named carries client reviews and he singled them out. The section is built, but NOT filled: we hold no real review from a real client of his, and inventing one would be fabricating a testimonial. It shows him the shape and asks him for three real ones. */ .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@container (max-width:900px) {.revs{grid-template-columns:1fr}} .rev{border:1px dashed var(--line);border-radius:var(--radius);padding:20px; background:var(--surface);display:flex;flex-direction:column;gap:12px;min-height:150px} .rev-stars{display:flex;gap:3px;color:var(--line)} .rev p{margin:0;font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--muted)} .rev footer{margin-top:auto;font-size:12.5px;color:var(--muted)} /* ---------- flowing ---------- The reference he chose moves as you go down it rather than snapping into place. One transition does most of that work: content rises a little as it comes into view. It is deliberately small — 14 px and 0.7 s — because the point is that the page feels unhurried, not that it performs. */ .reveal{opacity:0;transform:translateY(14px); transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)} .reveal.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce) { .reveal{opacity:1!important;transform:none!important;transition:none}} /* ---------- 2 · what are you looking for ---------- Photographic tiles rather than outline icons. Every other block on this page is carried by a picture, and eight little glyphs on white read as a form, not as a way in. Each tile is lit by his own sharpest photograph of that type, so the section is also a second look at the stock. The counts are real: a shortcut that promises eight and returns two is worse than no shortcut. */ .shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@container (max-width:1000px) {.shortcuts{grid-template-columns:repeat(3,1fr)}}@container (max-width:760px) {.shortcuts{grid-template-columns:repeat(2,1fr)}} .shortcut{position:relative;overflow:hidden;border:0;padding:0;cursor:pointer; border-radius:var(--radius);aspect-ratio:5/4;display:flex;align-items:flex-end; isolation:isolate;background:var(--surface-2);text-align:left; transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s}@container (max-width:760px) {.shortcut{aspect-ratio:4/3}} .shortcut:hover{transform:translateY(-3px);box-shadow:0 18px 38px -18px rgba(20,22,31,.5)} .shortcut img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; transition:transform .9s cubic-bezier(.22,.61,.36,1)} .shortcut:hover img{transform:scale(1.07)} .shortcut::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(6,8,16,.92) 0%,rgba(6,8,16,.55) 42%, rgba(6,8,16,.12) 72%,rgba(6,8,16,.06) 100%)} .sc-in{position:relative;z-index:2;padding:14px 15px;display:flex;flex-direction:column;gap:2px} .sc-in b{font-size:16.5px;font-weight:600;color:#fff;letter-spacing:-.005em} .sc-in span{font-size:12.5px;color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums} .sc-go{position:absolute;right:12px;bottom:12px;z-index:2;width:30px;height:30px; border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center; color:#fff;transition:background .18s} .shortcut:hover .sc-go{background:rgba(255,255,255,.3)}@media (prefers-reduced-motion:reduce) { .shortcut,.shortcut img{transition:none} .shortcut:hover{transform:none}.shortcut:hover img{transform:none}} /* a compact segmented control for the featured tabs */ .ops-sm{margin-left:auto;padding:3px;align-self:center} .ops-sm button{padding:7px 14px;font-size:13px;white-space:nowrap} /* ---------- 4 · zones ---------- Three localities is all he works in, so these are three real cards with real counts. Grouping them by "lifestyle" would be inventing a taxonomy on top of three rows of data. */ .zones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@container (max-width:860px) {.zones{grid-template-columns:1fr}} .zone{position:relative;overflow:hidden;border-radius:var(--radius);border:0;padding:0; cursor:pointer;text-align:left;min-height:186px;display:flex;align-items:flex-end; isolation:isolate;background:var(--surface-2)} .zone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; transition:transform .8s cubic-bezier(.22,.61,.36,1)} .zone:hover img{transform:scale(1.06)} .zone::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(8,10,18,.86) 0%,rgba(8,10,18,.34) 52%,rgba(8,10,18,.12) 100%)} .zone-in{position:relative;z-index:2;padding:16px 18px;display:flex;flex-direction:column;gap:3px} .zone-in b{font-size:19px;font-weight:600;color:#fff} .zone-in span{font-size:13px;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums}@media (prefers-reduced-motion:reduce) {.zone img{transition:none}.zone:hover img{transform:none}} /* ---------- rotating shelves ---------- "Que se vean solo dos y que vayan cambiando automáticas … para que no sea tan larga la página." Two at a time instead of six, moving on their own, so the same stock takes a third of the height. It is a scroll container rather than a transformed track: that gives native swiping on a phone and keyboard scrolling for free, and the browser does the snapping. Autoplay is just a scroll, so a human grabbing it mid-slide never fights the animation. */ .shelf{position:relative} .shelf-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px;margin:-4px -2px} .shelf-track::-webkit-scrollbar{display:none} .shelf-track > .card{flex:0 0 calc((100% - 18px) / 2);scroll-snap-align:start}@container (max-width:760px) { .shelf-track{gap:14px} .shelf-track > .card{flex:0 0 100%}} .shelf-foot{display:flex;align-items:center;gap:12px;margin-top:16px} .shelf-dots{display:flex;gap:6px} .shelf-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;cursor:pointer; background:var(--line);transition:background .2s,width .2s} .shelf-dots button[aria-current="true"]{background:var(--navy);width:22px;border-radius:4px} .shelf-arrows{margin-left:auto;display:flex;gap:8px} .shelf-arrows button{width:36px;height:36px;border-radius:50%;cursor:pointer; border:1px solid var(--line);background:var(--surface);color:var(--navy); display:grid;place-items:center;transition:border-color .15s,background .15s} .shelf-arrows button:hover{border-color:var(--navy);background:var(--surface-2)} /* ---------- the three paths ---------- A visitor is one of three people, and the page should not make them work out which. Buy and rent go straight into a filtered catalogue; the third goes to the valuation, which is the only reason an owner is here. */ .paths{display:grid;grid-template-columns:repeat(3,auto);gap:12px;margin:0; justify-content:start;width:auto}@container (max-width:860px) {.paths{justify-content:center}}@container (max-width:620px) {.paths{grid-template-columns:1fr;gap:9px;width:100%}} .paths button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer; background:rgba(10,12,20,.44);border:1px solid rgba(255,255,255,.55);border-radius:10px; padding:13px 22px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:background .18s,border-color .18s,transform .18s} .paths button:hover{background:rgba(255,255,255,.96);border-color:#fff;transform:translateY(-2px)} .paths b{font-size:16px;font-weight:600;color:#fff} .paths span{font-size:12.5px;color:rgba(255,255,255,.88)} .paths button:hover b{color:var(--navy)} .paths button:hover span{color:var(--muted)}@container (max-width:620px) {.paths button{align-items:center}}@media (prefers-reduced-motion:reduce) {.paths button{transition:none} .paths button:hover{transform:none}} /* the code lookup lives beside the search now, not in a card of its own */ .codefind{display:flex;align-items:center;gap:8px;margin-left:auto}@container (max-width:760px) {.codefind{margin-left:0;width:100%}} .codefind label{font-size:12.5px;color:var(--muted);white-space:nowrap} .codefind input{width:110px;flex:0 1 auto;min-width:0;background:var(--surface); border:1px solid var(--line);border-radius:7px;padding:8px 10px;color:var(--ink); font-weight:600;letter-spacing:.06em;text-transform:uppercase} .codefind input::placeholder{font-weight:400;letter-spacing:0;color:var(--muted); text-transform:none} .codefind .btn-ghost{padding:8px 14px} .code-msg{margin:8px 0 0;font-size:13px;color:var(--warn);min-height:0} .code-msg:empty{display:none} .quick{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0} /* the owner's four steps */ .steps{list-style:none;counter-reset:s;margin:18px 0 6px;padding:0;display:grid;gap:10px} .steps li{counter-increment:s;display:flex;flex-direction:column;gap:1px;padding-left:34px; position:relative} .steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:23px;height:23px; border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:600; display:grid;place-items:center} .steps b{font-size:14.5px;color:var(--ink)} .steps span{font-size:13.5px;color:var(--muted);line-height:1.45} /* the closing invitation */ .closing{display:flex;align-items:center;gap:28px;flex-wrap:wrap; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:32px 34px}@container (max-width:760px) {.closing{padding:22px 20px;gap:18px}} .closing h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.16; letter-spacing:-.015em;color:var(--navy);margin:0;max-width:22ch} .closing p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:52ch} .closing-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}@container (max-width:760px) {.closing-actions{margin-left:0}} /* ---------- property cards ---------- */ .grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}@container (max-width:980px) {.grid{grid-template-columns:repeat(2,1fr)}}@container (max-width:620px) {.grid{grid-template-columns:1fr;gap:14px}} .card{text-decoration:none;color:inherit;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;cursor:pointer;text-align:left;padding:0; transition:border-color .15s,transform .15s,box-shadow .15s} .card:hover{border-color:var(--navy-tint);transform:translateY(-2px);box-shadow:var(--shadow)} .card:focus-visible{outline:2px solid var(--navy-tint);outline-offset:2px} .card-img{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden} .card-img img{width:100%;height:100%;object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1)} /* ---------- flipping through a card's photographs ---------- Without this you have to open a property to find out whether its other photographs are any better, which is a lot of clicking on a catalogue where the lead photograph is often the weakest one he has. The arrows sit inside the image and never trigger the card itself. */ .card-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:34px;height:34px;border:0;border-radius:50%;cursor:pointer; background:rgba(8,10,18,.52);color:#fff;display:grid;place-items:center; opacity:0;transition:opacity .18s,background .18s} .card-nav.prev{left:8px} .card-nav.next{right:8px} .card:hover .card-nav,.card:focus-within .card-nav{opacity:1} .card-nav:hover{background:rgba(8,10,18,.78)} .card-nav:focus-visible{opacity:1} /* on a touch screen there is no hover, so they stay visible */ @media (hover:none) {.card-nav{opacity:1}} .card-count{position:absolute;left:10px;bottom:10px;z-index:3;font-size:11px; padding:3px 8px;border-radius:5px;background:rgba(0,0,0,.55);color:#fff; font-variant-numeric:tabular-nums;opacity:0;transition:opacity .18s} .card:hover .card-count,.card:focus-within .card-count{opacity:1}@media (hover:none) {.card-count{opacity:1}} .card:hover .card-img img{transform:scale(1.06)}@media (prefers-reduced-motion:reduce) {.card-img img{transition:none} .card:hover .card-img img{transform:none}} .badge{position:absolute;left:10px;top:10px;font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;padding:4px 9px;border-radius:5px;background:var(--navy);color:#fff} .badge.alq{background:var(--alquiler)} .codigo{position:absolute;right:10px;top:10px;font-size:11px;font-weight:600;padding:4px 8px; border-radius:5px;background:rgba(0,0,0,.55);color:#fff;letter-spacing:.04em} .shots{position:absolute;right:10px;bottom:10px;font-size:11px;padding:3px 8px;border-radius:5px; background:rgba(0,0,0,.55);color:#fff;font-variant-numeric:tabular-nums} .card-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1} .price{font-size:19px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .price small{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.04em} .card h3{font-size:15px;font-weight:600;line-height:1.35} .addr{font-size:13.5px;color:var(--muted);line-height:1.4} .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px} .chip{font-size:11.5px;border:1px solid var(--line);border-radius:5px;padding:3px 8px;color:var(--muted)} .chip.t{border-color:var(--line-soft);background:var(--surface-2);color:var(--ink);font-weight:500} .specs{display:flex;flex-wrap:wrap;gap:10px 14px;font-size:13px;color:var(--muted); font-variant-numeric:tabular-nums} .specs i{font-style:normal;color:var(--ink);font-weight:600} /* ---------- the owner's band ---------- A split panel: the offer on the left, a photograph with the mark on it on the right. It replaces the solid navy block that said the same thing, because a flat colour band is the one shape on this page that looks like a template. The photograph is a hand passing keys, deliberately not a stock "agent": a model presented as the agency would imply staff he does not have. */ .pitch{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius); overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}@container (max-width:860px) {.pitch{grid-template-columns:1fr}} .pitch-copy{padding:48px 46px;display:flex;flex-direction:column;align-items:flex-start; justify-content:center;gap:14px}@container (max-width:860px) {.pitch-copy{padding:28px 22px}} /* 18ch forced "¿Tenés una / propiedad para / vender o alquilar?" into three stubby lines in a column that had room for two. Width first, then size. */ .pitch-copy h2{font-family:var(--serif);font-weight:400;font-size:33px;line-height:1.16; letter-spacing:-.015em;color:var(--navy);margin:0;max-width:24ch;text-wrap:balance}@container (max-width:1100px) {.pitch-copy h2{font-size:29px}}@container (max-width:860px) {.pitch-copy h2{font-size:26px;max-width:22ch}} .pitch-copy p{margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:46ch} .pitch-copy .btn-ghost{margin-top:8px;background:var(--surface)} .pitch-art{position:relative;min-height:330px;overflow:hidden;isolation:isolate}@container (max-width:860px) {.pitch-art{min-height:240px}} .pitch-art img.shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .pitch-art::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to right,rgba(6,8,16,.62) 0%,rgba(6,8,16,.30) 52%, rgba(6,8,16,.42) 100%)} .pitch-mark{position:relative;z-index:2;height:100%;display:flex;flex-direction:column; align-items:flex-start;justify-content:center;gap:10px;padding:0 42px}@container (max-width:860px) {.pitch-mark{padding:0 22px}} .pitch-mark img{height:62px;width:auto;filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))}@container (max-width:860px) {.pitch-mark img{height:46px}} .pitch-mark span{font-size:12px;letter-spacing:.24em;text-transform:uppercase; font-weight:600;color:#fff;background:rgba(6,8,16,.34);padding:6px 12px;border-radius:999px} /* ---------- results screen ---------- */ .results>*{min-width:0} .results{display:grid;grid-template-columns:238px 1fr;gap:26px;align-items:start}@container (max-width:900px) {.results{grid-template-columns:1fr}} .filters{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius); padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:14px}@container (max-width:900px) {.filters{position:static}} .filters h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .ops{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:3px} .ops button{flex:1;background:none;border:0;padding:7px 4px;border-radius:5px;cursor:pointer; font-size:13px;font-weight:500;color:var(--muted)} .ops button[aria-pressed="true"]{background:var(--navy);color:#fff;font-weight:600} .checks{display:flex;flex-direction:column;gap:7px;max-height:none} .checks label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer} .checks input{accent-color:var(--navy);width:15px;height:15px;margin:0} .checks em{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted); font-variant-numeric:tabular-nums} .rhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px} .rhead p{margin:0;font-size:14px;color:var(--muted)} .rhead p b{color:var(--ink);font-weight:600} .rhead select{margin-left:auto;background:var(--surface);border:1px solid var(--line); border-radius:7px;padding:8px 10px} .empty{border:1px dashed var(--line);border-radius:var(--radius);padding:30px;text-align:center; color:var(--muted)} /* ---------- property detail ---------- */ .ficha>*{min-width:0} .ficha{display:grid;grid-template-columns:1fr 316px;gap:28px;align-items:start}@container (max-width:900px) {.ficha{grid-template-columns:1fr;gap:22px}} .gallery{display:flex;flex-direction:column;gap:8px} .gmain{aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;background:var(--surface-2); position:relative} .gmain img{width:100%;height:100%;object-fit:cover} .gthumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px} .gthumbs button{flex:none;width:84px;aspect-ratio:4/3;border-radius:7px;overflow:hidden;padding:0; border:2px solid transparent;background:none;cursor:pointer} .gthumbs button[aria-current="true"]{border-color:var(--navy-tint)} .gthumbs img{width:100%;height:100%;object-fit:cover} .ficha-head{display:flex;flex-direction:column;gap:10px;margin:22px 0 0} .ficha-head .price{font-size:28px} .block{border-top:1px solid var(--line-soft);padding:22px 0 0;margin-top:22px; display:flex;flex-direction:column;gap:12px} .block h2{font-size:17px} .desc{font-family:var(--serif);font-size:16.5px;line-height:1.65;max-width:66ch;white-space:pre-line} .dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px; background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius); overflow:hidden} .dl div{background:var(--surface);padding:12px 14px} .dl dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600} .dl dd{margin:3px 0 0;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums} /* map: hand-drawn grid, because 24 of the 29 listings have no coordinates yet */ .map{aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);position:relative; overflow:hidden;background:var(--surface-2)} .map::before{content:"";position:absolute;inset:0;background: repeating-linear-gradient(0deg,var(--line-soft) 0 1px,transparent 1px 38px), repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px 38px), linear-gradient(45deg,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px))} .pin{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%; background:var(--navy);border:3px solid var(--surface);transform:translate(-50%,-50%); box-shadow:0 0 0 7px color-mix(in srgb,var(--navy) 18%,transparent)} .map figcaption{position:absolute;left:0;right:0;bottom:0;background:var(--surface); border-top:1px solid var(--line-soft);padding:9px 12px;font-size:12.5px;color:var(--muted)} .aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px}@container (max-width:900px) {.aside{position:static}} .panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2); padding:16px;display:flex;flex-direction:column;gap:12px} .agent{display:flex;gap:12px;align-items:center} .avatar{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;flex:none; display:grid;place-items:center;font-weight:600;letter-spacing:.02em} .agent b{display:block;font-size:15px} .agent span{font-size:12.5px;color:var(--muted);line-height:1.35;display:block} .form{display:flex;flex-direction:column;gap:10px} .form textarea{min-height:84px;resize:vertical} .wa{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface); color:var(--alquiler);border:1.5px solid var(--alquiler);border-radius:7px;padding:10px 14px; font-weight:600;cursor:pointer} .wa:hover{background:var(--alquiler);color:#fff} .small{font-size:12px;color:var(--muted)} .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);opacity:.8} /* ---------- contact screen ---------- */ .contact>*{min-width:0} .contact{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}@container (max-width:860px) {.contact{grid-template-columns:1fr;gap:20px}} .office{display:flex;flex-direction:column;gap:16px} .office-row{display:flex;gap:12px;align-items:flex-start} .office-row svg{flex:none;margin-top:2px;color:var(--navy-tint)} .office-row b{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);font-weight:600;margin-bottom:2px} .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}@container (max-width:620px) {.two{grid-template-columns:1fr}} /* ---------- footer ---------- */ /* Brand navy, not the deeper shade: the logo artwork carries its own navy rectangle, and on navy-deep that rectangle showed as a lighter box. */ .site-foot{background:var(--navy);color:var(--on-navy-dim);margin-top:10px} .foot-in{max-width:1320px;margin:0 auto;padding:34px 32px;display:grid; grid-template-columns:1.4fr repeat(4,1fr);gap:26px}@container (max-width:1000px) {.foot-in{grid-template-columns:1fr 1fr 1fr}}@container (max-width:760px) {.foot-in{grid-template-columns:1fr;gap:20px;padding:24px 14px}} .site-foot h4{margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--on-navy);font-weight:600} .site-foot a{display:block;color:var(--on-navy-dim);text-decoration:none;font-size:14px; padding:3px 0} .site-foot a:hover{color:var(--on-navy)} .site-foot p{margin:0;font-size:13px;line-height:1.55} .legal{border-top:1px solid rgba(255,255,255,.12);padding:14px 32px;font-size:12px; max-width:1320px;margin:0 auto;color:var(--on-navy-dim)} /* data the client still has to give us, marked rather than invented */ .tbc{border-bottom:1px dotted currentColor;opacity:.75;cursor:help} /* ============================================================================ * Additions — the parts of a real site the prototype never needed. * * This file is appended to the generated stylesheet by tools/build_theme_css.py, so * the served CSS is still one file, and the approved mockup above is still the only * source of the approved design. Nothing here restyles anything he signed off: every * rule is either a NEW element (the map search, which he asked for on 13 Nov, after * approving the design) or the small amount of plumbing a static prototype can do * without and a WordPress template cannot. * * If a rule here ever changes how an approved element looks, it belongs in the mockup * instead — where he can see it before it ships. * ========================================================================= */ /* --- plumbing ------------------------------------------------------------- * The prototype hard-coded its logo and navigated by swapping screens. A real * header wraps the logo in a link, and a real listing hides cards rather than * rebuilding the grid — and `.card{display:flex}` beats the `hidden` attribute, * which is a trap worth closing explicitly. */ .logo-link { display: inline-flex; text-decoration: none; } .card[hidden] { display: none; } /* The sort control is a form here, because it has to carry the current filters with * it. `display:contents` keeps the