/* ════════════════════════════════════════════════════════════════════════ FOLIO SKIN — editorial, layered, broadsheet. A warm-ivory paper ground that chases the Savills feel: big display-serif type, generous asymmetry, and content that LAYERS — text cards that straddle the edge of a photo, with a single brand-accent rule along the card's bottom edge. Light-grounded, so — like Punch/Foundry — almost no contrast re-grounding is needed (the renderer is light-first). The character is COMPOSITION: 1. EDITORIAL TYPE — Fraunces display serif (high-contrast, optical sizing) at large scale with tight leading; Inter body; small letter-spaced uppercase micro-labels; a short brand-accent rule under section heads. 2. OVERLAPPING LAYOUT — the content blocks (image one side, text the other) stop being a tidy two-column grid: the photo bleeds toward the page centre and the text becomes a floating ivory CARD that sits OVER the photo's inner edge, carrying a single brand-accent rule along its bottom edge. This is the signature Savills move, done in pure CSS on the existing structure. 3. STAGGERED GRIDS — property cards drop into an alternating vertical rhythm (transform-only, zero layout shift) so the grid reads as a considered editorial spread, not a spreadsheet. 4. ONE ACCENT — colour is rationed to var(--vz-accent): the card's bottom rule, heading rules, the price flourish, link underlines. The composition is a HARD-CONSTRAINT exercise: a skin is tokens + a CSS overlay scoped under [data-skin] — it CANNOT change a block's HTML. So the overlap is built by re-tracking the existing .vz-text-split grid, bleeding the .vz-text-image-frame across its gutter with a negative margin, and floating the .vz-text-body-col over it with z-index. Where a Savills effect needs structure CSS can't reach, it's noted at the bottom — never faked. SAFETY: the overlap/accent-rule/stagger ALL gate behind `@media (min-width: 861px)`. Below that the base renderer's responsive stack returns untouched — single column, no negative margins, no card chrome — so mobile is clean and the text card is never clipped or laid illegibly over a photo (it carries its own solid ivory fill + shadow at every width it appears). Brand colours stay config-driven — read var(--vz-primary / --vz-accent / --vz-on-*); never hardcoded. No scroll-driven motion: Folio's identity is the static composition + type, fully verifiable without a scroll timeline. SPECIFICITY CONTRACT: the overlay (Base.astro ~L122) loads BEFORE the bundled per-block CSS, so an equal-specificity rule loses on source order. Every rule is scoped under [data-skin="folio"] and paired with the block's own class chain so it strictly out-specifies the base. Section headings use `[data-skin="folio"] .vz-section h2` = (0,2,1), beating two-class base rules. ════════════════════════════════════════════════════════════════════════ */ [data-skin="folio"] { --fo-card: #fffdf8; /* the floating paper card — a hair brighter than the ivory ground */ --fo-line: var(--vz-border); /* hairline edge */ --fo-recess: #ece6da; /* warm recessed band (re-tones the renderer's cool light band) */ --fo-lift: 0 28px 64px -38px rgba(26, 23, 20, .55); /* the editorial "card over photo" float shadow */ --fo-lift-soft: 0 18px 44px -34px rgba(26, 23, 20, .40); /* resting card lift */ --fo-accent-rule: 5px; /* shared accent thickness — the heading tick AND the card's bottom edge use this, so they always match */ } /* ── Type: editorial display serif. Fraunces (applied via skins.js tokens) goes LARGE with tight leading and a touch of negative tracking — broadsheet, not web-default. Optical sizing is pushed up so the big cuts get the high-contrast display character. ─────────────────────────────────────────────────────── */ [data-skin="folio"] h1, [data-skin="folio"] h2, [data-skin="folio"] h3 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; font-optical-sizing: auto; font-variation-settings: "opsz" 120; } /* Hero headline — the showpiece. (0,2,1) clears the base (0,1,1) hero rule. */ [data-skin="folio"] .vz-hero-content h1, [data-skin="folio"] .vz-hero-search-text h1 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.0; font-size: clamp(2.6rem, 1.2rem + 5vw, 5rem); text-wrap: balance; } /* Section headings scale up into editorial territory. (0,2,1) beats the base. */ [data-skin="folio"] .vz-section h2 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.3rem); line-height: 1.06; } /* Sub-heads stay quiet Inter so the serif heading carries the band. */ [data-skin="folio"] .vz-section .vz-sub { color: var(--vz-muted); font-weight: 400; } /* ── The accent rule: a short brand-accent tick under the left-aligned editorial block headings — the print masthead detail. Scoped to headings that are reliably left-aligned (centred bands like stats/cta are intentionally left out, where a left tick under a centred title would read as broken). h2 is a block element so the ::after lays on its own line. (0,3,1)/(0,2,1). ─────── */ [data-skin="folio"] .vz-text .vz-text-heading:not(.is-large)::after, [data-skin="folio"] .vz-news .vz-news-heading::after, [data-skin="folio"] .vz-process .vz-process-heading::after, [data-skin="folio"] .vz-team-grid .vz-team-heading::after, [data-skin="folio"] .vz-areas .vz-areas-heading::after, [data-skin="folio"] .vz-property-grid .vz-container > h2::after, [data-skin="folio"] .vz-property-strip .vz-container > h2::after { content: ""; display: block; width: 58px; height: var(--fo-accent-rule); margin-top: 0.85rem; background-color: var(--vz-accent); } /* ── Micro-labels: letter-spaced uppercase — the considered editorial detail on eyebrows + form field labels. ──────────────────────────────────────── */ [data-skin="folio"] .vz-section .vz-eyebrow, [data-skin="folio"] .vz-hero-search-form label { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; font-size: 0.72rem; } /* ════════════════════════════════════════════════════════════════════════ THE SIGNATURE MOVE — overlapping editorial composition on the content blocks. The renderer's image-left / image-right text-block is a tidy 2-col grid (.vz-text-split, repeat(auto-fit, minmax(320px,1fr)), 3rem gap). Folio re-tracks it asymmetrically, bleeds the PHOTO across the gutter toward the page centre, and floats the TEXT as an ivory card sitting OVER the photo's inner edge — finished with a single brand-accent rule along the card's BOTTOM edge. The outer edges of both photo and card stay flush to the content box, so there's no awkward gutter — the overlap happens in the middle. Gated to >=861px. Below that the base responsive stack returns: single column, no overlap, no card chrome, card still carries its own solid fill. ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 861px) { [data-skin="folio"] .vz-text .vz-text-split { position: relative; align-items: center; /* float the shorter card centred over the taller photo */ gap: 0; /* the OVERLAP is the relationship now, not a gutter */ overflow: visible; /* let the card shadow escape the box */ } /* Asymmetric tracks: the photo takes the major share, the text card the minor — the editorial proportion. (0,4,0) over the base (0,1,0). */ [data-skin="folio"] .vz-text .vz-text-split.is-image-left { grid-template-columns: 1.32fr 0.92fr; } [data-skin="folio"] .vz-text .vz-text-split.is-image-right { grid-template-columns: 0.92fr 1.32fr; } /* The floating paper card — solid fill (text always legible, even where it sits over the photo), generous padding, a soft editorial lift. The old hairline border is gone (it read as a hard seam over the photo); in its place a single brand-accent rule along the BOTTOM edge — the one deliberate accent on the card, set to the SAME thickness as the heading tick (--fo-accent-rule) so the two accents rhyme. (Hassan, 2026-05-31.) */ [data-skin="folio"] .vz-text .vz-text-split .vz-text-body-col { position: relative; z-index: 2; background-color: var(--fo-card); padding: clamp(2rem, 1rem + 2.4vw, 3.4rem); border: 0; border-bottom: var(--fo-accent-rule) solid var(--vz-accent); box-shadow: var(--fo-lift); } /* Bleed the PHOTO across the gutter so its inner edge slides UNDER the card. Negative margin on the inner side only; the outer side stays flush to the content box, so no gutter opens up. The frame sits at z-index 1 (below the card). A taller 5:4 crop reads more editorial. */ [data-skin="folio"] .vz-text .vz-text-split .vz-text-image-frame { position: relative; z-index: 1; aspect-ratio: 5 / 4; } [data-skin="folio"] .vz-text .vz-text-split.is-image-left .vz-text-image-frame { margin-right: -16%; } [data-skin="folio"] .vz-text .vz-text-split.is-image-right .vz-text-image-frame { margin-left: -16%; } } /* ════════════════════════════════════════════════════════════════════════ EDITORIAL CARDS — sharp, paper-flat, with a considered hover lift. ════════════════════════════════════════════════════════════════════════ */ [data-skin="folio"] .vz-property-grid .vz-pg-card, [data-skin="folio"] .vz-property-strip .vz-pst-card, [data-skin="folio"] .vz-cta-section .vz-cta-card, [data-skin="folio"] .vz-news .vz-news-card, [data-skin="folio"] .vz-search .vz-card { background-color: var(--fo-card); border: 1px solid var(--fo-line); border-radius: 2px; box-shadow: none; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s cubic-bezier(.2,.7,.2,1); } [data-skin="folio"] .vz-property-grid .vz-pg-card:hover, [data-skin="folio"] .vz-property-strip .vz-pst-card:hover, [data-skin="folio"] .vz-cta-section .vz-cta-card:hover, [data-skin="folio"] .vz-news .vz-news-card:hover, [data-skin="folio"] .vz-search .vz-card:hover { transform: translateY(-5px); box-shadow: var(--fo-lift-soft); } /* Square the card media to the near-sharp card corner. (0,3,0). */ [data-skin="folio"] .vz-property-grid .vz-pg-media, [data-skin="folio"] .vz-property-strip .vz-pst-media, [data-skin="folio"] .vz-news .vz-news-media, [data-skin="folio"] .vz-search .vz-card-media { border-radius: 2px 2px 0 0; } /* NOTE: the staggered grid rhythm (alternate cards dropped 2.4rem via translateY on :nth-child(even)) was removed — with the cards' varying body heights it read as broken misalignment rather than an editorial spread. Featured-properties cards now align flush, matching every other skin. Do not re-add a per-card translateY here. */ /* ── Property price: set in the display serif for the editorial number, with a short accent rule above it on the grid card — the price as a flourish. ──── */ [data-skin="folio"] .vz-property-grid .vz-pg-price, [data-skin="folio"] .vz-property-strip .vz-pst-price, [data-skin="folio"] .vz-search .vz-card-price { font-family: var(--vz-headings-font, 'Fraunces', Georgia, serif); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } /* ── Hero search form: a crisp paper slab — squared, hairline, a soft lift — instead of the renderer's default. Opaque, so it reads clean over a photo. */ [data-skin="folio"] .vz-hero-search .vz-hero-search-form { border: 1px solid var(--fo-line); border-radius: 3px; box-shadow: var(--fo-lift-soft); } /* ── Buttons: refined editorial — squared corners, letter-spaced, medium weight. Brand fills come from the base; Folio only retunes the shape. ──── */ [data-skin="folio"] .vz-vcta-btn, [data-skin="folio"] .vz-text-cta, [data-skin="folio"] .vz-cta-arrow-pill, [data-skin="folio"] .vz-news-pager-btn, [data-skin="folio"] .vz-hero-cta { border-radius: 2px; letter-spacing: 0.04em; font-weight: 500; } /* ── Re-tone the renderer's cool `light` band to a warm recessed ivory so it belongs to the same paper as the ground (the base #f7f8fa reads cool-blue and alien on the warm ivory). White bands are LEFT pure white on purpose — a crisp gallery-white feature band against the ivory is a deliberate editorial contrast. Dark text on the recess clears AA easily. (0,2,0)/(0,3,0). ───── */ [data-skin="folio"] .vz-section.vz-bg-light, [data-skin="folio"] .vz-areas.is-bg-light, [data-skin="folio"] .vz-stats.is-bg-light, [data-skin="folio"] .vz-cta-section.is-section-light, [data-skin="folio"] .vz-process-steps.is-section-light, [data-skin="folio"] .vz-testimonials { background-color: var(--fo-recess); } /* ── The one accent on running text: link underlines pick up the brand accent over the ink body (the renderer defaults them to primary). (0,2,0). ────── */ [data-skin="folio"] .vz-text-body a { color: var(--vz-accent-ink, var(--vz-accent)); text-underline-offset: 3px; } /* Focus rings inherit the base :focus-visible treatment — no work needed. */ /* ════════════════════════════════════════════════════════════════════════ WOULD NEED A RENDERER CHANGE (documented, not faked): • True staggered/overlapping IMAGE COLLAGES (photos overlapping each other in a layered, offset arrangement, as on Savills' homepage) need extra wrapper elements + per-image z-index/offset that a single skin overlay can't add — the property-grid emits a flat list of equal cards with no nesting to layer. Folio approximates the rhythm with the transform stagger above; genuine overlap of one photo onto another would need the renderer to emit a collage-capable container. • The text-card-over-photo overlap is applied to the text-block split only, because that's the one block whose structure (image frame + body column as siblings in a relative grid) supports it cleanly. Doing the same on, e.g., process-steps or cta-tiles would need those blocks to expose an analogous two-sibling structure; they don't, so Folio leaves them as clean editorial cards rather than forcing a fragile overlap. ════════════════════════════════════════════════════════════════════════ */ /* Page-framing accent bands: a brand-accent rule along the BOTTOM of the hero and the TOP of the footer — same thickness + colour as the card edge and heading tick (--fo-accent-rule, var(--vz-accent)), so the accent reads as a consistent Folio signature top-to-bottom. Covers every hero type. The border sits on the section's outer edge, outside the inset:0 background layer, so a full-bleed hero photo never covers it. */ [data-skin="folio"] .vz-hero-image, [data-skin="folio"] .vz-hero-search, [data-skin="folio"] .vz-hero-slideshow { border-bottom: var(--fo-accent-rule) solid var(--vz-accent); } [data-skin="folio"] .vz-footer { border-top: var(--fo-accent-rule) solid var(--vz-accent); }