/* ============================================================= TAKAPOTO ESTATE — shared design system Editorial. Restraint. Confidence in negative space. Brand modes (set on ): body.brand--estate → Estate Green hero, Gold secondary body.brand--equestrian → Estate Gold hero, Clay secondary body.brand--showjumping → Sage hero, Estate Green secondary Naming follows the Brand Architecture & Identity reference: - Estate Linen, Basalt Black, Estate Green, Estate Gold, Sage, Clay - Marle (heathered mid-grey, drawn from Estate Equestrian apparel) - Type pairing: Ovo (display) + Cormorant Garamond (editorial body) + DM Sans (eyebrows, UI, fine print) ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Ovo&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:wght@300;400;500&display=swap'); :root { /* ── named brand palette ───────────────────────────────────── */ --linen: #f2ede4; /* Estate Linen — primary background */ --linen-soft: #f7f3ea; /* lighter cream — section breaks */ --linen-warm: #e6dfcf; /* warmer cream — alternation */ --basalt: #2d2c2a; /* Basalt Black — primary ink */ --estate-green: #4a5c38; /* hero — Takapoto Estate parent */ --gold: #c8b878; /* hero — Takapoto Equestrian */ --sage: #8fa09e; /* hero — Showjumping winter */ --clay: #b5724a; /* accent across all arms */ --marle: #9e978c; /* warm heathered mid-grey — Estate Equestrian apparel hue; a quiet bridge between basalt & linen for soft fields, secondary surfaces, and merchandise photography */ --marle-soft: #b3aca1; /* a lighter wash of marle */ /* ── alpha derivations of basalt for hairlines & body text ── */ --ink-80: rgba(45, 44, 42, 0.86); --ink-60: rgba(45, 44, 42, 0.62); --ink-40: rgba(45, 44, 42, 0.45); --ink-15: rgba(45, 44, 42, 0.15); --hair: rgba(45, 44, 42, 0.12); --hair-bright: rgba(242, 237, 228, 0.18); /* ── legacy aliases (so existing pages don't break) ────────── */ --ink: var(--basalt); --bone: var(--linen); --bone-soft: var(--linen-soft); --bone-warm: var(--linen-warm); --estate: var(--estate-green); --champagne: var(--gold); /* ── semantic accent token — overridden per brand mode ─────── */ --accent: var(--estate-green); /* default: parent estate */ --accent-secondary: var(--gold); --accent-warm: var(--clay); --accent-quiet: var(--marle); /* neutral mid-tone — used by equestrian apparel & soft fields */ /* ── type stack ────────────────────────────────────────────── */ --display: 'Ovo', 'Cormorant Garamond', Georgia, serif; --serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif; --body: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --max: 1440px; --gutter: clamp(20px, 4vw, 64px); --rhythm: clamp(80px, 14vh, 160px); } /* ── brand modes ─────────────────────────────────────────────── */ body.brand--estate { --accent: var(--estate-green); --accent-secondary: var(--gold); --accent-warm: var(--clay); } body.brand--equestrian { --accent: var(--gold); --accent-secondary: var(--clay); --accent-warm: var(--estate-green); --accent-quiet: var(--marle); /* heathered grey from the apparel — used as a soft neutral on this section */ } body.brand--showjumping { --accent: var(--sage); --accent-secondary: var(--estate-green); --accent-warm: var(--gold); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--linen); color: var(--basalt); font-family: var(--body); font-weight: 300; font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--basalt); color: var(--linen); } /* ---------- typography ---------- */ .eyebrow { font-family: var(--body); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-40); } .eyebrow--light { color: rgba(242, 237, 228, 0.55); } .display { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: 0.005em; } .display em { font-family: var(--serif); font-style: italic; font-weight: 300; } .h-xl { font-size: clamp(56px, 9vw, 156px); } .h-lg { font-size: clamp(44px, 6vw, 96px); } .h-md { font-size: clamp(32px, 4vw, 64px); } .h-sm { font-size: clamp(24px, 2.4vw, 36px); } .lede { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2vw, 28px); line-height: 1.55; letter-spacing: 0; } .roman { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-40); } .roman--light { color: rgba(242, 237, 228, 0.5); } .body-fine { font-size: 14px; line-height: 1.75; color: var(--ink-80); max-width: 38ch; } /* ---------- layout primitives ---------- */ .frame { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .rule { height: 1px; background: var(--hair); border: 0; width: 100%; } .rule--light { background: var(--hair-bright); } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--linen); transition: background 0.4s ease, color 0.4s ease, padding 0.4s ease; border-bottom: 0; } .nav.is-scrolled, .nav.is-light { background: rgba(247, 243, 234, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--basalt); border-bottom-color: var(--hair); padding: 16px var(--gutter); } .nav__brand { grid-column: 2; display: flex; flex-direction: column; align-items: center; line-height: 1; } /* Wordmark fallback when logo image isn't yet in /TE Logos/ */ .nav__brand-mark { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 0.18em; } .nav__brand-tag { font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.65; margin-top: 4px; } /* Logo image variant — drop the PNG into /TE Logos/ and the markup uses this */ .nav__brand-img { height: 38px; width: auto; display: block; filter: brightness(0) invert(1); /* white on dark hero */ transition: filter 0.4s ease; } .nav.is-scrolled .nav__brand-img, .nav.is-light .nav__brand-img { filter: none; /* original colour on light bg */ } .nav__links { grid-column: 1; display: flex; gap: 36px; list-style: none; } .nav__links a { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; position: relative; padding: 4px 0; } .nav__links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right 0.4s ease; } .nav__links a:hover::after { right: 0; } .nav__cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 24px; } .nav__cta a { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .nav__reserve { border: 1px solid currentColor; padding: 10px 22px; transition: background 0.3s ease, color 0.3s ease; } .nav__reserve:hover { background: currentColor; color: var(--linen); } .nav.is-light .nav__reserve:hover, .nav.is-scrolled .nav__reserve:hover { color: var(--linen-soft); } /* ---------- page hero (smaller than home hero) ---------- */ .page-hero { position: relative; min-height: 78vh; color: var(--linen); background: #1a1917; overflow: hidden; display: flex; align-items: flex-end; } .page-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); } .page-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,25,23,0.45) 0%, rgba(26,25,23,0.25) 40%, rgba(26,25,23,0.85) 100%); } .page-hero__grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.18; mix-blend-mode: overlay; pointer-events: none; } .page-hero__content { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 10vh, 120px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; } .page-hero__title { max-width: 22ch; } .page-hero__title .roman { display: block; margin-bottom: 18px; color: rgba(242,237,228,0.55); } .page-hero__meta { text-align: right; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(242, 237, 228, 0.6); border-top: 1px solid var(--hair-bright); padding-top: 16px; min-width: 200px; } .page-hero__meta div + div { margin-top: 6px; } /* ---------- section primitives ---------- */ .section { padding: var(--rhythm) 0; background: var(--linen); } .section--soft { background: var(--linen-soft); } .section--warm { background: var(--linen-warm); } .section--ink { background: var(--basalt); color: var(--linen); } .section--ink .eyebrow { color: rgba(242, 237, 228, 0.5); } .section--ink .body-fine { color: rgba(242, 237, 228, 0.78); } .section--ink .roman { color: rgba(242, 237, 228, 0.55); } .section__head { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 8vw, 120px); align-items: end; margin-bottom: clamp(48px, 8vh, 96px); } .section__head .roman { display: block; margin-bottom: 8px; } .section__head .display { max-width: 18ch; } /* ---------- two-column editorial body ---------- */ .editorial { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 8vw, 120px); align-items: start; } .editorial__label .roman { display: block; margin-bottom: 12px; } .editorial__label .eyebrow { display: block; } .editorial__body p + p { margin-top: 1em; } .editorial__body p:first-child { font-family: var(--display); font-size: clamp(24px, 2.8vw, 44px); line-height: 1.22; font-weight: 400; letter-spacing: 0.005em; margin-bottom: 0.8em; } .editorial__body p:first-child em { font-family: var(--serif); font-style: italic; font-weight: 300; } .editorial__body p:not(:first-child) { max-width: 56ch; color: var(--ink-80); font-family: var(--serif); font-weight: 300; font-size: 17px; line-height: 1.75; } .section--ink .editorial__body p:not(:first-child) { color: rgba(242,237,228,0.78); } /* ---------- spread (image + copy) ---------- */ .spread { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .spread--reverse .spread__media { order: 2; } .spread--reverse .spread__copy { order: 1; } .spread__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1f1d1a; background-size: cover; background-position: center; } .spread__media-cap { position: absolute; bottom: 16px; left: 16px; color: rgba(242, 237, 228, 0.75); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; } /* Wide editorial image banner — used between section heading and content */ .media-strip { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: #1f1d1a; background-size: cover; background-position: center; margin: 32px 0 48px; } .media-strip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,12,0.0) 60%, rgba(14,14,12,0.35) 100%); pointer-events: none; } .media-strip__cap { position: absolute; bottom: 16px; left: 16px; color: rgba(242, 237, 228, 0.78); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; z-index: 1; } /* Smaller portrait variant — sits left of column, doesn't span full width */ .media-strip--portrait { aspect-ratio: 3 / 4; max-width: 320px; margin: 16px 0 56px; } @media (max-width: 720px) { .media-strip { aspect-ratio: 4 / 3; } .media-strip--portrait { aspect-ratio: 3 / 4; max-width: 240px; } } .spread__copy { padding: 0 clamp(0px, 4vw, 32px); } .spread__copy .eyebrow { display: block; margin-bottom: 32px; } .spread__copy .display { margin-bottom: 36px; } .spread__copy p { max-width: 42ch; color: var(--ink-80); margin-bottom: 1.1em; font-family: var(--serif); font-weight: 300; font-size: 17px; line-height: 1.75; } .section--ink .spread__copy p { color: rgba(242, 237, 228, 0.78); } .spread__meta { margin-top: 40px; display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; align-items: baseline; border-top: 1px solid var(--hair); padding-top: 24px; font-size: 12px; } .section--ink .spread__meta { border-top-color: var(--hair-bright); } .spread__meta dt { text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; color: var(--ink-40); } .section--ink .spread__meta dt { color: rgba(242, 237, 228, 0.5); } .spread__meta dd { font-family: var(--serif); font-style: italic; font-size: 15px; } /* ---------- link / button ---------- */ .link { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid currentColor; transition: gap 0.4s ease; } .link:hover { gap: 22px; } .link::after { content: '→'; font-family: var(--body); font-size: 14px; line-height: 1; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 36px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; border: 1px solid currentColor; transition: background 0.35s ease, color 0.35s ease; } /* Hover uses explicit fill colours. Earlier we used `background: currentColor` but that resolves against the *final* color value — and since the same hover also changes color to linen, the background ended up the same colour as the text, making the button vanish. */ .section:not(.section--ink) .btn:hover { background: var(--basalt); color: var(--linen); } .section--ink .btn:hover, .page-hero .btn:hover { background: var(--linen); color: var(--basalt); } .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--linen); } .btn--accent:hover { background: transparent; color: var(--accent); } /* ---------- index list (reused on TOCs) ---------- */ .index__list { list-style: none; border-top: 1px solid var(--hair); } .section--ink .index__list { border-top-color: var(--hair-bright); } .index__row { display: grid; grid-template-columns: 80px 1fr auto 80px; gap: 32px; align-items: center; padding: clamp(24px, 4vw, 48px) 0; border-bottom: 1px solid var(--hair); cursor: pointer; transition: padding 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; } .section--ink .index__row { border-bottom-color: var(--hair-bright); } .index__row::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .index__row:hover::before { transform: scaleX(1); } .index__row:hover { padding-left: 16px; } .index__num { font-family: var(--serif); font-style: italic; color: var(--ink-40); font-size: 14px; } .section--ink .index__num { color: rgba(242,237,228,0.5); } .index__title { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.6vw, 56px); line-height: 1.05; letter-spacing: 0.005em; } .index__title em { font-family: var(--serif); font-style: italic; font-weight: 300; } .index__sub { font-size: 12px; color: var(--ink-40); letter-spacing: 0.04em; max-width: 28ch; text-align: right; } .section--ink .index__sub { color: rgba(242,237,228,0.6); } .index__arrow { justify-self: end; width: 36px; height: 1px; background: var(--ink-40); position: relative; transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s; } .index__arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--ink-40); border-right: 1px solid var(--ink-40); transform: rotate(45deg); transition: border-color 0.3s; } .index__row:hover .index__arrow, .index__row:hover .index__arrow::after { background: currentColor; border-color: currentColor; } .index__row:hover .index__arrow { width: 56px; } /* ---------- statistic strip ---------- */ .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } /* 3-column variant — used in Pest Control for image + 2 stats. Must sit after the base rule so the cascade picks this one up. */ .stats__grid--three { grid-template-columns: repeat(3, 1fr); } .section--ink .stats__grid { background: var(--hair-bright); border-top-color: var(--hair-bright); border-bottom-color: var(--hair-bright); } .stats__cell { background: var(--linen); padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; } .section--ink .stats__cell { background: var(--basalt); } .section--soft .stats__cell { background: var(--linen-soft); } .stats__num { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 5vw, 84px); line-height: 0.98; letter-spacing: 0; } .stats__num em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--accent); } .section--ink .stats__num em { color: var(--accent-secondary); } .stats__label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-40); max-width: 22ch; } .section--ink .stats__label { color: rgba(242, 237, 228, 0.55); } /* ---------- editorial pull quote ---------- */ .quote { padding: var(--rhythm) 0; text-align: center; } .quote__inner { max-width: 32ch; margin: 0 auto; } .quote__mark { font-family: var(--serif); font-style: italic; font-size: 64px; color: var(--accent); line-height: 0.5; margin-bottom: 12px; } .quote blockquote { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.6vw, 56px); line-height: 1.22; letter-spacing: 0.005em; } .quote blockquote em { font-family: var(--serif); font-style: italic; font-weight: 300; } .quote cite { display: block; margin-top: 36px; font-style: normal; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-40); } /* ---------- card grid (for tours, packages, schedule etc) ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); } .section--ink .cards { background: var(--hair-bright); border-color: var(--hair-bright); } .section--soft .cards { background: var(--hair); } .cards--two { grid-template-columns: repeat(2, 1fr); } .card { background: var(--linen); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 18px; min-height: 320px; transition: background 0.4s ease; } .section--soft .card { background: var(--linen-soft); } .section--ink .card { background: var(--basalt); } .card:hover { background: var(--linen-warm); } .section--ink .card:hover { background: rgba(242, 237, 228, 0.04); } .card__eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-40); } .section--ink .card__eyebrow { color: rgba(242,237,228,0.5); } .card__title { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15; letter-spacing: 0.005em; margin-top: auto; } .card__title em { font-family: var(--serif); font-style: italic; font-weight: 300; } .card__price { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-60); } .section--ink .card__price { color: rgba(242,237,228,0.7); } .card__body { font-family: var(--serif); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--ink-80); } .section--ink .card__body { color: rgba(242,237,228,0.78); } /* Photographic head on a card — bleeds to card edges, gentle zoom on hover */ .card__media { margin: calc(-1 * clamp(28px, 3vw, 44px)); margin-bottom: 8px; aspect-ratio: 5 / 4; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; position: relative; } .card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,12,0.0) 60%, rgba(14,14,12,0.18) 100%); pointer-events: none; } .card:hover .card__media { filter: brightness(1.04); } /* ---------- schedule list (for showjumping etc) ---------- */ .schedule { list-style: none; } .schedule__row { display: grid; grid-template-columns: 140px 1fr 200px; gap: 32px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--hair); } .section--ink .schedule__row { border-bottom-color: var(--hair-bright); } .schedule__day { font-family: var(--serif); font-style: italic; font-size: 18px; } .schedule__title { font-family: var(--display); font-size: 20px; font-weight: 400; } .schedule__title small { display: block; font-family: var(--serif); font-size: 14px; color: var(--ink-60); margin-top: 4px; font-weight: 300; } .section--ink .schedule__title small { color: rgba(242,237,228,0.6); } .schedule__time { text-align: right; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-40); } .section--ink .schedule__time { color: rgba(242,237,228,0.55); } /* ---------- portrait grid (team page) ---------- */ .portraits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); } .portrait { display: flex; flex-direction: column; gap: 20px; } .portrait__img { aspect-ratio: 4 / 5; background: #1f1d1a; background-size: cover; background-position: center; filter: grayscale(0.15); transition: filter 0.6s ease; } .portrait:hover .portrait__img { filter: grayscale(0); } .portrait__name { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; } .portrait__name em { font-family: var(--serif); font-style: italic; font-weight: 300; } .portrait__role { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-40); } .portrait__bio { font-family: var(--serif); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--ink-80); max-width: 32ch; } /* ---------- list with rules (specs, inclusions) ---------- */ .spec { list-style: none; display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--hair); } .section--ink .spec { border-top-color: var(--hair-bright); } .spec li { display: contents; } .spec li > dt, .spec li > dd { padding: 18px 0; border-bottom: 1px solid var(--hair); } .section--ink .spec li > dt, .section--ink .spec li > dd { border-bottom-color: var(--hair-bright); } .spec dt { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-40); } .section--ink .spec dt { color: rgba(242,237,228,0.5); } .spec dd { font-family: var(--serif); font-weight: 300; font-size: 16px; } .spec dd em { font-style: italic; } /* ---------- newsletter ---------- */ .signup { background: var(--basalt); color: var(--linen); padding: var(--rhythm) 0; } .signup__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 8vw, 120px); align-items: center; } .signup .display { max-width: 12ch; } .signup p { font-family: var(--serif); font-weight: 300; font-size: 17px; color: rgba(242,237,228,0.7); max-width: 36ch; margin-top: 24px; } .signup__form { display: flex; flex-direction: column; gap: 24px; } .signup__field { display: flex; align-items: center; border-bottom: 1px solid var(--hair-bright); padding-bottom: 14px; } .signup__field input { flex: 1; background: transparent; border: 0; color: var(--linen); font-family: var(--body); font-size: 16px; font-weight: 300; padding: 8px 0; outline: none; } .signup__field input::placeholder { color: rgba(242,237,228,0.4); } .signup__field button { background: transparent; border: 0; color: var(--linen); font-family: var(--body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; padding: 8px 0 8px 32px; border-left: 1px solid var(--hair-bright); margin-left: 32px; transition: color 0.3s ease; } .signup__field button:hover { color: var(--accent); } .signup__fine { font-size: 11px; color: rgba(242,237,228,0.4); letter-spacing: 0.04em; } /* ---------- footer ---------- */ .foot { /* darker green wash over the wallpaper — pattern stays, softly */ background: linear-gradient(rgba(70, 82, 58, 0.55), rgba(70, 82, 58, 0.55)), url('Images/wallpaper.png') center / cover no-repeat; background-color: #46523a; color: var(--linen); padding: 0; border-top: 1px solid var(--hair-bright); } /* ── Subscribe band — sits above the sitemap, edge-to-edge ── */ .foot__subscribe { background: transparent; border-bottom: 1px solid rgba(242,237,228,0.25); padding: clamp(56px, 8vh, 96px) 0; } .foot__subscribe-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .foot__subscribe-inner .display { max-width: 14ch; } .foot__subscribe-inner p { margin-top: 18px; font-family: var(--serif); font-weight: 300; font-size: 16px; line-height: 1.6; color: rgba(242,237,228,0.7); max-width: 38ch; } .foot__form { display: flex; flex-direction: column; gap: 18px; } .foot__field { display: flex; align-items: center; border-bottom: 1px solid var(--hair-bright); padding-bottom: 14px; transition: border-color 0.3s ease; } .foot__field:focus-within { border-bottom-color: var(--linen); } .foot__field input { flex: 1; background: transparent; border: 0; color: var(--linen); font-family: var(--body); font-size: 16px; font-weight: 300; padding: 8px 0; outline: none; } .foot__field input::placeholder { color: rgba(242,237,228,0.4); } .foot__field button { background: transparent; border: 0; color: var(--linen); font-family: var(--body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; padding: 8px 0 8px 32px; border-left: 1px solid var(--hair-bright); margin-left: 32px; transition: color 0.3s ease; } .foot__field button:hover { color: var(--accent); } .foot__fine { font-size: 11px; letter-spacing: 0.04em; color: rgba(242,237,228,0.4); } /* ── Sitemap columns — 6 across (brand + 5 sections) ── */ .foot__top { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(64px, 8vh, 120px) 0 clamp(56px, 8vh, 96px); border-bottom: 1px solid var(--hair-bright); } .foot__brand .display { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; } .foot__brand p { margin-top: 22px; font-family: var(--serif); font-weight: 300; font-size: 15px; color: rgba(242,237,228,0.6); max-width: 30ch; line-height: 1.65; } .foot__addr { margin-top: 24px; font-family: var(--body); font-size: 12px; line-height: 1.7; color: rgba(242,237,228,0.6); } .foot__addr a { color: inherit; transition: color 0.3s ease; } .foot__addr a:hover { color: var(--linen); } .foot__col h4 { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(242,237,228,0.5); font-weight: 500; margin-bottom: 22px; } .foot__col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .foot__col a { font-family: var(--serif); font-weight: 300; font-size: 15px; color: rgba(242,237,228,0.85); transition: color 0.3s ease; } .foot__col a:hover { color: var(--accent); } /* ── Bottom row — copyright, social, legal, media kit ── */ .foot__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 32px 0 36px; font-size: 11px; letter-spacing: 0.04em; color: rgba(242,237,228,0.4); } .foot__bottom a { color: rgba(242,237,228,0.6); transition: color 0.3s ease; } .foot__bottom a:hover { color: var(--linen); } .foot__bottom-right { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; } .foot__social { display: flex; gap: 24px; } @media (max-width: 1024px) { .foot__top { grid-template-columns: 1.2fr repeat(2, 1fr); row-gap: 48px; } .foot__subscribe-inner { grid-template-columns: 1fr; } } @media (max-width: 600px) { .foot__top { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } .foot__bottom { flex-direction: column; align-items: flex-start; } } /* ---------- reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); } .reveal.is-in { opacity: 1; transform: translateY(0); } .reveal--delay-1 { transition-delay: 0.1s; } .reveal--delay-2 { transition-delay: 0.2s; } .reveal--delay-3 { transition-delay: 0.3s; } /* ---------- responsive ---------- */ @media (max-width: 920px) { .nav { grid-template-columns: auto 1fr; padding: 18px var(--gutter); } .nav__brand { grid-column: 1; align-items: flex-start; } .nav__links { display: none; } .nav__cta { grid-column: 2; } .nav__cta a:not(.nav__reserve) { display: none; } .page-hero__content { grid-template-columns: 1fr; } .page-hero__meta { text-align: left; } .section__head { grid-template-columns: 1fr; gap: 24px; } .editorial { grid-template-columns: 1fr; gap: 32px; } .index__row { grid-template-columns: 32px 1fr 24px; } .index__sub { display: none; } .index__arrow { width: 24px; } .spread, .spread--reverse { grid-template-columns: 1fr; gap: 40px; } .spread--reverse .spread__media { order: 1; } .spread--reverse .spread__copy { order: 2; } .spread__media { aspect-ratio: 4 / 3; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .stats__grid--three { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr; } .cards--two { grid-template-columns: 1fr; } .portraits { grid-template-columns: repeat(2, 1fr); } .schedule__row { grid-template-columns: 100px 1fr; gap: 16px; } .schedule__time { grid-column: 1 / -1; text-align: left; } .spec { grid-template-columns: 1fr; } .spec li > dt { padding-bottom: 4px; border-bottom: 0; } .spec li > dd { padding-top: 0; } .signup__inner { grid-template-columns: 1fr; gap: 32px; } .foot__top { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .stats__grid { grid-template-columns: 1fr; } .portraits { grid-template-columns: 1fr; } .foot__top { grid-template-columns: 1fr; } } /* ============================================================= MEGA MENU — shared component Each top-level item opens a 3-column editorial panel. Hover or click to open. Esc / click-outside closes. Add to any page by including the .mm-nav markup + mega-menu.js. ============================================================= */ /* nav bar shell */ .mm-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; color: var(--linen); transition: background 0.4s ease, color 0.4s ease, padding 0.4s ease; border-bottom: 0; } .mm-nav.is-active, .mm-nav.is-scrolled, .mm-nav.is-light { background: rgba(247, 243, 234, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--basalt); } /* Pages with a light-toned hero (gold, sage) keep nav permanently in light mode */ body.hero--light .mm-nav { background: rgba(247, 243, 234, 0.92); color: var(--basalt); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .mm-nav__inner { max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter); display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); } .mm-links { margin-left: auto; /* push everything after the brand to the right */ display: flex; gap: clamp(28px, 3.4vw, 48px); list-style: none; align-items: center; } .mm-trigger { background: none; border: 0; color: inherit; font-family: var(--body); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; cursor: pointer; padding: 14px 0; position: relative; transition: color 0.3s ease; font-weight: 400; white-space: nowrap; display: inline-block; text-decoration: none; line-height: 1; } .mm-trigger::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; /* scaleX gives the directional draw on hover; opacity guarantees the line vanishes instantly on unhover so two triggers can never read as underlined simultaneously, even mid-transition between adjacent items. */ transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } .mm-trigger:hover::after, .mm-trigger[aria-expanded="true"]::after { transform: scaleX(1); opacity: 1; } /* belt and braces — anchor variants must never show a browser-default underline or focus-ring underline that could be mistaken for the hover state */ .mm-trigger, .mm-trigger:visited, .mm-trigger:focus, .mm-trigger:focus-visible, .mm-trigger:active { text-decoration: none !important; outline: none; } /* Subscribe / Contact — anchor variant of the trigger. Same metrics, same baseline, same hover line — they read as the last two items in the same menu, not a separate cluster. */ .mm-trigger--link { /* nothing extra needed — inherits all trigger metrics */ } /* a hairline separator between the panel triggers and the utility links */ .mm-links__sep { width: 1px; height: 14px; background: currentColor; opacity: 0.22; align-self: center; } /* ── BRAND (left-aligned) ─────────────────────────────────── The 'T' icon shows by default. On hover (or when the menu is open), the full wordmark unfurls beside it with a soft fade. The container reserves the wordmark's full width via an invisible spacer so the rest of the row never reflows. ----------------------------------------------------------- */ .mm-brand { position: relative; display: inline-flex; align-items: center; height: 42px; text-decoration: none; line-height: 1; flex: 0 0 auto; } .mm-brand__icon, .mm-brand__full { position: absolute; left: 0; top: 50%; display: block; width: auto; filter: brightness(0) invert(1); /* white on dark hero */ transition: filter 0.4s ease, opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } .mm-brand__icon { height: 100%; transform: translate(0, -50%); opacity: 1; } .mm-brand__full { height: 60%; transform: translate(-6px, -50%); opacity: 0; } /* an invisible sizer holds the row width steady — sized to the wordmark at 60% of 42px ≈ 25px tall × 7.2 aspect ≈ 180px wide */ .mm-brand__sizer { display: block; height: 100%; width: 184px; visibility: hidden; } /* default: icon visible. hover or when menu is open: wordmark visible. */ .mm-brand:hover .mm-brand__icon, .mm-nav.is-active .mm-brand__icon { opacity: 0; transform: translate(8px, -50%); } .mm-brand:hover .mm-brand__full, .mm-nav.is-active .mm-brand__full { opacity: 1; transform: translate(0, -50%); } .mm-nav.is-active .mm-brand__icon, .mm-nav.is-active .mm-brand__full, .mm-nav.is-scrolled .mm-brand__icon, .mm-nav.is-scrolled .mm-brand__full, .mm-nav.is-light .mm-brand__icon, .mm-nav.is-light .mm-brand__full, body.hero--light .mm-nav .mm-brand__icon, body.hero--light .mm-nav .mm-brand__full { filter: none; } /* legacy — keep typographic fallback selectors so older pages don't break */ .mm-brand__img { height: 40px; width: auto; display: block; filter: brightness(0) invert(1); transition: filter 0.4s ease; } .mm-nav.is-active .mm-brand__img, .mm-nav.is-scrolled .mm-brand__img, .mm-nav.is-light .mm-brand__img, body.hero--light .mm-nav .mm-brand__img { filter: none; } .mm-brand__mark { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 0.18em; } .mm-brand__tag { display: block; font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.65; margin-top: 4px; } .mm-utility { /* sits flush with the nav links — they're already pushed right by .mm-links */ display: flex; gap: clamp(20px, 2.4vw, 32px); align-items: center; } .mm-utility a { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap; } .mm-utility .reserve { border: 1px solid currentColor; padding: 11px 24px; transition: background 0.3s, color 0.3s; } .mm-utility .reserve:hover { background: currentColor; color: var(--linen-soft); } .mm-nav.is-active .mm-utility .reserve:hover, .mm-nav.is-scrolled .mm-utility .reserve:hover, .mm-nav.is-light .mm-utility .reserve:hover, body.hero--light .mm-nav .mm-utility .reserve:hover { color: var(--linen); } /* the panels */ .mm-panels { position: fixed; top: 0; left: 0; right: 0; padding-top: 64px; background: transparent; z-index: 90; pointer-events: none; visibility: hidden; transition: visibility 0s linear 0.5s; } .mm-panels.is-active { visibility: visible; transition: visibility 0s linear 0s; } .mm-panel-wrap { position: relative; background: var(--linen-soft); border-bottom: 1px solid var(--hair); overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .mm-panels.is-active .mm-panel-wrap { max-height: 600px; } .mm-panel { max-width: var(--max); margin: 0 auto; padding: 64px var(--gutter) 56px; display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: clamp(48px, 5.4vw, 88px); opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease 0.05s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s; position: absolute; inset: 0; pointer-events: none; } .mm-panel.is-shown { opacity: 1; transform: translateY(0); position: relative; pointer-events: auto; } .mm-col__head { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-40); padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--hair); font-weight: 500; } .mm-col__head em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--basalt); /* Negative margin-left absorbs the letter-spacing that bleeds past the last uppercase letter and the natural space character — so the italic word reads as a normal handoff, not a hop across a gap. */ margin-left: -2px; letter-spacing: 0; text-transform: none; font-size: 17px; vertical-align: -1px; } .mm-col ul { list-style: none; } .mm-col li { padding: 10px 0; } .mm-col a { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink-80); transition: color 0.25s, padding-left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); display: block; position: relative; } .mm-col a em { font-style: italic; /* keep the italic word visually attached to its neighbours — no extra gap */ } /* Within list-item links, dial the italic back to roman so the column doesn't wobble across rows. Column heads keep their italic emphasis (.mm-col__head em). */ .mm-col li a em { font-style: normal; font-family: var(--display); color: inherit; } /* Hover dash — pre-rendered but invisible; appears with a short delay AFTER the text has shifted right, so it never overlaps the title. The :not(.mm-shop-link) prevents this rule from also firing on the uppercase callout links — those use their own ::before below. */ .mm-col a:not(.mm-shop-link)::before { content: '—'; position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 21px; line-height: 1.2; color: var(--accent-warm, var(--clay)); opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease 0.2s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; pointer-events: none; } .mm-col a:not(.mm-shop-link):hover { color: var(--basalt); padding-left: 26px; } .mm-col a:not(.mm-shop-link):hover::before { opacity: 1; transform: translateX(0); } .mm-col a small { display: block; font-family: var(--body); font-size: 11.5px; line-height: 1.45; color: var(--ink-40); font-weight: 300; margin-top: 4px; letter-spacing: 0.01em; } .mm-shop-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 0; /* No top border — the hover dash is the only horizontal line on this row, so the two-dash collision is gone. The wider margin-top above replaces the visual separation the border was providing. */ font-family: var(--body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--clay); position: relative; transition: color 0.25s, padding-left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } .mm-shop-link::after { content: '→'; } /* Hover dash — drawn as a 1px line rather than an em-dash glyph so it sits on the optical centre of the uppercase text. Em-dash characters carry their own vertical metrics (above the baseline-centre) which made the dash read as visually too high on these callout items. */ .mm-shop-link::before { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--accent-warm, var(--clay)); opacity: 0; transform: translate(-8px, -50%); transition: opacity 0.25s ease 0.2s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; pointer-events: none; } .mm-shop-link:hover { padding-left: 26px; color: var(--accent-warm, var(--clay)); } .mm-shop-link:hover::before { opacity: 1; transform: translate(0, -50%); } /* featured visual column */ .mm-feature { position: relative; aspect-ratio: 4 / 3; background: var(--basalt); background-size: cover; background-position: center; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: var(--linen); text-decoration: none; } .mm-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,25,23,0.1) 0%, rgba(26,25,23,0.65) 100%); pointer-events: none; } .mm-feature > * { position: relative; z-index: 2; } .mm-feature__eyebrow { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(242, 237, 228, 0.75); margin-bottom: 8px; } .mm-feature__title { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: -0.005em; margin-bottom: 14px; } .mm-feature__title em { font-style: italic; } .mm-feature__cta { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; border-top: 1px solid rgba(242, 237, 228, 0.4); padding-top: 14px; transition: border-color 0.3s; } .mm-feature:hover .mm-feature__cta { border-top-color: var(--linen); } .mm-feature__cta::after { content: ' →'; } .mm-backdrop { position: fixed; inset: 0; background: rgba(26, 25, 23, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 80; } .mm-panels.is-active ~ .mm-backdrop { opacity: 1; pointer-events: auto; } @media (max-width: 1024px) { .mm-panel { grid-template-columns: 1fr 1fr; } .mm-feature { grid-column: 1 / -1; aspect-ratio: 16 / 7; } } @media (max-width: 768px) { .mm-nav__inner { gap: 16px; } .mm-links { display: none; } .mm-brand__sizer { width: 32px; } /* on mobile, no room for the wordmark */ .mm-brand__full { display: none; } .mm-utility { gap: 16px; } .mm-utility a:not(.reserve) { display: none; } } /* ============================================================= PAGE HERO — brand-coloured variant Solid accent background instead of dark image. Use on pages where the brand mode (equestrian = gold, showjumping = sage) should set the tone. Pair with body.hero--light so the nav reads dark over the lighter ground. ============================================================= */ .page-hero--brand { background: var(--accent); color: var(--basalt); min-height: 72vh; align-items: stretch; } .page-hero--brand .page-hero__media { display: none; } .page-hero--brand .page-hero__grain { opacity: 0.10; mix-blend-mode: multiply; } /* warm decorative wash — a soft duotone over the solid */ .page-hero--brand::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% 10%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%), radial-gradient(80% 70% at 10% 100%, rgba(45,44,42,0.20) 0%, rgba(45,44,42,0) 60%); pointer-events: none; } .page-hero--brand .page-hero__content { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 200px var(--gutter) clamp(56px, 10vh, 120px); } .page-hero--brand .page-hero__title .roman { color: rgba(45,44,42,0.55); } .page-hero--brand .page-hero__meta { color: rgba(45,44,42,0.65); border-top-color: rgba(45,44,42,0.18); } /* the crest — sub-brand emblem placed top-right of the hero */ .page-hero__crest { position: absolute; top: clamp(96px, 14vh, 160px); right: var(--gutter); width: clamp(96px, 12vw, 160px); height: auto; z-index: 3; opacity: 0.92; pointer-events: none; } .page-hero--brand .page-hero__crest { mix-blend-mode: multiply; } @media (max-width: 920px) { .page-hero--brand .page-hero__content { grid-template-columns: 1fr; padding-top: 160px; } .page-hero__crest { width: 88px; top: 90px; } } /* ============================================================= PER-BRAND MENU TREATMENT On Estate Equestrian pages, menu accents read gold. On Winter Showjumping pages, menu accents read sage. Restrained: a hairline accent strip beneath the nav, an accent-tinted hover/active state on triggers, plus matching utility-link and footer-link hover colours. The nav stays light/cream — it's the sub-brand cue, not a takeover. ============================================================= */ /* hairline accent strip beneath the nav (visible whenever it sits in its light/scrolled state, which is always on hero--light pages) */ body.brand--equestrian .mm-nav.is-light, body.brand--equestrian .mm-nav.is-scrolled, body.brand--equestrian.hero--light .mm-nav, body.brand--showjumping .mm-nav.is-light, body.brand--showjumping .mm-nav.is-scrolled, body.brand--showjumping.hero--light .mm-nav { box-shadow: none; border-bottom-color: transparent; } /* trigger hover and open state pick up the accent colour */ body.brand--equestrian .mm-nav .mm-trigger:hover, body.brand--equestrian .mm-nav .mm-trigger[aria-expanded="true"], body.brand--showjumping .mm-nav .mm-trigger:hover, body.brand--showjumping .mm-nav .mm-trigger[aria-expanded="true"] { color: var(--accent); } /* the Equestrian trigger is permanently in the accent colour when the page belongs to that section — both Estate Equestrian (gold) and Showjumping (sage) sit under it, so this signals "you are here" */ body.brand--equestrian .mm-nav .mm-trigger[data-mm="equestrian"], body.brand--showjumping .mm-nav .mm-trigger[data-mm="equestrian"] { color: var(--accent); } body.brand--equestrian .mm-nav .mm-trigger[data-mm="equestrian"]::after, body.brand--showjumping .mm-nav .mm-trigger[data-mm="equestrian"]::after { transform: scaleX(1); opacity: 1; background: var(--accent); } /* the underline beneath the active / hovered trigger uses the accent (overrides the default currentColor underline) */ body.brand--equestrian .mm-nav .mm-trigger:hover::after, body.brand--equestrian .mm-nav .mm-trigger[aria-expanded="true"]::after, body.brand--showjumping .mm-nav .mm-trigger:hover::after, body.brand--showjumping .mm-nav .mm-trigger[aria-expanded="true"]::after { background: var(--accent); } /* utility links (Shop, Sign Up) pick up accent on hover when the nav is in its light state */ body.brand--equestrian .mm-nav.is-light .mm-utility a:not(.reserve):hover, body.brand--equestrian .mm-nav.is-scrolled .mm-utility a:not(.reserve):hover, body.brand--equestrian.hero--light .mm-nav .mm-utility a:not(.reserve):hover, body.brand--showjumping .mm-nav.is-light .mm-utility a:not(.reserve):hover, body.brand--showjumping .mm-nav.is-scrolled .mm-utility a:not(.reserve):hover, body.brand--showjumping.hero--light .mm-nav .mm-utility a:not(.reserve):hover { color: var(--accent); } /* the Reserve button — outlined in accent, fills with accent on hover */ body.brand--equestrian .mm-nav.is-light .mm-utility .reserve, body.brand--equestrian.hero--light .mm-nav .mm-utility .reserve, body.brand--showjumping .mm-nav.is-light .mm-utility .reserve, body.brand--showjumping.hero--light .mm-nav .mm-utility .reserve { border-color: var(--accent); color: var(--accent); } body.brand--equestrian .mm-nav.is-light .mm-utility .reserve:hover, body.brand--equestrian.hero--light .mm-nav .mm-utility .reserve:hover, body.brand--showjumping .mm-nav.is-light .mm-utility .reserve:hover, body.brand--showjumping.hero--light .mm-nav .mm-utility .reserve:hover { background: var(--accent); border-color: var(--accent); color: var(--linen); } /* footer link hover takes the same accent — keeps the system consistent from masthead to colophon */ body.brand--equestrian .foot__col a:hover, body.brand--showjumping .foot__col a:hover { color: var(--accent); } /* mega-panel — when open from these pages, the active section column gets a hairline accent on its head rule */ body.brand--equestrian .mm-panel#panel-equestrian .mm-col__head, body.brand--showjumping .mm-panel#panel-equestrian .mm-col__head { border-bottom-color: var(--accent); } /* page-hero crest tint — gives the corner emblem a subtle accent wash so it reads as the sub-brand even when the source SVG is monochrome */ body.brand--equestrian .page-hero__crest, body.brand--showjumping .page-hero__crest { mix-blend-mode: multiply; opacity: 0.78; } : var(--accent); } /* ============================================================ ADDITIONS — July 2026 Netlify bundle ============================================================ */ /* Light buttons/links for ink sections (home cellar feature) */ .btn--light { border-color: rgba(239,233,220,0.45); color: var(--bone); } .btn--light:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); } .link--light { color: var(--bone); } .link--light::after { background: var(--champagne); } /* ------------------------------------------------------------ WALLPAPER HOOKS Drop Amanda's wallpaper graphic in as Images/wallpaper.png (or update the url below). It is used two ways: 1. .section--wallpaper — a full tiled band behind any section 2. the footer — a quiet tiled texture at low opacity Until the file exists these rules render nothing (safe 404). ------------------------------------------------------------ */ :root { --wallpaper-url: url('Images/wallpaper.png'); } .section--wallpaper { background-color: var(--bone-warm); background-image: var(--wallpaper-url); background-size: 520px auto; background-repeat: repeat; } .foot { position: relative; } /* ============================================================ TYPE SYSTEM v2 — "The Ledger" (14 Jul 2026) Cormorant kept, upright only. Headlines run clean — no italic, no colour emphasis. Labels drop the tracked-uppercase eyebrow: lowercase, quiet, numbered where the roman already does that job. ============================================================ */ /* 1 — Headlines clean: neutralise every display-context */ .display em, .display i, h1 em, h2 em, h3 em, h4 em, .h-xl em, .h-lg em, .h-md em, .h-sm em, .card__title em, .door__title em, .mm-feature__title em, .mm-col__head em, .mm-panel a em, .quote blockquote em, .foot em, .bottle__name em, .wine-row__name em, .journal__title em, .now-card__title em, .logo-slot__name em, .car__copy em, #carTitle em { font-style: normal !important; font-family: inherit !important; font-weight: inherit !important; color: inherit !important; margin: 0 !important; } /* Body-copy em: keep true italic available for rare prose emphasis, but strip it from spec lists and menu small print */ .spec em, .spread__meta em, .mm-panel small em { font-style: normal; } /* 2 — Labels: the eyebrow retires. Lowercase, small, barely tracked. */ .eyebrow, .card__eyebrow, .mm-feature__eyebrow, .d-eyebrow, .bottle__kick, .now-card__when, .journal__when, .spread__media-cap { text-transform: none !important; letter-spacing: 0.05em !important; font-size: 13px !important; font-weight: 450 !important; color: var(--estate); } .eyebrow--light, .section--ink .eyebrow, .cellar-feature .eyebrow, .section--ink .card__eyebrow, .mm-feature__eyebrow { color: var(--champagne); } /* 3 — Roman numerals stay (they carry the numbering) but sit quieter */ .roman { letter-spacing: 0.06em; } /* 4 — Mega menu: column heads lose the caps + the italic hop */ .mm-col__head { text-transform: none !important; letter-spacing: 0.05em !important; font-size: 14px !important; } .mm-shop-link { letter-spacing: 0.08em !important; text-transform: none !important; font-size: 13px !important; } /* 5 — Prices / metas: quiet, not shouty */ .card__price, .bottle__price, .wine-row__price, .now-card__cta, .door__cta, .door__num { text-transform: none !important; letter-spacing: 0.05em !important; font-size: 12.5px !important; } /* 6 — Stats keep their champagne suffix but stand upright */ .stats__num em { font-style: normal !important; } /* 7 — Buttons stay small caps (utility, not voice) — slightly relaxed */ .btn { letter-spacing: 0.14em; } /* ============================================================ TYPE SYSTEM v2.1 — whisper pass (14 Jul 2026) Eyebrow labels removed altogether. Colour emphasis returns, sparingly, via .tint — applied by hand to a few headlines only. ============================================================ */ .eyebrow, .mm-feature__eyebrow, .d-eyebrow { display: none !important; } .editorial__label { gap: 0; } /* Card/journal metas stay (they carry data), but quieter */ .card__eyebrow, .journal__when, .bottle__kick, .now-card__when { font-size: 12px !important; opacity: .75; } /* Sparing colour emphasis — use on a handful of headlines, never every one */ h1 .tint, h2 .tint, .display .tint { color: var(--estate); font-style: normal; } .section--ink .tint, .cellar-feature .tint, .home-hero .tint, .page-hero .tint, .foot .tint { color: var(--champagne); } /* ============================================================ GALLERY GRID + arrow buttons (design cue from the deployed Winter Showjumping / Cabana pages) — 14 Jul 2026 ============================================================ */ .gal { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px,1.2vw,18px); } .gal--4 { grid-template-columns: repeat(4, 1fr); } .gal__item { aspect-ratio: 4 / 3; background-size: cover; background-position: center; overflow: hidden; } .gal__item--tall { aspect-ratio: 3 / 4; grid-row: span 2; } .gal__item--wide { grid-column: span 2; } @media (max-width: 760px) { .gal, .gal--4 { grid-template-columns: repeat(2,1fr); } } /* Arrow buttons, as on the deployed pages */ .btn { display: inline-flex; align-items: center; gap: 12px; } .btn::after { content: '\2192'; font-size: 15px; transition: transform 0.25s ease; } .btn:hover::after { transform: translateX(4px); } /* Balanced hero titles */ .page-hero .h-xl { font-size: clamp(42px, 6.6vw, 104px); line-height: 0.98; } /* ============================================================ HERO BANNERS v3 (21 Jul 2026) — balanced, brighter, one colour ============================================================ */ /* Balanced title size */ .page-hero .h-xl { font-size: clamp(36px, 5vw, 76px); line-height: 1.02; } /* Lighter overlay — let the photograph carry the header */ .page-hero__media::after { background: linear-gradient(180deg, rgba(26,25,23,0.55) 0%, rgba(26,25,23,0.16) 18%, rgba(26,25,23,0.04) 45%, rgba(26,25,23,0.55) 100%); } .page-hero__grain { opacity: 0.10; } /* No eyebrow-style labels in heroes; one colour throughout */ .page-hero__title .roman { display: none; } .page-hero .tint { color: inherit; } .page-hero__title, .page-hero h1 { color: var(--linen); } /* ── TC27 animation ad — Equestrian mega menu feature ── */ .mm-feature--tc27 { position: relative; overflow: hidden; background: #f4e9dc; } .mm-feature--tc27 video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; object-position: right center; } .mm-tc27 { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(180deg, rgba(45,44,42,0) 0%, rgba(45,44,42,0.45) 100%); } .mm-tc27__dates { font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--linen); } .mm-tc27__cta { font-family: var(--body); font-size: 11px; font-weight: 400; color: rgba(242,237,228,0.85); margin-top: 4px; } /* ============================================================ STYLE GUIDE v1.0 — "The Maison" lock-in (21 Jul 2026) The approved home page is the reference for every page. Quiet, boutique, understated. Takapoto whispers. ============================================================ */ /* — Underline links are the CTA language (from the home page) — */ .hb-link { display: inline-block; font-family: var(--body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: opacity .3s ease; } .hb-link:hover { opacity: .6; } /* Buttons retire into underline links, site-wide */ .btn, .btn--light, .btn--primary { background: transparent !important; border: 0 !important; padding: 0 0 3px 0 !important; border-bottom: 1px solid currentColor !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: none !important; color: var(--ink); box-shadow: none !important; } .btn::after { content: none !important; } .btn:hover { background: transparent !important; color: inherit; opacity: .6; } .section--ink .btn, .btn--light, .foot .btn { color: var(--linen) !important; } /* — Numbering retires: no romans, editorial runs full width — */ .roman, .editorial__label { display: none !important; } .editorial { display: block !important; } .editorial__body { max-width: 62ch; } /* — Headings step down; hierarchy from space, not size — */ .h-lg { font-size: clamp(26px, 2.8vw, 44px) !important; } .h-md { font-size: clamp(22px, 2.2vw, 34px) !important; } .section__head h2 { margin-top: 0 !important; } /* — Section stanza pattern available everywhere (from home) — */ .hb-story { text-align: center; padding: clamp(72px,11vh,130px) 24px clamp(40px,6vh,64px); } .hb-story h2 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.4vw, 36px); color: var(--ink); } .hb-story p { font-family: var(--serif); font-weight: 300; margin: 16px auto 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: var(--ink); opacity: .75; max-width: 58ch; } .hb-story p span { display: block; } .hb-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px,1.6vw,24px); max-width: 1320px; margin: clamp(36px,5vh,56px) auto 0; padding: 0 clamp(20px,4vw,56px); } .hb-row--3 { grid-template-columns: repeat(3, 1fr); max-width: 1180px; } .hb-card { display: block; text-decoration: none; color: var(--ink); } .hb-card__img { aspect-ratio: 4 / 5; background-size: cover; background-position: center; transition: opacity .4s ease; } .hb-card:hover .hb-card__img { opacity: .88; } .hb-card__cap { margin-top: 12px; text-align: center; font-family: var(--body); font-size: 12.5px; font-weight: 450; opacity: .8; } .hb-card__cap small { display: block; font-weight: 300; font-size: 11px; opacity: .65; margin-top: 2px; } @media (max-width: 860px) { .hb-row { grid-template-columns: repeat(2,1fr); } } /* — Quotes: smaller, quieter — */ .quote blockquote { font-size: clamp(20px, 2.2vw, 32px) !important; } .quote .quote__mark { opacity: .35; } /* — Cards: captions quiet, prices whisper — */ .card__price { opacity: .6; } /* Nav bar itself stays transparent — only the open mega menu carries a background */ .mm-nav.is-scrolled:not(.is-active) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } /* Nav sits at the top of the page and scrolls with it — not sticky */ .mm-nav, body.home-nav .mm-nav { position: absolute !important; top: 0; left: 0; right: 0; } .mm-panels { position: absolute !important; } /* ============================================================ MAGAZINE PATTERNS — shared (from the Gardener's Hub template) .sh = Magazine 1 (text left / wide image right, bleeds right) .sh--left = Magazine 2 (image left, bleeds left / text right) ============================================================ */ .sh { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(128px, 18vh, 200px) 0 clamp(48px, 7vh, 84px) clamp(20px, 4vw, 64px); } .sh__text h1 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.6vw, 58px); line-height: 1.05; color: var(--ink); } .sh__text h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3vw, 46px); line-height: 1.08; color: var(--ink); } .sh__text p { font-family: var(--serif); font-weight: 300; margin: 20px 0 26px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: var(--ink); opacity: .75; max-width: 40ch; } .sh__img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; max-height: 74vh; width: 100%; } .sh__kick { font-family: var(--body); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: var(--estate); opacity: .85; margin-bottom: 10px; } .sh--left { grid-template-columns: 7fr minmax(320px, 5fr); padding: clamp(56px, 9vh, 110px) clamp(20px, 4vw, 64px) clamp(56px, 9vh, 110px) 0; } @media (max-width: 820px) { .sh, .sh--left { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; } .sh__img { order: -1; aspect-ratio: 4 / 3; } } /* Note-card wall (journal / info cards) */ .gh-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.4vw,36px); max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,4vw,56px) clamp(72px,10vh,120px); } .gh-wall .hb-card__img { aspect-ratio: 4 / 3; } .gh-note { padding: 14px 6px 0; text-align: left; } .gh-note__when { font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--estate); opacity: .85; } .gh-note__title { font-family: var(--display); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); margin: 6px 0 8px; color: var(--ink); } .gh-note p { font-family: var(--body); font-weight: 300; font-size: 13.5px; line-height: 1.65; color: var(--ink); opacity: .72; margin: 0; } @media (max-width: 900px) { .gh-wall { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .gh-wall { grid-template-columns: 1fr; } } /* Stockist feature (circle logo + line) */ .buy-block { text-align: center; padding: clamp(40px,6vh,64px) 24px clamp(96px,14vh,150px); } .buy-block img { width: 108px; height: 108px; border-radius: 50%; box-shadow: 0 1px 12px rgba(45,44,42,0.12); margin-bottom: 18px; } .buy-block h2 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); color: var(--ink); } .buy-block p { font-family: var(--body); font-weight: 300; margin: 12px auto 20px; font-size: 14px; line-height: 1.7; color: var(--ink); opacity: .7; max-width: 46ch; } /* ============================================================ MEGA MENU CONSISTENCY (21 Jul 2026) One hairline, one accent, buttons for the shop links. ============================================================ */ /* Column heads: same hairline everywhere, no per-brand accents */ .mm-col__head, body.brand--equestrian .mm-panel#panel-equestrian .mm-col__head, body.brand--showjumping .mm-panel#panel-equestrian .mm-col__head, body.brand--estate .mm-panel .mm-col__head { border-bottom-color: var(--hair) !important; color: var(--basalt); } /* One accent for menu hover dashes & active states */ .mm-panel a:hover, .mm-panel a:focus-visible { color: var(--estate-green); } /* Feature/ad tiles sit on imagery — keep their text linen on hover */ .mm-panel a.mm-feature:hover, .mm-panel a.mm-feature:focus-visible, .mm-panel .mm-feature:hover, .mm-panel .mm-feature:hover * { color: var(--linen); } /* Shop links become proper buttons */ .mm-shop-link { display: inline-flex !important; align-items: center; gap: 9px; width: fit-content !important; margin-top: 20px; padding: 9px 16px !important; border: 1px solid var(--basalt) !important; color: var(--basalt) !important; font-family: var(--body) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-transform: none !important; text-decoration: none; transition: background .3s ease, color .3s ease; } .mm-shop-link::before { display: none !important; } .mm-shop-link::after { content: '\2192' !important; display: inline !important; position: static !important; width: auto !important; height: auto !important; background: none !important; font-size: 13px; transition: transform .25s ease; } .mm-shop-link:hover::after { transform: translateX(3px); } .mm-shop-link:hover { background: var(--basalt); color: var(--linen) !important; } /* ============================================================ TYPE SCALE v2.2 — home-banner sizing, site-wide (21 Jul 2026) Approved on the Takapoto Tours test. ============================================================ */ .sh__text h1 { font-size: clamp(26px, 2.8vw, 44px); line-height: 1.1; } .sh__text p { font-family: var(--body); font-weight: 300; font-size: clamp(13.5px, 1.15vw, 15px); line-height: 1.7; opacity: .85; } .sh__text h2 { font-size: clamp(22px, 2.3vw, 36px); } .hb-story h2 { font-size: clamp(22px, 2.2vw, 32px); } .hb-story p { font-size: clamp(15px, 1.35vw, 17px); } .gh-note__title { font-size: clamp(17px, 1.4vw, 20px); } .vn-two__text h2 { font-size: clamp(22px, 2.3vw, 36px); } /* ============================================================ REVEAL SAFETY NET (17 Aug 2026) Content is visible by default. The entrance animation only arms itself when JavaScript is present (html.js, set by mega-menu.js). No page can ever render blank again. ============================================================ */ html:not(.js) .reveal { opacity: 1 !important; transform: none !important; } /* ── No orphaned words (18 Aug 2026) ── Modern text-wrapping: paragraphs avoid single-word last lines, headings balance across lines. Progressive — older browsers ignore it. */ .hb-story p, .sh__text p, .gh-note p, .wd-note p, .vn-two__text p, .lk-quote p, .mk-quote p, .cb-flight li, .buy-block p { text-wrap: pretty; } .hb-story h2, .sh__text h1, .sh__text h2, .vn-hero__block h1, .gh-note__title, .vn-two__text h2 { text-wrap: balance; } /* ============================================================= ACTIVE-TRIGGER VISIBILITY OVER HERO IMAGERY (19 Aug 2026) The accent tint (gold / sage / green) vanishes against a full-bleed photo while the nav is transparent. Until the nav scrolls into its light state, the "you are here" trigger and any hover state read linen — the underline carries the cue. ============================================================= */ body.brand--equestrian .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger[data-mm="equestrian"], body.brand--showjumping .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger[data-mm="equestrian"], body.brand--equestrian .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger:hover, body.brand--showjumping .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger:hover, body.brand--equestrian .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger[aria-expanded="true"], body.brand--showjumping .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger[aria-expanded="true"] { color: var(--linen); } body.brand--equestrian .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger[data-mm="equestrian"]::after, body.brand--showjumping .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger[data-mm="equestrian"]::after, body.brand--equestrian .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger:hover::after, body.brand--showjumping .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger:hover::after, body.brand--equestrian .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger[aria-expanded="true"]::after, body.brand--showjumping .mm-nav:not(.is-scrolled):not(.is-light):not(.is-active) .mm-trigger[aria-expanded="true"]::after { background: var(--linen); } /* ============================================================= MOBILE MENU (19 Aug 2026) — hamburger + full-screen overlay Built by mega-menu.js from the existing panels; no markup changes needed in the pages. ============================================================= */ .mm-burger { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; margin-left: auto; padding: 8px; flex-direction: column; justify-content: center; gap: 7px; z-index: 220; } .mm-burger span { display: block; height: 1px; background: currentColor; transition: transform .35s ease, opacity .3s ease; } .mm-burger.is-open span:first-child { transform: translateY(4px) rotate(45deg); } .mm-burger.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); } @media (max-width: 768px) { .mm-burger { display: flex; } .mm-utility { display: none; } } .mmm { position: fixed; inset: 0; z-index: 210; background: var(--linen, #f2ede4); color: var(--basalt, #2d2c2a); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 96px 28px 48px; } .mmm.is-open { opacity: 1; transform: none; pointer-events: auto; } html.mmm-lock, html.mmm-lock body { overflow: hidden; } html.mmm-lock .mm-nav { background: var(--linen, #f2ede4); color: var(--basalt, #2d2c2a); } .mmm__section { border-bottom: 1px solid var(--hair, rgba(45,44,42,0.12)); } .mmm__head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; cursor: pointer; padding: 20px 2px; font-family: var(--display, Georgia, serif); font-weight: 400; font-size: 19px; color: inherit; text-align: left; } .mmm__head::after { content: ''; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s ease; opacity: .5; } .mmm__section.is-open .mmm__head::after { transform: rotate(225deg); } .mmm__body { max-height: 0; overflow: hidden; transition: max-height .4s ease; } .mmm__section.is-open .mmm__body { max-height: 720px; } .mmm__col-head { font-family: var(--body, sans-serif); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--estate, #4a5c38); opacity: .75; margin: 14px 0 4px; } .mmm__body a { display: block; padding: 12px 0; text-decoration: none; font-family: var(--display, Georgia, serif); font-weight: 400; font-size: 17px; line-height: 1.3; color: inherit; } .mmm__body { padding-bottom: 14px; } .mmm__shop { font-family: var(--body, sans-serif) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.08em; } .mmm__quick { display: flex; gap: 30px; flex-wrap: wrap; padding: 0 2px 22px; } .mmm__quick a { font-family: var(--body, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; } .mmm__section { scroll-margin-top: 92px; } .mmm.is-open .mmm__quick, .mmm.is-open .mmm__section { animation: mmmIn .5s both; } .mmm.is-open .mmm__quick { animation-delay: .05s; } .mmm.is-open .mmm__section:nth-of-type(2) { animation-delay: .1s; } .mmm.is-open .mmm__section:nth-of-type(3) { animation-delay: .15s; } .mmm.is-open .mmm__section:nth-of-type(4) { animation-delay: .2s; } .mmm.is-open .mmm__section:nth-of-type(5) { animation-delay: .25s; } .mmm.is-open .mmm__section:nth-of-type(6) { animation-delay: .3s; } @keyframes mmmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* menu items awaiting their pages — visible, unlinked */ .mm-col li .mm-soon { display: block; padding: 7px 0; cursor: default; font-family: var(--display); font-weight: 400; font-size: 15px; line-height: 1.35; color: var(--basalt); opacity: .45; } .mm-col li .mm-soon small { display: block; font-family: var(--body); font-weight: 300; font-size: 11px; opacity: .8; margin-top: 1px; letter-spacing: 0.02em; } /* ============================================================ SUBSCRIBE BAR — quiet slide-up prompt, once per visitor ============================================================ */ .sub-bar { position: fixed; z-index: 200; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); width: min(420px, calc(100vw - 32px)); background: var(--linen); color: var(--basalt); border: 1px solid var(--hair); box-shadow: 0 18px 46px rgba(45,44,42,0.14); padding: 22px 24px 20px; transform: translateY(16px); opacity: 0; pointer-events: none; transition: opacity .6s ease, transform .6s cubic-bezier(0.2,0.8,0.2,1); } .sub-bar.is-in { transform: none; opacity: 1; pointer-events: auto; } .sub-bar__kick { font-family: var(--body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; opacity: .55; } .sub-bar__title { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.3; margin: 0 0 8px; padding-right: 22px; text-wrap: balance; } .sub-bar__note { font-family: var(--body); font-weight: 300; font-size: 12.5px; line-height: 1.6; opacity: .7; margin: 0 0 14px; max-width: 34ch; } .sub-bar__field { display: flex; align-items: center; border-bottom: 1px solid var(--hair); } .sub-bar__field input { flex: 1; min-width: 0; background: none; border: 0; font-family: var(--body); font-weight: 300; font-size: 13px; color: var(--basalt); padding: 8px 0; outline: none; } .sub-bar__field input::placeholder { color: var(--basalt); opacity: .4; } .sub-bar__field button { background: none; border: 0; cursor: pointer; font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--basalt); padding: 8px 0 8px 16px; transition: opacity .3s ease; } .sub-bar__field button:hover { opacity: .55; } .sub-bar__close { position: absolute; top: 8px; right: 10px; background: none; border: 0; cursor: pointer; font-size: 19px; line-height: 1; color: var(--basalt); opacity: .35; padding: 6px 8px; transition: opacity .3s ease; } .sub-bar__close:hover { opacity: .8; } .sub-bar__thanks { font-family: var(--serif); font-weight: 300; font-size: 15px; opacity: .8; margin: 0; padding-right: 22px; } @media (max-width: 560px) { .sub-bar { right: 0; left: 0; bottom: 0; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; padding: 18px 20px 20px; } } @media (prefers-reduced-motion: reduce) { .sub-bar { transition: opacity .3s ease; transform: none; } } /* ============================================================ MOBILE LAYOUT — single source of truth (≤700px) Uses !important because several pages set grid columns and flex rows as inline styles, which otherwise win. Gutter token keeps every gallery/strip spacing identical. ============================================================ */ :root { --m-gutter: 12px; } @media (max-width: 700px) { /* --- content blocks with image + text: always one column --- */ .gh-wall, .hb-row, .hb-row--3, .cards, .gal, .gal--4, .lk-gal, .wd-wall, .ct-lists, .cb-flights, .portraits, .gh-featured__row, .cd-row { grid-template-columns: 1fr !important; gap: var(--m-gutter) !important; } /* anonymous inline grids (contact, riding, etc.) — one column, except hairline stat strips which read better two-up */ div[style*="grid-template-columns"]:not([style*="gap:1px"]):not([style*="gap: 1px"]) { grid-template-columns: 1fr !important; } div[style*="grid-template-columns"][style*="gap:1px"], div[style*="grid-template-columns"][style*="gap: 1px"], .lk-facts, .ws-info, .pc-stats, .spec, .stats__grid { grid-template-columns: repeat(2, 1fr) !important; } .lk-gal div:last-child { grid-column: span 1 !important; } /* the calendar month grid must stay seven across */ .tk-cal__dows, .tk-cal__cells { grid-template-columns: repeat(7, 1fr) !important; } /* --- magazine rows stack, picture first --- */ .sh, .sh--left { grid-template-columns: 1fr !important; } /* Each image+text bucket gets its own air above, so it reads as one piece of content rather than running into the block before it. Inline padding on individual sections is overridden deliberately — the mobile rhythm should be consistent page to page. */ .sh, .sh--left { padding-top: clamp(84px, 12vh, 116px) !important; } /* ...except the page header, which needs its clearance under the nav */ .mm-backdrop + .sh, .mm-backdrop + .sh.sh--left { padding-top: clamp(128px, 18vh, 190px) !important; } /* image sits close to its own words — tight inside, generous outside */ .sh, .sh--left { gap: 26px !important; } /* --- photo strips (Bayleys / Farmhouse / Tours pattern) --- */ #tgGallery > div, div[style*="display:flex"]:has(img), div[style*="display: flex"]:has(img) { flex-wrap: wrap !important; gap: var(--m-gutter) !important; } #tgGallery > div > div, div[style*="display:flex"] > div:has(> img), div[style*="display: flex"] > div:has(> img) { flex: 1 1 100% !important; min-width: 100% !important; } /* strips carry their own bottom margin — normalise it */ #tgGallery > div { margin-bottom: var(--m-gutter) !important; } /* --- masonry galleries stack with the same gutter --- */ .wd-masonry, .tg-masonry { display: block !important; } .wd-gcol img, .tg-gcol img { margin-bottom: var(--m-gutter) !important; } .wd-gcol:last-child img:last-child, .tg-gcol:last-child img:last-child { margin-bottom: 0 !important; } /* squaring crops are a desktop device — show the whole frame on mobile */ .wd-gcol img, .tg-gcol img, .scrap img { aspect-ratio: auto !important; } /* --- nothing may push the page sideways --- */ html, body { overflow-x: hidden; } img, video, iframe { max-width: 100%; } /* --- the subscribe bar sits flush at the foot --- */ .sub-bar { --m-gutter: 0px; } } /* very small phones: stat strips go single file too */ @media (max-width: 430px) { .lk-facts, .ws-info, .pc-stats, .spec, .stats__grid, div[style*="grid-template-columns"][style*="gap:1px"], div[style*="grid-template-columns"][style*="gap: 1px"] { grid-template-columns: 1fr !important; } }