/* Takapoto Estate — Takapoto Tours Hosted at https://tour-takapoto.netlify.app/tour.css Every selector scoped to #tkTour to beat Squarespace specificity. */ /* ============================================================= 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 ─────────────────────────────────────────────── */ #tkTour body.brand--estate { --accent: var(--estate-green); --accent-secondary: var(--gold); --accent-warm: var(--clay) } #tkTour 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 */ } #tkTour body.brand--showjumping { --accent: var(--sage); --accent-secondary: var(--estate-green); --accent-warm: var(--gold) } #tkTour *, #tkTour *::before, #tkTour *::after { box-sizing: border-box; margin: 0; padding: 0 } #tkTour { scroll-behavior: smooth } #tkTour { 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 } #tkTour img { max-width: 100%; display: block } #tkTour a { color: inherit; text-decoration: none } #tkTour ::selection { background: var(--basalt); color: var(--linen) } /* ---------- typography ---------- */ #tkTour .eyebrow { font-family: var(--body); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-40) } #tkTour .eyebrow--light { color: rgba(242, 237, 228, 0.55) } #tkTour .display { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: 0.005em } #tkTour .display em { font-family: var(--serif); font-style: italic; font-weight: 300 } #tkTour .h-xl { font-size: clamp(56px, 9vw, 156px) } #tkTour .h-lg { font-size: clamp(44px, 6vw, 96px) } #tkTour .h-md { font-size: clamp(32px, 4vw, 64px) } #tkTour .h-sm { font-size: clamp(24px, 2.4vw, 36px) } #tkTour .lede { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2vw, 28px); line-height: 1.55; letter-spacing: 0 } #tkTour .roman { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-40) } #tkTour .roman--light { color: rgba(242, 237, 228, 0.5) } #tkTour .body-fine { font-size: 14px; line-height: 1.75; color: var(--ink-80); max-width: 38ch } /* ---------- layout primitives ---------- */ #tkTour .frame { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter) } #tkTour .rule { height: 1px; background: var(--hair); border: 0; width: 100% } #tkTour .rule--light { background: var(--hair-bright) } /* ---------- nav ---------- */ #tkTour .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, border-color 0.4s ease, padding 0.4s ease; border-bottom: 1px solid transparent } #tkTour .nav.is-scrolled, #tkTour .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) } #tkTour .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/ */ #tkTour .nav__brand-mark { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 0.18em } #tkTour .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 */ #tkTour .nav__brand-img { height: 38px; width: auto; display: block; filter: brightness(0) invert(1); /* white on dark hero */ transition: filter 0.4s ease } #tkTour .nav.is-scrolled .nav__brand-img, #tkTour .nav.is-light .nav__brand-img { filter: none; /* original colour on light bg */ } #tkTour .nav__links { grid-column: 1; display: flex; gap: 36px; list-style: none } #tkTour .nav__links a { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; position: relative; padding: 4px 0 } #tkTour .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right 0.4s ease } #tkTour .nav__links a:hover::after { right: 0 } #tkTour .nav__cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 24px } #tkTour .nav__cta a { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase } #tkTour .nav__reserve { border: 1px solid currentColor; padding: 10px 22px; transition: background 0.3s ease, color 0.3s ease } #tkTour .nav__reserve:hover { background: currentColor; color: var(--linen) } #tkTour .nav.is-light .nav__reserve:hover, #tkTour .nav.is-scrolled .nav__reserve:hover { color: var(--linen-soft) } /* ---------- page hero (smaller than home hero) ---------- */ #tkTour .page-hero { position: relative; min-height: 78vh; color: var(--linen); background: #1a1917; overflow: hidden; display: flex; align-items: flex-end } #tkTour .page-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04) } #tkTour .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%) } #tkTour .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 } #tkTour .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 } #tkTour .page-hero__title { max-width: 22ch } #tkTour .page-hero__title .roman { display: block; margin-bottom: 18px; color: rgba(242, 237, 228, 0.55) } #tkTour .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 } #tkTour .page-hero__meta div + div { margin-top: 6px } /* ---------- section primitives ---------- */ #tkTour .section { padding: var(--rhythm) 0; background: var(--linen) } #tkTour .section--soft { background: var(--linen-soft) } #tkTour .section--warm { background: var(--linen-warm) } #tkTour .section--ink { background: var(--basalt); color: var(--linen) } #tkTour .section--ink .eyebrow { color: rgba(242, 237, 228, 0.5) } #tkTour .section--ink .body-fine { color: rgba(242, 237, 228, 0.78) } #tkTour .section--ink .roman { color: rgba(242, 237, 228, 0.55) } #tkTour .section__head { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 8vw, 120px); align-items: end; margin-bottom: clamp(48px, 8vh, 96px) } #tkTour .section__head .roman { display: block; margin-bottom: 8px } #tkTour .section__head .display { max-width: 18ch } /* ---------- two-column editorial body ---------- */ #tkTour .editorial { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 8vw, 120px); align-items: start } #tkTour .editorial__label .roman { display: block; margin-bottom: 12px } #tkTour .editorial__label .eyebrow { display: block } #tkTour .editorial__body p + p { margin-top: 1em } #tkTour .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 } #tkTour .editorial__body p:first-child em { font-family: var(--serif); font-style: italic; font-weight: 300 } #tkTour .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 } #tkTour .section--ink .editorial__body p:not(:first-child) { color: rgba(242, 237, 228, 0.78) } /* ---------- spread (image + copy) ---------- */ #tkTour .spread { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center } #tkTour .spread--reverse .spread__media { order: 2 } #tkTour .spread--reverse .spread__copy { order: 1 } #tkTour .spread__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #1f1d1a; background-size: cover; background-position: center } #tkTour .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 */ #tkTour .media-strip { position: relative; aspect-ratio: 16/7; overflow: hidden; background: #1f1d1a; background-size: cover; background-position: center; margin: 32px 0 48px } #tkTour .media-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 12, 0) 60%, rgba(14, 14, 12, 0.35) 100%); pointer-events: none } #tkTour .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 */ #tkTour .media-strip--portrait { aspect-ratio: 3/4; max-width: 320px; margin: 16px 0 56px } @media (max-width: 720px) { #tkTour .media-strip { aspect-ratio: 4/3 } #tkTour .media-strip--portrait { aspect-ratio: 3/4; max-width: 240px } } #tkTour .spread__copy { padding: 0 clamp(0, 4vw, 32px) } #tkTour .spread__copy .eyebrow { display: block; margin-bottom: 32px } #tkTour .spread__copy .display { margin-bottom: 36px } #tkTour .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 } #tkTour .section--ink .spread__copy p { color: rgba(242, 237, 228, 0.78) } #tkTour .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 } #tkTour .section--ink .spread__meta { border-top-color: var(--hair-bright) } #tkTour .spread__meta dt { text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; color: var(--ink-40) } #tkTour .section--ink .spread__meta dt { color: rgba(242, 237, 228, 0.5) } #tkTour .spread__meta dd { font-family: var(--serif); font-style: italic; font-size: 15px } /* ---------- link / button ---------- */ #tkTour .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 } #tkTour .link:hover { gap: 22px } #tkTour .link::after { content: "→"; font-family: var(--body); font-size: 14px; line-height: 1 } #tkTour .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. */ #tkTour .section:not(.section--ink) .btn:hover { background: var(--basalt); color: var(--linen) } #tkTour .section--ink .btn:hover, #tkTour .page-hero .btn:hover { background: var(--linen); color: var(--basalt) } #tkTour .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--linen) } #tkTour .btn--accent:hover { background: transparent; color: var(--accent) } /* ---------- index list (reused on TOCs) ---------- */ #tkTour .index__list { list-style: none; border-top: 1px solid var(--hair) } #tkTour .section--ink .index__list { border-top-color: var(--hair-bright) } #tkTour .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 } #tkTour .section--ink .index__row { border-bottom-color: var(--hair-bright) } #tkTour .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) } #tkTour .index__row:hover::before { transform: scalex(1) } #tkTour .index__row:hover { padding-left: 16px } #tkTour .index__num { font-family: var(--serif); font-style: italic; color: var(--ink-40); font-size: 14px } #tkTour .section--ink .index__num { color: rgba(242, 237, 228, 0.5) } #tkTour .index__title { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.6vw, 56px); line-height: 1.05; letter-spacing: 0.005em } #tkTour .index__title em { font-family: var(--serif); font-style: italic; font-weight: 300 } #tkTour .index__sub { font-size: 12px; color: var(--ink-40); letter-spacing: 0.04em; max-width: 28ch; text-align: right } #tkTour .section--ink .index__sub { color: rgba(242, 237, 228, 0.6) } #tkTour .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 } #tkTour .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 } #tkTour .index__row:hover .index__arrow, #tkTour .index__row:hover .index__arrow::after { background: currentColor; border-color: currentColor } #tkTour .index__row:hover .index__arrow { width: 56px } /* ---------- statistic strip ---------- */ #tkTour .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. */ #tkTour .stats__grid--three { grid-template-columns: repeat(3, 1fr) } #tkTour .section--ink .stats__grid { background: var(--hair-bright); border-top-color: var(--hair-bright); border-bottom-color: var(--hair-bright) } #tkTour .stats__cell { background: var(--linen); padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px } #tkTour .section--ink .stats__cell { background: var(--basalt) } #tkTour .section--soft .stats__cell { background: var(--linen-soft) } #tkTour .stats__num { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 5vw, 84px); line-height: 0.98; letter-spacing: 0 } #tkTour .stats__num em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--accent) } #tkTour .section--ink .stats__num em { color: var(--accent-secondary) } #tkTour .stats__label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-40); max-width: 22ch } #tkTour .section--ink .stats__label { color: rgba(242, 237, 228, 0.55) } /* ---------- editorial pull quote ---------- */ #tkTour .quote { padding: var(--rhythm) 0; text-align: center } #tkTour .quote__inner { max-width: 32ch; margin: 0 auto } #tkTour .quote__mark { font-family: var(--serif); font-style: italic; font-size: 64px; color: var(--accent); line-height: 0.5; margin-bottom: 12px } #tkTour .quote blockquote { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.6vw, 56px); line-height: 1.22; letter-spacing: 0.005em } #tkTour .quote blockquote em { font-family: var(--serif); font-style: italic; font-weight: 300 } #tkTour .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) ---------- */ #tkTour .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair) } #tkTour .section--ink .cards { background: var(--hair-bright); border-color: var(--hair-bright) } #tkTour .section--soft .cards { background: var(--hair) } #tkTour .cards--two { grid-template-columns: repeat(2, 1fr) } #tkTour .card { background: var(--linen); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 18px; min-height: 320px; transition: background 0.4s ease } #tkTour .section--soft .card { background: var(--linen-soft) } #tkTour .section--ink .card { background: var(--basalt) } #tkTour .card:hover { background: var(--linen-warm) } #tkTour .section--ink .card:hover { background: rgba(242, 237, 228, 0.04) } #tkTour .card__eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-40) } #tkTour .section--ink .card__eyebrow { color: rgba(242, 237, 228, 0.5) } #tkTour .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 } #tkTour .card__title em { font-family: var(--serif); font-style: italic; font-weight: 300 } #tkTour .card__price { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-60) } #tkTour .section--ink .card__price { color: rgba(242, 237, 228, 0.7) } #tkTour .card__body { font-family: var(--serif); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--ink-80) } #tkTour .section--ink .card__body { color: rgba(242, 237, 228, 0.78) } /* Photographic head on a card — bleeds to card edges, gentle zoom on hover */ #tkTour .card__media { margin-bottom: 8px; aspect-ratio: 5/4; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; position: relative } #tkTour .card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 12, 0) 60%, rgba(14, 14, 12, 0.18) 100%); pointer-events: none } #tkTour .card:hover .card__media { filter: brightness(1.04) } /* ---------- schedule list (for showjumping etc) ---------- */ #tkTour .schedule { list-style: none } #tkTour .schedule__row { display: grid; grid-template-columns: 140px 1fr 200px; gap: 32px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--hair) } #tkTour .section--ink .schedule__row { border-bottom-color: var(--hair-bright) } #tkTour .schedule__day { font-family: var(--serif); font-style: italic; font-size: 18px } #tkTour .schedule__title { font-family: var(--display); font-size: 20px; font-weight: 400 } #tkTour .schedule__title small { display: block; font-family: var(--serif); font-size: 14px; color: var(--ink-60); margin-top: 4px; font-weight: 300 } #tkTour .section--ink .schedule__title small { color: rgba(242, 237, 228, 0.6) } #tkTour .schedule__time { text-align: right; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-40) } #tkTour .section--ink .schedule__time { color: rgba(242, 237, 228, 0.55) } /* ---------- portrait grid (team page) ---------- */ #tkTour .portraits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px) } #tkTour .portrait { display: flex; flex-direction: column; gap: 20px } #tkTour .portrait__img { aspect-ratio: 4/5; background: #1f1d1a; background-size: cover; background-position: center; filter: grayscale(0.15); transition: filter 0.6s ease } #tkTour .portrait:hover .portrait__img { filter: grayscale(0) } #tkTour .portrait__name { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2 } #tkTour .portrait__name em { font-family: var(--serif); font-style: italic; font-weight: 300 } #tkTour .portrait__role { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-40) } #tkTour .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) ---------- */ #tkTour .spec { list-style: none; display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--hair) } #tkTour .section--ink .spec { border-top-color: var(--hair-bright) } #tkTour .spec li { display: contents } #tkTour .spec li > dt, #tkTour .spec li > dd { padding: 18px 0; border-bottom: 1px solid var(--hair) } #tkTour .section--ink .spec li > dt, #tkTour .section--ink .spec li > dd { border-bottom-color: var(--hair-bright) } #tkTour .spec dt { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-40) } #tkTour .section--ink .spec dt { color: rgba(242, 237, 228, 0.5) } #tkTour .spec dd { font-family: var(--serif); font-weight: 300; font-size: 16px } #tkTour .spec dd em { font-style: italic } /* ---------- newsletter ---------- */ #tkTour .signup { background: var(--basalt); color: var(--linen); padding: var(--rhythm) 0 } #tkTour .signup__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 8vw, 120px); align-items: center } #tkTour .signup .display { max-width: 12ch } #tkTour .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 } #tkTour .signup__form { display: flex; flex-direction: column; gap: 24px } #tkTour .signup__field { display: flex; align-items: center; border-bottom: 1px solid var(--hair-bright); padding-bottom: 14px } #tkTour .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 } #tkTour .signup__field input::placeholder { color: rgba(242, 237, 228, 0.4) } #tkTour .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 } #tkTour .signup__field button:hover { color: var(--accent) } #tkTour .signup__fine { font-size: 11px; color: rgba(242, 237, 228, 0.4); letter-spacing: 0.04em } /* ---------- footer ---------- */ #tkTour .foot { background: var(--basalt); color: var(--linen); padding: 0; border-top: 1px solid var(--hair-bright) } /* ── Subscribe band — sits above the sitemap, edge-to-edge ── */ #tkTour .foot__subscribe { background: rgba(255, 255, 255, 0.025); border-bottom: 1px solid var(--hair-bright); padding: clamp(56px, 8vh, 96px) 0 } #tkTour .foot__subscribe-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center } #tkTour .foot__subscribe-inner .display { max-width: 14ch } #tkTour .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 } #tkTour .foot__form { display: flex; flex-direction: column; gap: 18px } #tkTour .foot__field { display: flex; align-items: center; border-bottom: 1px solid var(--hair-bright); padding-bottom: 14px; transition: border-color 0.3s ease } #tkTour .foot__field:focus-within { border-bottom-color: var(--linen) } #tkTour .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 } #tkTour .foot__field input::placeholder { color: rgba(242, 237, 228, 0.4) } #tkTour .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 } #tkTour .foot__field button:hover { color: var(--accent) } #tkTour .foot__fine { font-size: 11px; letter-spacing: 0.04em; color: rgba(242, 237, 228, 0.4) } /* ── Sitemap columns — 6 across (brand + 5 sections) ── */ #tkTour .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) } #tkTour .foot__brand .display { font-size: clamp(36px, 4vw, 56px); line-height: 1.05 } #tkTour .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 } #tkTour .foot__addr { margin-top: 24px; font-family: var(--body); font-size: 12px; line-height: 1.7; color: rgba(242, 237, 228, 0.6) } #tkTour .foot__addr a { color: inherit; transition: color 0.3s ease } #tkTour .foot__addr a:hover { color: var(--linen) } #tkTour .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 } #tkTour .foot__col ul { list-style: none; display: flex; flex-direction: column; gap: 12px } #tkTour .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 } #tkTour .foot__col a:hover { color: var(--accent) } /* ── Bottom row — copyright, social, legal, media kit ── */ #tkTour .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) } #tkTour .foot__bottom a { color: rgba(242, 237, 228, 0.6); transition: color 0.3s ease } #tkTour .foot__bottom a:hover { color: var(--linen) } #tkTour .foot__bottom-right { display: flex; gap: 28px; flex-wrap: wrap; align-items: center } #tkTour .foot__social { display: flex; gap: 24px } @media (max-width: 1024px) { #tkTour .foot__top { grid-template-columns: 1.2fr repeat(2, 1fr); row-gap: 48px } #tkTour .foot__subscribe-inner { grid-template-columns: 1fr } } @media (max-width: 600px) { #tkTour .foot__top { grid-template-columns: 1fr 1fr } #tkTour .foot__brand { grid-column: 1/-1 } #tkTour .foot__bottom { flex-direction: column; align-items: flex-start } } /* ---------- reveal animation ---------- */ #tkTour .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) } #tkTour .reveal.is-in { opacity: 1; transform: translatey(0) } #tkTour .reveal--delay-1 { transition-delay: 0.1s } #tkTour .reveal--delay-2 { transition-delay: 0.2s } #tkTour .reveal--delay-3 { transition-delay: 0.3s } /* ---------- responsive ---------- */ @media (max-width: 920px) { #tkTour .nav { grid-template-columns: auto 1fr; padding: 18px var(--gutter) } #tkTour .nav__brand { grid-column: 1; align-items: flex-start } #tkTour .nav__links { display: none } #tkTour .nav__cta { grid-column: 2 } #tkTour .nav__cta a:not(.nav__reserve) { display: none } #tkTour .page-hero__content { grid-template-columns: 1fr } #tkTour .page-hero__meta { text-align: left } #tkTour .section__head { grid-template-columns: 1fr; gap: 24px } #tkTour .editorial { grid-template-columns: 1fr; gap: 32px } #tkTour .index__row { grid-template-columns: 32px 1fr 24px } #tkTour .index__sub { display: none } #tkTour .index__arrow { width: 24px } #tkTour .spread, #tkTour .spread--reverse { grid-template-columns: 1fr; gap: 40px } #tkTour .spread--reverse .spread__media { order: 1 } #tkTour .spread--reverse .spread__copy { order: 2 } #tkTour .spread__media { aspect-ratio: 4/3 } #tkTour .stats__grid { grid-template-columns: repeat(2, 1fr) } #tkTour .stats__grid--three { grid-template-columns: 1fr } #tkTour .cards { grid-template-columns: 1fr } #tkTour .cards--two { grid-template-columns: 1fr } #tkTour .portraits { grid-template-columns: repeat(2, 1fr) } #tkTour .schedule__row { grid-template-columns: 100px 1fr; gap: 16px } #tkTour .schedule__time { grid-column: 1/-1; text-align: left } #tkTour .spec { grid-template-columns: 1fr } #tkTour .spec li > dt { padding-bottom: 4px; border-bottom: 0 } #tkTour .spec li > dd { padding-top: 0 } #tkTour .signup__inner { grid-template-columns: 1fr; gap: 32px } #tkTour .foot__top { grid-template-columns: 1fr 1fr } #tkTour .foot__brand { grid-column: 1/-1 } } @media (max-width: 560px) { #tkTour .stats__grid { grid-template-columns: 1fr } #tkTour .portraits { grid-template-columns: 1fr } #tkTour .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 */ #tkTour .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, border-color 0.4s ease, padding 0.4s ease; border-bottom: 1px solid transparent } #tkTour .mm-nav.is-active, #tkTour .mm-nav.is-scrolled, #tkTour .mm-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) } /* Pages with a light-toned hero (gold, sage) keep nav permanently in light mode */ #tkTour body.hero--light .mm-nav { background: rgba(247, 243, 234, 0.92); color: var(--basalt); border-bottom-color: var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) } #tkTour .mm-nav__inner { max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter); display: flex; align-items: center; gap: clamp(28px, 4vw, 56px) } #tkTour .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 } #tkTour .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 } #tkTour .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 } #tkTour .mm-trigger:hover::after, #tkTour .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 */ #tkTour .mm-trigger, #tkTour .mm-trigger:visited, #tkTour .mm-trigger:focus, #tkTour .mm-trigger:focus-visible, #tkTour .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. */ #tkTour .mm-trigger--link { /* nothing extra needed — inherits all trigger metrics */ } /* a hairline separator between the panel triggers and the utility links */ #tkTour .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. ----------------------------------------------------------- */ #tkTour .mm-brand { position: relative; display: inline-flex; align-items: center; height: 42px; text-decoration: none; line-height: 1; flex: 0 0 auto } #tkTour .mm-brand__icon, #tkTour .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 } #tkTour .mm-brand__icon { height: 100%; transform: translate(0, -50%); opacity: 1 } #tkTour .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 */ #tkTour .mm-brand__sizer { display: block; height: 100%; width: 184px; visibility: hidden } /* default: icon visible. hover or when menu is open: wordmark visible. */ #tkTour .mm-brand:hover .mm-brand__icon, #tkTour .mm-nav.is-active .mm-brand__icon { opacity: 0; transform: translate(8px, -50%) } #tkTour .mm-brand:hover .mm-brand__full, #tkTour .mm-nav.is-active .mm-brand__full { opacity: 1; transform: translate(0, -50%) } #tkTour .mm-nav.is-active .mm-brand__icon, #tkTour .mm-nav.is-active .mm-brand__full, #tkTour .mm-nav.is-scrolled .mm-brand__icon, #tkTour .mm-nav.is-scrolled .mm-brand__full, #tkTour .mm-nav.is-light .mm-brand__icon, #tkTour .mm-nav.is-light .mm-brand__full, #tkTour body.hero--light .mm-nav .mm-brand__icon, #tkTour body.hero--light .mm-nav .mm-brand__full { filter: none } /* legacy — keep typographic fallback selectors so older pages don't break */ #tkTour .mm-brand__img { height: 40px; width: auto; display: block; filter: brightness(0) invert(1); transition: filter 0.4s ease } #tkTour .mm-nav.is-active .mm-brand__img, #tkTour .mm-nav.is-scrolled .mm-brand__img, #tkTour .mm-nav.is-light .mm-brand__img, #tkTour body.hero--light .mm-nav .mm-brand__img { filter: none } #tkTour .mm-brand__mark { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 0.18em } #tkTour .mm-brand__tag { display: block; font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.65; margin-top: 4px } #tkTour .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 } #tkTour .mm-utility a { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap } #tkTour .mm-utility .reserve { border: 1px solid currentColor; padding: 11px 24px; transition: background 0.3s, color 0.3s } #tkTour .mm-utility .reserve:hover { background: currentColor; color: var(--linen-soft) } #tkTour .mm-nav.is-active .mm-utility .reserve:hover, #tkTour .mm-nav.is-scrolled .mm-utility .reserve:hover, #tkTour .mm-nav.is-light .mm-utility .reserve:hover, #tkTour body.hero--light .mm-nav .mm-utility .reserve:hover { color: var(--linen) } /* the panels */ #tkTour .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 } #tkTour .mm-panels.is-active { visibility: visible; transition: visibility 0s linear 0s } #tkTour .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) } #tkTour .mm-panels.is-active .mm-panel-wrap { max-height: 600px } #tkTour .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 } #tkTour .mm-panel.is-shown { opacity: 1; transform: translatey(0); position: relative; pointer-events: auto } #tkTour .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 } #tkTour .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 } #tkTour .mm-col ul { list-style: none } #tkTour .mm-col li { padding: 10px 0 } #tkTour .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 } #tkTour .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). */ #tkTour .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. */ #tkTour .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 } #tkTour .mm-col a:not(.mm-shop-link):hover { color: var(--basalt); padding-left: 26px } #tkTour .mm-col a:not(.mm-shop-link):hover::before { opacity: 1; transform: translatex(0) } #tkTour .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 } #tkTour .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) } #tkTour .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. */ #tkTour .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 } #tkTour .mm-shop-link:hover { padding-left: 26px; color: var(--accent-warm, var(--clay)) } #tkTour .mm-shop-link:hover::before { opacity: 1; transform: translate(0, -50%) } /* featured visual column */ #tkTour .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 } #tkTour .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 } #tkTour .mm-feature > * { position: relative; z-index: 2 } #tkTour .mm-feature__eyebrow { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(242, 237, 228, 0.75); margin-bottom: 8px } #tkTour .mm-feature__title { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: -0.005em; margin-bottom: 14px } #tkTour .mm-feature__title em { font-style: italic } #tkTour .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 } #tkTour .mm-feature:hover .mm-feature__cta { border-top-color: var(--linen) } #tkTour .mm-feature__cta::after { content: " →" } #tkTour .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 } #tkTour .mm-panels.is-active ~ .mm-backdrop { opacity: 1; pointer-events: auto } @media (max-width: 1024px) { #tkTour .mm-panel { grid-template-columns: 1fr 1fr } #tkTour .mm-feature { grid-column: 1/-1; aspect-ratio: 16/7 } } @media (max-width: 768px) { #tkTour .mm-nav__inner { gap: 16px } #tkTour .mm-links { display: none } #tkTour .mm-brand__sizer { width: 32px } /* on mobile, no room for the wordmark */ #tkTour .mm-brand__full { display: none } #tkTour .mm-utility { gap: 16px } #tkTour .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. ============================================================= */ #tkTour .page-hero--brand { background: var(--accent); color: var(--basalt); min-height: 72vh; align-items: stretch } #tkTour .page-hero--brand .page-hero__media { display: none } #tkTour .page-hero--brand .page-hero__grain { opacity: 0.1; mix-blend-mode: multiply } /* warm decorative wash — a soft duotone over the solid */ #tkTour .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.2) 0%, rgba(45, 44, 42, 0) 60%); pointer-events: none } #tkTour .page-hero--brand .page-hero__content { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 200px var(--gutter) clamp(56px, 10vh, 120px) } #tkTour .page-hero--brand .page-hero__title .roman { color: rgba(45, 44, 42, 0.55) } #tkTour .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 */ #tkTour .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 } #tkTour .page-hero--brand .page-hero__crest { mix-blend-mode: multiply } @media (max-width: 920px) { #tkTour .page-hero--brand .page-hero__content { grid-template-columns: 1fr; padding-top: 160px } #tkTour .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) */ #tkTour body.brand--equestrian .mm-nav.is-light, #tkTour body.brand--equestrian .mm-nav.is-scrolled, #tkTour body.brand--equestrian.hero--light .mm-nav, #tkTour body.brand--showjumping .mm-nav.is-light, #tkTour body.brand--showjumping .mm-nav.is-scrolled, #tkTour body.brand--showjumping.hero--light .mm-nav { box-shadow: inset 0 -2px 0 var(--accent); border-bottom-color: transparent } /* trigger hover and open state pick up the accent colour */ #tkTour body.brand--equestrian .mm-nav .mm-trigger:hover, #tkTour body.brand--equestrian .mm-nav .mm-trigger[aria-expanded="true"], #tkTour body.brand--showjumping .mm-nav .mm-trigger:hover, #tkTour 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" */ #tkTour body.brand--equestrian .mm-nav .mm-trigger[data-mm="equestrian"], #tkTour body.brand--showjumping .mm-nav .mm-trigger[data-mm="equestrian"] { color: var(--accent) } #tkTour body.brand--equestrian .mm-nav .mm-trigger[data-mm="equestrian"]::after, #tkTour 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) */ #tkTour body.brand--equestrian .mm-nav .mm-trigger:hover::after, #tkTour body.brand--equestrian .mm-nav .mm-trigger[aria-expanded="true"]::after, #tkTour body.brand--showjumping .mm-nav .mm-trigger:hover::after, #tkTour 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 */ #tkTour body.brand--equestrian .mm-nav.is-light .mm-utility a:not(.reserve):hover, #tkTour body.brand--equestrian .mm-nav.is-scrolled .mm-utility a:not(.reserve):hover, #tkTour body.brand--equestrian.hero--light .mm-nav .mm-utility a:not(.reserve):hover, #tkTour body.brand--showjumping .mm-nav.is-light .mm-utility a:not(.reserve):hover, #tkTour body.brand--showjumping .mm-nav.is-scrolled .mm-utility a:not(.reserve):hover, #tkTour 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 */ #tkTour body.brand--equestrian .mm-nav.is-light .mm-utility .reserve, #tkTour body.brand--equestrian.hero--light .mm-nav .mm-utility .reserve, #tkTour body.brand--showjumping .mm-nav.is-light .mm-utility .reserve, #tkTour body.brand--showjumping.hero--light .mm-nav .mm-utility .reserve { border-color: var(--accent); color: var(--accent) } #tkTour body.brand--equestrian .mm-nav.is-light .mm-utility .reserve:hover, #tkTour body.brand--equestrian.hero--light .mm-nav .mm-utility .reserve:hover, #tkTour body.brand--showjumping .mm-nav.is-light .mm-utility .reserve:hover, #tkTour 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 */ #tkTour body.brand--equestrian .foot__col a:hover, #tkTour 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 */ #tkTour body.brand--equestrian .mm-panel#panel-equestrian .mm-col__head, #tkTour body.brand--showjumping .mm-panel#panel-equestrian .mm-col__head { border-bottom-color: var(--accent) } /* Page-specific overrides — picked up by the Squarespace bundle script and scoped to #tkTour. Caps the hero font so Squarespace's theme can't blow it past the clamp. Each line is its own block-level span so the title never breaks mid-word. */ #tkTour .hero-h1 { font-size: clamp(44px, 5.6vw, 88px) !important; line-height: 1; letter-spacing: -0.01em; max-width: none } #tkTour .hero-h1 > span { display: block; white-space: nowrap } /* Squarespace's theme overrides the h2 colour even inside the dark numbers section — re-assert linen with !important so "The numbers." reads cream on the bush backdrop instead of theme dark. */ #tkTour .section--ink h2, #tkTour .section--ink h3, #tkTour .section--ink .display, #tkTour .section--ink .display em { color: var(--linen) !important } #tkTour .section--ink .roman { color: rgba(242, 237, 228, 0.55) !important } /* ─── Squarespace legibility fixes — MUST stay at end of CSS ─── Substitute #tkTour for the page's wrapper, e.g. #tkWines. These rules use !important to beat Squarespace's theme defaults on hero heading colour, opacity, and overlay darkness. */ /* Solid dark hero base so any Squarespace bleed-through can't tint the text. */ #tkTour .page-hero { background: #1a1917; } /* Extra overlay for legibility on busy hero photos. Tune these stops if the photo behind reads as too dark — turning top down to 0.05 and middle to 0.18 keeps the title legible while showing more of the image. */ #tkTour .page-hero__media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,14,12,0.08) 0%, rgba(14,14,12,0.22) 55%, rgba(14,14,12,0.55) 100%); } #tkTour .page-hero__grain { z-index: 2; } #tkTour .page-hero__content { position: relative; z-index: 3; } /* Force hero text to cream with element-level selectors + !important. This is what beats Squarespace's theme heading colour. */ #tkTour .page-hero, #tkTour .page-hero h1, #tkTour .page-hero h2, #tkTour .page-hero h3, #tkTour .page-hero p, #tkTour .page-hero span, #tkTour .page-hero a, #tkTour .page-hero__content, #tkTour .page-hero__content *, #tkTour .page-hero__title, #tkTour .page-hero__title *, #tkTour .page-hero__title .roman, #tkTour .page-hero .display, #tkTour .page-hero .display em, #tkTour .page-hero .hero-h1, #tkTour .page-hero .hero-h1 em, #tkTour .page-hero .hero-h1 > span, #tkTour .page-hero__meta, #tkTour .page-hero__meta div { color: #f2ede4 !important; opacity: 1 !important; } /* Soft drop-shadow on display copy for legibility on busy photos. */ #tkTour .page-hero__title .roman, #tkTour .page-hero .hero-h1, #tkTour .page-hero .hero-h1 em, #tkTour .page-hero .hero-h1 > span, #tkTour .page-hero__meta, #tkTour .page-hero__meta div { text-shadow: 0 1px 4px rgba(0,0,0,0.45); } /* Eyebrow visible. The original spec set it to rgba(.55); 0.92 reads better on the wider variety of hero photos a multi-page rollout will throw at it. */ #tkTour .page-hero__title .roman { color: rgba(242,237,228,0.92) !important; }