/* ========================================================================== EUROPE REALTOR — immersive / place-led, with the process spine and scope stamp ========================================================================== Chosen from four parallel art directions (see website-rebuilds/europerealtor.md). Core idea: ALTITUDE AS TAXONOMY. Camera distance encodes distance from the transaction — Country Guides from a ridge, Buying Process at street level, and the three LEDGER categories (Costs & Taxes, Mortgages & Finance, Owning & Selling) carry NO PHOTOGRAPH AT ALL. The site is most photographic where it is least commercial. That inversion argues its independence through layout instead of through a disclaimer. FOUR RULES THAT KEEP THIS OUT OF ESTATE-AGENCY TERRITORY. If any one erodes in maintenance, the whole thing flips to brochure in a single commit: 1. No interiors, no props, no keys — terrain and facades only. 2. No filled CTA button ever sits over a photograph. Text links with arrows only. 3. The dark positioning bar lands immediately after the hero and interrupts the seduction. 4. The ledger tier is never illustrated. ========================================================================== */ /* ---------- fonts: latin + latin-ext, both required ---------- Shipping only `latin` broke Łódź, Gdańsk and Brașov mid-word — invisible until you render one of those words, and this site names European places constantly. Shipping only `latin-ext` is worse: it contains no a, e, o, comma or full stop at all. Both, with unicode-range. */ @font-face{font-family:'Fraunces';src:url('/wp-content/uploads/fonts/fraunces.woff2')format('woff2-variations'); font-weight:400 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Fraunces';src:url('/wp-content/uploads/fonts/fraunces-ext.woff2')format('woff2-variations'); font-weight:400 700;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'PublicSans';src:url('/wp-content/uploads/fonts/publicsans.woff2')format('woff2-variations'); font-weight:400 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'PublicSans';src:url('/wp-content/uploads/fonts/publicsans-ext.woff2')format('woff2-variations'); font-weight:400 700;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------- tokens ---------- */ :root{ --pa:#F4F1EC; /* limewash page ground — ties the UI to the walls in the photographs */ --su:#FFFFFF; /* the one true white: article body, ad frames, ledger tiles */ --ink:#16191C; /* headings. 15.66:1 on --pa */ --i2:#3B4249; /* body copy. 9.04:1 */ --mu:#626A75; /* captions, meta. 4.86:1 — do not lighten */ --ru:#DED8CF; /* hairlines */ --dp:#0E1B1E; /* THE structural colour: every scrim and dark band. Near-black petrol, neutral enough to sit over terracotta, olive and limestone without tinting */ --ac:#1F5A52; /* verdigris. Links, active nav, the spine. 7.05:1 */ --sg:#A8482A; /* terracotta. Counts, eyebrows, ledger rule, the scope strike. 5.14:1 NEVER a button fill — the moment it is, the site is an agency */ --on:#FFFFFF; --on2:rgba(255,255,255,.80); --sg-dark:#E08A5B; /* terracotta on --dp (5.14:1 fails there; this is 6.66:1) */ --mu-dark:#9BA7A5; --ease:cubic-bezier(.22,.61,.36,1); } html{color-scheme:light} body{background:var(--pa);color:var(--i2);font-family:'PublicSans',ui-sans-serif,system-ui,sans-serif; font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:clip} h1,h2,h3,h4,.main-title{font-family:'Fraunces',Georgia,serif;color:var(--ink); font-variation-settings:'SOFT' 0,'WONK' 0} a{color:var(--ac);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--ink)} /* full-bleed helper. NOT 100vw — that includes the scrollbar and overflows on Windows. */ .er-full{margin-left:calc(50% - 50vw);width:100vw;max-width:100vw} /* ---------- header ---------- */ .site-header{background:var(--su);border-bottom:1px solid var(--ru)} .main-title{font-size:1.5rem!important;font-weight:600;letter-spacing:-.01em} .main-title a{color:var(--ink)!important;text-decoration:none} .site-description{font-family:'PublicSans',sans-serif;color:var(--mu);font-size:.84rem} .main-navigation{background:var(--su);border-bottom:1px solid var(--ru)} .main-navigation a{font-family:'PublicSans',sans-serif;font-size:.9rem;font-weight:500; color:var(--i2)!important;text-decoration:none;transition:color .15s var(--ease)} .main-navigation a:hover{color:var(--ac)!important} .main-navigation .main-nav ul li[class*="current"]>a{background:transparent!important;color:var(--ac)!important} .main-navigation .sub-menu{background:var(--su);border:1px solid var(--ru);border-radius:3px;padding:6px 0} .main-navigation .sub-menu a{color:var(--i2)!important;font-size:.88rem} .main-navigation .sub-menu a:hover{background:var(--pa)} /* mobile toggle — GeneratePress colours nav text white for a dark bar; this bar is white, so the toggle was present, 375x60, and completely invisible. */ .main-navigation .menu-toggle,.main-navigation .mobile-menu{color:var(--ink)!important; background:transparent!important;font-family:'PublicSans',sans-serif;font-weight:600} .main-navigation.toggled .main-nav>ul{background:var(--su)} .main-navigation.toggled .main-nav a{color:var(--i2)!important} /* FRONT PAGE ONLY: header sits transparent over the hero so the image starts at pixel zero. This is the single most visible break from the old 300px capped banner. */ .home .site-header{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent; border-bottom:1px solid rgba(255,255,255,.24)} .home .site-header .main-title a{color:#fff!important} .home .site-description{display:none} .home .main-navigation{position:absolute;top:64px;left:0;right:0;z-index:5;background:transparent;border-bottom:0} .home .main-navigation a{color:rgba(255,255,255,.92)!important} .home .main-navigation a:hover{color:#fff!important} .home .main-navigation .menu-toggle,.home .main-navigation .mobile-menu{color:#fff!important} @media (max-width:768px){.home .main-navigation{top:56px}} /* ---------- hero ---------- */ .er-hero{position:relative;height:min(78svh,760px);min-height:540px;overflow:hidden; background:linear-gradient(135deg,#1F5A52,#0E1B1E);display:flex;align-items:flex-end} @supports not (height:1svh){.er-hero{height:min(78vh,760px)}} @media (max-width:768px){.er-hero{height:min(74svh,620px);min-height:460px}} .er-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;z-index:0} /* Two scrims. The .62 floor: at alpha .62 white text still measures 4.94:1 against a pure-white sky worst case; at .50 it is only 3.37:1. No text sits where the composite is below .62. */ .er-hero__scrim{position:absolute;inset:0;z-index:1;background: linear-gradient(180deg,rgba(14,27,30,.55) 0,rgba(14,27,30,.12) 22%,rgba(14,27,30,0) 42%), linear-gradient(0deg,rgba(14,27,30,.84) 0,rgba(14,27,30,.68) 26%,rgba(14,27,30,.30) 52%,rgba(14,27,30,0) 78%)} .er-hero__inner{position:relative;z-index:2;padding:0 0 68px;max-width:660px} .er-hero__eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--on2);margin:0 0 12px} .er-hero__title{font-family:'Fraunces',Georgia,serif;font-weight:500; font-size:clamp(2.25rem,5.4vw,4.25rem);line-height:1.04;letter-spacing:-.018em;color:#fff; margin:0 0 14px;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.35)} .er-hero__sub{margin:0 0 18px;font-size:1.06rem;line-height:1.55;color:rgba(255,255,255,.9);max-width:52ch} .er-hero__cta{color:#fff;font-size:.98rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:3px} .er-hero__cta:hover{color:#fff;border-bottom-color:#fff} .er-hero__credit{position:absolute;right:24px;bottom:18px;z-index:2;margin:0;font-size:.68rem;color:rgba(255,255,255,.62)} @media (max-width:768px){.er-hero__inner{padding:0 0 40px}.er-hero__credit{display:none}} /* ---------- positioning bar: interrupts the seduction two seconds in ---------- */ .er-bar{background:var(--dp);color:var(--pa)} .er-bar__in{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:26px 0} .er-bar__claim{font-size:1.02rem;margin:0} .er-bar__stat{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sg-dark);white-space:nowrap;margin:0} @media (max-width:768px){.er-bar__in{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 0}} /* ---------- altitude-tiered category treatments ---------- */ .er-tier{margin:0 0 18px;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)} .er-plate{position:relative;overflow:hidden;display:block;text-decoration:none} .er-plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)} .er-plate:hover img{transform:scale(1.03)} .er-plate__cap{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,27,30,.80),rgba(14,27,30,.16) 58%,transparent); display:flex;flex-direction:column;justify-content:flex-end;padding:20px 22px;color:#fff} .er-plate__tier{margin:0 0 3px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.82} .er-plate__name{margin:0;font-family:'Fraunces',Georgia,serif;font-size:1.45rem;line-height:1.2} .er-aerial{height:230px;margin-bottom:16px} .er-townscape{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:16px;margin-bottom:22px} .er-townscape .er-plate{aspect-ratio:4/5} .er-townscape .er-plate__cap{background:none;position:static;padding:10px 0 0;color:inherit} .er-townscape .er-plate__tier{color:var(--mu)} .er-townscape .er-plate__name{color:var(--ink);font-size:1.1rem} .er-street{display:grid;grid-template-columns:46% 1fr;gap:22px;align-items:center;margin-bottom:22px} .er-street .er-plate{height:180px} .er-street .er-plate__cap{display:none} /* LEDGER: no image, by design. Terracotta rule instead. */ .er-ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px} .er-ledger a{display:block;background:var(--su);border-top:3px solid var(--sg);padding:18px 18px 20px; text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .er-ledger a:hover{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(14,27,30,.28)} .er-ledger p{margin:0} .er-ledger .n{font-family:'Fraunces',Georgia,serif;font-size:1.12rem;color:var(--ink);margin-bottom:5px} .er-ledger .c{font-size:.82rem;color:var(--mu)} /* ---------- THE SPINE (grafted from the atlas direction) ---------- A hairline traverse down the article, ticked and numbered at every h2 by a CSS counter. Zero markup, zero JS — works on all 33 existing posts. It only MEANS anything on a site whose value is ordered process, which is why it cannot be lifted onto a different subject. */ .single .entry-content{counter-reset:er-station;position:relative} @media (min-width:1080px){ .single .entry-content{padding-left:96px} .single .entry-content::before{content:'';position:absolute;left:34px;top:6px;bottom:0; width:1px;background:var(--ru)} .single .entry-content>h2{position:relative} .single .entry-content>h2::before{counter-increment:er-station;content:counter(er-station,decimal-leading-zero); position:absolute;left:-96px;top:.55em;width:62px;text-align:right; font-family:'PublicSans',sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.06em; color:var(--sg)} .single .entry-content>h2::after{content:'';position:absolute;left:-62px;top:1.05em;width:18px;height:1px;background:var(--sg)} } @media (max-width:1079px){ .single .entry-content>h2::before{counter-increment:er-station; content:counter(er-station,decimal-leading-zero) ' · ';color:var(--sg); font-family:'PublicSans',sans-serif;font-size:.8em;font-weight:600;letter-spacing:.04em} } /* ---------- THE SCOPE STAMP (grafted from the broadsheet direction) ---------- The four refusals, set as struck-through small caps. Uncopyable by construction: a competitor reproducing it would be advertising the four things they actually do sell. */ .er-scope{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0 16px;margin:0 0 26px} .er-scope__head{font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--mu);margin:0 0 10px} .er-scope__no{list-style:none;margin:0;padding:0} .er-scope__no li{font-family:'Fraunces',Georgia,serif;font-variant-caps:small-caps;letter-spacing:.03em; font-size:1.18rem;line-height:1.5;color:var(--ink); text-decoration:line-through;text-decoration-color:var(--sg);text-decoration-thickness:2px} .er-scope__no li::before{content:'no ';text-decoration:none;color:var(--mu); font-variant-caps:normal;font-family:'PublicSans',sans-serif;font-size:.7rem;letter-spacing:0} .er-scope__yes{margin:12px 0 0;font-size:.88rem;line-height:1.6;color:var(--i2); border-top:1px solid var(--ru);padding-top:10px} .er-scope--hero .er-scope__no li{font-size:2rem} /* ---------- article ---------- */ .inside-article{background:var(--su);border:1px solid var(--ru);border-radius:3px;padding:0 0 34px;overflow:hidden} .inside-article>*:not(.post-image):not(.featured-image){padding-left:34px;padding-right:34px} @media (max-width:600px){.inside-article>*:not(.post-image):not(.featured-image){padding-left:20px;padding-right:20px}} /* Banner above the H1 is gone. Measured: it put the answer-first paragraph at 707-926 against a 720 fold. Every post carries an in-body figure, so nothing loses its imagery. */ .single .post-image,.single .featured-image,.single .page-header-image-single{display:none!important} .single .site-header{padding-top:18px;padding-bottom:18px} .single .site-description{display:none} .single .main-title{font-size:1.35rem!important} .entry-title{font-size:2.1rem;line-height:1.14;margin:26px 0 8px} @media (max-width:600px){.entry-title{font-size:1.6rem}} .entry-meta{font-size:.8rem;color:var(--mu);padding-bottom:4px} .entry-meta a{color:var(--mu)} .entry-content{font-size:1.0625rem;line-height:1.72;color:var(--i2)} .entry-content>p:first-of-type{font-size:1.18rem;line-height:1.6;color:var(--ink); border-left:3px solid var(--ac);padding-left:18px!important;margin-bottom:26px} .entry-content h2{font-size:1.5rem;margin-top:2.4em;margin-bottom:.5em;padding-top:.7em;border-top:1px solid var(--ru)} .entry-content>h2:first-of-type{border-top:0;padding-top:0} .entry-content h3{font-family:'PublicSans',sans-serif;font-size:1.1rem;font-weight:650; margin-top:1.8em;margin-bottom:.4em;color:var(--ink)} .entry-content li{margin-bottom:.5em} .entry-content li::marker{color:var(--sg)} .entry-content strong{color:var(--ink);font-weight:600} .entry-content table{width:100%;border-collapse:collapse;margin:1.9em 0;font-size:.95rem;display:block;overflow-x:auto} .entry-content th,.entry-content td{border:1px solid var(--ru);padding:.7em .85em;text-align:left;vertical-align:top} .entry-content th{background:var(--pa);font-family:'PublicSans',sans-serif;font-weight:600;font-size:.86rem;color:var(--ink)} .entry-content figure img{width:100%;max-height:430px;object-fit:cover;border-radius:3px;border:1px solid var(--ru)} .entry-content figcaption{font-size:.78rem;color:var(--mu);border-top:1px solid var(--sg);padding-top:5px;margin-top:6px} .entry-content>p:last-child em,.entry-content>p:last-of-type em{display:block;padding:16px 18px; background:var(--pa);border-left:3px solid var(--sg);font-style:normal;font-size:.92rem; line-height:1.62;color:var(--i2)} /* ---------- listings ---------- */ .blog .site-main,.archive .site-main{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:20px} .blog .site-main>.post,.archive .site-main>.post{margin-bottom:0!important;border-bottom:0!important} .blog .site-main .inside-article,.archive .site-main .inside-article{height:100%;display:flex; flex-direction:column;padding-bottom:20px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .blog .site-main .post:hover .inside-article,.archive .site-main .post:hover .inside-article{ transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(14,27,30,.3)} .blog .site-main .post-image,.archive .site-main .post-image{order:-1;margin:0 0 16px} .blog .site-main .post-image img,.archive .site-main .post-image img{max-height:168px} .blog .site-main .entry-title,.archive .site-main .entry-title{font-size:1.14rem;line-height:1.3;margin:0 0 8px} .blog .site-main .entry-title a,.archive .site-main .entry-title a{color:var(--ink);text-decoration:none} .blog .site-main .post:hover .entry-title a,.archive .site-main .post:hover .entry-title a{color:var(--ac)} .blog .site-main .entry-summary,.archive .site-main .entry-summary{font-size:.9rem;color:var(--mu);order:1} .blog .site-main .entry-meta,.archive .site-main .entry-meta{order:2} .blog .site-main>*,.archive .site-main>*{min-width:0} .blog .site-main .paging-navigation,.archive .site-main .paging-navigation{grid-column:1/-1} .site-main>.er-hero,.site-main>.er-full{grid-column:1/-1;width:100%} .page-header,.archive .page-header{background:var(--su);border:1px solid var(--ru);border-radius:3px; padding:24px 28px;margin-bottom:22px} .page-header h1{font-size:1.8rem;margin:0 0 6px} .paging-navigation .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:40px;height:40px;padding:0 12px;margin:0 4px 8px 0;background:var(--su); border:1px solid var(--ru);border-radius:3px;color:var(--i2);text-decoration:none;font-size:.92rem} .paging-navigation .page-numbers:hover{background:var(--pa);color:var(--ac)} .paging-navigation .page-numbers.current{background:var(--ac);border-color:var(--ac);color:#fff} /* ---------- ads ---------- */ .sc-ad{border-top:1px solid var(--ru);border-bottom:1px solid var(--ru);padding:18px 0;background:var(--pa)} /* ---------- footer ---------- */ .er-footer-wrap{background:var(--dp);color:var(--mu-dark);border-top:0} .er-footer{max-width:1120px;margin:0 auto;padding:40px 20px 10px;display:grid;grid-template-columns:1.6fr 1fr;gap:28px} @media (max-width:600px){.er-footer{grid-template-columns:1fr;gap:18px}} .er-footer__brand{font-family:'Fraunces',Georgia,serif;font-size:1.25rem;font-weight:600;color:var(--pa);margin:0 0 8px} .er-footer__blurb{margin:0;font-size:.86rem;line-height:1.65} .er-footer__heading{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pa);margin:0 0 10px} .er-footer__links{list-style:none;margin:0;padding:0} .er-footer__links li{margin-bottom:7px} .er-footer__links a{color:var(--pa);text-decoration:none;font-size:.9rem;opacity:.85} .er-footer__links a:hover{opacity:1;text-decoration:underline} .site-info{background:var(--dp);color:var(--mu-dark);border-top:1px solid rgba(255,255,255,.1)} .site-info a{color:var(--pa)} /* ---------- homepage intro ---------- */ .er-intro{font-size:1.14rem!important;line-height:1.62;color:var(--ink)!important;margin-bottom:1.1em!important} .inside-article>.entry-content:first-child{padding-top:30px} .home .entry-content>p:first-of-type{border-left:0;padding-left:0!important;margin-left:0} /* ---------- overflow + motion guards ---------- */ html,body{max-width:100%} .entry-content>*{max-width:100%} a:focus-visible,button:focus-visible{outline:2px solid var(--ac);outline-offset:2px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} .er-plate:hover img{transform:none} .er-ledger a:hover{transform:none} } /* ---------- front-page header overlay: deterministic, not guessed ---------- GeneratePress renders
and