/* ========================================================================== RAUNF Group — brand stylesheet Recreated from Logo brandbook.dc.html + page designs. Rules: zero border-radius, no shadows, depth from 1px Line borders and Ink/Paper/Surface banding, one Bronze element per viewport. ========================================================================== */ :root { /* Colour tokens (authoritative — brand book) */ --ink: #131412; --graphite: #3A3B36; --paper: #F5F3EE; --surface: #FFFFFF; --bronze: #8C6E42; --bronze-deep: #6E5533; --sage: #6E7F68; --sage-solid: #5C6B57; --line: #DEDCD3; --stone: #6E6E66; --success-bg: #EDF1EC; --success-fg: #3F6746; --warning-bg: #F6EEDC; --warning-fg: #8a5f11; --error: #A2422F; --dark-divider: #2C2D28; --muted-on-dark: #B9B5AA; --meta-on-dark: #8F8B80; --accent-on-dark: #C2A87C; --footer-label: #5E5B54; --bronze-chip-bg: #F2ECE1; /* Typography */ --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Layout */ --max: 1440px; --max-wide: 1600px; --gutter: clamp(20px, 3vw, 48px); --section-y: clamp(56px, 6vw, 96px); --section-y-dark: clamp(56px, 6vw, 104px); --header-h: 76px; --ticker-h: 36px; /* Photo placeholder (replace with real once client supplies) */ --photo-placeholder: repeating-linear-gradient(135deg, #E7E3DA 0 10px, #EFEBE3 10px 20px); } /* Per-locale Georgian font (set on ) */ html[lang^="ka"] { --font-sans: 'Noto Sans Georgian', 'Helvetica Neue', Helvetica, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: var(--bronze-deep); text-decoration: none; } a:hover { color: var(--ink); } img { max-width: 100%; height: auto; } h1, h2, h3, p { text-wrap: pretty; } /* Accessible keyboard focus ring (prototypes omit it) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; font: 400 14px/1 var(--font-sans); } .skip-link:focus { left: 12px; top: 12px; } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .container { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .container--wide { max-width: var(--max-wide); } .section { padding-top: var(--section-y); padding-bottom: var(--section-y); } .section--dark { background: var(--ink); color: var(--paper); padding-top: var(--section-y-dark); padding-bottom: var(--section-y-dark); } .section--surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .band-top { border-top: 1px solid var(--line); } /* -------------------------------------------------------------------------- Typography helpers -------------------------------------------------------------------------- */ .label { font: 400 12px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); } .label--tight { letter-spacing: 0.14em; font-size: 11px; } .label--wide { letter-spacing: 0.2em; } .label--bronze { color: var(--bronze); } .label--on-dark { color: var(--meta-on-dark); } /* Anchor jumps (#referrers, #contact, #services …) clear the sticky header. */ html { scroll-padding-top: calc(var(--header-h) + 16px); } .eyebrow { font: 400 12px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); } .eyebrow--on-dark { color: var(--meta-on-dark); } .h1 { font: 300 clamp(40px, 5.4vw, 74px)/1.02 var(--font-sans); letter-spacing: -0.03em; margin: 0; } .h2 { font: 300 clamp(30px, 3.4vw, 44px)/1.05 var(--font-sans); letter-spacing: -0.02em; margin: 0; } .h2--sm { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; } .h3 { font: 400 21px/1.3 var(--font-sans); margin: 0; } .lead { font: 400 19px/1.6 var(--font-sans); color: var(--graphite); max-width: 32em; margin: 0; } .body { font: 400 17px/1.6 var(--font-sans); color: var(--graphite); max-width: 34em; margin: 0; } .small { font: 400 15px/1.65 var(--font-sans); color: var(--graphite); } .data { font: 400 13px/1 var(--font-mono); color: var(--stone); } .price { font: 300 26px/1 var(--font-sans); color: var(--bronze); } .on-dark .body, .section--dark .body { color: var(--muted-on-dark); } .on-dark .lead, .section--dark .lead { color: var(--muted-on-dark); } /* -------------------------------------------------------------------------- Buttons & chips (rectangles, no radius) -------------------------------------------------------------------------- */ .btn { display: inline-block; font: 400 15px/1 var(--font-sans); padding: 18px 30px; cursor: pointer; border: none; text-align: center; } .btn--primary { background: var(--bronze); color: #fff; } .btn--primary:hover { background: var(--bronze-deep); color: #fff; } .btn--ink { background: var(--ink); color: var(--paper); } .btn--ink:hover { background: var(--graphite); color: var(--paper); } .btn--outline { border: 1px solid var(--ink); color: var(--ink); background: transparent; padding: 17px 29px; } .btn--outline:hover { background: var(--ink); color: var(--paper); } .btn--sm { padding: 15px 22px; font-size: 14px; } .btn--block { display: block; width: 100%; } .chip { display: inline-block; border: 1px solid var(--line); color: var(--graphite); font: 400 14px/1 var(--font-sans); padding: 12px 16px; cursor: pointer; background: transparent; } .chip:hover { border-color: var(--ink); color: var(--ink); } .chip[aria-pressed="true"], .chip--selected { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* Status chips (fixed colours) */ .status { display: inline-block; font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 11px; } .status--verified { background: var(--success-bg); color: var(--success-fg); } .status--offplan { background: var(--warning-bg); color: var(--warning-fg); } .status--land { background: var(--sage-solid); color: #fff; } .status--commercial { background: var(--ink); color: var(--paper); } .status--bronze { background: var(--bronze-chip-bg); color: var(--bronze-deep); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ /* WordPress wraps the header template part in a generic div that shrink-wraps to the header's own height, leaving position:sticky zero room to move within its containing block (it just scrolls away immediately). Removing that wrapper from the box tree makes .wp-site-blocks (full page height) the header's containing block instead, so sticky actually has room to work. */ .wp-site-blocks > .wp-block-template-part:first-child { display: contents; } .site-header { position: sticky; top: var(--ticker-h); z-index: 20; background: rgba(245, 243, 238, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand-lockup { display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; } .brand-lockup img { height: 22px; width: auto; object-fit: contain; display: inline-block; flex: 0 0 auto; } .brand-lockup__group { font: 300 23px/0.72 var(--font-sans); letter-spacing: 0.005em; color: var(--ink); flex: 0 0 auto; } .site-nav { display: flex; gap: clamp(10px, 1.4vw, 26px); align-items: center; font: 400 14px/1 var(--font-sans); flex-wrap: wrap; row-gap: 4px; min-width: 0; flex: 1 1 auto; justify-content: center; } .site-nav a { color: var(--graphite); white-space: nowrap; } .site-nav a:hover { color: var(--ink); } /* Services dropdown */ .nav-item--menu { position: relative; display: inline-flex; align-items: center; } .nav-item__btn { background: transparent; border: 0; padding: 0; cursor: pointer; font: 400 14px/1 var(--font-sans); color: var(--graphite); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .nav-item__btn:hover { color: var(--ink); } .nav-item__caret { font-size: 0.7em; color: var(--stone); line-height: 1; transition: transform 0.15s ease; } .nav-item--menu[data-open="true"] .nav-item__caret { transform: rotate(180deg); } .submenu { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 12px); background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--bronze); min-width: 200px; z-index: 30; flex-direction: column; display: none; } /* Invisible hover bridge so the menu does not drop when crossing the gap. */ .nav-item--menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; } .submenu a { display: block; padding: 13px 18px; color: var(--graphite); border-bottom: 1px solid var(--line); white-space: nowrap; } .submenu a:last-child { border-bottom: 0; } .submenu a:hover { background: rgba(110, 85, 51, 0.08); color: var(--bronze-deep); } .submenu[data-open="true"] { display: flex; } @media (min-width: 1101px) { .nav-item--menu:hover .submenu, .nav-item--menu:focus-within .submenu { display: flex; } .nav-item--menu:hover .nav-item__caret { transform: rotate(180deg); } } .header-cluster { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; } .lang-switch { position: relative; } .lang-switch__btn { display: flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--line); padding: 12px 14px; cursor: pointer; font: 400 12px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--ink); white-space: nowrap; } .lang-switch__btn:hover { border-color: var(--ink); } .lang-switch__btn .caret { color: var(--stone); } .lang-switch__menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); min-width: 160px; display: none; z-index: 30; } .lang-switch__menu[data-open="true"] { display: block; } .lang-switch__menu a { display: block; padding: 12px 16px; color: var(--graphite); font: 400 14px/1 var(--font-sans); border-bottom: 1px solid var(--line); } .lang-switch__menu a:last-child { border-bottom: none; } .lang-switch__menu a:hover { background: var(--paper); color: var(--ink); } /* Flags — hard corners, hairline edge so white flags read on light surfaces. */ .lang-flag { width: 20px; height: 13px; flex: 0 0 auto; display: inline-block; vertical-align: -2px; object-fit: cover; border: 1px solid rgba(31, 29, 26, 0.14); } .lang-switch__menu a, .footer-langs a, .nav-langs a { display: inline-flex; align-items: center; gap: 9px; } .lang-switch__menu a { display: flex; } .footer-langs a[aria-current="true"] .lang-name, .nav-langs a[aria-current="true"] .lang-name { color: var(--bronze); font-weight: 600; } /* Footer keeps language links text-only so the row stays on one line. */ .footer-langs a { gap: 0; } .footer-langs .lang-flag { display: none; } /* Mobile nav toggle — hidden until narrow */ .nav-toggle { display: none; background: transparent; border: 1px solid var(--line); padding: 12px 14px; cursor: pointer; font: 400 12px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--ink); } .nav-toggle:hover { border-color: var(--ink); } @media (max-width: 1100px) { .site-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 20px var(--gutter); gap: 18px; row-gap: 18px; display: none; } .site-nav[data-open="true"] { display: flex; } .nav-toggle { display: inline-flex; } /* Services becomes an inline accordion inside the mobile menu. */ .nav-item--menu { width: 100%; display: block; } .nav-item__btn { width: 100%; justify-content: space-between; font-size: 16px; } .nav-item--menu::after { display: none; } .submenu { position: static; transform: none; border: 0; min-width: 0; padding: 12px 0 0 14px; margin-top: 10px; border-left: 1px solid var(--line); } .submenu a { padding: 8px 0; border-bottom: 0; } } /* Header CTA: full label by default, short "Contact" on phones. */ .header-cta__short { display: none; } /* Language links live in the header button on desktop; on phones they move into the collapsed nav menu (below). Hidden everywhere else. */ .nav-langs { display: none; } /* Phones: keep the header on one line without horizontal overflow. Shrink the logo a touch, move the language switch into the nav menu, tighten gaps, and use the short CTA label. */ @media (max-width: 600px) { .site-header__inner { gap: 10px; } .header-cluster { gap: 8px; } .brand-lockup img { height: 20px; } .brand-lockup__group { font-size: 21px; } .header-cta__full { display: none; } .header-cta__short { display: inline; } .btn--primary.btn--sm { padding: 12px 14px; } /* Language switch stays visible on phones, but compact: flag only. Tapping it opens the same dropdown. */ .lang-switch__btn { padding: 10px; gap: 0; } .lang-switch__btn .lang-code, .lang-switch__btn .caret { display: none; } .lang-switch__menu { min-width: 150px; } /* Full language list also inside the mobile "Menu" dropdown. */ .nav-langs { display: flex; flex-direction: column; gap: 14px; width: 100%; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; } .nav-langs a { color: var(--graphite); font: 400 15px/1 var(--font-sans); white-space: nowrap; } .nav-langs a[aria-current="true"] .lang-name { color: var(--bronze); font-weight: 600; } } /* Narrow phones (≤400px): the logo + Menu + flag + Contact button combo still overflowed the 600px breakpoint's spacing. Tighten further. */ @media (max-width: 400px) { .site-header__inner { gap: 4px; } .header-cluster { gap: 4px; } .nav-toggle { padding: 9px 8px; } .lang-switch__btn { padding: 7px; } .btn--primary.btn--sm.header-cta { padding: 9px 9px; } .brand-lockup img { height: 18px; } .brand-lockup__group { font-size: 18px; } } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 5vw, 80px) var(--gutter) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; } .hero__copy { display: grid; gap: 32px; align-content: start; } .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero__photo, .media-band { background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 24px; min-width: 0; } .hero__photo { min-height: clamp(320px, 42vw, 520px); aspect-ratio: 3 / 4; } /* ---- Cinematic full-bleed hero ------------------------------------------ */ .hero--cinematic { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: 100vh; min-height: 100dvh; /* fill the screen; dvh follows the iOS address bar (no bottom strip) */ min-height: calc(var(--vh, 1vh) * 100); /* JS-measured fallback for iOS Safari's dvh lag on first paint */ max-width: none; margin: 0; padding: 0; margin-top: calc(-1 * var(--header-h) - 2px); /* under the header + cover any subpixel strip */ grid-template-columns: none; } /* Image on its own layer so it can slowly drift (ken-burns) — a static photo made alive. */ .hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; animation: kenburns 16s ease-in-out infinite alternate; will-change: transform; transform: translateZ(0); } /* Phone: centre the copy so the bottom cookie bar never covers it on entry. */ @media (max-width: 700px) { .hero--cinematic { align-items: center; } .hero--cinematic .hero__inner { padding-top: calc(var(--header-h) + 24px); padding-bottom: 24px; } } @keyframes kenburns { 0% { transform: scale(1.05) translate3d(1.6%, 1.1%, 0); } 100% { transform: scale(1.22) translate3d(-2.8%, -2.2%, 0); } } @media (prefers-reduced-motion: reduce) { .hero__bg { animation: none; } } .hero--cinematic .hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(19,20,18,0.45) 0%, rgba(19,20,18,0.05) 32%, rgba(19,20,18,0.20) 62%, rgba(19,20,18,0.80) 100%); } .hero--cinematic .hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: calc(var(--header-h) + 40px) var(--gutter) clamp(52px, 6vw, 96px); display: grid; gap: 22px; justify-items: start; } .hero--cinematic .hero__inner > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; } .hero--cinematic .h1, .hero--cinematic .hero__lead { color: #fff; } .hero--cinematic .hero__title { max-width: 15em; text-shadow: 0 1px 30px rgba(0,0,0,0.25); } .hero--cinematic .hero__lead { max-width: 34em; color: rgba(255,255,255,0.94); } .hero--cinematic .eyebrow { color: rgba(255,255,255,0.85); } /* Hero copy — staggered entrance on load. */ @keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .hero--cinematic .hero__inner > * { animation: heroRise .9s cubic-bezier(.2,.7,.2,1) both; } .hero--cinematic .eyebrow { animation-delay: .12s; } .hero--cinematic .hero__title { animation-delay: .28s; } .hero--cinematic .hero__lead { animation-delay: .46s; } .hero--cinematic .hero__actions{ animation-delay: .64s; } @media (prefers-reduced-motion: reduce) { .hero--cinematic .hero__inner > * { animation: none; } } /* Full-width parallax media band — a photographic beat between text sections. */ .media-band-full { position: relative; overflow: hidden; min-height: clamp(360px, 54vh, 640px); display: flex; align-items: center; margin: clamp(48px, 6vw, 96px) 0; background-size: cover; background-position: center; } /* Desktop: real "fixed reveal" — the image stays pinned while the page slides over it (the effect you liked). Hide the JS layer here so only one runs. */ @media (min-width: 1025px) { .media-band-full { background-attachment: fixed; } .media-band-full .parallax__bg { display: none; } } /* Mobile: browsers ignore background-attachment:fixed, so a JS-translated layer (over the static section bg) gives the parallax instead. */ .parallax__bg { position: absolute; inset: -55% 0; z-index: 0; background-size: cover; background-position: center; transform: translate3d(0,0,0); will-change: transform; } @media (prefers-reduced-motion: reduce) { .parallax__bg { transform: none; inset: 0; } } .media-band-full__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(15,16,14,0.74) 0%, rgba(15,16,14,0.45) 52%, rgba(15,16,14,0.22) 100%); } .media-band-full__inner { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 18px; justify-items: start; } .media-band-full__quote { margin: 0; max-width: 18em; color: #fff; font: 300 clamp(24px, 3.2vw, 42px)/1.28 var(--font-sans); text-wrap: balance; } /* Light ghost button (over imagery) */ .btn--ghost-light { border: 1px solid rgba(255,255,255,0.7); color: #fff; background: transparent; } .btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; } /* WP gives `.wp-site-blocks > *` a top margin, so
sits 24px down and the hero (pulled up only by the header height) leaves a paper strip above the image. Zero the root padding + main's top margin so the cinematic hero is flush. */ .has-cinematic-hero .wp-site-blocks { padding-top: 0; } .has-cinematic-hero .wp-site-blocks > main { margin-block-start: 0; margin-top: 0; } /* Transparent header over the cinematic hero (front page); solid after scroll. */ .has-cinematic-hero .site-header { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .3s ease, border-color .3s ease; } .has-cinematic-hero .site-header .brand-lockup img { filter: brightness(0) invert(1); } .has-cinematic-hero .site-header .brand-lockup__group, .has-cinematic-hero .site-header .site-nav a, .has-cinematic-hero .site-header .nav-item__btn { color: #fff; } .has-cinematic-hero .site-header .nav-item__caret { color: rgba(255,255,255,0.7); } .has-cinematic-hero .site-header .nav-toggle, .has-cinematic-hero .site-header .lang-switch__btn { color: #fff; border-color: rgba(255,255,255,0.55); } /* A dark scrim behind the transparent header + text-shadow, so the white nav stays legible even over the brightest part of the hero image. */ .has-cinematic-hero .site-header:not(.is-solid)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 240%; background: linear-gradient(to bottom, rgba(13,14,12,0.68) 0%, rgba(13,14,12,0.32) 45%, rgba(13,14,12,0) 100%); z-index: -1; pointer-events: none; } .has-cinematic-hero .site-header:not(.is-solid) .site-nav a, .has-cinematic-hero .site-header:not(.is-solid) .nav-item__btn, .has-cinematic-hero .site-header:not(.is-solid) .brand-lockup__group, .has-cinematic-hero .site-header:not(.is-solid) .nav-toggle { text-shadow: 0 1px 12px rgba(0,0,0,0.5); } /* Language switcher (incl. its "EN" text + flag) stays white over the image. */ .has-cinematic-hero .site-header:not(.is-solid) .lang-switch__btn, .has-cinematic-hero .site-header:not(.is-solid) .lang-switch__btn *, .has-cinematic-hero .site-header:not(.is-solid) .nav-langs a, .has-cinematic-hero .site-header:not(.is-solid) .nav-langs a * { color: #fff !important; } .has-cinematic-hero .site-header:not(.is-solid) .lang-switch__btn { border-color: rgba(255,255,255,0.55); } /* The Services dropdown + the expanded mobile menu sit on a PAPER surface, so their links must stay dark even while the header bar is transparent-white. */ .has-cinematic-hero .site-header:not(.is-solid) .submenu a { color: var(--graphite) !important; text-shadow: none; } .has-cinematic-hero .site-header:not(.is-solid) .submenu a:hover { color: var(--bronze-deep) !important; } @media (max-width: 1100px) { .has-cinematic-hero .site-header:not(.is-solid) .site-nav[data-open="true"] a, .has-cinematic-hero .site-header:not(.is-solid) .site-nav[data-open="true"] .nav-item__btn, .has-cinematic-hero .site-header:not(.is-solid) .site-nav[data-open="true"] .nav-langs a, .has-cinematic-hero .site-header:not(.is-solid) .site-nav[data-open="true"] .nav-langs a * { color: var(--graphite) !important; text-shadow: none !important; } .has-cinematic-hero .site-header:not(.is-solid) .site-nav[data-open="true"] .nav-item__caret { color: var(--stone) !important; } } .has-cinematic-hero .site-header.is-solid { background: rgba(245,243,238,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--line); } .has-cinematic-hero .site-header.is-solid .brand-lockup img { filter: none; } .has-cinematic-hero .site-header.is-solid .brand-lockup__group, .has-cinematic-hero .site-header.is-solid .nav-item__btn { color: var(--ink); } .has-cinematic-hero .site-header.is-solid .site-nav a { color: var(--graphite); } .has-cinematic-hero .site-header.is-solid .nav-toggle, .has-cinematic-hero .site-header.is-solid .lang-switch__btn { color: var(--ink); border-color: var(--line); } .media-caption { font: 400 12px/1.5 var(--font-mono); letter-spacing: 0.1em; color: var(--stone); } /* ============================================================ Premium polish — reveal-on-scroll, counters, card motion, sticky search. Progressive enhancement: JS only touches below-the-fold elements, and everything is disabled under prefers-reduced-motion. ============================================================ */ /* Mobile hero/search fix — single column so copy never forces a 340px min (which was overflowing and clipping the eyebrow + lead on phones). */ @media (max-width: 600px) { .hero { grid-template-columns: 1fr; } /* Grid items default to min-width:auto, so wide content (the mono eyebrow) refused to shrink and overflowed → clipped. min-width:0 lets it wrap. */ .hero__copy { min-width: 0; } .hero__copy .eyebrow, .hero__copy .lead, .hero__copy .h1 { overflow-wrap: break-word; } .searchbar { grid-template-columns: 1fr; } } /* Reveal on scroll (class added by JS only to elements below the fold). */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); } .reveal.is-in { opacity: 1; transform: none; } /* Listing cards — a quiet lift, and the photo is ready to zoom once real images replace the placeholders. */ .listing { transition: transform .35s ease; } .listing:hover { transform: translateY(-4px); } .listing__photo { overflow: hidden; } .listing__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; z-index: 0; } .listing__photo .status { z-index: 2; } .listing:hover .listing__photo img { transform: scale(1.05); } /* Stat numbers keep a steady width while counting. */ .stat__num { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .listing, .listing__photo img { transition: none !important; } } /* -------------------------------------------------------------------------- Search bar (Surface card) -------------------------------------------------------------------------- */ .searchbar-wrap { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 3vw, 44px) var(--gutter) 0; } .searchbar { background: var(--surface); border: 1px solid var(--line); padding: clamp(20px, 2.2vw, 28px); display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; align-items: end; } .field { display: grid; gap: 8px; } .field__label { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .field__value { font: 400 16px/1 var(--font-sans); border-bottom: 1px solid var(--line); padding-bottom: 12px; color: var(--ink); } /* Underlined form inputs */ .input-underline { font: 400 16px/1.4 var(--font-sans); border: none; border-bottom: 1px solid var(--line); padding: 0 0 12px; background: transparent; color: var(--ink); outline: none; width: 100%; } .input-underline:focus { border-bottom: 1px solid var(--bronze); } .textarea-box { font: 400 16px/1.5 var(--font-sans); border: 1px solid var(--line); padding: 14px; background: transparent; color: var(--ink); outline: none; width: 100%; resize: vertical; } .textarea-box:focus { border: 1px solid var(--bronze); } /* -------------------------------------------------------------------------- Trust strip -------------------------------------------------------------------------- */ .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(24px, 3vw, 48px); border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); } .stat { display: grid; gap: 8px; } .stat__num { font: 300 clamp(38px, 4vw, 54px)/1 var(--font-sans); letter-spacing: -0.02em; } .stat__label { font: 400 14px/1.5 var(--font-sans); color: var(--stone); } /* -------------------------------------------------------------------------- Section headers -------------------------------------------------------------------------- */ .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 16px; } .section-head__link { font: 400 13px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; } .intro-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: end; } /* -------------------------------------------------------------------------- Listing cards -------------------------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2.4vw, 32px); } .listing { background: var(--surface); border: 1px solid var(--line); display: grid; min-width: 0; } a.listing { color: inherit; } a.listing:hover { border-color: var(--ink); color: inherit; } /* Sample card with no post behind it — must not look or behave clickable. */ .listing--static { cursor: default; } .listing--static:hover { transform: none; } .listing--static:hover .listing__photo img { transform: none; } .listing__photo { aspect-ratio: 4 / 3; background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 16px; position: relative; } .listing__photo .status { position: absolute; top: 16px; left: 16px; } .listing__body { padding: 24px; display: grid; gap: 14px; } .listing__meta { display: flex; gap: 16px; font: 400 13px/1 var(--font-mono); color: var(--stone); flex-wrap: wrap; } .listing__price-row { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; gap: 12px; } .listing__title { font: 400 20px/1.35 var(--font-sans); } .listing__yield { font: 400 12px/1.4 var(--font-mono); color: var(--stone); } /* -------------------------------------------------------------------------- Divider grids (gap:1px + container bg = 1px grid lines) NB: track count must divide item count or empty cells paint solid. -------------------------------------------------------------------------- */ .divider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); } .divider-grid--4 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); border: 1px solid var(--line); } .divider-grid .cell { background: var(--surface); padding: clamp(24px, 2.6vw, 36px); display: grid; gap: 12px; align-content: start; } .cell__num { font: 400 11px/1 var(--font-mono); letter-spacing: 0.16em; color: var(--bronze); } .cell__title { font: 400 21px/1.3 var(--font-sans); } .cell__title--sm { font-size: 20px; } .cell__text { font: 400 15px/1.65 var(--font-sans); color: var(--graphite); } /* Dark variant (inside .section--dark) */ .section--dark .divider-grid { background: var(--dark-divider); } .section--dark .divider-grid .cell { background: var(--ink); } .section--dark .cell__num--lg { font: 300 40px/1 var(--font-sans); color: var(--bronze); letter-spacing: 0; } .section--dark .cell__title { font-size: 19px; } .section--dark .cell__text { color: var(--muted-on-dark); } /* "Also available" chip row */ .chip-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 28px; } .chip-row .chip { cursor: default; } /* Fee / data table (1px grid rows) */ .data-table { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } .data-table .row { background: var(--surface); padding: 22px 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .data-table .row__k { font: 400 16px/1.4 var(--font-sans); } .data-table .row__v { font: 400 14px/1.4 var(--font-mono); color: var(--bronze); } /* CTA row */ .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .cta-note { font: 400 13px/1.5 var(--font-mono); color: var(--stone); } .section--dark .cta-note { color: var(--meta-on-dark); } /* Blockquote (founder statement) */ .quote { margin: 0; border-left: 2px solid var(--bronze); padding-left: 24px; display: grid; gap: 14px; } .quote__text { font: 300 22px/1.5 var(--font-sans); color: var(--ink); } .quote__by { font: 400 12px/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); } /* -------------------------------------------------------------------------- Contact -------------------------------------------------------------------------- */ .split-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; } .channel-row { display: flex; gap: 12px; flex-wrap: wrap; } .office-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; } .office { display: grid; gap: 6px; } .form-card { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--bronze); padding: clamp(24px, 3vw, 40px); display: grid; gap: 26px; } .form-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; } .form-field { display: grid; gap: 9px; } .checkbox-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .checkbox-box { width: 18px; height: 18px; border: 1px solid var(--line); flex: 0 0 auto; margin-top: 2px; } .consent-text { font: 400 13px/1.6 var(--font-sans); color: var(--stone); } .success-row { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 18px; flex-wrap: wrap; } .form-error { font: 400 13px/1.5 var(--font-sans); color: var(--error); } /* -------------------------------------------------------------------------- Cookie bar -------------------------------------------------------------------------- */ .cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); color: var(--paper); border-top: 2px solid var(--bronze); } .cookie-bar[hidden] { display: none; } .cookie-bar__inner { max-width: var(--max); margin: 0 auto; padding: clamp(20px, 2.2vw, 28px) var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(20px, 2.5vw, 40px); align-items: center; } .cookie-bar__copy { display: grid; gap: 8px; } .cookie-bar__copy span.body { color: var(--muted-on-dark); max-width: 44em; } .cookie-bar__copy a { color: var(--paper); } .cookie-settings { display: grid; gap: 10px; border-top: 1px solid var(--dark-divider); margin-top: 12px; padding-top: 16px; } .cookie-settings[hidden] { display: none; } .cookie-settings .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cookie-settings .row span:first-child { font: 400 14px/1.5 var(--font-sans); } .cookie-settings .row span:last-child { font: 400 12px/1.5 var(--font-mono); } .cookie-settings .muted { color: var(--muted-on-dark); } .cookie-settings .optional { color: var(--bronze); } .cookie-settings .always { color: var(--meta-on-dark); } .cookie-bar__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .cookie-btn { font: 400 14px/1 var(--font-sans); padding: 15px 20px; cursor: pointer; white-space: nowrap; } .cookie-btn--ghost { background: transparent; border: 1px solid var(--dark-divider); color: var(--muted-on-dark); } .cookie-btn--ghost:hover { border-color: var(--meta-on-dark); color: var(--paper); } .cookie-btn--outline { background: transparent; border: 1px solid var(--paper); color: var(--paper); } .cookie-btn--outline:hover { background: var(--paper); color: var(--ink); } .cookie-btn--primary { background: var(--bronze); border: 1px solid var(--bronze); color: #fff; } .cookie-btn--primary:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); } @media (max-width: 600px) { .cookie-bar__actions { flex-direction: column; } .cookie-btn { width: 100%; } .cookie-bar__actions .cookie-btn--primary { order: -1; } } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--ink); color: var(--meta-on-dark); } .site-footer__inner { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 4vw, 64px) var(--gutter); display: grid; gap: 40px; } .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; } .footer-col { display: grid; gap: 10px; align-content: start; font: 400 14px/1.7 var(--font-sans); } .footer-col a { color: var(--muted-on-dark); } .footer-col a:hover { color: var(--paper); } /* Two columns on phones — the auto-fit grid otherwise stacks every column (brand, Company, Property, Offices, Contact) into one long list. */ @media (max-width: 600px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer-brand { grid-column: 1 / -1; } } /* Contact channels — a small platform-colour dot before each (colours tuned for the dark footer). */ .footer-chan { display: inline-flex; align-items: center; gap: 8px; } .footer-chan::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; background: var(--chan, currentColor); } .footer-chan--wa { --chan: #25D366; } .footer-chan--tg { --chan: #229ED9; } .footer-chan--linkedin { --chan: #4A9EE0; } .footer-chan--instagram { --chan: #C13584; } .footer-chan--facebook { --chan: #1877F2; } .footer-chan--tiktok { --chan: #25F4EE; } .footer-chan--phone { --chan: #C0A16B; } .footer-chan--email { --chan: #E8E6DE; } .footer-col__head { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--footer-label); } /* Office address entries — city name bold, street address muted underneath. */ .footer-addr { display: flex; flex-direction: column; gap: 2px; } .footer-addr strong { font-weight: 600; color: var(--muted-on-dark); } .footer-addr span { font-size: 13px; color: var(--footer-label); } .footer-addr:hover strong { color: var(--paper); } .footer-brand { display: grid; gap: 18px; align-content: start; } .footer-brand__lockup { display: flex; align-items: baseline; gap: 9px; max-width: 100%; flex-wrap: wrap; filter: invert(1); } .footer-brand__lockup img { height: 22px; width: auto; max-width: 100%; object-fit: contain; } .footer-brand__lockup .brand-lockup__group { color: var(--ink); } .footer-brand__desc { font: 400 13px/1.7 var(--font-sans); } /* Social media — visually separated from the Contact column (its own row, own divider) rather than mixed in among phone/email/WhatsApp. */ .footer-social { display: grid; gap: 14px; border-top: 1px solid var(--dark-divider); padding-top: 24px; } .footer-social__row { display: flex; gap: 12px; flex-wrap: wrap; } .footer-social__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--dark-divider); border-radius: 50%; color: var(--icon, var(--muted-on-dark)); transition: opacity .15s, border-color .15s; } .footer-social__icon:hover { opacity: .8; border-color: var(--icon, var(--paper)); } .footer-social__icon--linkedin { --icon: #4A9EE0; } .footer-social__icon--instagram { --icon: #C13584; } .footer-social__icon--facebook { --icon: #1877F2; } .footer-social__icon--tiktok { --icon: #25F4EE; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--dark-divider); padding-top: 24px; font: 400 12px/1.6 var(--font-mono); letter-spacing: 0.08em; } .footer-bottom a { color: var(--meta-on-dark); } .footer-bottom a:hover { color: var(--paper); } .footer-langs a { white-space: nowrap; } .footer-langs a + a::before { content: "·"; margin: 0 8px; color: var(--dark-divider); } .footer-langs a[aria-current="true"] { color: var(--paper); } /* ========================================================================== Range sliders (search + calculator) ========================================================================== */ input[type="range"].raunf-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--line); outline: none; margin: 0; } input[type="range"].raunf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--bronze); cursor: pointer; border: none; } input[type="range"].raunf-range::-moz-range-thumb { width: 22px; height: 22px; background: var(--bronze); cursor: pointer; border: none; border-radius: 0; } .section--dark input[type="range"].raunf-range { background: var(--dark-divider); } /* ========================================================================== Breadcrumb ========================================================================== */ .breadcrumb { max-width: var(--max); margin: 0 auto; padding: 20px var(--gutter) 0; display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; font: 400 12px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--stone); } .breadcrumb a { color: var(--stone); } .breadcrumb a:hover { color: var(--ink); } .breadcrumb .current { color: var(--ink); min-width: 0; overflow-wrap: break-word; } /* ========================================================================== Search — filter bar ========================================================================== */ .filter-bar { background: var(--surface); border-bottom: 1px solid var(--line); } .filter-bar__inner { max-width: var(--max-wide); margin: 0 auto; padding: 22px var(--gutter); display: grid; gap: 18px; } .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; align-items: end; } .filter-field { display: grid; gap: 8px; } .filter-field > select, .filter-field .field__value { font: 400 16px/1 var(--font-sans); border: none; border-bottom: 1px solid var(--line); padding: 0 0 11px; background: transparent; color: var(--ink); outline: none; width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; } .filter-field > select:focus { border-bottom: 1px solid var(--bronze); } .filter-field--active > select, .filter-field--active .field__value { border-bottom-color: var(--ink); } .range-field { display: grid; gap: 10px; } .range-field__head { display: flex; justify-content: space-between; gap: 10px; font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .range-field__val { color: var(--ink); } .btn-reset { background: transparent; border: 1px solid var(--line); color: var(--graphite); font: 400 14px/1 var(--font-sans); padding: 15px 18px; cursor: pointer; white-space: nowrap; } .btn-reset:hover { border-color: var(--ink); color: var(--ink); } .filter-purpose { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 16px; } .purpose-chip { border: 1px solid var(--line); background: transparent; color: var(--graphite); font: 400 14px/1 var(--font-sans); padding: 12px 16px; cursor: pointer; white-space: nowrap; } .purpose-chip:hover { border-color: var(--ink); color: var(--ink); } .purpose-chip[aria-pressed="true"], .purpose-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .filter-spacer { flex: 1 1 60px; } .btn-viewtoggle { background: transparent; border: 1px solid var(--line); color: var(--graphite); font: 400 13px/1 var(--font-mono); letter-spacing: 0.1em; padding: 13px 16px; cursor: pointer; white-space: nowrap; } .btn-viewtoggle:hover { border-color: var(--ink); color: var(--ink); } /* Mobile: collapse filter row into a sheet trigger */ .filter-sheet-toggle { display: none; } @media (max-width: 720px) { .filter-row { display: none; } .filter-bar.is-open .filter-row { display: grid; } .filter-sheet-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--ink); color: var(--ink); font: 400 14px/1 var(--font-sans); padding: 13px 18px; cursor: pointer; justify-self: start; } } /* ========================================================================== Search — results ========================================================================== */ .results-wrap { max-width: var(--max-wide); margin: 0 auto; padding: clamp(24px,3vw,36px) var(--gutter) clamp(56px,6vw,88px); display: grid; gap: 24px; } .results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; } .results-head h1 { font: 300 clamp(26px,3vw,38px)/1.1 var(--font-sans); letter-spacing: -0.02em; margin: 0; } .sort-cluster { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; } .sort-link { border: none; background: transparent; font: 400 13px/1 var(--font-sans); padding: 0 0 3px; cursor: pointer; color: var(--stone); border-bottom: 1px solid transparent; } .sort-link:hover { color: var(--ink); } .sort-link.is-active { color: var(--ink); border-bottom-color: var(--bronze); } .results-layout { display: grid; align-items: start; gap: clamp(20px,2.4vw,32px); } .results-layout.with-map { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .results-layout.no-map { grid-template-columns: minmax(0, 1fr); } .results-map { min-height: clamp(280px,50vh,620px); background: var(--photo-placeholder); border: 1px solid var(--line); display: flex; align-items: flex-end; padding: 20px; position: sticky; top: 190px; } .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(16px,1.8vw,24px); align-content: start; } /* Listing card — search variant (photo caption + badge on same row) */ .listing__photo--row { justify-content: space-between; gap: 10px; flex-wrap: wrap; } .listing__photo--row .status { position: static; } /* Off-market block */ .offmarket { background: var(--ink); color: var(--paper); padding: clamp(28px,3vw,44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: clamp(24px,3vw,40px); align-items: center; margin-top: 16px; } .offmarket__copy { display: grid; gap: 10px; } .offmarket__title { font: 300 26px/1.25 var(--font-sans); } .offmarket__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .empty-state { border: 1px solid var(--line); background: var(--surface); padding: clamp(28px,3vw,44px); display: grid; gap: 16px; justify-items: start; } /* Sticky filter bar under the header */ .filter-bar--sticky { position: sticky; top: var(--header-h); z-index: 15; } @media (max-width: 720px) { .results-map { position: static; min-height: clamp(220px,40vh,360px); } } /* Team + agent profiles */ .team-card--link { text-decoration: none; color: inherit; transition: border-color .15s; } .team-card--link:hover { border-color: var(--ink); } .team-card__more { color: var(--bronze-deep); font: 400 14px/1 var(--font-sans); margin-top: 4px; } .team-card__subtitle { font: 400 13px/1.4 var(--font-sans); color: var(--stone); margin-top: 2px; } .agent-profile__subtitle { font: 400 16px/1.45 var(--font-sans); color: var(--stone); margin: -6px 0 0; } .agent-profile { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(24px,3vw,48px); align-items: start; } @media (max-width: 720px) { .agent-profile { grid-template-columns: 1fr; } } .agent-profile__photo { aspect-ratio: 4 / 5; background: var(--photo-placeholder); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: flex-end; } .agent-contacts { display: flex; gap: 10px; flex-wrap: wrap; } /* Competencies band — years / objects / languages */ .agent-stats { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 44px); border-block: 1px solid var(--line); padding-block: 16px; } .agent-stat { display: grid; gap: 5px; align-content: start; } .agent-stat__num { font: 400 clamp(22px, 2.4vw, 28px)/1 var(--font-sans); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; } .agent-stat__label { font: 400 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); } .pp-advisor--real { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; border-top: 1px solid var(--line); padding-top: 16px; } .pp-advisor--real .pp-advisor__avatar { width: 52px; height: 52px; flex: 0 0 auto; overflow: hidden; background: var(--photo-placeholder); } .pp-advisor--real .pp-advisor__avatar img { width: 100%; height: 100%; object-fit: cover; } .pp-advisor__label { font: 400 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); } .pp-advisor--real:hover .pp-advisor__name { color: var(--bronze-deep); } /* Leaflet maps — brand look (hard corners, hairline border). */ [data-map].map--live { display: block; position: relative; padding: 0; background: var(--surface); overflow: hidden; } /* The map toggle hides the container via [hidden]; it must beat .map--live's display:block. */ [data-map][hidden] { display: none !important; } /* Fill the whole container: height:100% can't resolve against a min-height-only parent, so pin the Leaflet canvas to all four edges instead (no empty band below). */ [data-map] .leaflet-container { position: absolute; inset: 0; width: 100%; height: 100%; font: inherit; background: var(--photo-placeholder); } /* Floating contact widget (site-wide) — brand hard corners, hairline, no shadow. */ .raunf-widget { position: fixed; right: clamp(20px,2.5vw,40px); bottom: clamp(36px,4vw,76px); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .raunf-widget__fab { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 22px; border-radius: 999px; background: var(--bronze-deep); color: var(--paper); border: 0; cursor: pointer; font: 500 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; transition: filter .15s; animation: raunf-fab-bob 3.4s ease-in-out infinite; } .raunf-widget__fab:hover { filter: brightness(0.9); } .raunf-widget__fab-label { white-space: nowrap; } .raunf-widget__ico--close { display: none; } .raunf-widget.is-open .raunf-widget__fab { padding: 0; width: 52px; justify-content: center; animation: none; } .raunf-widget.is-open .raunf-widget__fab-label, .raunf-widget.is-open .raunf-widget__ico--open { display: none; } .raunf-widget.is-open .raunf-widget__ico--close { display: block; } @keyframes raunf-fab-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .raunf-widget__fab { animation: none; } } .raunf-widget__panel { order: -1; width: min(340px, calc(100vw - 28px)); background: var(--surface); border: 1px solid var(--line); padding: 20px; display: grid; gap: 14px; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; } .raunf-widget__panel[hidden] { display: none; } /* [hidden] must beat the display:grid/flex rules below (panel, form, done state). */ .raunf-widget [hidden] { display: none !important; } .raunf-widget__head { display: grid; gap: 4px; } .raunf-widget__title { font: 300 19px/1.25 var(--font-sans); color: var(--ink); } .raunf-widget__sub { font: 400 13px/1.5 var(--font-sans); color: var(--stone); } .raunf-widget__channels { display: flex; gap: 8px; flex-wrap: wrap; } .raunf-widget__chan { flex: 1 1 0; text-align: center; text-decoration: none; border: 1px solid var(--line); color: var(--ink); padding: 8px 10px; font: 400 13px/1 var(--font-sans); display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .raunf-widget__chan:hover { border-color: var(--bronze-deep); color: var(--bronze-deep); } .raunf-widget__chan svg { flex: 0 0 auto; } /* WhatsApp channel — filled solid so it reads as the preferred, most prominent channel. */ .raunf-widget__chan--wa { background: #25D366; border-color: #25D366; color: #ffffff; font-weight: 600; } .raunf-widget__chan--wa:hover { filter: brightness(0.92); border-color: #25D366; color: #ffffff; } /* Telegram channel — filled solid to match WhatsApp's prominence. */ .raunf-widget__chan--tg { background: #26A5E4; border-color: #26A5E4; color: #ffffff; font-weight: 600; } .raunf-widget__chan--tg:hover { filter: brightness(0.92); border-color: #26A5E4; color: #ffffff; } .raunf-widget__form { display: grid; gap: 10px; } .raunf-widget__field { display: grid; gap: 4px; } .raunf-widget__field input, .raunf-widget__field textarea, .raunf-widget__field select { border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 6px 0; font: 400 14px/1.4 var(--font-sans); color: var(--ink); width: 100%; box-sizing: border-box; } .raunf-widget__field select { cursor: pointer; accent-color: var(--bronze-deep); } .raunf-widget__field select option:checked { color: var(--bronze-deep); } /* Blog / single post */ .raunf-post { padding: clamp(24px,4vw,56px) 0 clamp(40px,5vw,72px); display: grid; gap: clamp(20px,2.6vw,32px); } .raunf-post > * { min-width: 0; } .raunf-post__head { display: grid; gap: 12px; } .raunf-post__head > * { min-width: 0; } .raunf-post__meta { display: flex; gap: 10px; align-items: center; font: 400 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); } .raunf-post__cover img { width: 100%; height: auto; display: block; border: 1px solid var(--line); } .raunf-post__body { max-width: 40em; } /* WordPress core ships no overflow protection on table blocks. A table with several numeric columns (e.g. district price comparisons) can exceed the mobile viewport width; because html/body force overflow-x:hidden above, an unwrapped table silently clips instead of scrolling. Wrap it. */ .raunf-post__body .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .raunf-post__body .wp-block-table table { width: 100%; border-collapse: collapse; } .raunf-post__share { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 20px; max-width: 40em; } .share-row { display: flex; gap: 8px; flex-wrap: wrap; } .share-btn { border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 8px 14px; font: 400 13px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s; } .share-btn:hover { border-color: var(--bronze-deep); color: var(--bronze-deep); } .raunf-post__rights { max-width: 40em; margin: 0; font: 400 12px/1.6 var(--font-sans); color: var(--stone); } .raunf-widget__field textarea { resize: vertical; } .raunf-widget__field input:focus, .raunf-widget__field textarea:focus { outline: none; border-color: var(--bronze-deep); } .raunf-widget__consent { display: flex; gap: 8px; align-items: flex-start; font: 400 11px/1.4 var(--font-sans); color: var(--stone); cursor: pointer; } .raunf-widget__consent input { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; } .raunf-widget__done { display: grid; gap: 6px; text-align: center; padding: 10px 0; } .raunf-widget__done p { font: 400 13px/1.5 var(--font-sans); color: var(--stone); margin: 0; } @media (max-width: 600px) { .raunf-widget__fab { height: 48px; padding: 0 16px; } .raunf-widget.is-open .raunf-widget__fab { width: 48px; } } /* Live-portfolio ticker (site-wide, sticky above the header) — a floating corner widget was tried twice and rejected live: it overlapped hero CTAs and contact-widget/card content, and its bronze-on-black number was hard to read (founder screenshots, 2026-09-17). A plain top bar in normal flow fixed the overlap but then scrolled away with the rest of the page ("slenkant žemyn dingsta" — disappears on scroll, also founder-reported); sticky at the very top — one tick above the header's own sticky offset, which is nudged down by --ticker-h so the two never overlap — keeps it visible the whole time, same as the header. Fixed height (not padding-driven) so that offset is exact. */ .invest-ticker { position: sticky; top: 0; z-index: 25; height: var(--ticker-h); box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--ink); color: var(--paper); padding: 0 var(--gutter); border-bottom: 1px solid var(--bronze); } /* Animating box-shadow every frame forces a paint on every tick for as long as the page stays open (reported as the page feeling sluggish, 2026-09-17) — a transform+opacity ring on a pseudo-element is compositor-only, so the pulse is nearly free. The dot itself keeps one static (non-animated) glow. */ .invest-ticker__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #33E27A; flex: 0 0 auto; box-shadow: 0 0 4px 1px rgba(51,226,122,0.8); } .invest-ticker__dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: #33E27A; animation: invest-pulse-ring 1.4s ease-out infinite; } @keyframes invest-pulse-ring { 0% { transform: scale(0.5); opacity: 0.55; } 100% { transform: scale(1.9); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .invest-ticker__dot::after { animation: none; display: none; } } .invest-ticker__label { font: 400 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); } .invest-ticker__num { font: 600 15px/1 var(--font-sans); color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 600px) { :root { --ticker-h: 32px; } .invest-ticker { padding: 0 16px; gap: 8px; } .invest-ticker__label { font-size: 10px; } .invest-ticker__num { font-size: 14px; } } /* The fixed contact widget sits over the bottom-right of the viewport on every page. Dark money-figure cards (commission calculators etc.) commonly end up scrolled to rest right behind it there, with no way to read the covered row short of nudging the page — reported live on the partner split calculator. Give those cards enough bottom clearance on mobile that their content clears the widget's fixed band instead of resting under it. */ @media (max-width: 600px) { .calc--panel { padding-bottom: 96px; } } .results-map.map--live { min-height: clamp(280px,50vh,620px); } .pp-map.map--live { min-height: clamp(220px,24vw,320px); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius: 0; box-shadow: none; border: 1px solid var(--line); } .leaflet-popup-content { margin: 12px 14px; font: 400 14px/1.4 var(--font-sans); color: var(--ink); } .map-popup { display: grid; gap: 4px; } .map-popup__price { color: var(--bronze-deep); font-weight: 600; } .map-popup__link { color: var(--bronze-deep); font-weight: 600; text-decoration: none; } .leaflet-container a.leaflet-popup-close-button { color: var(--stone); } /* ========================================================================== Single property ========================================================================== */ .pp-gallery { max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter) 0; display: grid; gap: 12px; } .pp-gallery__grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 12px; } .pp-gallery__main { min-height: clamp(260px,32vw,440px); aspect-ratio: 16/10; background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 20px; position: relative; } .pp-gallery__main .status { position: absolute; top: 20px; left: 20px; } .pp-gallery__side { display: grid; gap: 12px; } .pp-thumb { min-height: clamp(120px,15vw,214px); background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 16px; } .pp-thumb--more { justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pp-thumb__badge { background: var(--ink); color: var(--paper); font: 400 11px/1 var(--font-mono); letter-spacing: 0.1em; padding: 9px 12px; } @media (max-width: 720px) { .pp-gallery__grid { grid-template-columns: 1fr; } } /* Gallery images are clickable buttons that open the lightbox. */ .pp-gallery__main, .pp-thumb { border: 0; margin: 0; padding: 0; cursor: pointer; overflow: hidden; text-align: left; font: inherit; color: inherit; position: relative; } .pp-gallery__main img, .pp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; } .pp-gallery__main:hover img, .pp-thumb:hover img { transform: scale(1.04); } .pp-gallery__main .status, .pp-thumb__badge, .pp-gallery__zoom { z-index: 2; } .pp-thumb__badge { position: absolute; right: 14px; bottom: 14px; } .pp-gallery__zoom { position: absolute; right: 16px; bottom: 16px; background: rgba(19,20,18,0.72); color: #fff; font: 400 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 13px; opacity: 0; transition: opacity .3s ease; } .pp-gallery__main:hover .pp-gallery__zoom { opacity: 1; } /* Fullscreen lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(12,12,11,0.95); } .lightbox[hidden] { display: none; } .lightbox__stage { margin: 0; max-width: 92vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; } .lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; display: block; } .lightbox__close { position: absolute; top: 18px; right: 24px; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: .85; } .lightbox__close:hover { opacity: 1; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 52px; height: 52px; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox__nav:hover { background: rgba(255,255,255,0.2); } .lightbox__prev { left: 24px; } .lightbox__next { right: 24px; } .lightbox__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font: 400 12px/1 var(--font-mono); letter-spacing: 0.14em; } @media (max-width: 600px) { .lightbox__nav { width: 44px; height: 44px; font-size: 26px; } .lightbox__prev { left: 8px; } .lightbox__next { right: 8px; } } .pp-body { max-width: var(--max); margin: 0 auto; padding: clamp(32px,4vw,56px) var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: clamp(32px,4vw,64px); align-items: start; } .pp-main { display: grid; gap: clamp(32px,3.5vw,48px); align-content: start; } .pp-block { display: grid; gap: 16px; } .pp-block__head { font: 400 12px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); margin: 0; } .pp-title { font: 300 clamp(32px,4vw,54px)/1.05 var(--font-sans); letter-spacing: -0.03em; margin: 0; } .pp-meta { display: flex; gap: 28px; flex-wrap: wrap; font: 400 14px/1 var(--font-mono); color: var(--graphite); padding-top: 4px; } .pp-prose { font: 400 17px/1.7 var(--font-sans); color: var(--graphite); margin: 0; max-width: 36em; } .pp-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .pp-info-grid .cell { background: var(--surface); padding: 22px; display: grid; gap: 6px; } .pp-info-grid .cell__k { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .pp-info-grid .cell__v { font: 400 17px/1.4 var(--font-sans); } .pp-map { min-height: clamp(200px,22vw,280px); background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 20px; } .pp-walk { display: flex; gap: 24px; flex-wrap: wrap; font: 400 13px/1.5 var(--font-mono); color: var(--graphite); } .pp-costs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } .pp-costs .row { background: var(--surface); padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pp-costs .row__k { font: 400 16px/1.4 var(--font-sans); } .pp-costs .row__v { font: 400 14px/1.4 var(--font-mono); color: var(--graphite); } /* Sidebar */ .pp-aside { display: grid; gap: 20px; position: sticky; top: 100px; align-content: start; } .pp-price-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(22px,2.4vw,32px); display: grid; gap: 20px; } .pp-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .pp-price { font: 300 clamp(30px,3.2vw,40px)/1 var(--font-sans); color: var(--bronze); letter-spacing: -0.02em; } .pp-psqm { font: 400 13px/1.4 var(--font-mono); color: var(--stone); } .pp-cta-stack { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; } .pp-advisor { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--line); padding-top: 18px; } .pp-advisor__avatar { width: 52px; height: 52px; background: var(--ink); flex: 0 0 auto; position: relative; overflow: hidden; } .pp-advisor__avatar::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38%; height: 38%; transform: translate(-50%, -50%); background-image: url('../../../../uploads/2026/09/raunf-r-icon.png'); background-repeat: no-repeat; background-position: center; background-size: contain; filter: invert(1) brightness(2); } .pp-advisor__meta { display: grid; gap: 4px; min-width: 0; } .pp-advisor__name { font: 400 16px/1.3 var(--font-sans); } .pp-advisor__langs { font: 400 12px/1.4 var(--font-mono); color: var(--stone); } .pp-chatchips { display: flex; gap: 10px; flex-wrap: wrap; } .pp-chatchips a { border: 1px solid var(--line); color: var(--graphite); font: 400 13px/1 var(--font-sans); padding: 13px 18px; } .pp-chatchips a:hover { border-color: var(--ink); color: var(--ink); } /* Yield calculator (Ink card) */ .calc { background: var(--ink); color: var(--paper); padding: clamp(22px,2.4vw,32px); display: grid; gap: 24px; } .calc__head { display: grid; gap: 8px; } .calc__title { font: 300 24px/1.25 var(--font-sans); } .calc__tabs { display: flex; gap: 8px; } .calc__tab { flex: 1 1 0; font: 400 13px/1 var(--font-sans); padding: 14px 10px; cursor: pointer; border: 1px solid var(--dark-divider); background: transparent; color: var(--muted-on-dark); } .calc__tab.is-active { border-color: var(--bronze); background: var(--bronze); color: #fff; } .calc__inputs { display: grid; gap: 22px; } .calc__inputs[hidden] { display: none; } .calc__slider { display: grid; gap: 10px; } .calc__slider-head { display: flex; justify-content: space-between; font: 400 12px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--meta-on-dark); } .calc__slider-val { color: var(--paper); } .calc__rows { display: grid; gap: 1px; background: var(--dark-divider); } .calc__row { background: var(--ink); padding: 14px 0; display: flex; justify-content: space-between; gap: 12px; } .calc__row-k { font: 400 14px/1.4 var(--font-sans); color: var(--muted-on-dark); } .calc__row-v { font: 400 14px/1.4 var(--font-mono); } .calc__totals { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--dark-divider); padding-top: 18px; } .calc__tot { display: grid; gap: 6px; } .calc__tot--end { justify-items: end; } .calc__tot-k { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta-on-dark); } .calc__tot-v { font: 300 32px/1 var(--font-sans); color: var(--paper); } .calc__tot-v--bronze { color: var(--bronze); } .calc__note { font: 400 12px/1.6 var(--font-mono); color: var(--meta-on-dark); } /* Compact footer (single/search) */ .site-footer--compact .site-footer__inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; padding: clamp(36px,4vw,56px) var(--gutter); } .site-footer--compact .footer-bottom { border: none; padding: 0; } /* Mobile fixed bottom bar (single property) */ .pp-bottombar { display: none; } @media (max-width: 720px) { .pp-aside { position: static; } .pp-bottombar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding: 10px var(--gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom)); min-height: 56px; } .pp-bottombar__price { font: 300 22px/1 var(--font-sans); color: var(--bronze); } .pp-bottombar .btn { padding: 14px 22px; } body.has-bottombar { padding-bottom: 72px; } } /* ========================================================================== Investors — yield comparison cards ========================================================================== */ .yield-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .yield-card { background: var(--surface); padding: clamp(26px,2.8vw,40px); display: grid; gap: 20px; align-content: start; } .yield-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .yield-card__title { font: 400 22px/1.2 var(--font-sans); } .yield-card__rows { display: grid; gap: 1px; background: var(--line); } .yield-card__row { background: var(--surface); padding: 14px 0; display: flex; justify-content: space-between; gap: 12px; } .yield-card__row-k { font: 400 15px/1.4 var(--font-sans); color: var(--graphite); } .yield-card__row-v { font: 400 14px/1.4 var(--font-mono); } .yield-card__row-v--bronze { color: var(--bronze); } .yield-caveat { font: 400 14px/1.65 var(--font-sans); color: var(--stone); } /* Mono outline chips (costs eyebrow) */ .chip--mono { border: 1px solid var(--line); font: 400 13px/1 var(--font-mono); color: var(--graphite); padding: 12px 15px; display: inline-block; } /* Dark reassurance chips (on Ink) */ .chip-dark { background: var(--dark-divider); color: var(--muted-on-dark); font: 400 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 12px; display: inline-block; } .status--reassure { background: var(--success-bg); color: var(--success-fg); font: 400 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 12px; display: inline-block; } /* Cost table highlighted last row (Paper band) */ .pp-costs .row--highlight { background: var(--paper); } /* Fact strip variant (slightly smaller numerals) */ .trust-grid--sm .stat__num { font-size: clamp(34px, 3.6vw, 48px); } /* ========================================================================== Contact + Legal — shared cards ========================================================================== */ .card-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .info-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 10px; align-content: start; min-width: 0; color: var(--ink); } a.info-card:hover { border-color: var(--ink); color: var(--ink); } .info-card__eyebrow { font: 400 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); } .info-card__title { font: 400 22px/1.25 var(--font-sans); } .info-card__title--sm { font: 400 19px/1.3 var(--font-sans); } .info-card__mono { font: 400 14px/1.6 var(--font-mono); color: var(--graphite); } .info-card__note { font: 400 14px/1.6 var(--font-sans); color: var(--stone); } /* Document cards (privacy / terms prose) */ .doc-stack { display: grid; gap: clamp(20px, 2.4vw, 28px); min-width: 0; } .doc-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 12px; min-width: 0; } .doc-card__t { font: 400 18px/1.4 var(--font-sans); } .doc-card__p { font: 400 16px/1.7 var(--font-sans); color: var(--graphite); margin: 0; } .doc-note { font: 400 15px/1.7 var(--font-sans); color: var(--stone); } .doc-head { display: grid; gap: 14px; align-content: start; min-width: 0; } .doc-head__lead { font: 400 15px/1.7 var(--font-sans); color: var(--stone); } /* Mini 1px-row table (offices, retention, cookie categories) */ .mini-table { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } .mini-table--bare { border: none; } .mini-table .row { background: var(--surface); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .mini-table .row--pad-sm { padding: 13px 16px; } /* Inside an info-card the card's own padding already insets these rows — giving row--pad-sm horizontal padding too would double it up. */ .who-meta .row--pad-sm { padding: 13px 0; } .mini-table .row--highlight { background: var(--paper); } .mini-table .row__k { font: 400 15px/1.4 var(--font-sans); color: var(--graphite); flex: 1 1 auto; min-width: 0; } .mini-table .row__v { font: 400 14px/1.4 var(--font-mono); color: var(--ink); flex: 0 0 auto; } /* Office card */ .office-card { background: var(--surface); border: 1px solid var(--line); display: grid; min-width: 0; } .office-card__photo { aspect-ratio: 3/2; min-width: 0; overflow: hidden; background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 16px; } .office-card__body { padding: clamp(22px, 2.4vw, 30px); display: grid; gap: 14px; min-width: 0; } .office-card__addr { font: 400 21px/1.3 var(--font-sans); } .office-card__map { min-height: 150px; min-width: 0; overflow: hidden; background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 14px; } .office-card__link { font: 400 13px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; } /* Cookie category rows (Legal) */ .cookie-cat { background: var(--surface); padding: 24px; display: grid; gap: 10px; min-width: 0; } .cookie-cat__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; } .cookie-cat__name { font: 400 18px/1.4 var(--font-sans); } .cookie-cat__text { font: 400 15px/1.7 var(--font-sans); color: var(--graphite); } .cookie-cat--action { background: var(--paper); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; } /* Company / complaints strip on Ink */ .company-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 40px); } .company-strip .col { display: grid; gap: 10px; min-width: 0; } .company-strip .col__k { font: 400 11px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta-on-dark); } .company-strip .col__v { font: 400 16px/1.7 var(--font-sans); color: var(--muted-on-dark); } .company-strip a { color: var(--accent-on-dark); } .company-strip a:hover { color: var(--paper); } /* KYC dark cards */ .dark-card { background: var(--ink); border: 1px solid var(--dark-divider); padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 12px; align-content: start; min-width: 0; } .dark-card__t { font: 400 19px/1.35 var(--font-sans); color: var(--paper); } .dark-card__p { font: 400 15px/1.65 var(--font-sans); color: var(--muted-on-dark); } /* Big CTA strip */ .cta-strip { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: center; } .cta-strip__copy { display: grid; gap: 10px; max-width: 34em; min-width: 0; } .cta-strip__title { font: 300 clamp(24px, 2.8vw, 34px)/1.15 var(--font-sans); letter-spacing: -0.02em; } /* Page hero (simple heading pages: Contact, Legal) */ .page-hero { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 5vw, 88px) var(--gutter) 0; display: grid; gap: 24px; } /* ========================================================================== Sell + Rental ========================================================================== */ /* Numbered highlight list (Sell hero) */ .numbered-list { display: grid; gap: 14px; } .numbered-list__row { display: flex; gap: 12px; align-items: baseline; } .numbered-list__num { font: 400 13px/1.4 var(--font-mono); color: var(--bronze); flex: 0 0 auto; } .numbered-list__text { font: 400 16px/1.6 var(--font-sans); color: var(--graphite); } /* Big figure (commission %) */ .big-figure { font: 300 34px/1 var(--font-sans); color: var(--bronze); } /* Standalone bordered comparison card (Rental "two ways") */ .card-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .yield-card--standalone { border: 1px solid var(--line); } /* Bronze eyebrow used on divider-grid cells (Sell/Rental) */ .cell__eyebrow { font: 400 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); } /* Owner monthly statement (Rental) */ .statement { border: 1px solid var(--line); display: grid; background: var(--surface); } .statement__head { border-bottom: 1px solid var(--line); padding: 22px 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; } .statement__head span { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .statement__rows { display: grid; gap: 1px; background: var(--line); } .statement__row { background: var(--surface); padding: 18px 26px; display: flex; justify-content: space-between; gap: 12px; } .statement__row-k { font: 400 15px/1.4 var(--font-sans); color: var(--graphite); } .statement__row-v { font: 400 14px/1.4 var(--font-mono); } .statement__total { border-top: 2px solid var(--bronze); padding: 22px 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; } .statement__total-k { font: 400 16px/1.4 var(--font-sans); } .statement__total-v { font: 300 30px/1 var(--font-sans); color: var(--bronze); } /* Calculator inner variant on a slightly lifted panel (Rental uses #1A1B18) */ .calc--panel { background: #1A1B18; border: 1px solid var(--dark-divider); } .calc--panel .calc__row { background: #1A1B18; } /* ========================================================================== Process — step cards ========================================================================== */ .step-list { display: grid; gap: clamp(16px, 1.8vw, 20px); } .step-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(24px, 2.8vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2.5vw, 40px); align-items: start; } .step-card--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); } .step-card__body { display: grid; gap: 14px; align-content: start; } .step-card__head { display: flex; gap: 16px; align-items: baseline; } .step-card__num { font: 300 40px/1 var(--font-sans); color: var(--bronze); } .step-card__title { font: 400 24px/1.25 var(--font-sans); } .step-card__text { font: 400 16px/1.7 var(--font-sans); color: var(--graphite); } .step-card--ink .step-card__text { color: var(--muted-on-dark); } .step-card__note { font: 400 15px/1.7 var(--font-sans); color: var(--stone); } .step-card--ink .step-card__note { color: var(--muted-on-dark); } /* Step meta table (You sign / You pay / Takes) */ .step-meta { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } .step-meta .row { background: var(--surface); padding: 16px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .step-meta .row__k { font: 400 14px/1.4 var(--font-sans); color: var(--graphite); } .step-meta .row__v { font: 400 13px/1.4 var(--font-mono); } .step-card--ink .step-meta { background: var(--dark-divider); border-color: var(--dark-divider); } .step-card--ink .step-meta .row { background: var(--ink); } .step-card--ink .step-meta .row__k { color: var(--muted-on-dark); } /* FAQ grid —
/ accordions, no JS needed. */ .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(16px, 1.8vw, 24px); align-items: start; } .faq-card { border: 1px solid var(--line); } .faq-card__q { font: 400 18px/1.4 var(--font-sans); color: var(--ink); padding: clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 30px); display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; user-select: none; transition: color .15s ease; } .faq-card__q::-webkit-details-marker { display: none; } .faq-card__q::marker { content: ""; } .faq-card__q::after { content: "+"; flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font: 300 20px/1 var(--font-sans); color: var(--bronze); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease; } .faq-card:hover .faq-card__q { color: var(--bronze-deep); } .faq-card[open] .faq-card__q::after { transform: rotate(45deg); border-color: var(--bronze); } .faq-card[open] .faq-card__q { border-bottom: 1px solid var(--line); } .faq-card__a { font: 400 15px/1.7 var(--font-sans); color: var(--graphite); margin: 0; padding: clamp(18px, 2vw, 24px) clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 26px); } /* Partner "who this is for" mono list uses .mini-table --bare with mono meta */ .who-meta .row__v { color: var(--stone); } /* ========================================================================== About — team, positions, office gallery ========================================================================== */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .photo-tile { aspect-ratio: 4/3; min-width: 0; overflow: hidden; background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 16px; } .team-group { display: grid; gap: clamp(20px, 2.4vw, 32px); } .team-group__head { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin: 0; } /* Advisor finder (Team page) */ .team-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 18px; padding-bottom: 4px; } .team-filter__title { align-self: center; margin-right: 4px; } .team-filter__field { display: grid; gap: 5px; } .team-filter__flabel { font: 400 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); } .team-filter select { font: 400 14px/1.2 var(--font-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 0; padding: 9px 12px; min-width: 150px; cursor: pointer; } .team-filter select:focus { outline: none; border-color: var(--ink); } .team-filter__reset { align-self: end; font: 400 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; cursor: pointer; } .team-filter__reset:hover { color: var(--ink); border-bottom-color: var(--ink); } /* The `hidden` attr must win over `.empty-state { display:grid }` (author beats UA). */ [data-team-empty][hidden] { display: none !important; } @media (max-width: 560px) { .team-filter__field, .team-filter select { width: 100%; } } .team-card { background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; min-width: 0; } .team-card__photo { aspect-ratio: 4/5; min-width: 0; overflow: hidden; background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 18px; } .team-card__body { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 14px; } .team-card__langs { margin-top: auto; } .team-card__more--push { margin-top: auto; } .team-card__role { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .team-card__name { font: 400 22px/1.25 var(--font-sans); } .team-card__bio { font: 400 15px/1.7 var(--font-sans); color: var(--graphite); } .team-card__langs { display: flex; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; font: 400 12px/1.4 var(--font-mono); color: var(--stone); } .team-card__langs--flags { gap: 6px; align-items: center; } .team-card__langs-label { margin-right: 4px; font: 400 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); } .lang-flag-chip { display: inline-flex; } .lang-flag-chip .lang-flag { display: block; width: 15px; height: 10px; border: 1px solid var(--line); border-radius: 2px; } .agent-langs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .agent-langs__flags { display: inline-flex; gap: 6px; } .position-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 14px; align-content: start; } .position-card__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; } .position-card__where { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .position-card__title { font: 400 21px/1.3 var(--font-sans); } .position-card__text { font: 400 15px/1.7 var(--font-sans); color: var(--graphite); } .position-card__link { font: 400 13px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 14px; } /* Highlighted action row inside a mini-table (About "talk", Sell etc.) */ .mini-table .row--action { background: var(--paper); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; } .mini-table .row--stack { display: grid; gap: 8px; } .mini-table .row__name { font: 400 17px/1.5 var(--font-sans); } .mini-table .row__sub { font: 400 13px/1.5 var(--font-mono); color: var(--stone); } /* ========================================================================== Off-plan — project cards ========================================================================== */ .project-card { border: 1px solid var(--line); display: grid; min-width: 0; background: var(--surface); } .project-card__photo { aspect-ratio: 4/3; min-width: 0; overflow: hidden; background: var(--photo-placeholder); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px; } .project-card__body { padding: clamp(22px, 2.2vw, 28px); display: grid; gap: 14px; } .project-card__title { font: 400 20px/1.3 var(--font-sans); } .project-card__rows { display: grid; gap: 1px; background: var(--line); } .project-card__row { background: var(--surface); padding: 12px 0; display: flex; justify-content: space-between; gap: 12px; } .project-card__row-k { font: 400 14px/1.4 var(--font-sans); color: var(--graphite); } .project-card__row-v { font: 400 13px/1.4 var(--font-mono); } /* ========================================================================== Guides — hub ========================================================================== */ .topic-chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 20px; } .guide-featured { background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); min-width: 0; color: var(--ink); } a.guide-featured:hover { border-color: var(--ink); color: var(--ink); } .guide-featured__photo { min-height: clamp(220px, 26vw, 340px); min-width: 0; overflow: hidden; background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 18px; } .guide-featured__body { padding: clamp(26px, 3vw, 44px); display: grid; gap: 16px; align-content: center; min-width: 0; overflow-wrap: anywhere; } .guide-featured__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .guide-featured__title { font: 300 clamp(26px, 2.8vw, 36px)/1.15 var(--font-sans); letter-spacing: -0.02em; } .guide-featured__excerpt { font: 400 16px/1.7 var(--font-sans); color: var(--graphite); } .guide-featured__more { font: 400 13px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; } .guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .guide-card { background: var(--surface); border: 1px solid var(--line); display: grid; min-width: 0; color: var(--ink); } a.guide-card:hover { border-color: var(--ink); color: var(--ink); } .guide-card__photo { aspect-ratio: 3/2; min-width: 0; overflow: hidden; background: var(--photo-placeholder); display: flex; align-items: flex-end; padding: 16px; } .guide-card__body { padding: 24px; display: grid; gap: 12px; min-width: 0; overflow-wrap: anywhere; } .guide-card__meta { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .guide-card__title { font: 400 20px/1.35 var(--font-sans); } .guide-card__excerpt { font: 400 15px/1.65 var(--font-sans); color: var(--graphite); } .guide-card__more { font: 400 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze, var(--ink)); } /* The whole tile is a link. Underline the title on hover so that reads as one, and keep the visible "read" line for touch, where there is no hover at all. */ a.guide-card:hover .guide-card__title, a.guide-featured:hover .guide-featured__title { text-decoration: underline; text-underline-offset: 3px; } /* Dark form field + dark selectable chips (subscribe on Ink) */ .input-underline--dark { border-bottom-color: var(--dark-divider); color: var(--paper); } .input-underline--dark:focus { border-bottom-color: var(--bronze); } .chip-select-dark { border: 1px solid var(--dark-divider); background: transparent; color: var(--muted-on-dark); font: 400 13px/1 var(--font-sans); padding: 11px 15px; cursor: pointer; } .chip-select-dark:hover { border-color: var(--meta-on-dark); color: var(--paper); } .chip-select-dark[aria-pressed="true"], .chip-select-dark.chip--selected { border-color: var(--bronze); background: var(--bronze); color: #fff; } .subscribe-form { display: grid; gap: 18px; } /* ========================================================================== District guide ========================================================================== */ .bordered-box { border: 1px solid var(--line); padding: 24px; display: grid; gap: 14px; align-content: start; } .district-card { background: var(--ink); border: 1px solid var(--dark-divider); padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 12px; align-content: start; color: var(--paper); } a.district-card:hover { background: #1A1B18; color: var(--paper); } .district-card__title { font: 400 20px/1.3 var(--font-sans); } .district-card__meta { font: 400 14px/1.4 var(--font-mono); color: var(--accent-on-dark); } .district-card__text { font: 400 15px/1.6 var(--font-sans); color: var(--muted-on-dark); } /* ========================================================================== Real photography (wp_get_attachment_image) over the placeholder containers ========================================================================== */ .raunf-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* The generated 16:9 article infographics ("hero-card-*.jpg") put their headline number hard against the left edge — centre-cropping them to a card's 3:2 box (the site-wide default) clips the leading digit. These are the only images this shape/layout is used for, so this is scoped to their own filename rather than changed site-wide for every other photo, which crops correctly today. */ img.raunf-cover[src*="hero-card-"] { object-position: left center; } /* Photo containers that hold a .raunf-cover must clip and stack above it. */ .pp-thumb, .guide-card__photo, .guide-featured__photo, .team-card__photo, .agent-profile__photo { position: relative; } .listing__photo, .pp-gallery__main, .pp-thumb, .guide-card__photo, .guide-featured__photo { overflow: hidden; } .listing__photo > *, .pp-gallery__main > *, .pp-thumb > *, .guide-card__photo > *, .guide-featured__photo > * { position: relative; z-index: 1; } .raunf-cover { z-index: 0; } /* "indicative" marker next to a modelled yield figure */ .listing__yield-note { font-size: 0.85em; color: var(--stone); letter-spacing: 0.08em; text-transform: uppercase; } /* -------------------------------------------------------------------------- Utilities -------------------------------------------------------------------------- */ .stack { display: grid; } .stack--16 { gap: 16px; } .stack--20 { gap: 20px; } .stack--24 { gap: 24px; } .stack--32 { gap: 32px; } .grid-gap-lg { gap: clamp(32px, 4vw, 56px); } .mt-auto { margin-top: auto; } .self-start { justify-self: start; } /* ── Language notice ──────────────────────────────────────────────────────── One quiet line above the sticky header offering the page in the visitor's own language. Not fixed: it scrolls away with the content and never covers anything. Rendered server-side (inc/lang-detect.php) so there is no flash. */ .lang-notice { background: var(--ink); color: var(--paper); border-bottom: 1px solid rgba(245, 243, 238, 0.14); } .lang-notice__inner { max-width: var(--max); margin: 0 auto; padding: 9px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .lang-notice__link { color: var(--paper); font-size: 14px; line-height: 1.3; text-decoration: none; border-bottom: 1px solid rgba(245, 243, 238, 0.35); padding-bottom: 1px; transition: border-color .2s ease; } .lang-notice__link:hover { color: var(--paper); border-bottom-color: var(--paper); } .lang-notice__arrow { color: var(--bronze); } .lang-notice__close { flex: 0 0 auto; background: none; border: 0; color: var(--paper); font-size: 15px; line-height: 1; padding: 4px 2px; cursor: pointer; opacity: .6; transition: opacity .2s ease; } .lang-notice__close:hover { opacity: 1; } .lang-notice[hidden] { display: none !important; } @media (max-width: 600px) { .lang-notice__link { font-size: 13px; } }