/* ========================================================================= AD PROPERTIES — theme.css Refined · luxury-forward · boutique · editorial Brand tokens are the single source of truth (mirrored in Elementor Global Colors/Fonts via inc/global-colors-fonts.php). ========================================================================= */ :root { /* Palette */ --adp-teal: #456a72; --adp-green: #435246; --adp-slate: #5b7478; --adp-gold: #8c6f43; --adp-cream: #e4d0be; --adp-paper: #f7f3ef; --adp-ink: #1c1c1a; --adp-white: #ffffff; /* Type — BRAND FONT: swap here once The Seasons / Rising / Riesling and The Seasons are installed via assets/fonts/fonts.css */ --adp-font-headline: "The Seasons", "Cormorant Garamond", "Playfair Display", Georgia, serif; --adp-font-subheader: "Riesling", "Cormorant Garamond", Georgia, serif; --adp-font-body: "Cormorant Garamond", "EB Garamond", Georgia, serif; --adp-font-ui: "Jost", "Montserrat", sans-serif; /* Motion — calm, slow, deliberate */ --adp-ease: cubic-bezier(0.22, 1, 0.36, 1); --adp-hairline: rgba(28, 28, 26, .14); --adp-hairline-light: rgba(247, 243, 239, .28); --adp-dur: 800ms; /* Rhythm */ --adp-section-y: clamp(60px, 9vw, 140px); --adp-container: 1200px; --adp-gap: clamp(24px, 3.5vw, 48px); } /* ---------- Reset-ish base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--adp-font-body); font-size: clamp(17px, 1.1vw, 18px); line-height: 1.7; color: var(--adp-ink); background: var(--adp-white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--adp-teal); text-decoration: none; transition: color 400ms var(--adp-ease); } a:hover { color: var(--adp-gold); } ::selection { background: var(--adp-gold); color: var(--adp-paper); } .screen-reader-text { clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute !important; } .skip-link:focus { clip: auto; clip-path: none; width: auto; height: auto; position: fixed; top: 8px; left: 8px; z-index: 9999; background: var(--adp-ink); color: var(--adp-paper); padding: 10px 18px; font-family: var(--adp-font-ui); letter-spacing: .12em; text-transform: uppercase; font-size: 13px; } :focus-visible { outline: 2px solid var(--adp-gold); outline-offset: 3px; } /* ---------- Typography scale ---------- */ h1,h2,h3,h4,h5 { margin: 0 0 .5em; font-weight: 300; } .adp-h1, h1 { font-family: var(--adp-font-headline); font-size: clamp(40px, 5.2vw, 78px); line-height: 1.08; letter-spacing: .005em; } .adp-h2, h2 { font-family: var(--adp-font-headline); font-size: clamp(30px, 3.4vw, 50px); line-height: 1.16; letter-spacing: 0; } .adp-h3, h3 { font-family: var(--adp-font-headline); font-size: clamp(22px, 2vw, 28px); line-height: 1.3; } .adp-h4, h4 { font-family: var(--adp-font-subheader); font-size: 18px; letter-spacing: .04em; } /* Elegant italic accent — wrap words in inside any headline */ .adp-h1 em, .adp-h2 em, .adp-h3 em, .adp-band__quote em, .adp-cta__title em { font-style: italic; font-weight: 300; letter-spacing: .01em; } .adp-eyebrow { font-family: var(--adp-font-subheader); font-size: 13px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 20px; } .adp-eyebrow--gold { color: var(--adp-gold); } .adp-eyebrow--teal { color: var(--adp-teal); } .adp-eyebrow--cream { color: var(--adp-cream); } .adp-eyebrow--start { text-align: left; } .adp-lede { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.75; } .adp-lede p + p { margin-top: 1.2em; } /* ---------- Layout primitives ---------- */ .adp-container { max-width: var(--adp-container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); } .adp-narrow { max-width: 780px; } .adp-center { text-align: center; } .adp-center .adp-divider { margin-inline: auto; } .adp-section { padding-block: var(--adp-section-y); } .adp-section--white { background: var(--adp-white); } .adp-section--paper { background: var(--adp-paper); } .adp-section--cream { background: var(--adp-cream); } .adp-section--teal { background: var(--adp-teal); color: var(--adp-paper); } .adp-section--green { background: var(--adp-green); color: var(--adp-paper); } .adp-section--teal a:not(.adp-btn), .adp-section--green a:not(.adp-btn) { color: var(--adp-cream); } .adp-page-head--solid { padding-top: calc(var(--adp-section-y) + 90px); text-align: center; } .adp-page-head--solid .adp-lede { max-width: 720px; margin-inline: auto; } /* ------------------------------------------------------------------------- EDITORIAL HEADING SPLIT — title left · ruled body column right ------------------------------------------------------------------------- */ .adp-sh--editorial { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 6vw, 96px); align-items: start; text-align: left; } .adp-sh--editorial .adp-sh__titlecol .adp-h2 { max-width: 14ch; } .adp-sh--editorial .adp-sh__bodycol { border-left: 1px solid var(--adp-hairline); padding-left: clamp(28px, 4vw, 60px); padding-top: 6px; } .adp-section--teal .adp-sh--editorial .adp-sh__bodycol, .adp-section--green .adp-sh--editorial .adp-sh__bodycol { border-color: var(--adp-hairline-light); } /* Gold divider — draws in on scroll */ .adp-divider { display: block; height: 1px; width: 52px; background: var(--adp-gold); margin-block: 26px; } .adp-divider--cream { background: var(--adp-cream); } .adp-divider--gold { background: var(--adp-gold); } /* ---------- Buttons ---------- */ .adp-btn { display: inline-block; font-family: var(--adp-font-ui); font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; padding: 17px 42px; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: background-color 500ms var(--adp-ease), color 500ms var(--adp-ease), border-color 500ms var(--adp-ease), transform 500ms var(--adp-ease), box-shadow 500ms var(--adp-ease); } /* SHOWCASE token — primary */ .adp-btn--primary { background: var(--adp-teal); color: var(--adp-paper); } .adp-btn--primary:hover { background: var(--adp-gold); color: var(--adp-paper); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(28,28,26,.14); } /* EDUCATE token — outline */ .adp-btn--outline { background: transparent; color: var(--adp-ink); border-color: var(--adp-ink); } .adp-btn--outline:hover { background: var(--adp-ink); color: var(--adp-cream); transform: translateY(-2px); } .adp-btn--outline-light { background: transparent; color: var(--adp-paper); border-color: var(--adp-paper); } .adp-btn--outline-light:hover { background: var(--adp-paper); color: var(--adp-ink); } .adp-btn + .adp-btn { margin-left: 12px; } /* Text links — gold underline draw-in */ .adp-textlink { font-family: var(--adp-font-ui); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--adp-ink); position: relative; padding-bottom: 4px; } .adp-textlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--adp-gold); transition: width 600ms var(--adp-ease); } .adp-textlink:hover { color: var(--adp-gold); } .adp-textlink:hover::after { width: 100%; } /* ========================================================================= HEADER — transparent over hero, solidifies on scroll ========================================================================= */ .adp-header { position: fixed; inset: 0 0 auto; z-index: 1000; transition: background-color 600ms var(--adp-ease), box-shadow 600ms var(--adp-ease); background: transparent; } .adp-header__inner { max-width: 1400px; margin-inline: auto; padding: 18px clamp(20px, 4vw, 44px); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: padding 500ms var(--adp-ease); } .adp-logo { height: 52px; width: auto; display: block; transition: opacity 500ms var(--adp-ease); } .adp-header__brand { display: block; line-height: 0; } .adp-header__logo--light { display: none; } /* transparent state (over hero): light logo, light links */ body.adp-has-transparent-header .adp-header:not(.is-solid) { background: linear-gradient(to bottom, rgba(28,28,26,.28), transparent); } body.adp-has-transparent-header .adp-header:not(.is-solid) .adp-header__logo--dark { display: none; } body.adp-has-transparent-header .adp-header:not(.is-solid) .adp-header__logo--light { display: block; } body.adp-has-transparent-header .adp-header:not(.is-solid) .adp-nav a { color: var(--adp-paper); } body.adp-has-transparent-header .adp-header:not(.is-solid) .adp-burger span { background: var(--adp-paper); } /* (legacy transparent-header states removed — the masthead is always solid paper) */ .adp-nav { display: flex; align-items: center; gap: 40px; } .adp-nav__list { list-style: none; display: flex; gap: 40px; margin: 0; padding: 0; } .adp-nav a { font-family: var(--adp-font-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--adp-ink); position: relative; padding-bottom: 5px; transition: color 400ms var(--adp-ease); } .adp-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--adp-gold); transition: width 500ms var(--adp-ease); } .adp-nav a:hover::after, .adp-nav .current-menu-item a::after { width: 100%; } .adp-nav__portal { opacity: .75; font-size: 12px !important; } /* Burger */ .adp-burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; } .adp-burger span { display: block; width: 26px; height: 1.5px; background: var(--adp-ink); margin: 6px 0; transition: transform 500ms var(--adp-ease), opacity 400ms; } .adp-burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); } .adp-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* Full-screen overlay menu */ .adp-overlay { position: fixed; inset: 0; z-index: 999; background: var(--adp-paper); display: grid; place-items: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity 600ms var(--adp-ease), visibility 0s linear 600ms; } .adp-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; } .adp-overlay__list { list-style: none; margin: 0; padding: 0; } .adp-overlay__list a { display: block; font-family: var(--adp-font-headline); font-size: clamp(30px, 7vw, 44px); color: var(--adp-ink); padding: 14px 0; } .adp-overlay__list li { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--adp-ease), transform 600ms var(--adp-ease); } .adp-overlay.is-open .adp-overlay__list li { opacity: 1; transform: none; } .adp-overlay.is-open .adp-overlay__list li:nth-child(1) { transition-delay: 120ms; } .adp-overlay.is-open .adp-overlay__list li:nth-child(2) { transition-delay: 200ms; } .adp-overlay.is-open .adp-overlay__list li:nth-child(3) { transition-delay: 280ms; } .adp-overlay.is-open .adp-overlay__list li:nth-child(4) { transition-delay: 360ms; } .adp-overlay.is-open .adp-overlay__list li:nth-child(5) { transition-delay: 440ms; } .adp-overlay__portal { display: inline-block; margin-top: 28px; font-family: var(--adp-font-ui); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--adp-gold); } /* ========================================================================= HERO ========================================================================= */ .adp-hero { position: relative; display: grid; align-items: end; overflow: hidden; color: var(--adp-paper); } .adp-hero--full { min-height: 100vh; min-height: 100svh; } .adp-hero--tall { min-height: 72vh; } .adp-hero--compact { min-height: 56vh; } .adp-hero--tall .adp-hero__content, .adp-hero--compact .adp-hero__content { align-self: center; } .adp-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: transform; } .adp-hero__media img { width: 100%; height: 100%; object-fit: cover; } .adp-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,28,26,.58) 0%, rgba(28,28,26,.12) 48%, rgba(28,28,26,.28) 100%); } .adp-hero__content { position: relative; z-index: 2; padding-block: clamp(70px, 11vh, 140px); width: 100%; } .adp-hero__content.adp-center .adp-hero__sub { margin-inline: auto; } .adp-h1--hero { color: var(--adp-paper); font-size: clamp(44px, 6.6vw, 96px); line-height: 1.04; max-width: 15ch; text-wrap: balance; text-shadow: 0 2px 40px rgba(28,28,26,.25); } .adp-hero--start .adp-h1--hero { margin-inline: 0; } .adp-center .adp-h1--hero { margin-inline: auto; } .adp-hero__sub { max-width: 560px; font-size: clamp(17px, 1.3vw, 20px); opacity: .95; } /* Editorial meta bar — hairline rule with tracked captions */ .adp-hero__meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: clamp(34px, 6vh, 64px); padding-top: 22px; border-top: 1px solid var(--adp-hairline-light); font-family: var(--adp-font-ui); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgba(247, 243, 239, .82); } .adp-hero__meta span + span { text-align: right; } /* Hero headline entrance — fade-up + letter-spacing settle */ .adp-hero-title { opacity: 0; transform: translateY(34px); letter-spacing: .06em; animation: adp-hero-in 1200ms var(--adp-ease) 200ms forwards; } @keyframes adp-hero-in { to { opacity: 1; transform: none; letter-spacing: .005em; } } /* Slow Ken Burns zoom on hero imagery */ .adp-kenburns { animation: adp-kenburns 6s var(--adp-ease) forwards; transform: scale(1.08); } @keyframes adp-kenburns { to { transform: scale(1); } } /* Scroll cue */ .adp-scroll-cue { position: absolute; left: 50%; bottom: 26px; z-index: 3; width: 26px; height: 44px; margin-left: -13px; border: 1px solid rgba(247,243,239,.7); border-radius: 14px; } .adp-scroll-cue span { position: absolute; left: 50%; top: 9px; width: 3px; height: 8px; margin-left: -1.5px; background: var(--adp-paper); border-radius: 2px; animation: adp-cue 2.2s var(--adp-ease) infinite; } @keyframes adp-cue { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(14px); opacity: 0; } } /* ========================================================================= GRIDS · CARDS (livingoak-style) ========================================================================= */ .adp-grid { display: grid; gap: var(--adp-gap); margin-block: clamp(36px, 5vw, 64px); } .adp-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .adp-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .adp-grid--masonry .adp-grid__item:nth-child(3n+1) .adp-card__media { aspect-ratio: 3 / 4; } .adp-grid--masonry .adp-grid__item:nth-child(3n+2) .adp-card__media { aspect-ratio: 4 / 5; margin-top: clamp(0px, 3vw, 44px); } .adp-grid--masonry .adp-grid__item:nth-child(3n) .adp-card__media { aspect-ratio: 3 / 4; margin-top: clamp(0px, 1.5vw, 22px); } .adp-card__idx { position: absolute; top: 16px; left: 18px; z-index: 2; font-family: var(--adp-font-headline); font-style: italic; font-size: 15px; letter-spacing: .1em; color: var(--adp-cream); text-shadow: 0 1px 16px rgba(28,28,26,.45); } .adp-card__link { display: block; color: inherit; } .adp-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--adp-cream); } .adp-card__media img, .adp-card__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); filter: brightness(.97); transition: transform 1200ms var(--adp-ease), filter 800ms var(--adp-ease); } .adp-card__ph { background: linear-gradient(135deg, var(--adp-cream), var(--adp-slate)); } .adp-card__overlay { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(23,28,23,.78), rgba(23,28,23,.66)); opacity: 0; transition: opacity 800ms var(--adp-ease); } /* Thin cream frame inset — the luxury detail */ .adp-card__overlay::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(228,208,190,.65); } .adp-card__view { font-family: var(--adp-font-ui); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #f2ead9; border-bottom: 1px solid var(--adp-gold); padding-bottom: 6px; } .adp-card__link:hover .adp-card__media img { transform: scale(1.055); filter: brightness(1); } .adp-card__link:hover .adp-card__overlay { opacity: 1; } .adp-card__title { margin: 20px 0 5px; font-size: clamp(21px, 1.8vw, 26px); } .adp-card__meta { margin: 0; font-family: var(--adp-font-ui); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--adp-slate); } .adp-card__dot { color: var(--adp-gold); padding-inline: 5px; } /* Filters */ .adp-filters { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; margin-top: 34px; } .adp-filter { background: none; border: 0; cursor: pointer; padding: 6px 0; font-family: var(--adp-font-ui); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--adp-slate); position: relative; transition: color 400ms var(--adp-ease); } .adp-filter::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--adp-gold); transition: width 500ms var(--adp-ease); } .adp-filter.is-active, .adp-filter:hover { color: var(--adp-ink); } .adp-filter.is-active::after { width: 100%; } .adp-grid__item.is-hidden { display: none; } /* ========================================================================= SPLITS · BANDS · VALUES · GALLERY ========================================================================= */ .adp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; } .adp-split--reverse .adp-split__media { order: 2; } .adp-split__media { position: relative; } .adp-split__media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .adp-split__media--circle img { border-radius: 50%; aspect-ratio: 1; } /* Offset cream plate behind the image — layered editorial depth */ .adp-split__media--plate::before { content: ""; position: absolute; z-index: 0; top: clamp(18px, 3vw, 30px); right: clamp(-30px, -3vw, -18px); bottom: clamp(-30px, -3vw, -18px); left: clamp(18px, 3vw, 30px); background: var(--adp-cream); } .adp-split--reverse .adp-split__media--plate::before { left: clamp(-30px, -3vw, -18px); right: clamp(18px, 3vw, 30px); } .adp-section--paper .adp-split__media--plate::before { background: var(--adp-white); box-shadow: 0 1px 0 var(--adp-hairline) inset; border: 1px solid var(--adp-hairline); } /* Small tracked caption under the image */ .adp-split__caption { position: relative; z-index: 1; margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--adp-hairline); font-family: var(--adp-font-ui); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--adp-slate); } /* Oversized ghost index behind the text column */ .adp-split__body { position: relative; } .adp-split__index { position: absolute; top: clamp(-46px, -4vw, -26px); left: -6px; z-index: 0; font-family: var(--adp-font-headline); font-style: italic; font-weight: 300; font-size: clamp(84px, 10vw, 148px); line-height: 1; color: var(--adp-ink); opacity: .05; pointer-events: none; user-select: none; } .adp-section--teal .adp-split__index, .adp-section--green .adp-split__index { color: var(--adp-paper); opacity: .08; } .adp-split__body > *:not(.adp-split__index) { position: relative; z-index: 1; } .adp-band { padding-block: clamp(80px, 10vw, 150px); } .adp-band--short { padding-block: clamp(60px, 7vw, 100px); } .adp-band__mark { display: block; font-family: var(--adp-font-headline); font-size: clamp(64px, 7vw, 96px); line-height: .35; color: var(--adp-gold); margin-bottom: 8px; } .adp-band .adp-eyebrow { margin-bottom: 30px; } .adp-band__quote { font-family: var(--adp-font-headline); font-size: clamp(28px, 3.6vw, 50px); line-height: 1.28; font-weight: 300; max-width: 22ch; margin: 0 auto; text-wrap: balance; } .adp-band__quote--small { font-size: clamp(20px, 2.2vw, 30px); max-width: 34ch; line-height: 1.55; } .adp-cols-2, .adp-cols-3, .adp-cols-4 { display: grid; gap: var(--adp-gap); margin-top: clamp(36px, 5vw, 64px); } .adp-cols-2 { grid-template-columns: repeat(2, 1fr); } .adp-cols-3 { grid-template-columns: repeat(3, 1fr); } .adp-cols-4 { grid-template-columns: repeat(4, 1fr); } /* ------------------------------------------------------------------------- EDITORIAL SECTION HEADER — eyebrow+title left · link right · hairline ------------------------------------------------------------------------- */ .adp-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: clamp(22px, 3vw, 34px); border-bottom: 1px solid var(--adp-hairline); margin-bottom: clamp(40px, 5vw, 66px); } .adp-sechead .adp-h2 { margin: 0; max-width: 22ch; } .adp-sechead .adp-eyebrow { margin-bottom: 14px; } .adp-sechead__side { flex-shrink: 0; padding-bottom: 6px; } .adp-section--teal .adp-sechead, .adp-section--green .adp-sechead { border-color: var(--adp-hairline-light); } /* ------------------------------------------------------------------------- NUMBERED VALUE LIST — ruled editorial cards (replaces icon-box feel) ------------------------------------------------------------------------- */ .adp-value { position: relative; border-top: 1px solid var(--adp-hairline); padding-top: 28px; } .adp-value__num { display: block; font-family: var(--adp-font-headline); font-style: italic; font-weight: 400; font-size: 19px; letter-spacing: .06em; color: var(--adp-gold); margin-bottom: 16px; } .adp-value__icon { position: absolute; top: 26px; right: 0; display: inline-block; width: 30px; height: 30px; color: var(--adp-slate); opacity: .8; margin: 0; } .adp-value__icon svg { width: 100%; height: 100%; } .adp-value--center { text-align: center; } .adp-value--center .adp-value__icon { position: static; display: inline-block; width: 34px; height: 34px; margin-bottom: 14px; } .adp-value h3 { font-size: clamp(21px, 1.8vw, 26px); margin-bottom: .4em; } .adp-value p, .adp-service p { color: #4a4a46; } .adp-value .adp-textlink { margin-top: 6px; display: inline-block; } .adp-section--teal .adp-value, .adp-section--green .adp-value { border-color: var(--adp-hairline-light); } .adp-service { position: relative; padding-bottom: 14px; } .adp-service::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--adp-gold); transition: width 700ms var(--adp-ease); } .adp-service:hover::after { width: 44px; } .adp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--adp-gap); margin-top: clamp(30px, 4vw, 50px); } .adp-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); } .adp-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); } .adp-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); } .adp-gallery__item { margin: 0; overflow: hidden; } .adp-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: brightness(.98); transition: transform 1200ms var(--adp-ease), filter 800ms var(--adp-ease); } .adp-gallery__item:hover img { transform: scale(1.05); filter: brightness(1); } /* Editorial rhythm — magazine cadence of alternating heights */ .adp-gallery--editorial .adp-gallery__item:nth-child(6n+2) img, .adp-gallery--editorial .adp-gallery__item:nth-child(6n+4) img { aspect-ratio: 3 / 4; } .adp-gallery--editorial .adp-gallery__item:nth-child(6n+2), .adp-gallery--editorial .adp-gallery__item:nth-child(6n+5) { transform: translateY(clamp(0px, 2vw, 26px)); } /* ========================================================================= OWNERREZ SLOT · CONTACT · MAP ========================================================================= */ .adp-ownerrez__slot { max-width: 1100px; margin-inline: auto; } .adp-ownerrez__placeholder { text-align: center; border: 1px solid var(--adp-cream); background: var(--adp-paper); padding: clamp(44px, 6vw, 90px) clamp(24px, 5vw, 70px); } .adp-ownerrez__placeholder p { max-width: 560px; margin: 0 auto 26px; } .adp-contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 90px); } .adp-contact--single { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; } .adp-form label { display: block; margin-bottom: 6px; font-family: var(--adp-font-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--adp-slate); } .adp-form input[type="text"], .adp-form input[type="email"], .adp-form input[type="tel"], .adp-form select, .adp-form textarea { width: 100%; padding: 13px 15px; font-family: var(--adp-font-body); font-size: 16px; color: var(--adp-ink); background: var(--adp-paper); border: 1px solid #dcd4cb; border-radius: 2px; transition: border-color 400ms var(--adp-ease), box-shadow 400ms var(--adp-ease); } .adp-form input:focus, .adp-form select:focus, .adp-form textarea:focus { outline: none; border-color: var(--adp-teal); box-shadow: 0 0 0 3px rgba(69,106,114,.15); } .adp-form p { margin: 0 0 20px; } .adp-hp { position: absolute; left: -9999px; } .adp-form__success { border-left: 2px solid var(--adp-gold); padding-left: 24px; } .adp-contact__details h3 { margin-top: 1.4em; } .adp-contact__details h3:first-child { margin-top: 0; } .adp-map__frame iframe { width: 100%; height: 420px; border: 0; filter: grayscale(1) sepia(.12); } .adp-portal-callout { padding-block: 44px; font-size: 18px; } /* ========================================================================= SPECS · PROSE · BLOG · PAGINATION · FOOTER ========================================================================= */ .adp-specs { list-style: none; display: flex; gap: clamp(30px, 5vw, 70px); padding: 0; margin: 0 0 40px; } .adp-specs li { font-family: var(--adp-font-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--adp-slate); } .adp-specs span { display: block; font-family: var(--adp-font-headline); font-size: 34px; color: var(--adp-ink); line-height: 1.2; } .adp-prose { max-width: 760px; } .adp-prose p { margin: 0 0 1.3em; } .adp-prose img { margin-block: 1.6em; } .adp-post-list { display: grid; gap: clamp(50px, 6vw, 80px); max-width: 860px; margin-inline: auto; } .adp-post-card__media { display: block; overflow: hidden; margin-bottom: 26px; } .adp-post-card__media img { transition: transform 1000ms var(--adp-ease); } .adp-post-card__media:hover img { transform: scale(1.04); } .adp-post-card__body h2 a { color: var(--adp-ink); } .adp-post-card__body h2 a:hover { color: var(--adp-teal); } .adp-single__media { margin: 0 0 40px; } .adp-pagination { margin-top: 60px; text-align: center; font-family: var(--adp-font-ui); letter-spacing: .1em; } .adp-pagination .page-numbers { padding: 8px 12px; color: var(--adp-slate); } .adp-pagination .current { color: var(--adp-gold); } .adp-404 { min-height: 70vh; display: grid; align-items: center; text-align: center; padding-top: 160px; } .adp-404 .adp-eyebrow, .adp-404 .adp-divider { margin-inline: auto; } .adp-empty { text-align: center; color: var(--adp-slate); font-style: italic; } /* Footer */ .adp-footer { background: var(--adp-green); color: var(--adp-paper); padding-top: clamp(60px, 8vw, 100px); } .adp-footer a { color: var(--adp-paper); } .adp-footer a:hover { color: var(--adp-cream); } .adp-footer .adp-logo { height: 58px; margin-bottom: 20px; } .adp-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: clamp(30px, 5vw, 60px); } .adp-footer__brand p { font-style: italic; opacity: .85; max-width: 260px; } .adp-footer__title { font-family: var(--adp-font-subheader); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--adp-cream); margin-bottom: 20px; } .adp-footer__menu { list-style: none; margin: 0; padding: 0; } .adp-footer__menu li { margin-bottom: 12px; } .adp-footer__menu a, .adp-footer__contact, .adp-footer__note { font-size: 16px; } .adp-footer__contact { line-height: 2; } .adp-footer__portal { display: inline-block; margin-top: 14px; font-family: var(--adp-font-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--adp-cream) !important; } .adp-footer__bar { text-align: center; padding-block: 34px; margin-top: clamp(40px, 6vw, 70px); } .adp-footer__rule { display: block; height: 1px; width: 60px; background: var(--adp-gold); margin: 0 auto 22px; } .adp-footer__bar p { margin: 0; font-family: var(--adp-font-ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; } /* ========================================================================= MOTION SYSTEM — scroll reveals (IntersectionObserver in theme.js) ========================================================================= */ .adp-reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--adp-dur) var(--adp-ease) var(--adp-delay, 0ms), transform var(--adp-dur) var(--adp-ease) var(--adp-delay, 0ms); } .adp-reveal.is-inview { opacity: 1; transform: none; } .adp-reveal-line { transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--adp-ease) var(--adp-delay, 100ms); } .adp-center .adp-reveal-line { transform-origin: center; } .adp-reveal-line.is-inview { transform: scaleX(1); } /* No-JS / pre-JS safety: everything visible if JS never runs */ html.no-js .adp-reveal, html.no-js .adp-reveal-line { opacity: 1; transform: none; } /* Reduced motion — calm everything */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .adp-reveal, .adp-reveal-line, .adp-hero-title { opacity: 1 !important; transform: none !important; } .adp-kenburns { transform: none; } } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1024px) { .adp-cols-4 { grid-template-columns: repeat(2, 1fr); } .adp-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } .adp-gallery, .adp-gallery--cols-3, .adp-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .adp-nav { display: none; } .adp-burger { display: block; z-index: 1001; } .adp-split, .adp-contact, .adp-cols-2, .adp-cols-3 { grid-template-columns: 1fr; } .adp-split--reverse .adp-split__media { order: 0; } .adp-footer__grid { grid-template-columns: 1fr 1fr; } .adp-grid--cols-2, .adp-grid--cols-3 { grid-template-columns: 1fr; } .adp-grid--masonry .adp-grid__item .adp-card__media { margin-top: 0 !important; aspect-ratio: 4 / 5 !important; } .adp-gallery--editorial .adp-gallery__item { transform: none !important; } .adp-gallery--editorial .adp-gallery__item img { aspect-ratio: 4 / 3 !important; } .adp-sechead { flex-direction: column; align-items: flex-start; gap: 16px; } .adp-sh--editorial { grid-template-columns: 1fr; } .adp-sh--editorial .adp-sh__bodycol { border-left: 0; padding-left: 0; border-top: 1px solid var(--adp-hairline); padding-top: 22px; } .adp-split__media--plate::before { display: none; } .adp-split__index { display: none; } } @media (max-width: 540px) { .adp-cols-4, .adp-footer__grid, .adp-gallery, .adp-gallery--cols-2, .adp-gallery--cols-3, .adp-gallery--cols-4 { grid-template-columns: 1fr; } .adp-btn { display: block; text-align: center; } .adp-btn + .adp-btn { margin: 12px 0 0; } } /* ========================================================================= ═══ LUXURY EDITION — cohesive boutique redesign layer ═══ A committed atmosphere: warm paper everywhere (never pure white), arched imagery, framed covers, cascading collages, overlapping cards, deep atelier moments, and invitation-style calls to action. ========================================================================= */ :root { --adp-green-deep: #2e3a31; --adp-ink-green: #232a24; --adp-paper-deep: #efe7db; --adp-gold-soft: rgba(140, 111, 67, .42); } /* ---- Global atmosphere: matte warm paper, never white ---- */ body { background: var(--adp-paper); color: #23221e; } .adp-section--white { background: var(--adp-paper); } .adp-section--paper { background: var(--adp-paper-deep); } .adp-section { padding-block: clamp(96px, 11vw, 170px); } /* ---- Committed display type scale ---- */ .adp-h1, h1 { font-size: clamp(46px, 7vw, 108px); line-height: 1.02; letter-spacing: -.005em; } .adp-h2, h2 { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.08; } .adp-lede { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.78; color: #3c3a34; } .adp-eyebrow { font-size: 11.5px; letter-spacing: .32em; } /* ---- The Arch — the brand's signature curve ---- */ .adp-arch img, img.adp-arch { border-radius: min(46vw, 480px) min(46vw, 480px) 0 0; } /* ---- Header: hairline instead of shadow when solid ---- */ .adp-header.is-solid { background: var(--adp-paper); box-shadow: none; border-bottom: 1px solid var(--adp-hairline); } /* ========================================================================= HERO COVER — framed editorial cover (Home) ========================================================================= */ .adp-cover { background: var(--adp-paper); padding-top: clamp(128px, 16vh, 190px); padding-bottom: 0; } .adp-cover__masthead { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 16px; border-top: 1px solid var(--adp-hairline); border-bottom: 1px solid var(--adp-hairline); font-family: var(--adp-font-ui); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #6d685e; } .adp-cover__masthead span:nth-child(2) { text-align: center; } .adp-cover__masthead span:last-child { text-align: right; } .adp-cover__title { font-family: var(--adp-font-headline); font-weight: 300; font-size: clamp(52px, 8.8vw, 138px); line-height: 1.0; letter-spacing: -.01em; color: var(--adp-ink); margin: clamp(40px, 6vw, 80px) 0 0; max-width: 13ch; text-wrap: balance; } .adp-cover__title em { font-style: italic; } .adp-cover__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin: clamp(30px, 4vw, 54px) 0 clamp(34px, 5vw, 60px); } .adp-cover__caption { max-width: 44ch; font-size: 17px; line-height: 1.7; color: #55524a; border-left: 1px solid var(--adp-gold-soft); padding-left: 22px; margin: 0; } .adp-cover__cta { flex-shrink: 0; padding-bottom: 4px; } .adp-cover__media { position: relative; } .adp-cover__media img { width: 100%; height: clamp(420px, 72vh, 760px); object-fit: cover; display: block; } .adp-cover__media--arch img { border-radius: min(46vw, 520px) min(46vw, 520px) 0 0; } /* thin gold keyline connecting headline to image */ .adp-cover__media::before { content: ""; position: absolute; top: calc(0px - clamp(34px, 5vw, 60px)); left: 50%; width: 1px; height: clamp(34px, 5vw, 60px); background: var(--adp-gold-soft); } /* ========================================================================= COLLAGE — cascading editorial image grid ========================================================================= */ .adp-collage { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(22px, 3.4vw, 52px); align-items: start; } .adp-collage .adp-grid__item { grid-column: span 4; } .adp-collage .adp-grid__item:nth-child(6n+1) { grid-column: 1 / 6; } .adp-collage .adp-grid__item:nth-child(6n+2) { grid-column: 6 / 10; margin-top: clamp(56px, 8vw, 128px); } .adp-collage .adp-grid__item:nth-child(6n+3) { grid-column: 10 / 13; margin-top: clamp(112px, 16vw, 250px); } .adp-collage .adp-grid__item:nth-child(6n+4) { grid-column: 1 / 4; margin-top: clamp(30px, 5vw, 80px); } .adp-collage .adp-grid__item:nth-child(6n+5) { grid-column: 4 / 9; margin-top: clamp(-40px, -3vw, -20px); } .adp-collage .adp-grid__item:nth-child(6n+6) { grid-column: 9 / 13; margin-top: clamp(50px, 7vw, 110px); } .adp-collage .adp-card__media { aspect-ratio: auto; } .adp-collage .adp-grid__item:nth-child(6n+1) .adp-card__media { aspect-ratio: 4 / 5; } .adp-collage .adp-grid__item:nth-child(6n+2) .adp-card__media { aspect-ratio: 3 / 4; } .adp-collage .adp-grid__item:nth-child(6n+3) .adp-card__media { aspect-ratio: 1 / 1; } .adp-collage .adp-grid__item:nth-child(6n+4) .adp-card__media { aspect-ratio: 3 / 4; } .adp-collage .adp-grid__item:nth-child(6n+5) .adp-card__media { aspect-ratio: 5 / 4; } .adp-collage .adp-grid__item:nth-child(6n+6) .adp-card__media { aspect-ratio: 4 / 5; } /* ========================================================================= OVERLAP FEATURE — content card overlapping the image ========================================================================= */ .adp-overlap { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; } .adp-overlap__media { grid-column: 4 / 13; grid-row: 1; } .adp-overlap__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; } .adp-overlap__card { grid-column: 1 / 7; grid-row: 1; z-index: 2; background: var(--adp-paper); padding: clamp(36px, 4.6vw, 70px); border: 1px solid var(--adp-hairline); box-shadow: 0 40px 90px rgba(28, 28, 26, .10); } .adp-overlap--reverse .adp-overlap__media { grid-column: 1 / 10; } .adp-overlap--reverse .adp-overlap__card { grid-column: 7 / 13; } .adp-overlap__card .adp-h2 { font-size: clamp(30px, 3.2vw, 46px); } .adp-overlap__card .adp-split__text { margin-top: 6px; } .adp-overlap__caption { margin: 14px 0 0; font-family: var(--adp-font-ui); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #7a756a; text-align: right; } /* ========================================================================= ATELIER BAND — deep green, ghost monogram, italic serif statement ========================================================================= */ .adp-section--deep { background: var(--adp-green-deep); color: var(--adp-paper); } .adp-atelier { position: relative; overflow: hidden; padding-block: clamp(110px, 13vw, 190px); } .adp-atelier__mono { position: absolute; top: 50%; right: -3%; transform: translateY(-50%); font-family: var(--adp-font-headline); font-size: clamp(280px, 38vw, 560px); line-height: 1; font-weight: 300; color: transparent; -webkit-text-stroke: 1px rgba(228, 208, 190, .13); pointer-events: none; user-select: none; } .adp-atelier .adp-band__quote { position: relative; z-index: 1; font-size: clamp(30px, 4vw, 58px); font-style: italic; line-height: 1.25; } .adp-atelier .adp-band__quote em { font-style: normal; } .adp-atelier .adp-band__quote--small { font-size: clamp(21px, 2.3vw, 32px); font-style: normal; line-height: 1.6; } .adp-atelier .adp-eyebrow { position: relative; z-index: 1; } .adp-atelier .adp-divider { position: relative; z-index: 1; } /* ========================================================================= INVITATION — double-framed card CTA ========================================================================= */ .adp-invite-wrap { padding-block: clamp(90px, 10vw, 150px); } .adp-invite { position: relative; max-width: 920px; margin-inline: auto; padding: clamp(56px, 7vw, 104px) clamp(30px, 6vw, 90px); text-align: center; background: var(--adp-paper-deep); border: 1px solid var(--adp-gold-soft); } .adp-invite::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(140, 111, 67, .22); pointer-events: none; } .adp-invite .adp-h2 { max-width: 18ch; margin-inline: auto; } .adp-invite .adp-lede { max-width: 46ch; margin-inline: auto; } /* ---- Cards inside the warm atmosphere ---- */ .adp-card__media { background: var(--adp-paper-deep); } .adp-card__title { font-size: clamp(22px, 1.9vw, 28px); } .adp-card__meta { color: #7a756a; } /* ---- Buttons: quieter luxury ---- */ .adp-btn--primary { background: var(--adp-ink-green); } .adp-btn--primary:hover { background: var(--adp-gold); } /* ---- Footer: grand serif farewell ---- */ .adp-footer { background: var(--adp-ink-green); } .adp-footer__cta { padding: clamp(80px, 9vw, 130px) 0 clamp(50px, 6vw, 80px); border-bottom: 1px solid rgba(247, 243, 239, .14); margin-bottom: clamp(44px, 5vw, 70px); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; } .adp-footer__cta h2 { font-family: var(--adp-font-headline); font-weight: 300; font-size: clamp(38px, 5vw, 76px); line-height: 1.05; color: var(--adp-paper); margin: 0; max-width: 15ch; } .adp-footer__cta h2 em { font-style: italic; } .adp-footer__cta .adp-textlink { color: var(--adp-cream); font-size: 12px; } /* ---- Responsive: luxury layer ---- */ @media (max-width: 1024px) { .adp-collage .adp-grid__item, .adp-collage .adp-grid__item:nth-child(n) { grid-column: span 6; margin-top: 0; } .adp-collage .adp-grid__item:nth-child(n) .adp-card__media { aspect-ratio: 4 / 5; } } @media (max-width: 820px) { .adp-cover__row { flex-direction: column; align-items: flex-start; } .adp-cover__title { font-size: clamp(44px, 11vw, 72px); } .adp-cover__media img { height: clamp(320px, 48vh, 480px); } .adp-overlap { display: block; } .adp-overlap__card { margin: -60px 16px 0; } .adp-atelier__mono { display: none; } .adp-footer__cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 540px) { .adp-collage .adp-grid__item, .adp-collage .adp-grid__item:nth-child(n) { grid-column: span 12; } } /* ========================================================================= ═══ MASTHEAD HEADER — stacked, centered, ruled (always legible) ═══ ========================================================================= */ .adp-header--masthead { position: sticky; top: 0; z-index: 900; background: var(--adp-paper); box-shadow: none; border-bottom: 1px solid var(--adp-hairline); transition: none; } .adp-header--masthead .adp-header__top { position: relative; display: flex; align-items: center; justify-content: center; padding-block: clamp(16px, 2.4vw, 26px); transition: padding 500ms var(--adp-ease); } .adp-header--masthead .adp-header__brand { display: inline-flex; color: var(--adp-ink); } .adp-header--masthead .adp-header__brand svg { height: clamp(40px, 4vw, 52px); width: auto; transition: height 500ms var(--adp-ease); } .adp-header--masthead .adp-header__portal { position: absolute; right: var(--adp-gutter, 28px); top: 50%; transform: translateY(-50%); font-family: var(--adp-font-ui); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: #7a756a; } .adp-header--masthead .adp-header__portal:hover { color: var(--adp-gold); } .adp-header--masthead .adp-burger { position: absolute; left: var(--adp-gutter, 28px); top: 50%; transform: translateY(-50%); display: none; } .adp-header--masthead .adp-header__navrow { border-top: 1px solid var(--adp-hairline); } .adp-header--masthead .adp-nav { display: block; } .adp-header--masthead .adp-nav__list { display: flex; justify-content: center; gap: clamp(26px, 3.4vw, 52px); list-style: none; margin: 0; padding: 13px 20px; } .adp-header--masthead .adp-nav a { font-family: var(--adp-font-ui); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--adp-ink); position: relative; padding-bottom: 4px; } .adp-header--masthead .adp-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--adp-gold); transition: width 500ms var(--adp-ease); } .adp-header--masthead .adp-nav a:hover::after, .adp-header--masthead .current-menu-item > a::after { width: 100%; } /* Compress gracefully on scroll (theme.js adds .is-solid) */ .adp-header--masthead.is-solid .adp-header__top { padding-block: 10px; } .adp-header--masthead.is-solid .adp-header__brand svg { height: 34px; } /* Cover hero no longer needs to clear a fixed header */ .adp-cover { padding-top: clamp(56px, 7vw, 96px); } /* Image heroes sit flush under the masthead — content vertically centered */ .adp-hero--full { min-height: calc(100vh - 140px); } @media (max-width: 820px) { .adp-header--masthead .adp-header__navrow { display: none; } .adp-header--masthead .adp-burger { display: block; } .adp-header--masthead .adp-header__portal { display: none; } } /* Masthead specificity lock — always fully opaque paper, no legacy overrides */ .adp-header.adp-header--masthead, .adp-header.adp-header--masthead.is-solid { background: var(--adp-paper); box-shadow: none; border-bottom: 1px solid var(--adp-hairline); } /* ========================================================================= ═══ THE ESTATE — split hero · heritage stats · testimonials ═══ ========================================================================= */ /* ---- Split-screen hero: content panel + full-height arched image ---- */ .adp-splithero { display: grid; grid-template-columns: 46% 54%; min-height: calc(100vh - 120px); background: var(--adp-paper); } .adp-splithero__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(44px, 6vw, 110px) clamp(28px, 5vw, 90px); } .adp-splithero__badge { display: inline-block; width: fit-content; border: 1px solid var(--adp-gold-soft); padding: 9px 18px; font-family: var(--adp-font-ui); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--adp-gold); margin-bottom: clamp(26px, 3vw, 44px); } .adp-splithero__title { font-family: var(--adp-font-headline); font-weight: 300; font-size: clamp(42px, 4.8vw, 82px); line-height: 1.03; letter-spacing: -.005em; color: var(--adp-ink); margin: 0 0 clamp(22px, 2.6vw, 36px); max-width: 14ch; text-wrap: balance; } .adp-splithero__caption { max-width: 40ch; font-size: 17.5px; line-height: 1.75; color: #55524a; border-left: 1px solid var(--adp-gold-soft); padding-left: 22px; margin: 0 0 clamp(26px, 3vw, 40px); } .adp-splithero__media { position: relative; padding: clamp(18px, 2.6vw, 38px); padding-left: 0; } .adp-splithero__media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: min(23vw, 330px) min(23vw, 330px) 0 0; } .adp-splithero__media figcaption { position: absolute; right: clamp(34px, 4vw, 58px); bottom: clamp(32px, 4vw, 56px); font-family: var(--adp-font-ui); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--adp-paper); opacity: .92; text-shadow: 0 1px 14px rgba(28,28,26,.5); } /* ---- Heritage stats band — the numbers as design ---- */ .adp-stats { background: var(--adp-paper-deep); border-block: 1px solid var(--adp-hairline); padding: 0; } .adp-stats__grid { display: grid; grid-template-columns: repeat(var(--adp-stats-cols, 4), 1fr); } .adp-stat { padding: clamp(34px, 4vw, 60px) clamp(20px, 2.6vw, 44px); border-left: 1px solid var(--adp-hairline); text-align: center; } .adp-stat:first-child { border-left: 0; } .adp-stat__num { display: block; font-family: var(--adp-font-headline); font-weight: 300; font-size: clamp(42px, 5.2vw, 80px); line-height: 1; color: var(--adp-ink); margin-bottom: 12px; } .adp-stat__num em, .adp-stat__num sup { font-style: italic; color: var(--adp-gold); font-size: .62em; vertical-align: super; } .adp-stat__label { display: block; font-family: var(--adp-font-ui); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: #7a756a; } /* ---- Testimonials — the atelier becomes a stage for guests ---- */ .adp-testimonials { text-align: center; } .adp-testimonials .adp-band__mark { margin-bottom: 4px; } .adp-quote { max-width: 880px; margin-inline: auto; } .adp-quote__text { font-family: var(--adp-font-headline); font-weight: 300; font-style: italic; font-size: clamp(24px, 3vw, 42px); line-height: 1.4; color: var(--adp-paper); margin: 0 0 clamp(26px, 3vw, 40px); text-wrap: balance; } .adp-quote__stars { color: var(--adp-goldlx, #b89560); letter-spacing: .3em; font-size: 15px; margin-bottom: 18px; display: block; } .adp-quote__name { font-family: var(--adp-font-ui); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--adp-cream); display: block; } .adp-quote__meta { font-family: var(--adp-font-ui); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(228, 208, 190, .55); display: block; margin-top: 8px; } /* rotation (theme.js) — data-rotate lives on the inner wrapper */ .adp-testimonials__inner[data-rotate] .adp-quote { display: none; } .adp-testimonials__inner[data-rotate] .adp-quote.is-active { display: block; animation: adp-quote-in 900ms var(--adp-ease); } @keyframes adp-quote-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .adp-testimonials__nav { margin-top: clamp(30px, 4vw, 46px); display: flex; justify-content: center; gap: 12px; } .adp-testimonials__dot { width: 7px; height: 7px; border-radius: 50%; padding: 0; background: rgba(228, 208, 190, .3); border: 0; cursor: pointer; transition: background 400ms var(--adp-ease), transform 400ms var(--adp-ease); } .adp-testimonials__dot.is-active { background: var(--adp-gold); transform: scale(1.3); } /* no-JS: all quotes visible, ruled apart */ html.no-js .adp-testimonials .adp-quote + .adp-quote { margin-top: 46px; padding-top: 46px; border-top: 1px solid rgba(228,208,190,.16); } @media (max-width: 900px) { .adp-splithero { grid-template-columns: 1fr; min-height: 0; } .adp-splithero__media { padding: 0 clamp(16px, 4vw, 28px) clamp(20px, 5vw, 32px); } .adp-splithero__media img { height: clamp(300px, 46vh, 440px); } .adp-stats__grid { grid-template-columns: repeat(2, 1fr); } .adp-stat:nth-child(odd) { border-left: 0; } .adp-stat:nth-child(n+3) { border-top: 1px solid var(--adp-hairline); } } @media (max-width: 540px) { .adp-stats__grid { grid-template-columns: 1fr; } .adp-stat { border-left: 0 !important; } .adp-stat + .adp-stat { border-top: 1px solid var(--adp-hairline); } } /* ========================================================================= ═══ NOIR LUXE — the opulent dark atmosphere ═══ Deep green-charcoal throughout, warm cream serif, gold accents. Occasional cream "gallery" sections make the photography glow. ========================================================================= */ :root { --adp-noir: #20261f; --adp-noir-2: #252c25; --adp-noir-3: #2c342c; --adp-creamtx: #f2ead9; --adp-cream70: rgba(242, 234, 217, .74); --adp-cream50: rgba(242, 234, 217, .52); --adp-goldlx: #b89560; /* lifted gold — clears WCAG AA (4.59:1) on every dark ground */ /* Hairlines: cream-based by default (dark context) */ --adp-hairline: rgba(242, 234, 217, .16); --adp-hairline-light: rgba(242, 234, 217, .22); } body { background: var(--adp-noir); color: var(--adp-cream70); } .adp-h1, .adp-h2, .adp-h3, h1, h2, h3 { color: var(--adp-creamtx); } .adp-lede { color: var(--adp-cream70); } p { color: inherit; } a { color: var(--adp-creamtx); } a:hover { color: var(--adp-goldlx); } .adp-textlink { color: var(--adp-creamtx); } .adp-textlink::after { background: var(--adp-goldlx); } .adp-eyebrow--gold { color: var(--adp-goldlx); } .adp-divider--gold { background: var(--adp-goldlx); } /* ---- Section remapping: everything dark; cream = the gallery moment ---- */ .adp-section--white { background: var(--adp-noir-2); } .adp-section--paper { background: var(--adp-noir); } .adp-section--teal, .adp-section--green { background: var(--adp-noir-3); } .adp-section--deep { background: #1b211b; } .adp-section--cream { background: var(--adp-paper-deep); color: #4a463e; --adp-hairline: rgba(28, 28, 26, .14); --adp-hairline-light: rgba(28, 28, 26, .14); } .adp-section--cream .adp-h1, .adp-section--cream .adp-h2, .adp-section--cream .adp-h3 { color: var(--adp-ink); } .adp-section--cream .adp-lede { color: #55524a; } .adp-section--cream .adp-textlink { color: var(--adp-ink); } .adp-section--cream .adp-eyebrow--gold { color: var(--adp-gold); } /* ---- Masthead header: dark, gold-ruled, cream wordmark ---- */ .adp-header.adp-header--masthead, .adp-header.adp-header--masthead.is-solid { background: var(--adp-noir); border-bottom: 1px solid var(--adp-hairline); } .adp-header--masthead .adp-header__brand { color: var(--adp-creamtx); } .adp-header--masthead .adp-header__portal { color: var(--adp-cream50); } .adp-header--masthead .adp-header__portal:hover { color: var(--adp-goldlx); } .adp-header--masthead .adp-header__navrow { border-top-color: var(--adp-hairline); } .adp-header--masthead .adp-nav a { color: var(--adp-creamtx); } .adp-header--masthead .adp-nav a::after { background: var(--adp-goldlx); } /* ---- Split hero on noir ---- */ .adp-splithero { background: var(--adp-noir); } .adp-splithero__title { color: var(--adp-creamtx); } .adp-splithero__caption { color: var(--adp-cream70); border-left-color: rgba(178, 141, 84, .5); } .adp-splithero__badge { color: var(--adp-goldlx); border-color: rgba(178, 141, 84, .5); } /* ---- Heritage stats: cream numerals, gold marks, ruled in cream ---- */ .adp-stats { background: var(--adp-noir-3); border-color: var(--adp-hairline); } .adp-stat { border-color: var(--adp-hairline); } .adp-stat__num { color: var(--adp-creamtx); } .adp-stat__num em, .adp-stat__num sup { color: var(--adp-goldlx); } .adp-stat__label { color: var(--adp-cream50); } /* ---- Editorial heading split ---- */ .adp-sh--editorial .adp-sh__bodycol { border-left-color: var(--adp-hairline); } .adp-sh__body { color: var(--adp-cream70); } .adp-section--cream .adp-sh__body { color: #55524a; } /* ---- Section header rows ---- */ .adp-sechead { border-bottom-color: var(--adp-hairline); } /* ---- Cards: cream titles on dark; ink on gallery ---- */ .adp-card__media { background: var(--adp-noir-3); } .adp-card__title { color: var(--adp-creamtx); } .adp-card__meta { color: var(--adp-cream50); } .adp-section--cream .adp-card__title { color: var(--adp-ink); } .adp-section--cream .adp-card__meta { color: #666257; } .adp-section--cream .adp-card__media { background: #e6dccd; } .adp-filter { color: var(--adp-cream70); border-color: var(--adp-hairline); } .adp-filter.is-active, .adp-filter:hover { color: var(--adp-goldlx); border-color: var(--adp-goldlx); } .adp-section--cream .adp-filter { color: #55524a; } /* ---- Overlap card: deep panel, gold keyline ---- */ .adp-overlap__card { background: var(--adp-noir-2); border: 1px solid rgba(178, 141, 84, .35); box-shadow: 0 44px 100px rgba(0, 0, 0, .38); } .adp-overlap__caption { color: var(--adp-cream50); } .adp-split__caption { color: var(--adp-cream50); border-top-color: var(--adp-hairline); } .adp-split__text { color: var(--adp-cream70); } .adp-section--cream .adp-split__text { color: #55524a; } .adp-split__index { color: var(--adp-creamtx); opacity: .06; } .adp-split__media--plate::before { background: var(--adp-noir-3); border: 1px solid var(--adp-hairline); } .adp-section--cream .adp-split__media--plate::before { background: var(--adp-white); border-color: rgba(28,28,26,.14); } /* ---- Numbered value ledger ---- */ .adp-value { border-top-color: var(--adp-hairline); } .adp-value__num { color: var(--adp-goldlx); } .adp-value__icon { color: var(--adp-cream50); } .adp-value p { color: var(--adp-cream70); } .adp-value h3 { color: var(--adp-creamtx); } .adp-section--cream .adp-value p { color: #55524a; } .adp-section--cream .adp-value h3 { color: var(--adp-ink); } /* ---- Invitation: dark card, double gold frame ---- */ .adp-invite { background: var(--adp-noir-2); border-color: rgba(178, 141, 84, .5); } .adp-invite::before { border-color: rgba(178, 141, 84, .28); } .adp-section--cream .adp-invite { background: var(--adp-paper); border-color: var(--adp-gold-soft); } /* ---- Buttons: gold is the action color ---- */ .adp-btn--primary { background: var(--adp-goldlx); color: #1d1a14; border-color: var(--adp-goldlx); } .adp-btn--primary:hover { background: var(--adp-creamtx); border-color: var(--adp-creamtx); color: #1d1a14; } .adp-btn--outline { border-color: var(--adp-cream50); color: var(--adp-creamtx); } .adp-btn--outline:hover { background: var(--adp-goldlx); border-color: var(--adp-goldlx); color: #1d1a14; } .adp-section--cream .adp-btn--outline { border-color: #3c3a34; color: var(--adp-ink); } .adp-section--cream .adp-btn--outline:hover { background: var(--adp-ink); color: var(--adp-creamtx); } /* ---- Forms on noir ---- */ .adp-form label { color: var(--adp-cream70); } .adp-form input[type="text"], .adp-form input[type="email"], .adp-form input[type="tel"], .adp-form select, .adp-form textarea { background: var(--adp-noir-3); border: 1px solid var(--adp-hairline); color: var(--adp-creamtx); } .adp-form input:focus, .adp-form select:focus, .adp-form textarea:focus { border-color: var(--adp-goldlx); box-shadow: 0 0 0 3px rgba(178, 141, 84, .18); } .adp-contact__details, .adp-contact__details h3, .adp-contact__details h4 { color: var(--adp-creamtx); } .adp-contact__details p { color: var(--adp-cream70); } /* ---- Embed slot / OwnerRez placeholder ---- */ .adp-ownerrez__placeholder { background: var(--adp-noir-3); border: 1px solid var(--adp-hairline); } .adp-ownerrez__placeholder p { color: var(--adp-cream70); } /* ---- Page head (plain hero) ---- */ .adp-page-head--solid .adp-lede { color: var(--adp-cream70); } /* ---- Gallery ---- */ .adp-gallery__item { background: var(--adp-noir-3); } /* ---- Cover (if chosen) ---- */ .adp-cover { background: var(--adp-noir); } .adp-cover__title { color: var(--adp-creamtx); } .adp-cover__masthead { color: var(--adp-cream50); border-color: var(--adp-hairline); } .adp-cover__caption { color: var(--adp-cream70); } /* ---- Footer: deepest ground, gold rules ---- */ .adp-footer { background: #171c17; } .adp-footer__cta { border-bottom-color: rgba(178, 141, 84, .3); } .adp-footer__cta h2 { color: var(--adp-creamtx); } .adp-footer a:hover { color: var(--adp-goldlx); } /* ---- Scroll cue / misc ---- */ ::selection { background: var(--adp-goldlx); color: #1d1a14; } /* ========================================================================= ═══ MOTION EDITION — cinematic hero + site-wide modern animation ═══ ========================================================================= */ html { scroll-behavior: smooth; } /* ---- CINEMA HERO: full-viewport framed photograph ---- */ .adp-cinema { background: var(--adp-noir); padding: clamp(10px, 1.2vw, 18px); } .adp-cinema__stage { position: relative; overflow: hidden; min-height: calc(100vh - 165px); display: flex; align-items: flex-end; } .adp-cinema__media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.07); will-change: transform; } .adp-cinema--kb .adp-cinema__media { animation: adp-cinema-kb 8s var(--adp-ease) forwards; } @keyframes adp-cinema-kb { to { transform: scale(1); } } .adp-cinema__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23, 28, 23, .84) 0%, rgba(23, 28, 23, .22) 48%, rgba(23, 28, 23, .34) 100%); } .adp-cinema__content { position: relative; z-index: 2; width: 100%; padding: clamp(28px, 4.2vw, 72px); } .adp-cinema__badge { display: inline-block; border: 1px solid rgba(178, 141, 84, .55); padding: 9px 18px; font-family: var(--adp-font-ui); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--adp-goldlx); background: rgba(23, 28, 23, .25); backdrop-filter: blur(2px); } .adp-cinema__title { font-family: var(--adp-font-headline); font-weight: 300; font-size: clamp(44px, 6.6vw, 106px); line-height: 1.03; letter-spacing: -.005em; color: var(--adp-creamtx); margin: clamp(20px, 2.6vw, 36px) 0 clamp(18px, 2.2vw, 30px); max-width: 14ch; text-wrap: balance; } .adp-cinema__title em { font-style: italic; } .adp-cinema__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; } .adp-cinema__caption { max-width: 42ch; margin: 0; font-size: 17px; line-height: 1.7; color: rgba(242, 234, 217, .85); border-left: 1px solid rgba(178, 141, 84, .55); padding-left: 20px; } .adp-cinema__cta { flex-shrink: 0; } .adp-cinema__meta { margin-top: clamp(24px, 3vw, 44px); padding-top: 18px; border-top: 1px solid rgba(242, 234, 217, .24); display: flex; justify-content: space-between; gap: 20px; font-family: var(--adp-font-ui); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(242, 234, 217, .6); } /* ---- Word-by-word headline rise ---- */ .adp-words .adp-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } .adp-words .adp-word > span { display: inline-block; transform: translateY(112%); transition: transform 950ms var(--adp-ease); transition-delay: var(--adp-word-delay, 0ms); } .adp-words.is-inview .adp-word > span { transform: none; } /* ---- Image unveil: curtain wipe + settle ---- */ .adp-unveil { position: relative; overflow: hidden; } .adp-unveil > img { transform: scale(1.1); transition: transform 1500ms var(--adp-ease); } .adp-unveil::after { content: ""; position: absolute; inset: -1px; z-index: 2; background: var(--adp-curtain, var(--adp-noir)); transform-origin: top; transition: transform 1000ms var(--adp-ease) 60ms; } .adp-unveil.is-inview > img { transform: scale(1.001); } .adp-unveil.is-inview::after { transform: scaleY(0); } .adp-section--cream .adp-unveil { --adp-curtain: var(--adp-paper-deep); } /* keep card hover zoom working after unveil */ .adp-card__link:hover .adp-unveil.is-inview > img { transform: scale(1.055); } /* ---- Reduced motion: everything settles instantly ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .adp-cinema--kb .adp-cinema__media { animation: none; transform: none; } .adp-words .adp-word > span { transform: none !important; transition: none !important; } .adp-unveil > img { transform: none !important; transition: none !important; } .adp-unveil::after { display: none !important; } } @media (max-width: 820px) { .adp-cinema__stage { min-height: calc(100svh - 120px); } .adp-cinema__row { flex-direction: column; align-items: flex-start; gap: 20px; } .adp-cinema__meta span:last-child { display: none; } } /* ========================================================================= BRAND CONTROLS — customizer logos + scrolled-logo swap ========================================================================= */ .adp-logo--custom { display: block; height: clamp(40px, 4vw, 52px); width: auto; transition: height 500ms var(--adp-ease); } .adp-header--masthead.is-solid .adp-logo--custom { height: 34px; } .adp-footer__brand .adp-logo--custom { height: 52px; } /* Scrolled-logo variant: swap when the sticky bar compresses */ .adp-brand__scrolled { display: none; } .adp-header--masthead.is-solid .adp-brand__default:has(+ .adp-brand__scrolled) { display: none; } .adp-header--masthead.is-solid .adp-brand__scrolled { display: inline-flex; } /* :has() fallback for older browsers via JS class */ .adp-header--masthead.is-solid.adp-has-alt-logo .adp-brand__default { display: none; } /* Mobile overlay: booking button sits below the menu links */ .adp-overlay__book { margin-top: 26px; } /* ========================================================================= AUDIT FIXES — contrast & legibility ========================================================================= */ /* 1 · Embed-slot placeholder inherited light-theme ink on the dark ground. Scope its type to the surrounding atmosphere. */ .adp-ownerrez__placeholder h2, .adp-ownerrez__placeholder h3, .adp-ownerrez__placeholder .adp-h3 { color: var(--adp-creamtx); } .adp-ownerrez__placeholder p { color: var(--adp-cream70); } .adp-section--cream .adp-ownerrez__placeholder h2, .adp-section--cream .adp-ownerrez__placeholder h3, .adp-section--cream .adp-ownerrez__placeholder .adp-h3 { color: var(--adp-ink); } .adp-section--cream .adp-ownerrez__placeholder p { color: #55524a; } /* 2 · Card index numerals sat cream-on-cream over pale photography. Darken the corner they occupy so they read on any image. */ .adp-card__media { position: relative; } .adp-card__media::before { content: ""; position: absolute; inset: 0 auto auto 0; z-index: 1; width: 120px; height: 92px; background: linear-gradient(150deg, rgba(23, 28, 23, .58) 0%, rgba(23, 28, 23, .22) 46%, rgba(23, 28, 23, 0) 78%); pointer-events: none; opacity: 0; transition: opacity 600ms var(--adp-ease); } .adp-card__media--indexed::before { opacity: 1; } /* progressive enhancement for browsers without the class (e.g. cached markup) */ .adp-card__media:has(.adp-card__idx)::before { opacity: 1; } .adp-card__idx { text-shadow: 0 1px 3px rgba(23, 28, 23, .85), 0 1px 18px rgba(23, 28, 23, .55); } /* ========================================================================= CLIENT BRAND LOGO — stacked AD lockup (monogram over PROPERTIES) Sized so the wordmark stays legible; the sticky bar swaps to the mark. ========================================================================= */ .adp-logo--brand, .adp-logo--mark { display: block; width: auto; height: auto; transition: max-height 500ms var(--adp-ease); } /* Header: generous at rest so "PROPERTIES" reads */ .adp-header--masthead .adp-logo--brand { max-height: clamp(58px, 6.2vw, 84px); } .adp-header--masthead .adp-logo--mark { max-height: clamp(34px, 3.4vw, 44px); } .adp-header--masthead.is-solid .adp-logo--brand { max-height: 46px; } /* Footer lockup */ .adp-footer__brand .adp-logo--brand { max-height: 92px; margin-bottom: 4px; } /* Mobile overlay */ .adp-overlay .adp-logo--brand { max-height: 66px; } @media (max-width: 820px) { .adp-header--masthead .adp-logo--brand { max-height: 54px; } .adp-header--masthead.is-solid .adp-logo--brand { max-height: 42px; } .adp-footer__brand .adp-logo--brand { max-height: 74px; } } /* ========================================================================= ═══ IVORY EDITION — the client-locked direction ═══ Per client references (Lindsey Brooke · Living Oak · Noble Lane · Ethan Charles): light, clean, elegant, to the point. Ivory ground, ink type, forest-green brand accents, logo left / menu right, full-bleed photo hero (no video). Cascade-overrides the dark layer. ========================================================================= */ :root { --iv-bg: #fdfcfa; --iv-bg-soft: #f6f3ee; --iv-ink: #22211e; --iv-ink-soft: #55524b; --iv-green: #435246; /* the logo's own forest green */ --iv-green-dk: #384439; --iv-hairline: rgba(34, 33, 30, .14); } /* ---- Ground + type ---- */ body, .adp-section { background: var(--iv-bg); color: var(--iv-ink); } .adp-h1, .adp-h2, .adp-h3, h1, h2, h3 { color: var(--iv-ink); } p, .adp-lede, li { color: var(--iv-ink-soft); } .adp-section--cream, .adp-section--paper, .adp-section--white { background: var(--iv-bg); } .adp-section--deep, .adp-section--green, .adp-section--teal { background: var(--iv-bg-soft); color: var(--iv-ink); } .adp-section--deep .adp-h2, .adp-section--deep p, .adp-section--deep .adp-quote, .adp-section--green .adp-h2, .adp-section--green p { color: var(--iv-ink); } .adp-eyebrow, .adp-eyebrow--gold, .adp-eyebrow--cream { color: var(--iv-green); } a { color: var(--iv-green); } .adp-textlink { color: var(--iv-ink); border-color: var(--iv-green); } .adp-textlink:hover { color: var(--iv-green); } ::selection { background: var(--iv-green); color: #fff; } /* ---- Header: one row — logo LEFT, menu RIGHT (client spec) ---- */ .adp-header--masthead { background: var(--iv-bg); border-bottom: 1px solid var(--iv-hairline); } .adp-header--masthead .adp-header__top { display: none; } .adp-header--masthead .adp-header__row, .adp-header--masthead .adp-header__navrow { display: flex; align-items: center; justify-content: space-between; max-width: 1380px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 44px); min-height: 82px; border: 0; } .adp-header--masthead .adp-header__brand { display: flex; align-items: center; margin: 0; } .adp-header--masthead .adp-nav { display: flex; gap: clamp(18px, 2.6vw, 40px); } .adp-header--masthead .adp-nav a { font-family: var(--adp-font-ui); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--iv-ink); padding: 6px 0; } .adp-header--masthead .adp-nav a:hover, .adp-header--masthead .adp-nav .current-menu-item a { color: var(--iv-green); } .adp-header--masthead .adp-nav a::after { background: var(--iv-green); } .adp-header--masthead.is-solid { background: rgba(253, 252, 250, .96); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--iv-hairline); } .adp-header--masthead .adp-logo--brand, .adp-header--masthead .adp-logo--mark { max-height: 56px; } .adp-header--masthead.is-solid .adp-logo--brand { max-height: 46px; } .adp-header__row .adp-header__book { color: var(--iv-green) !important; font-weight: 600; } .adp-burger span, .adp-burger span::before, .adp-burger span::after { background: var(--iv-ink); } .adp-overlay { background: var(--iv-bg); } .adp-overlay a { color: var(--iv-ink); } /* ---- Hero: full-bleed photograph, centred statement, no frame ---- */ .adp-cinema { padding: 0; background: var(--iv-bg); } .adp-cinema__stage { min-height: calc(100vh - 82px); align-items: center; } .adp-cinema__scrim { background: linear-gradient(to top, rgba(20, 22, 19, .46) 0%, rgba(20, 22, 19, .16) 45%, rgba(20, 22, 19, .22) 100%); } .adp-cinema__content { text-align: center; display: flex; flex-direction: column; align-items: center; padding: clamp(28px, 4vw, 64px); } .adp-cinema__badge, .adp-cinema__meta { display: none; } .adp-cinema__title { max-width: 18ch; font-size: clamp(38px, 5vw, 72px); margin: 0 auto clamp(18px, 2.4vw, 28px); } .adp-cinema__row { flex-direction: column; align-items: center; gap: 22px; } .adp-cinema__caption { border-left: 0; padding-left: 0; text-align: center; max-width: 62ch; color: rgba(255, 255, 255, .93); } /* ---- Buttons: quiet, editorial ---- */ .adp-btn--primary { background: var(--iv-green); color: #fff; } .adp-btn--primary:hover { background: var(--iv-green-dk); } .adp-btn--outline, .adp-btn--outline-light { border-color: var(--iv-ink); color: var(--iv-ink); background: transparent; } .adp-btn--outline:hover, .adp-btn--outline-light:hover { background: var(--iv-ink); color: var(--iv-bg); } /* ---- Cards / grids / bands on light ---- */ .adp-card__media::before { background: linear-gradient(150deg, rgba(20,22,19,.32) 0%, rgba(20,22,19,.12) 46%, rgba(20,22,19,0) 78%); } .adp-card__title { color: var(--iv-ink); } .adp-card__meta, .adp-section--cream .adp-card__meta { color: #6d6961; } .adp-quote__stars { color: var(--iv-green); } .adp-quote p, .adp-quote cite { color: var(--iv-ink); } .adp-band__mark { color: rgba(34, 33, 30, .05); } .adp-stat__num { color: var(--iv-ink); } .adp-stat__label { color: var(--iv-ink-soft); } .adp-value__num { color: var(--iv-green); } .adp-invite { border-color: var(--iv-hairline); } .adp-unveil { --adp-curtain: var(--iv-bg); } .adp-words .adp-word > span { will-change: transform; } /* ---- Forms ---- */ .adp-form input, .adp-form select, .adp-form textarea { background: #fff; color: var(--iv-ink); border-color: var(--iv-hairline); } .adp-form label { color: var(--iv-ink); } /* ---- Footer: grounded in the brand's forest green ---- */ .adp-footer { background: var(--iv-green); } .adp-footer a, .adp-footer p, .adp-footer span, .adp-footer h2, .adp-footer h4 { color: rgba(242, 234, 217, .92); } .adp-footer a:hover { color: #ffffff; } .adp-footer .adp-footer__title { color: rgba(242, 234, 217, .62); } .adp-footer__bar p { color: rgba(242, 234, 217, .7); } .adp-footer .adp-btn--outline-light { border-color: rgba(242, 234, 217, .6); color: #f2ead9; background: transparent; } .adp-footer .adp-btn--outline-light:hover { background: #f2ead9; color: var(--iv-green); } /* footer shows the cream logo on green — correct by design */ @media (max-width: 820px) { .adp-header--masthead .adp-header__row, .adp-header--masthead .adp-header__navrow { min-height: 68px; } .adp-cinema__stage { min-height: calc(100svh - 68px); } .adp-cinema__title { font-size: clamp(32px, 8.4vw, 46px); } } /* ---- Property photo gallery (single property) ---- */ .adp-prop-gallery { padding: clamp(30px, 4vw, 60px) 0 clamp(50px, 6vw, 90px); } .adp-gallery--property { display: grid; gap: clamp(10px, 1.4vw, 22px); grid-template-columns: repeat(2, 1fr); } .adp-gallery--property .adp-gallery__item { margin: 0; overflow: hidden; } .adp-gallery--property .adp-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .adp-gallery--property .adp-gallery__item[data-lead="1"] { grid-column: 1 / -1; } .adp-gallery--property .adp-gallery__item[data-lead="1"] img { aspect-ratio: 21 / 10; } .adp-gallery--property .adp-gallery__item:not([data-lead="1"]) img { aspect-ratio: 4 / 3; } @media (max-width: 700px) { .adp-gallery--property { grid-template-columns: 1fr; } } /* ---- IVORY corrections (audit) ---- */ /* invitation box carried its noir ground — quiet ivory panel instead */ .adp-invite { background: var(--iv-bg-soft); } .adp-invite .adp-h2, .adp-invite p { color: var(--iv-ink); } .adp-invite .adp-lede { color: var(--iv-ink-soft); } /* footer: list items + menu links live on green — cream, not ink */ .adp-footer li, .adp-footer .menu-item, .adp-footer .menu-item a { color: rgba(242, 234, 217, .92); } /* contact info card headings had cream ink on ivory */ .adp-contact-info h3, .adp-contact-info h4, .adp-contact-info .adp-h3, .adp-contact-info .adp-h4, .adp-section--white .adp-h4, .adp-section--cream .adp-h4 { color: var(--iv-ink); } /* Book Now inside the mobile overlay is a filled button — white label */ .adp-overlay .adp-header__book, .adp-overlay__book { color: #ffffff !important; } /* the header text-link version stays green only in the bar */ /* ---- Mobile overlay: force the ivory ground (beats the noir-era rules) ---- */ #adp-overlay.adp-overlay { background: var(--iv-bg); } #adp-overlay .adp-overlay__list a, #adp-overlay .menu-item a, #adp-overlay li { color: var(--iv-ink); } #adp-overlay .adp-overlay__list a:hover { color: var(--iv-green); } #adp-overlay .adp-overlay__portal { color: var(--iv-green); } #adp-overlay .adp-header__book, #adp-overlay .adp-overlay__book { color: #fff !important; } #adp-overlay .adp-overlay__close span { background: var(--iv-ink); } /* ---- IVORY: subpage header + overlap cards + contact card ---- */ /* the noir layer styles the inner-page header with higher specificity; the ID wins cleanly */ #adp-header.adp-header--masthead { background: var(--iv-bg); border-bottom: 1px solid var(--iv-hairline); } #adp-header.adp-header--masthead.is-solid { background: rgba(253, 252, 250, .96); } #adp-header .adp-nav a, #adp-header .menu-item a { color: var(--iv-ink); } #adp-header .adp-nav a:hover { color: var(--iv-green); } #adp-header .adp-header__portal, #adp-header .adp-header__book { color: var(--iv-green); } /* design/about process cards carried the noir panel */ .adp-overlap__card { background: var(--iv-bg-soft); } .adp-overlap__card .adp-h2, .adp-overlap__card h2, .adp-overlap__card h3 { color: var(--iv-ink); } .adp-overlap__card p, .adp-overlap__card .adp-lede { color: var(--iv-ink-soft); } .adp-overlap__card .adp-eyebrow { color: var(--iv-green); } /* contact details card: ink on ivory */ .adp-contact__details, .adp-contact__details p, .adp-contact__details a, .adp-contact__details .adp-h3, .adp-contact__details .adp-h4, .adp-contact__details li { color: var(--iv-ink); } .adp-contact__details .adp-lede { color: var(--iv-ink-soft); } .adp-contact__details .adp-eyebrow { color: var(--iv-green); } /* last two: cream lede/eyebrow variants sitting on light sections */ .adp-section--white .adp-lede, .adp-section--cream .adp-lede, .adp-section--white p.adp-lede { color: var(--iv-ink-soft); } .adp-section--white .adp-eyebrow, .adp-section--cream .adp-eyebrow { color: var(--iv-green); } /* final pair */ .adp-section--paper .adp-lede { color: var(--iv-ink-soft); } /* the OwnerRez embed slot is retired (Wander era) — never render its placeholder */ .adp-ownerrez__slot, .adp-ownerrez__placeholder { display: none !important; } /* ---- Compact footer & booking band (reference register: quiet, thin) ---- */ .adp-footer { padding: clamp(40px, 5vw, 64px) 0 0; } .adp-footer .adp-container { padding-top: 0; } .adp-footer__grid { padding: 0 0 clamp(26px, 3vw, 40px); gap: clamp(24px, 4vw, 64px); grid-template-columns: 1.4fr 1fr 1fr; } .adp-footer__brand .adp-logo--brand { max-height: 64px; margin-bottom: 2px; } .adp-footer__brand p { font-size: 14px; } .adp-footer__bar { padding: 14px 0 22px; } /* booking band: quiet invitation, not a monument */ .adp-invite { padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 56px); } .adp-invite .adp-h2 { font-size: clamp(26px, 3vw, 38px); } .adp-invite .adp-eyebrow { margin-bottom: 10px; } .adp-invite-wrap, .adp-section .adp-invite { margin-top: 0; } .adp-section--white:last-of-type { padding-top: clamp(30px, 4vw, 60px); padding-bottom: clamp(50px, 6vw, 90px); } /* ---- Property grid: the Living Oak register (client's named reference) ---- Clean photos (no scrim, no hover-overlay text), caption BELOW the image in small tracked serif caps, generous air between tiles. */ .adp-card__media::before { background: none !important; } .adp-card__overlay { display: none !important; } .adp-card { background: transparent; box-shadow: none; } .adp-card__title { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin: 16px 0 4px; color: var(--iv-ink); } .adp-card__meta { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #78746b; } .adp-card__media img { transition: transform 900ms var(--adp-ease); } .adp-card:hover .adp-card__media img { transform: scale(1.04); } /* generous Living-Oak air between tiles */ .adp-grid--properties, .adp-cards { row-gap: clamp(40px, 5vw, 72px); column-gap: clamp(22px, 3vw, 44px); } /* ═══ PHASE 1 · header: Book Now joins the flex row (kills the CONTACT overlap) ═══ */ #adp-header .adp-header__row .adp-header__portal { position: static; top: auto; right: auto; white-space: nowrap; margin-left: clamp(8px, 1.4vw, 20px); padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--iv-hairline); } /* ═══ PHASE 2 · Properties = Living Oak portfolio, to the letter ═══ Their register (from the client's own capture): small tracked page label, TWO columns, one-line caption under each photo: "NAME - CITY, ST". */ .adp-grid--properties, .adp-cards { grid-template-columns: repeat(2, 1fr) !important; column-gap: clamp(40px, 5.5vw, 88px); row-gap: clamp(48px, 5.5vw, 84px); max-width: 1120px; margin-inline: auto; } .adp-card__body { padding: 0; } .adp-card__title, .adp-card__meta { display: inline; } .adp-card__title { font-size: 13.5px; letter-spacing: .12em; margin: 14px 0 0; } .adp-card__meta { font-size: 13.5px; letter-spacing: .12em; color: var(--iv-ink); } .adp-card__meta::before { content: " \2013\00a0 "; } @media (max-width: 760px) { .adp-grid--properties, .adp-cards { grid-template-columns: 1fr !important; } } /* ═══ PHASE 1/2 corrections with the REAL selectors ═══ */ #adp-header .adp-header__right { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); } #adp-header .adp-header__row .adp-nav { position: static; } /* the property grid container is .adp-grid — Living Oak two-column */ .adp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: clamp(40px, 5.5vw, 88px) !important; row-gap: clamp(48px, 5.5vw, 84px) !important; max-width: 1120px; margin-inline: auto; } .adp-grid .adp-card__idx { display: none; } /* LO tiles carry no numbers */ @media (max-width: 760px) { .adp-grid { grid-template-columns: 1fr !important; } } /* collage layout carried 12-col mixed spans — flatten to LO's even two columns */ .adp-grid.adp-collage { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .adp-grid.adp-collage > .adp-grid__item, .adp-grid > .adp-grid__item { grid-column: auto !important; grid-row: auto !important; } /* ═══ PHASE 3 · Cinematic luxury hero ═══ Bigger, lighter serif; word-by-word rise; deep bottom vignette; slow 12s Ken-Burns; ghost CTA; scroll cue. Calm, expensive. */ .adp-cinema__media { animation-duration: 12s !important; } .adp-cinema__scrim { background: linear-gradient(to bottom, rgba(15, 17, 14, .30) 0%, rgba(15, 17, 14, 0) 26%), linear-gradient(to top, rgba(15, 17, 14, .58) 0%, rgba(15, 17, 14, .10) 46%); } .adp-cinema__title { font-size: clamp(44px, 6vw, 88px); font-weight: 300; line-height: 1.08; letter-spacing: .005em; max-width: 16ch; text-wrap: balance; } /* italic serif emphasis on the two idea-words — pure CSS, no markup change */ .adp-cinema__title .adp-word:nth-child(2), .adp-cinema__title .adp-word:nth-child(5) { font-style: italic; } /* word-rise refinement: longer, softer travel */ .adp-cinema__title .adp-word > span { transition-duration: 1100ms; } /* ghost CTA over photography */ .adp-cinema__content .adp-btn { background: rgba(253, 252, 250, .12); border: 1px solid rgba(253, 252, 250, .65); color: #fff; backdrop-filter: blur(6px); padding: 15px 34px; letter-spacing: .18em; transition: background 500ms var(--adp-ease), border-color 500ms var(--adp-ease), transform 500ms var(--adp-ease); } .adp-cinema__content .adp-btn:hover { background: rgba(253, 252, 250, .92); color: var(--iv-ink); transform: translateY(-2px); } /* scroll cue: a slow-breathing hairline */ .adp-cinema__stage::after { content: ""; position: absolute; left: 50%; bottom: 26px; width: 1px; height: 54px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85)); animation: adp-cue 2.6s var(--adp-ease) infinite; } @keyframes adp-cue { 0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .adp-cinema__stage::after { animation: none; } } /* ═══ PHASE 4 · Site-wide premium polish ═══ */ /* display scale up, lighter */ .adp-h2 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 300; line-height: 1.14; } .adp-section-heading .adp-h2 em, .adp-h2 em { font-style: italic; } /* eyebrows: wide tracking + a thin forest rule that draws in */ .adp-eyebrow { letter-spacing: .26em; font-size: 12px; } .adp-eyebrow::after { content: ""; display: block; width: 44px; height: 1px; background: var(--iv-green); margin-top: 14px; opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--adp-ease) 250ms; } [style*="text-align: center"] .adp-eyebrow::after, .adp-center .adp-eyebrow::after, .adp-section-heading--center .adp-eyebrow::after { margin-inline: auto; transform-origin: center; } .is-inview .adp-eyebrow::after, .adp-eyebrow.is-inview::after { transform: scaleX(1); } /* generous section air */ section.adp-section { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); } /* property tiles: caption tracking eases open on hover — a quiet LO-plus detail */ .adp-card__title, .adp-card__meta { transition: letter-spacing 600ms var(--adp-ease), color 400ms; } .adp-card:hover .adp-card__title, .adp-card:hover .adp-card__meta { letter-spacing: .17em; color: var(--iv-green); } /* split-feature images unveil (curtain) already class-tagged adp-unveil — soften */ .adp-unveil::after { transition-duration: 1100ms; } /* text links: underline draws in */ .adp-textlink { position: relative; } /* form focus: forest ring */ .adp-form input:focus, .adp-form select:focus, .adp-form textarea:focus { outline: none; border-color: var(--iv-green); box-shadow: 0 0 0 3px rgba(67, 82, 70, .14); } /* ═══ THE DEFINITIVE INK PASS ═══ Every noir-era cream text class that lives on light ground → ink. (Photo-overlay classes — cinema/cover/splithero — rightly stay cream.) */ .adp-split__text, .adp-split__text p, .adp-split__caption, .adp-split__index, .adp-sh__body, .adp-overlap__caption, .adp-value h3, .adp-value p, .adp-filter, .adp-page-head--solid .adp-lede, .adp-lede { color: var(--iv-ink-soft); } .adp-split__text strong, .adp-sh__body strong { color: var(--iv-ink); } .adp-quote__name { color: var(--iv-ink); } /* ═══ LUXURY II · header floats transparent over the hero (LBD register) ═══ */ body.adp-has-cinema #adp-header.adp-header--masthead:not(.is-solid) { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; z-index: 40; } body.adp-has-cinema #adp-header.adp-header--masthead:not(.is-solid) .adp-nav a, body.adp-has-cinema #adp-header.adp-header--masthead:not(.is-solid) .adp-header__portal { color: rgba(255, 255, 255, .96); } body.adp-has-cinema #adp-header.adp-header--masthead:not(.is-solid) .adp-header__portal { border-left-color: rgba(255, 255, 255, .35); } body.adp-has-cinema #adp-header.adp-header--masthead:not(.is-solid) .adp-nav a::after { background: #fff; } body.adp-has-cinema #adp-header.adp-header--masthead:not(.is-solid) .adp-burger span, body.adp-has-cinema #adp-header.adp-header--masthead:not(.is-solid) .adp-burger span::before, body.adp-has-cinema #adp-header.adp-header--masthead:not(.is-solid) .adp-burger span::after { background: #fff; } /* brand: light lockup over the photo, dark on the solid bar */ .adp-brand__onlight { display: inline-flex; } .adp-brand__onphoto { display: none; } body.adp-has-cinema #adp-header:not(.is-solid) .adp-brand__onlight { display: none; } body.adp-has-cinema #adp-header:not(.is-solid) .adp-brand__onphoto { display: inline-flex; } /* sticky solid state slides in */ #adp-header.is-solid { position: fixed; top: 0; left: 0; right: 0; z-index: 60; } body.adp-has-cinema .adp-cinema__stage { min-height: 100vh; } body.adp-has-cinema .adp-cinema__stage { min-height: 100svh; } /* hero: editorial lower-left composition */ .adp-cinema__content { text-align: left; align-items: flex-start; justify-content: flex-end; width: 100%; max-width: 1380px; margin-inline: auto; padding: 0 clamp(20px, 3vw, 44px) clamp(72px, 9vh, 120px); } .adp-cinema__stage { align-items: flex-end; } .adp-cinema__title { margin: 0 0 26px; max-width: 15ch; } .adp-cinema__row { align-items: flex-start; } .adp-cinema__stage::after { left: auto; right: clamp(28px, 4vw, 60px); } @media (max-width: 820px) { .adp-cinema__content { padding-bottom: 84px; } } /* over-photo nav: a touch more top vignette so white nav always reads */ body.adp-has-cinema .adp-cinema__scrim { background: linear-gradient(to bottom, rgba(15, 17, 14, .42) 0%, rgba(15, 17, 14, 0) 30%), linear-gradient(to top, rgba(15, 17, 14, .58) 0%, rgba(15, 17, 14, .10) 46%); } /* ═══════════════════════════════════════════════════════════════════════ MOTION SYSTEM — premium scroll choreography Transform/opacity only. Content is visible by default; the .adp-motion class (added by JS) is what arms the animations, so if JS never runs nothing is ever hidden. Crawlers see the full page either way. ═══════════════════════════════════════════════════════════════════════ */ :root { --adp-ease-out: cubic-bezier(.16, 1, .3, 1); --adp-ease-io: cubic-bezier(.65, 0, .35, 1); --adp-dur: 900ms; --adp-delay: 0ms; } /* Armed only when JS is present */ .adp-motion .adp-anim { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity var(--adp-dur) var(--adp-ease-out) var(--adp-delay), transform var(--adp-dur) var(--adp-ease-out) var(--adp-delay); will-change: transform, opacity; } .adp-motion .adp-anim.is-inview { opacity: 1; transform: none; will-change: auto; } /* Directional variants */ .adp-motion .adp-anim--left { transform: translate3d(-46px, 0, 0); } .adp-motion .adp-anim--right { transform: translate3d(46px, 0, 0); } .adp-motion .adp-anim--scale { transform: scale(.94); } .adp-motion .adp-anim--blur { filter: blur(9px); transition: opacity var(--adp-dur) var(--adp-ease-out) var(--adp-delay), transform var(--adp-dur) var(--adp-ease-out) var(--adp-delay), filter var(--adp-dur) var(--adp-ease-out) var(--adp-delay); } .adp-motion .adp-anim--blur.is-inview { filter: none; } /* Headline word-rise */ .adp-w { display: inline-block; overflow: hidden; vertical-align: bottom; } .adp-w > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1150ms var(--adp-ease-out) var(--adp-delay); } .adp-motion .adp-lift.is-inview .adp-w > span, .adp-lift.is-inview .adp-w > span { transform: none; } .adp-motion-off .adp-w > span { transform: none; } /* Photographs are never masked by an overlay — they fade and settle instead, so a JavaScript hiccup can never leave a client's photo hidden. */ .adp-motion .adp-card__media img, .adp-motion .adp-split__media img, .adp-motion .adp-overlap__media img { transition: transform 1400ms var(--adp-ease-out); } /* Parallax frames clip their oversized image */ .adp-parallax-frame { overflow: hidden; } .adp-parallax { will-change: transform; } /* Reading-progress hairline, pinned under the sticky bar */ .adp-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--iv-green); transform: scaleX(0); transform-origin: left; z-index: 70; pointer-events: none; opacity: 0; transition: opacity 400ms; } #adp-header.is-solid ~ .adp-progress, body:has(#adp-header.is-solid) .adp-progress { opacity: 1; } /* Sticky header motion */ #adp-header { transition: background 550ms var(--adp-ease-out), transform 550ms var(--adp-ease-out), box-shadow 550ms; } #adp-header.is-solid { box-shadow: 0 1px 0 var(--iv-hairline), 0 10px 40px -28px rgba(20,22,19,.5); } /* Cards: cursor tilt is set inline by JS; this governs the easing back */ .adp-card { transition: transform 600ms var(--adp-ease-out); transform-style: preserve-3d; } .adp-card__media { transition: transform 1100ms var(--adp-ease-out); } .adp-card:hover .adp-card__media img { transform: scale(1.07); } .adp-btn { transition: transform 450ms var(--adp-ease-out), background 450ms, color 450ms, border-color 450ms; } /* Statistics */ .adp-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--iv-hairline); border-bottom: 1px solid var(--iv-hairline); padding: clamp(36px, 4.5vw, 64px) 0; } .adp-statc { text-align: center; } .adp-statc__n { display: block; font-family: var(--adp-font-display, Georgia, serif); font-size: clamp(38px, 4.4vw, 66px); font-weight: 300; line-height: 1; color: var(--iv-ink); font-variant-numeric: tabular-nums; } .adp-statc__l { display: block; margin-top: 12px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--iv-ink-soft); } @media (max-width: 760px) { .adp-stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 34px; } } /* Story steps (problem → solution) */ .adp-story { display: grid; gap: clamp(28px, 3.4vw, 56px); grid-template-columns: repeat(3, 1fr); } .adp-story__step { position: relative; padding-top: 30px; border-top: 1px solid var(--iv-hairline); } .adp-story__step::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 100%; background: var(--iv-green); transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--adp-ease-out) var(--adp-delay); } .adp-story__step.is-inview::before { transform: scaleX(1); } .adp-story__n { font-size: 11.5px; letter-spacing: .26em; color: var(--iv-green); display: block; margin-bottom: 14px; } .adp-story__h { font-size: clamp(21px, 2vw, 27px); font-weight: 400; line-height: 1.25; margin: 0 0 10px; color: var(--iv-ink); } .adp-story__p { font-size: 15.5px; line-height: 1.75; color: var(--iv-ink-soft); margin: 0; } @media (max-width: 820px) { .adp-story { grid-template-columns: 1fr; } } /* Section seam — a hairline that draws itself as the seam arrives */ .adp-seam { height: 1px; background: var(--iv-hairline); transform: scaleX(0); transform-origin: center; transition: transform 1300ms var(--adp-ease-out); } .adp-seam.is-inview { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .adp-motion .adp-anim, .adp-motion .adp-curtain::after, .adp-w > span, .adp-story__step::before, .adp-seam { transition: none !important; } .adp-motion .adp-anim { opacity: 1 !important; transform: none !important; filter: none !important; } .adp-motion .adp-curtain::after { transform: scaleX(0) !important; } .adp-w > span { transform: none !important; } .adp-progress { display: none; } } /* stats grid + value cards inherit the stagger cascade */ .adp-stats__grid > .adp-stat, .adp-values .adp-value { /* delays set by JS via --adp-delay */ } .adp-stat__num { display: block; } /* Words are pre-split server-side, so reserve their line box immediately — nothing reflows after load (keeps CLS at zero). */ .adp-lift { display: block; } .adp-w { line-height: inherit; } /* hero media: promote once, so the parallax never triggers layout */ .adp-cinema__media, .adp-cinema__content { will-change: transform; backface-visibility: hidden; } /* stats band: ivory ground, ink figures (the noir panel was still winning) */ .adp-stats { background: var(--iv-bg); border-top: 1px solid var(--iv-hairline); border-bottom: 1px solid var(--iv-hairline); } .adp-stats .adp-stat__num { color: var(--iv-ink); font-size: clamp(38px, 4.4vw, 66px); font-weight: 300; font-variant-numeric: tabular-nums; } .adp-stats .adp-stat__num em, .adp-stats .adp-stat__num sup { color: var(--iv-green); } .adp-stats .adp-stat__label { color: var(--iv-ink-soft); font-size: 11.5px; } /* ═══ FAIL-OPEN GUARANTEE ═══ No motion class may ever leave content invisible. Even if JavaScript never runs, never finishes, or errors halfway, everything below is visible. This rule is deliberately last so it wins. */ /* the legacy unveil panel is superseded by the reveal below (which has a CSS failsafe); only its ::before is retired */ .adp-unveil::before { display: none !important; } .adp-unveil { clip-path: none !important; } /* Photographs never animate opacity — only scale. A photo cannot be hidden by a bug that never fires, because its resting state is visible. */ .adp-card__media img, .adp-split__media img, .adp-overlap__media img, .adp-gallery__item img, .adp-card img { opacity: 1 !important; visibility: visible !important; } /* ═══ CARD MEDIA — correct geometry ═══ The frame carries the aspect ratio; the photograph fills it absolutely. (An earlier rule put the ratio on the instead, which collapsed the frame to zero height and clipped every photo out of existence.) */ .adp-grid .adp-card__media, .adp-collage .adp-card__media { position: relative; aspect-ratio: 5 / 4 !important; height: auto !important; overflow: hidden; background: var(--iv-bg-soft); } .adp-grid .adp-card__media img, .adp-collage .adp-card__media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; } /* ═══════════════════════════════════════════════════════════════════ SECTION TRANSITIONS & IMAGE MOVEMENT (fail-open by construction) Images animate SCALE only, so they are visible at every instant of the animation, before it, and if it never runs at all. ═══════════════════════════════════════════════════════════════════ */ .adp-motion .adp-card__media img, .adp-motion .adp-split__media img, .adp-motion .adp-overlap__media img, .adp-motion .adp-gallery__item img { transform: scale(1.075); transition: transform 1500ms var(--adp-ease-out) var(--adp-delay); opacity: 1 !important; /* never fades — always on screen */ } .adp-motion .is-inview .adp-card__media img, .adp-motion .adp-card__media.is-inview img, .adp-motion .is-inview.adp-split__media img, .adp-motion .is-inview .adp-split__media img, .adp-motion .is-inview.adp-overlap__media img, .adp-motion .is-inview .adp-overlap__media img, .adp-motion .adp-gallery__item.is-inview img { transform: scale(1); } /* Section seam: a hairline that draws itself as each section arrives */ .adp-section + .adp-section::before { content: ""; display: block; height: 1px; width: min(1200px, 88vw); margin: 0 auto clamp(48px, 6vw, 92px); background: var(--iv-hairline); transform: scaleX(0); transform-origin: center; transition: transform 1400ms var(--adp-ease-out); } .adp-motion .adp-section.is-inview + .adp-section::before, .adp-section.is-inview::before { transform: scaleX(1); } .adp-motion-off .adp-section + .adp-section::before { transform: scaleX(1); } /* ═══ HOVER MICRO-INTERACTIONS ═══ */ /* Property tile: photo eases in, caption tracks open, a hairline draws under it */ .adp-card__link { position: relative; display: block; } .adp-card__body { position: relative; padding-bottom: 10px; } .adp-card__body::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--iv-green); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--adp-ease-out); } .adp-card:hover .adp-card__body::after { transform: scaleX(1); } .adp-card:hover .adp-card__media img { transform: scale(1.06) !important; } /* Buttons: fill sweeps in from the left behind the label */ .adp-btn { position: relative; overflow: hidden; z-index: 0; } .adp-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--iv-green-dk); transform: scaleX(0); transform-origin: left; transition: transform 620ms var(--adp-ease-out); } .adp-btn:hover::before { transform: scaleX(1); } .adp-btn--outline::before { background: var(--iv-ink); } .adp-btn--outline:hover { color: var(--iv-bg); border-color: var(--iv-ink); } /* Nav + text links: gold-green underline grows from the left */ #adp-header .adp-nav a { position: relative; } #adp-header .adp-nav a::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 480ms var(--adp-ease-out); } #adp-header .adp-nav a:hover::after, #adp-header .adp-nav .current-menu-item a::after { transform: scaleX(1); } /* ═══ HERO ═══ */ .adp-cinema__title { font-size: clamp(46px, 6.2vw, 92px); line-height: 1.05; } .adp-cinema__content .adp-btn { border-radius: 0; } /* the cue line breathes */ .adp-cinema__stage::after { height: 62px; } @media (prefers-reduced-motion: reduce) { .adp-motion .adp-card__media img, .adp-motion .adp-split__media img, .adp-motion .adp-overlap__media img, .adp-motion .adp-gallery__item img, .adp-section + .adp-section::before { transform: none !important; transition: none !important; } .adp-btn::before, .adp-card__body::after { transition: none !important; } } /* Properties page title: the Living Oak register — small, tracked, centred. It is an

for search engines while reading as a quiet page label. */ .adp-sh--properties .adp-sh__title, .page-template .adp-section-heading h1.adp-sh__title, h1.adp-sh__title { font-size: 15px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; color: var(--iv-ink); margin: 0; } h1.adp-sh__title em { font-style: normal; } /* ═══════════════════════════════════════════════════════════════════ FIX 1 · PAGE BANNERS (compact hero) — text sits on a photograph, so it must be cream, not ink. The blanket ivory rules had turned these headings dark on a light photo, i.e. invisible. ═══════════════════════════════════════════════════════════════════ */ .adp-hero--compact .adp-hero__scrim, .adp-hero .adp-hero__scrim { background: linear-gradient(to top, rgba(18, 20, 17, .62) 0%, rgba(18, 20, 17, .34) 52%, rgba(18, 20, 17, .48) 100%); } .adp-hero--compact h1, .adp-hero--compact .adp-h1, .adp-hero--compact h2, .adp-hero--compact .adp-h2, .adp-hero h1, .adp-hero .adp-h1 { color: #fdfcfa !important; text-shadow: 0 2px 30px rgba(12, 14, 11, .38); } .adp-hero--compact .adp-hero__subtitle, .adp-hero--compact .adp-lede, .adp-hero--compact p, .adp-hero .adp-hero__subtitle, .adp-hero .adp-lede { color: rgba(253, 252, 250, .94) !important; text-shadow: 0 1px 20px rgba(12, 14, 11, .42); } .adp-hero--compact .adp-eyebrow, .adp-hero .adp-eyebrow { color: rgba(253, 252, 250, .88) !important; } .adp-hero--compact .adp-eyebrow::after, .adp-hero .adp-eyebrow::after { background: rgba(253, 252, 250, .7); } .adp-hero--compact .adp-divider, .adp-hero .adp-divider { background: rgba(253, 252, 250, .55); } /* ═══ FIX 2 · Header "Book Now" — same optical line as the nav, and white wherever the bar is transparent over a photograph ═══ */ #adp-header .adp-header__right { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); } #adp-header .adp-header__row .adp-nav .adp-nav__list { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); margin: 0; padding: 0; list-style: none; } #adp-header .adp-header__portal { display: inline-flex; align-items: center; font-size: 12px; /* matches the nav exactly */ letter-spacing: .22em; line-height: 1; margin: 0; padding: 0 0 0 clamp(16px, 2vw, 26px); border-left: 1px solid var(--iv-hairline); align-self: center; } /* over a photograph: white, with a hairline to match */ body.adp-has-cinema #adp-header:not(.is-solid) .adp-header__portal { color: #ffffff !important; border-left-color: rgba(255, 255, 255, .38); } /* on the solid ivory bar: brand green */ #adp-header.is-solid .adp-header__portal, body:not(.adp-has-cinema) #adp-header .adp-header__portal { color: var(--iv-green) !important; } /* ═══ FIX 3 · The stylish image reveal is back — and cannot fail. A panel wipes away to disclose each photograph. Three independent guarantees keep it from ever leaving an image covered: 1. it only exists when JS has added .adp-motion, 2. the observer plus a 2.5s JS backstop open it, 3. this CSS animation removes it after 3s no matter what happens. ═══════════════════════════════════════════════════════════════════ */ .adp-motion .adp-card__media, .adp-motion .adp-split__media, .adp-motion .adp-overlap__media, .adp-motion .adp-gallery__item { position: relative; overflow: hidden; } .adp-motion .adp-card__media::after, .adp-motion .adp-split__media::after, .adp-motion .adp-overlap__media::after, .adp-motion .adp-gallery__item::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--iv-bg); transform-origin: right; transition: transform 1150ms cubic-bezier(.65, 0, .35, 1) var(--adp-delay); pointer-events: none; /* hard failsafe: gone after 3s even if no class is ever added */ animation: adp-reveal-failsafe 1ms linear 3s forwards; } .adp-motion .adp-card__media.is-inview::after, .adp-motion .is-inview .adp-card__media::after, .adp-motion .adp-split__media.is-inview::after, .adp-motion .is-inview .adp-split__media::after, .adp-motion .adp-overlap__media.is-inview::after, .adp-motion .is-inview .adp-overlap__media::after, .adp-motion .adp-gallery__item.is-inview::after { transform: scaleX(0); } @keyframes adp-reveal-failsafe { to { transform: scaleX(0); visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .adp-motion .adp-card__media::after, .adp-motion .adp-split__media::after, .adp-motion .adp-overlap__media::after, .adp-motion .adp-gallery__item::after { display: none !important; } } /* base state of the wipe panel must be declared, not inherited */ .adp-motion .adp-card__media::after, .adp-motion .adp-split__media::after, .adp-motion .adp-overlap__media::after, .adp-motion .adp-gallery__item::after { transform: scaleX(1); } /* nav links and Book Now share one optical line */ #adp-header .adp-header__row .adp-nav a { display: inline-flex; align-items: center; line-height: 1; padding: 8px 0; } #adp-header .adp-header__row .adp-header__portal { line-height: 1; padding: 8px 0 8px clamp(16px, 2vw, 26px); } #adp-header .adp-header__row .adp-nav, #adp-header .adp-header__row .adp-nav__list, #adp-header .adp-header__row .adp-nav ul { display: flex; align-items: center; margin: 0; } #adp-header .adp-header__row .adp-nav li { display: flex; align-items: center; } /* Book Now must sit in the flex row, never absolutely — an old rule kept pulling it out of flow, which is what threw the alignment off. */ #adp-header .adp-header__row .adp-header__right .adp-header__portal, #adp-header .adp-header__portal { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* the legacy unveil panel and the new reveal are the same job — keep one */ .adp-motion .adp-unveil::after { z-index: 2; } /* ═══════════════════════════════════════════════════════════════════════ RIESLING — the brand's Art Deco display face (client-supplied). Used for DISPLAY SIZES ONLY. Its strokes are hairline-thin: measured ink density at 12px is 0.045 (nav/eyebrow) versus 0.060 at 88px, i.e. it turns to mush at small sizes. So headlines wear it; navigation, eyebrows, captions and body keep the readable UI/serif stack. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Riesling"; src: url("../fonts/riesling.woff2") format("woff2"), url("../fonts/riesling.woff") format("woff"), url("../fonts/riesling.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; /* the fallback is metric-adjusted so nothing reflows when Riesling arrives — keeps cumulative layout shift at zero */ size-adjust: 100%; ascent-override: 76.6%; descent-override: 27.5%; line-gap-override: 0%; } :root { --adp-font-display: "Riesling", "Cormorant Garamond", Georgia, serif; } /* Display headings only (34px and up) */ .adp-cinema__title, .adp-hero h1, .adp-hero .adp-h1, .adp-h1, h1.adp-sh__title:not([class*="small"]), .adp-h2, .adp-sh__title, .adp-brand-band__quote, .adp-band__quote, .adp-invite .adp-h2, .adp-statc__n, .adp-stat__num { font-family: var(--adp-font-display); font-weight: 400; letter-spacing: .012em; } /* Riesling has no italic; the emphasis words get a subtle optical shift instead of a faux-oblique, which would look broken on a deco face. */ .adp-cinema__title em, .adp-h1 em, .adp-h2 em, .adp-sh__title em, .adp-brand-band__quote em, .adp-band__quote em { font-style: normal; color: var(--iv-green); letter-spacing: .05em; } .adp-cinema__title em { color: inherit; opacity: .92; letter-spacing: .06em; } /* the deco face reads larger — nudge line-height tighter so it stays elegant */ .adp-cinema__title { line-height: 1.02; } .adp-h2, .adp-sh__title { line-height: 1.1; } /* Small text explicitly keeps its existing stack — Riesling must not inherit down into anything below display size. UI chrome stays sans; reading copy stays in the brand body serif, exactly as before. */ .adp-eyebrow, .adp-nav a, .adp-nav li a, .adp-card__title, .adp-card__meta, .adp-header__portal, .adp-btn, label, input, select, textarea, .adp-footer .adp-footer__title { font-family: var(--adp-font-ui); } .adp-lede, .adp-sh__body, .adp-split__text, .adp-story__p, p, li, blockquote, .adp-footer p, .adp-footer a { font-family: var(--adp-font-body); } /* the small Properties H1 is a label, not a display heading */ h1.adp-sh__title { font-family: var(--adp-font-ui, "Jost", sans-serif); } /* Mobile: the desktop nav stays hidden behind the burger. (An earlier alignment rule out-specified the original hide, pushing the header 484px wide on a 390px screen.) */ @media (max-width: 820px) { #adp-header .adp-header__row .adp-nav, #adp-header .adp-header__row .adp-nav__list, #adp-header .adp-header__row .adp-nav ul { display: none !important; } #adp-header .adp-header__right { gap: 14px; } #adp-header .adp-header__row .adp-header__portal { border-left: 0; padding-left: 0; font-size: 11px; } #adp-header .adp-burger { display: inline-flex; } } /* ═══════════════════════════════════════════════════════════════════════ THE SEASONS — the brand headline face (client-supplied). IMPORTANT: the supplied files are the Fontspring DEMO edition. Two of its glyphs are deliberately crippled by the foundry: · the digit 4 is replaced by a "DEMO" stamp · curly quotes ’ “ ” and the em-dash — are absent So the @font-face below carries a unicode-range that hands digits and those punctuation marks to the fallback serif. Headlines therefore read correctly, with no DEMO badge and no missing apostrophes. Swap in the licensed edition and this range can simply be widened. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "The Seasons"; src: url("../fonts/theseasons-light.woff2") format("woff2"), url("../fonts/theseasons-light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0020-0023, U+0025-002F, U+003A-0040, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E; } @font-face { font-family: "The Seasons"; src: url("../fonts/theseasons-lightitalic.woff2") format("woff2"), url("../fonts/theseasons-lightitalic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; unicode-range: U+0020-0023, U+0025-002F, U+003A-0040, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E; } @font-face { font-family: "The Seasons"; src: url("../fonts/theseasons-regular.woff2") format("woff2"), url("../fonts/theseasons-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-0023, U+0025-002F, U+003A-0040, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E; } @font-face { font-family: "The Seasons"; src: url("../fonts/theseasons-italic.woff2") format("woff2"), url("../fonts/theseasons-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0020-0023, U+0025-002F, U+003A-0040, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E; } /* ── Brand type roles, as the brand board assigns them ── Headlines → The Seasons (client-supplied) Subheaders → Riesling (client-supplied) Body → Cormorant Garamond — our pick: the same high-contrast serif register the client approved, open-licensed, and readable at text sizes. Hello Paris is no longer used. */ :root { --adp-font-display: "The Seasons", "Cormorant Garamond", Georgia, serif; --adp-font-headline: "The Seasons", "Cormorant Garamond", Georgia, serif; --adp-font-subhead: "Riesling", "Cormorant Garamond", Georgia, serif; --adp-font-body: "Cormorant Garamond", "EB Garamond", Georgia, serif; } /* Display headlines wear The Seasons */ .adp-cinema__title, .adp-hero h1, .adp-hero .adp-h1, .adp-h1, .adp-h2, .adp-sh__title, .adp-brand-band__quote, .adp-band__quote, .adp-invite .adp-h2 { font-family: var(--adp-font-headline); font-weight: 300; letter-spacing: 0; } .adp-cinema__title em, .adp-h1 em, .adp-h2 em, .adp-sh__title em, .adp-brand-band__quote em, .adp-band__quote em { font-style: italic; font-weight: 300; letter-spacing: 0; color: inherit; opacity: 1; } /* Riesling steps back to its brand-board role: subheaders */ .adp-story__h, .adp-value h3, .adp-h3, h3.adp-card__title { font-family: var(--adp-font-subhead); } /* Anything containing figures avoids The Seasons entirely — addresses, statistics, phone numbers, dates. */ .adp-card__title, .adp-card__meta, .adp-stat__num, .adp-statc__n, .adp-footer__contact, .adp-footer__bar, time, .adp-gallery__item figcaption { font-family: var(--adp-font-body); font-variant-numeric: lining-nums; } .adp-card__title, .adp-card__meta { font-family: var(--adp-font-ui); } /* Reading copy */ .adp-lede, .adp-sh__body, .adp-split__text, .adp-story__p, p, li, blockquote, .adp-footer p, .adp-footer a { font-family: var(--adp-font-body); } /* ── Riesling takes its brand-board role: the eyebrow subheaders. Bumped from 12px to 15px and given wide tracking, because at 12px this hairline deco face measures 0.045 ink density and simply disappears. */ .adp-eyebrow, .adp-eyebrow--gold, .adp-eyebrow--cream { font-family: var(--adp-font-subhead); font-size: 15px; letter-spacing: .3em; font-weight: 400; } .adp-hero .adp-eyebrow, .adp-cinema .adp-eyebrow { font-size: 14px; } @media (max-width: 820px) { .adp-eyebrow { font-size: 13px; letter-spacing: .24em; } } /* Form delivery failure — the visitor must not think the message was sent */ .adp-form__error { border-left: 2px solid #b32d2e; background: rgba(179, 45, 46, .05); padding: 16px 20px; margin-bottom: 26px; font-family: var(--adp-font-body); font-size: 15px; line-height: 1.6; color: var(--iv-ink); } .adp-form__error strong { display: block; margin-bottom: 4px; } /* Honeypot: off-screen and unreachable, but still in the DOM for bots to fill. Kept out of the tab order and hidden from assistive tech. */ .adp-hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }