/* Perfect Stride Equestrian — editorial classic. Warm cream + ink + saddle brown, Cormorant Garamond display / Inter text, full-bleed photography. */ :root { --cream: #f7f3ec; --cream-deep: #efe8db; --ink: #211c16; --ink-soft: #4d4439; --faint: #8c8070; --saddle: #7a5a3a; --gold: #b08d4f; --line: rgba(33, 28, 22, 0.14); --maxw: 1240px; --pad: clamp(20px, 5vw, 64px); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--cream); color: var(--ink); font-family: "Inter", system-ui, sans-serif; font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: rgba(176, 141, 79, 0.3); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } figure { margin: 0; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.05; } h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -0.01em; } h2 em, h1 em { font-style: italic; } figcaption { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-top: 12px; } .eyebrow { font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--saddle); margin-bottom: 18px; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(247, 243, 236, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav .wrap { display: flex; align-items: center; gap: 24px; height: 72px; } .brand { display: flex; align-items: center; gap: 12px; font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 1.3rem; letter-spacing: 0.04em; margin-right: auto; } .brand img { width: 40px; height: 40px; } .nav-links { display: flex; gap: 28px; } .nav-links a { font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); transition: color 0.2s; } .nav-links a:hover { color: var(--saddle); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; padding: 15px 30px; border-radius: 1px; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease; white-space: nowrap; } .btn-dark { background: var(--ink); color: var(--cream); } .btn-dark:hover { background: var(--saddle); } .btn-cream { background: var(--cream); color: var(--ink); } .btn-cream:hover { background: #fff; transform: translateY(-2px); } .btn-ghost { border: 1px solid rgba(247, 243, 236, 0.55); color: var(--cream); } .btn-ghost:hover { background: rgba(247, 243, 236, 0.12); } .nav .btn { padding: 11px 20px; } .btn .dot { width: 8px; height: 8px; border-radius: 999px; background: #2f9e6b; box-shadow: 0 0 9px #2f9e6b; animation: blink 2s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Live-show elements hidden unless JS adds `live-now` to */ body:not(.live-now) .live-only { display: none !important; } /* ---------- hero ---------- */ .hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; } .hero-media { position: absolute; inset: 0; overflow: hidden; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 8, 0.18) 0%, rgba(20, 14, 8, 0) 35%, rgba(20, 14, 8, 0.62) 100%), linear-gradient(90deg, rgba(20, 14, 8, 0.35), transparent 55%); } .hero-copy { position: relative; z-index: 1; color: var(--cream); padding-block: clamp(56px, 9vh, 100px); } .hero-copy .eyebrow { color: rgba(247, 243, 236, 0.85); } .hero h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); font-weight: 600; letter-spacing: -0.005em; margin-bottom: 22px; max-width: 14ch; color: #fff; } .hero .lede { max-width: 46ch; font-size: clamp(1.02rem, 1.5vw, 1.22rem); font-weight: 350; color: rgba(247, 243, 236, 0.92); margin-bottom: 34px; } .hero .cta { display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- credibility strip ---------- */ .strip { border-bottom: 1px solid var(--line); background: var(--cream-deep); } .strip .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-block: 18px; } .strip span { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); } /* ---------- sections ---------- */ section { padding-block: clamp(72px, 12vh, 140px); } section .head { max-width: 640px; margin-bottom: clamp(36px, 6vh, 64px); } /* ---------- approach ---------- */ .approach .grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .approach .text p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.08rem; max-width: 56ch; margin-top: 20px; } .approach h2 { margin-bottom: 4px; } .approach figure img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; } /* ---------- programs ---------- */ .programs { background: var(--cream-deep); border-block: 1px solid var(--line); } .list { border-top: 1px solid var(--line); } .row { display: grid; grid-template-columns: 90px 1fr; gap: clamp(16px, 4vw, 48px); align-items: baseline; padding-block: clamp(26px, 4vh, 40px); border-bottom: 1px solid var(--line); transition: padding-left 0.25s ease; } .row:hover { padding-left: 14px; } .row .rn { font-family: "Cormorant Garamond", serif; font-size: 1.1rem; color: var(--gold); letter-spacing: 0.08em; } .row h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); } .row p { color: var(--ink-soft); margin-top: 10px; max-width: 64ch; font-size: 1.02rem; } /* ---------- gallery band ---------- */ .gallery { padding-block: 0; } .g-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .g-track::-webkit-scrollbar { display: none; } .g-track figure { scroll-snap-align: start; } .g-track img { width: 100%; height: clamp(260px, 38vw, 420px); object-fit: cover; } /* ---------- trainer ---------- */ .trainer .grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .trainer figure img { aspect-ratio: 1; object-fit: cover; width: 100%; } .trainer .text p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.08rem; max-width: 56ch; margin-top: 20px; } .trainer blockquote { margin-top: 28px; padding-left: 22px; border-left: 2px solid var(--gold); font-family: "Cormorant Garamond", serif; font-size: 1.35rem; font-style: italic; line-height: 1.4; } .trainer cite { display: block; margin-top: 10px; font-family: "Inter", sans-serif; font-style: normal; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } /* ---------- results ---------- */ .results { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; } .results .r-mark { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: clamp(280px, 30vw, 460px); opacity: 0.07; pointer-events: none; } .results .wrap { position: relative; } .results .eyebrow { color: var(--gold); } .results .r-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .r-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .r-photo figcaption { color: rgba(247, 243, 236, 0.6); } .r-item { padding-block: 22px; border-bottom: 1px solid rgba(247, 243, 236, 0.16); } .r-item:first-child { padding-top: 0; } .r-item h3 { font-size: 1.6rem; margin-bottom: 6px; } .r-item p { color: rgba(247, 243, 236, 0.72); font-size: 0.98rem; max-width: 48ch; } /* ---------- testimonials ---------- */ .q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); } .quotes blockquote { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; font-style: italic; line-height: 1.45; padding-top: 26px; border-top: 2px solid var(--gold); } .quotes cite { display: block; margin-top: 16px; font-family: "Inter", sans-serif; font-style: normal; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); } /* ---------- live band ---------- */ .live { padding-block: 0; } .live .panel { text-align: center; background: var(--saddle); color: var(--cream); padding: clamp(48px, 8vw, 88px) clamp(24px, 6vw, 80px); margin-block: clamp(36px, 6vh, 72px); } .live .pulse { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); } .live .pulse .d { width: 9px; height: 9px; border-radius: 999px; background: #6ee7b7; box-shadow: 0 0 12px #6ee7b7; animation: blink 2s ease-in-out infinite; } .live h2 { margin-bottom: 8px; } .live p { max-width: 52ch; margin: 0 auto 30px; color: rgba(247, 243, 236, 0.85); } /* ---------- visit ---------- */ .visit { padding-top: 0; } .visit-media { margin-bottom: clamp(48px, 8vh, 88px); } .visit-media img { width: 100%; height: clamp(320px, 55vh, 560px); object-fit: cover; } .visit .grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; } .visit .text p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.08rem; max-width: 52ch; margin-top: 20px; } .visit .email { display: inline-block; font-family: "Cormorant Garamond", serif; font-size: clamp(1.5rem, 3vw, 2.1rem); border-bottom: 1px solid var(--gold); margin-top: 28px; transition: color 0.2s; } .visit .email:hover { color: var(--saddle); } .visit .links { margin-top: 20px; display: flex; gap: 12px; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .visit .links a { color: var(--ink-soft); border-bottom: 1px solid var(--line); } .visit .links a:hover { color: var(--saddle); } /* ---------- footer ---------- */ footer { background: var(--ink); color: var(--cream); padding-block: 44px; } footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } footer .fb { display: flex; align-items: center; gap: 14px; } footer .fb img { width: 42px; height: 42px; } footer .fb span { font-family: "Cormorant Garamond", serif; font-size: 1.05rem; letter-spacing: 0.06em; } footer small { color: rgba(247, 243, 236, 0.55); font-size: 0.74rem; letter-spacing: 0.1em; } footer .ride-times { color: rgba(247, 243, 236, 0.8); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid rgba(247, 243, 236, 0.25); padding-bottom: 2px; transition: color 0.2s; } footer .ride-times:hover { color: var(--saddle); } /* ---------- load reveal ---------- */ .reveal { opacity: 0; transform: translateY(18px); animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.18s; } .d3 { animation-delay: 0.31s; } .d4 { animation-delay: 0.44s; } @keyframes rise { to { opacity: 1; transform: none; } } /* ---------- bottom crawler (live / upcoming / results) ---------- */ .crawler[hidden] { display: none !important; } .crawler { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: stretch; background: rgba(33, 28, 22, 0.96); backdrop-filter: blur(10px); border-top: 1px solid rgba(176, 141, 79, 0.4); } body.has-crawler { padding-bottom: 52px; } .crawler-label { display: flex; align-items: center; gap: 9px; flex-shrink: 0; padding: 0 20px; font-size: 0.66rem; font-weight: 600; color: var(--ink); background: var(--gold); letter-spacing: 0.22em; text-transform: uppercase; } .crawler-label .d { width: 8px; height: 8px; border-radius: 999px; background: #1d7a52; box-shadow: 0 0 8px #34d399; animation: blink 2s ease-in-out infinite; } .crawler-viewport { overflow: hidden; flex: 1; display: flex; align-items: center; } .crawler-track { display: flex; white-space: nowrap; animation: marquee 48s linear infinite; will-change: transform; } .crawler-track:hover { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .crawler-item { display: inline-flex; align-items: center; gap: 10px; padding: 14px 0; margin-right: 56px; font-size: 0.84rem; color: var(--cream); } .crawler-item .pl { color: var(--gold); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; } .crawler-item .sep { color: rgba(176, 141, 79, 0.6); } .crawler-item .dim { color: rgba(247, 243, 236, 0.6); } @media (max-width: 640px) { .crawler-label span.txt { display: none; } .crawler-label { padding: 0 14px; } /* nav: brand + buttons overflow on phones (worst when the live-show button is added). Shrink the bar, and keep a single action — the timely "Live show" when live, otherwise "Book a consultation" (still present in the hero + visit sections). */ .nav .wrap { gap: 12px; height: 58px; } .brand { font-size: 1.05rem; gap: 8px; } .brand img { width: 32px; height: 32px; } .nav .btn { padding: 8px 13px; font-size: 0.6rem; letter-spacing: 0.08em; gap: 6px; } body.live-now .nav .btn:not(.live-only) { display: none; } /* footer: trim the chunky stack on small screens */ /* extra bottom room so the footer clears the iOS Safari toolbar / home-indicator safe area */ footer { padding: 26px 0 calc(48px + env(safe-area-inset-bottom)); } footer .wrap { gap: 14px; } footer .fb img { width: 34px; height: 34px; } footer small { font-size: 0.68rem; } } /* ---------- responsive ---------- */ @media (max-width: 900px) { .nav-links { display: none; } .hero { min-height: 78vh; } .approach .grid, .trainer .grid, .results .r-grid, .visit .grid { grid-template-columns: 1fr; gap: 32px; } .trainer figure { order: -1; } .q-grid { grid-template-columns: 1fr; gap: 36px; } .row { grid-template-columns: 52px 1fr; } .strip .wrap { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .reveal, .crawler-track { animation: none; opacity: 1; transform: none; } }