mike
364 lines
29 KiB
CSS
364 lines
29 KiB
CSS
:root {
|
|
--blue: #0b43bf;
|
|
--blue-dark: #072a82;
|
|
--orange: #f36c21;
|
|
--green: #3f8f43;
|
|
--ink: #101419;
|
|
--muted: #656b73;
|
|
--line: #dfe2e7;
|
|
--paper: #f7f8fa;
|
|
--display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
|
|
--body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--body); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
|
|
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100; background: var(--orange); transform: scaleX(0); transform-origin: left center; pointer-events: none; will-change: transform; }
|
|
img { width: 100%; display: block; }
|
|
a { color: inherit; text-decoration: none; }
|
|
button, input, select { font: inherit; }
|
|
button { color: inherit; }
|
|
|
|
.announcement { height: 31px; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--blue); color: #fff; text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 800; }
|
|
.announcement span { width: 3px; height: 3px; border-radius: 50%; background: var(--orange); }
|
|
.site-header { height: 78px; max-width: 1440px; margin: auto; padding: 0 4.5vw; display: flex; align-items: center; gap: 42px; background: #fff; position: relative; z-index: 20; }
|
|
.site-header.is-sticky { position: fixed; top: 0; left: 0; right: 0; max-width: none; box-shadow: 0 6px 30px rgb(0 0 0 / 8%); animation: drop .25s ease; }
|
|
@keyframes drop { from { transform: translateY(-100%); } }
|
|
.brand { font-size: clamp(20px, 2.1vw, 31px); font-weight: 900; letter-spacing: -.06em; color: var(--blue); white-space: nowrap; }
|
|
.brand span { color: var(--orange); }
|
|
.nav { display: flex; align-items: center; justify-content: center; gap: 32px; margin-left: auto; }
|
|
.nav a { position: relative; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
|
|
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--orange); transition: .25s; }
|
|
.nav a:hover::after { right: 0; }
|
|
.header-actions { display: flex; align-items: center; gap: 18px; }
|
|
.language { padding: 0; border: 0; background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
|
|
.language-mobile { display: none; }
|
|
.button { min-height: 48px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; border: 2px solid var(--blue); background: var(--blue); color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 900; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
|
|
.button:hover { transform: translateY(-2px); background: var(--blue-dark); }
|
|
.button b { transition: transform .22s ease; }
|
|
.button:hover b { transform: translateX(4px); }
|
|
.button-small { min-height: 41px; padding: 0 18px; }
|
|
.button-outline { color: var(--blue); background: transparent; }
|
|
.button-outline:hover { color: #fff; }
|
|
.menu-toggle { display: none; border: 0; background: transparent; width: 38px; height: 38px; padding: 8px; }
|
|
.menu-toggle i { display: block; height: 2px; background: var(--ink); margin: 6px 0; }
|
|
|
|
.hero { min-height: 680px; display: grid; grid-template-columns: minmax(400px, .86fr) 1.45fr; background: linear-gradient(100deg, #fff 0%, #fff 42%, #edf4ff 42%, #edf4ff 100%); overflow: hidden; }
|
|
.hero-copy { padding: clamp(70px, 9vw, 132px) 1vw 70px max(5vw, calc((100vw - 1320px)/2)); position: relative; z-index: 2; }
|
|
.hero-copy > * { animation: hero-copy-in .7s both cubic-bezier(.22,.8,.32,1); }
|
|
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
|
|
.hero-copy > *:nth-child(3) { animation-delay: .15s; }
|
|
.hero-copy > *:nth-child(4) { animation-delay: .22s; }
|
|
.hero-copy > *:nth-child(5) { animation-delay: .29s; }
|
|
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
|
|
.eyebrow { margin: 0 0 16px; color: var(--blue); font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: .16em; font-weight: 900; }
|
|
h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .96; letter-spacing: .005em; }
|
|
h1 { font-size: clamp(60px, 6.6vw, 104px); }
|
|
h1 em, h2 em { color: var(--blue); font-style: normal; }
|
|
.hero-lede { max-width: 480px; margin: 28px 0 30px; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.5; }
|
|
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
|
|
.hero-meta { display: grid; gap: 11px; margin-top: 38px; color: #353a42; font-size: 13px; }
|
|
.hero-meta span { display: flex; align-items: center; gap: 9px; }
|
|
.hero-meta svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 1.8; }
|
|
.hero-meta strong { color: var(--orange); }
|
|
.hero-image { position: relative; min-width: 0; }
|
|
.hero-image { animation: hero-image-in 1s both cubic-bezier(.2,.75,.25,1); transform-origin: right center; }
|
|
@keyframes hero-image-in { from { opacity: 0; transform: scale(1.035) translateX(24px); } to { opacity: 1; transform: none; } }
|
|
.hero-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #edf4ff 0, transparent 22%); z-index: 1; pointer-events: none; }
|
|
.hero-image img { height: 100%; object-fit: cover; object-position: center; }
|
|
.hero-stamp { position: absolute; right: 5vw; bottom: 40px; z-index: 2; width: 122px; height: 122px; border-radius: 50%; display: grid; place-content: center; border: 1px solid #fff; background: rgb(11 67 191 / 88%); color: #fff; text-align: center; text-transform: uppercase; transform: rotate(-8deg); font-size: 10px; letter-spacing: .12em; }
|
|
.hero-stamp strong { font-family: var(--display); font-size: 22px; letter-spacing: .03em; }
|
|
|
|
.court-counts { max-width: 1180px; min-height: 155px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr) .9fr; align-items: center; border-bottom: 1px solid var(--line); }
|
|
.court-count { height: 80px; padding: 0 34px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 15px; border-right: 1px solid var(--line); }
|
|
.court-count strong { font-family: var(--display); color: var(--blue); font-size: 60px; line-height: 1; }
|
|
.court-count strong.counting { color: var(--orange); }
|
|
.court-count p { margin: 0; text-transform: uppercase; font-family: var(--display); font-size: 16px; line-height: 1.1; }
|
|
.sport-mark { width: 42px; height: 42px; display: grid; place-items: center; font-size: 35px; line-height: 1; }
|
|
.badminton { color: var(--blue); }.pickleball { color: var(--green); }.tennis { color: var(--orange); }
|
|
.count-note { padding-left: 34px; font-size: 13px; line-height: 1.5; color: var(--muted); }
|
|
|
|
.section { padding: 120px max(5vw, calc((100vw - 1320px)/2)); }
|
|
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 52px; }
|
|
.section-heading h2, .amenities h2, .booking-flow h2, .academy h2, .location h2, .contact h2 { font-size: clamp(48px, 5vw, 78px); }
|
|
.section-heading h2::after { content: ""; display: block; width: 54px; height: 4px; margin-top: 20px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .7s .18s cubic-bezier(.2,.8,.3,1); }
|
|
.section-heading.centered h2::after { margin-inline: auto; transform-origin: center; }
|
|
.section-heading.visible h2::after { transform: scaleX(1); }
|
|
.section-heading.centered { display: block; max-width: 700px; margin: 0 auto 58px; text-align: center; }
|
|
.section-heading.centered > p:last-child { max-width: 580px; margin: 22px auto 0; color: var(--muted); }
|
|
.intro { display: grid; grid-template-columns: 1.1fr .8fr; gap: 20px 7vw; }
|
|
.intro .section-heading { margin: 0; display: block; }
|
|
.intro-copy { align-self: end; padding-bottom: 8px; color: var(--muted); }
|
|
.intro-copy .lead { color: var(--ink); font-size: 19px; font-weight: 650; }
|
|
.venue-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: 1.55fr .8fr; grid-template-rows: repeat(2, 245px); gap: 12px; margin-top: 35px; }
|
|
.gallery-item { border: 0; margin: 0; padding: 0; position: relative; overflow: hidden; cursor: zoom-in; background: #eee; }
|
|
.gallery-main { grid-row: 1 / 3; }
|
|
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
|
|
.gallery-item:hover img { transform: scale(1.035); }
|
|
.gallery-item::after { content: "↗"; position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgb(11 67 191 / 86%); opacity: 0; transform: translateY(6px); transition: .25s; font-size: 12px; }
|
|
.gallery-item:hover::after { opacity: 1; transform: none; }
|
|
.gallery-item span { position: absolute; left: 16px; bottom: 14px; padding: 7px 10px; background: #fff; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 900; }
|
|
.interior-intro { grid-column: 1 / -1; margin-top: 58px; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: end; }
|
|
.interior-intro .eyebrow { margin-bottom: 10px; }
|
|
.interior-intro h3 { margin: 0; font-family: var(--display); font-size: clamp(38px, 4vw, 60px); line-height: 1; text-transform: uppercase; }
|
|
.interior-intro h3 em { color: var(--blue); font-style: normal; }
|
|
.interior-intro > p { max-width: 560px; margin: 0; color: var(--muted); }
|
|
.interior-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
|
|
.interior-item { height: 270px; }
|
|
|
|
.courts { background: var(--paper); }
|
|
.sport-grid { display: grid; gap: 34px; }
|
|
.sport-card { display: grid; grid-template-columns: 1.08fr 1fr; min-height: 410px; background: #fff; }
|
|
.sport-card:nth-child(even) .sport-image { order: 2; }
|
|
.sport-image { min-height: 390px; position: relative; overflow: hidden; }
|
|
.sport-image img { height: 100%; object-fit: cover; transition: transform .5s; }
|
|
.sport-card:hover .sport-image img { transform: scale(1.03); }
|
|
.sport-image span { position: absolute; top: 0; left: 0; padding: 14px 18px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 900; text-transform: uppercase; }
|
|
.sport-content { padding: clamp(35px, 5vw, 70px); align-self: center; }
|
|
.sport-content small { color: var(--blue); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; }
|
|
.sport-content h3 { margin: 12px 0 20px; font-family: var(--display); font-size: clamp(35px, 3.4vw, 54px); line-height: 1; text-transform: uppercase; }
|
|
.sport-content p { color: var(--muted); max-width: 500px; }
|
|
.sport-content a { display: inline-block; margin-top: 16px; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 900; }
|
|
|
|
.amenities { display: grid; grid-template-columns: .85fr 1.15fr; background: var(--ink); color: #fff; }
|
|
.amenities-image { min-height: 610px; }
|
|
.amenities-image img { height: 100%; object-fit: cover; }
|
|
.amenities-content { padding: clamp(70px, 8vw, 130px); align-self: center; }
|
|
.eyebrow-light { color: #82a9ff; }
|
|
.amenities h2 em, .booking-flow h2 em, .contact h2 em { color: #fff; -webkit-text-stroke: 1px #fff; }
|
|
.amenity-list { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgb(255 255 255 / 20%); }
|
|
.amenity-list span { padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / 20%); font-size: 13px; }
|
|
.amenity-list span::before { content: "+"; color: var(--orange); margin-right: 10px; font-weight: 900; }
|
|
|
|
.plans { background: #fff; }
|
|
.plan-layout { display: grid; grid-template-columns: 330px 1fr; gap: 50px; align-items: start; }
|
|
.plan-tabs { border-top: 1px solid var(--line); }
|
|
.plan-tab { width: 100%; padding: 24px 10px; display: grid; grid-template-columns: 100px 1fr; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }
|
|
.plan-tab strong { font-family: var(--display); font-size: 25px; text-transform: uppercase; }
|
|
.plan-tab span { color: var(--muted); font-size: 12px; align-self: center; }
|
|
.plan-tab.active { padding-left: 18px; color: var(--blue); box-shadow: inset 4px 0 var(--orange); background: #f4f7ff; }
|
|
.plan-visual { min-width: 0; background: var(--paper); padding: 30px; }
|
|
.plan-visual img { height: min(52vw, 620px); object-fit: contain; mix-blend-mode: multiply; }
|
|
.plan-visual p { max-width: 680px; margin: 20px auto 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 13px; }
|
|
|
|
.booking-flow { padding: 100px max(5vw, calc((100vw - 1320px)/2)); color: #fff; background: var(--blue); position: relative; overflow: hidden; }
|
|
.booking-flow::after { content: ""; width: 350px; height: 620px; position: absolute; right: -140px; top: -220px; border: 1px solid rgb(255 255 255 / 20%); transform: rotate(36deg); }
|
|
.booking-title { display: flex; align-items: end; justify-content: space-between; }
|
|
.booking-title .eyebrow { align-self: start; }
|
|
.steps { list-style: none; padding: 0; margin: 65px 0 20px; display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: step; }
|
|
.steps li { min-height: 120px; padding: 0 20px; display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid rgb(255 255 255 / 35%); }
|
|
.steps b { color: #7fa6ff; font-size: 11px; }
|
|
.steps span { font-family: var(--display); font-size: clamp(22px, 2.2vw, 34px); line-height: 1; text-transform: uppercase; }
|
|
.booking-note { max-width: 580px; margin: 28px 0 0; color: #d7e3ff; font-size: 13px; }
|
|
|
|
.academy { padding: 110px max(5vw, calc((100vw - 1320px)/2)) 0; display: grid; grid-template-columns: 1fr .78fr; background: linear-gradient(120deg, #fff 0, #fff 64%, #f0f5ff 64%); overflow: hidden; }
|
|
.academy-copy { padding: 20px 7vw 100px 0; }
|
|
.academy-copy > p:not(.eyebrow) { max-width: 600px; color: var(--muted); font-size: 17px; }
|
|
.programmes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 30px 0 36px; }
|
|
.programmes span { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 750; }
|
|
.programmes span::before { content: "✓"; color: var(--orange); margin-right: 9px; }
|
|
.coach-card { align-self: end; position: relative; min-height: 610px; }
|
|
.coach-image { height: 610px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(circle at 50% 45%, #e9f1ff, #cbdcff 68%, transparent 69%); }
|
|
.coach-image img { width: auto; max-width: 100%; height: 94%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 20px 25px rgb(17 45 94 / 18%)); }
|
|
.coach-info { position: absolute; right: 0; bottom: 35px; padding: 20px 25px; min-width: 250px; background: var(--blue); color: #fff; }
|
|
.coach-info small { color: #a9c1ff; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 900; }
|
|
.coach-info h3 { margin: 7px 0 3px; font-family: var(--display); font-size: 32px; text-transform: uppercase; }
|
|
.coach-info p { margin: 0; font-size: 11px; }
|
|
.academy-philosophy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); color: #fff; background: var(--ink); }
|
|
.academy-philosophy span { padding: 28px 25px; border-right: 1px solid #34373c; text-align: center; text-transform: uppercase; font-size: 11px; font-weight: 850; letter-spacing: .06em; }
|
|
|
|
.community { background: var(--paper); }
|
|
.community-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #cfd3da; border-left: 1px solid #cfd3da; }
|
|
.community-grid article { min-height: 290px; padding: 34px; border-right: 1px solid #cfd3da; border-bottom: 1px solid #cfd3da; background: #fff; transition: .25s; }
|
|
.community-grid article:hover { color: #fff; background: var(--blue); transform: translateY(-5px); }
|
|
.community-grid b { color: var(--orange); font-size: 11px; }
|
|
.community-grid h3 { margin: 70px 0 15px; font-family: var(--display); font-size: 30px; text-transform: uppercase; line-height: 1; }
|
|
.community-grid p { margin: 0; color: var(--muted); font-size: 13px; }
|
|
.community-grid article:hover p { color: #d9e3ff; }
|
|
|
|
.location { display: grid; grid-template-columns: 1.05fr .95fr; }
|
|
.location-image { min-height: 680px; }
|
|
.location-image img { height: 100%; object-fit: cover; }
|
|
.location-copy { padding: clamp(65px, 7vw, 115px); align-self: center; }
|
|
.location-copy > p:not(.eyebrow), .location-copy li { color: var(--muted); }
|
|
.nearby { margin: 30px 0; display: flex; flex-wrap: wrap; gap: 9px; }
|
|
.nearby span { padding: 8px 12px; border: 1px solid var(--blue); color: var(--blue); font-size: 10px; font-weight: 900; text-transform: uppercase; }
|
|
.location-copy ul { padding-left: 17px; }
|
|
.location-copy li { margin: 10px 0; }
|
|
|
|
.timeline { background: #fff; }
|
|
.timeline-track { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
|
|
.timeline-track::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--line); }
|
|
.timeline-track article { padding: 70px 24px 25px 0; position: relative; }
|
|
.timeline-track article::before { content: ""; position: absolute; top: 14px; left: 0; width: 18px; height: 18px; border: 5px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
|
|
.timeline-track.visible article::before { animation: timeline-pulse .55s both; }
|
|
.timeline-track.visible article:nth-child(2)::before { animation-delay: .1s; }
|
|
.timeline-track.visible article:nth-child(3)::before { animation-delay: .2s; }
|
|
.timeline-track.visible article:nth-child(4)::before { animation-delay: .3s; }
|
|
.timeline-track.visible article:nth-child(5)::before { animation-delay: .4s; }
|
|
@keyframes timeline-pulse { 0% { transform: scale(.25); opacity: 0; } 65% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
|
|
.timeline-track b { color: #a1a6ae; font-size: 10px; }
|
|
.timeline-track time { display: block; margin: 10px 0 8px; color: var(--blue); font-size: 11px; font-weight: 900; text-transform: uppercase; }
|
|
.timeline-track h3 { margin: 0 0 12px; font-family: var(--display); font-size: 25px; line-height: 1; text-transform: uppercase; }
|
|
.timeline-track p { margin: 0; color: var(--muted); font-size: 12px; }
|
|
.timeline-track .timeline-finish::before { background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
|
|
.timeline-finish h3, .timeline-finish time { color: var(--orange); }
|
|
|
|
.contact { padding: 100px max(5vw, calc((100vw - 1320px)/2)); display: grid; grid-template-columns: 1.2fr 1fr; gap: 8vw; color: #fff; background: linear-gradient(125deg, var(--blue-dark), var(--blue)); }
|
|
.contact-copy p:last-child { max-width: 550px; color: #d7e4ff; }
|
|
.interest-form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; align-content: center; }
|
|
.interest-form label:nth-child(3) { grid-column: 1 / -1; }
|
|
.interest-form label span { display: block; margin-bottom: 6px; color: #b8ceff; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
|
|
.interest-form input, .interest-form select { width: 100%; height: 49px; padding: 0 14px; border: 1px solid rgb(255 255 255 / 35%); border-radius: 0; color: #fff; background: rgb(0 0 0 / 15%); outline: none; }
|
|
.interest-form input:focus, .interest-form select:focus { border-color: #fff; }
|
|
.interest-form input::placeholder { color: #bdc9e5; }
|
|
.button-light { border-color: #fff; background: #fff; color: var(--blue); }
|
|
.button-light:hover { background: var(--orange); border-color: var(--orange); }
|
|
.form-status { margin: 0; align-self: center; color: #dbe6ff; font-size: 11px; }
|
|
.contact-direct { align-self: center; padding: 35px; border: 1px solid rgb(255 255 255 / 30%); background: rgb(0 0 0 / 12%); }
|
|
.contact-direct > p { margin: 0 0 22px; color: #d7e4ff; }
|
|
.contact-direct > div { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
|
|
.contact-direct > div span { padding: 7px 10px; border: 1px solid rgb(255 255 255 / 28%); color: #fff; text-transform: uppercase; font-size: 9px; font-weight: 850; letter-spacing: .05em; }
|
|
|
|
footer { padding: 70px max(5vw, calc((100vw - 1320px)/2)) 30px; display: grid; grid-template-columns: 1.6fr 1fr .7fr; gap: 60px; color: #d4d6d9; background: var(--ink); font-size: 12px; }
|
|
.brand-footer { color: #fff; }
|
|
footer h4 { margin: 0 0 16px; color: #fff; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
|
|
footer a, footer span { display: block; margin: 8px 0; }
|
|
.footer-contact { min-width: 0; }
|
|
.footer-contact .contact-row { display: flex; align-items: center; gap: 11px; margin: 10px 0; color: #d4d6d9; line-height: 1.35; }
|
|
.footer-contact a.contact-row:hover { color: #fff; }
|
|
.footer-contact .contact-row > span { margin: 0; }
|
|
.footer-contact .contact-icon { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border: 1px solid #454b53; border-radius: 50%; color: #fff; }
|
|
.contact-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
|
.contact-icon svg .solid { fill: currentColor; stroke: none; }
|
|
.footer-contact .instagram-icon { color: #fff; background: linear-gradient(140deg, #7258d5, #db3d84 55%, #f39b3d); border-color: transparent; }
|
|
.footer-contact .xhs-icon { width: 31px; height: 31px; flex-basis: 31px; border: 0; border-radius: 8px; color: #fff; background: #ff2442; font-size: 7px; font-weight: 900; }
|
|
.footer-contact .facebook-icon { border: 0; border-radius: 5px; color: #fff; background: #4267b2; font-family: Arial, sans-serif; font-size: 22px; font-weight: 900; }
|
|
.footer-contact .contact-address { align-items: flex-start; margin-top: 14px; color: #9da2aa; font-size: 10px; }
|
|
.footer-contact .contact-address .contact-icon { margin-top: 1px; }
|
|
.footer-note { grid-column: 1 / -1; margin: 25px 0 0; padding-top: 24px; border-top: 1px solid #34383e; color: #777d85; font-size: 10px; }
|
|
|
|
.contact-modal { width: min(90vw, 540px); max-height: 78vh; padding: 24px 28px 20px; border: 0; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px rgb(0 0 0 / 35%); overflow-y: auto; }
|
|
.contact-modal::backdrop { background: rgb(5 12 25 / 82%); backdrop-filter: blur(5px); }
|
|
.contact-modal .modal-close { position: absolute; right: 13px; top: 13px; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: #fff; cursor: pointer; font-size: 18px; }
|
|
.contact-modal .eyebrow { margin-bottom: 7px; }
|
|
.contact-modal h2 { margin: 0; padding-right: 24px; font-size: clamp(32px, 3.2vw, 40px); line-height: .94; }
|
|
.contact-modal h2 em { color: var(--blue); font-style: normal; }
|
|
.modal-intro { max-width: 480px; margin: 9px 0 14px; color: var(--muted); font-size: 11px; }
|
|
.modal-contact-list { border-top: 1px solid var(--line); }
|
|
.modal-contact-row { min-height: 48px; display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }
|
|
.modal-contact-row:last-child { border-bottom: 0; }
|
|
.modal-contact-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); font-size: 10px; font-weight: 900; }
|
|
.modal-contact-icon.instagram-icon { color: #fff; border: 0; background: linear-gradient(140deg, #7258d5, #db3d84 55%, #f39b3d); }
|
|
.modal-contact-icon.xhs-icon { color: #fff; border: 0; border-radius: 7px; background: #ff2442; font-size: 7px; }
|
|
.modal-contact-icon.facebook-icon { color: #fff; border: 0; border-radius: 5px; background: #4267b2; font-family: Arial, sans-serif; font-size: 18px; }
|
|
.modal-contact-row small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: 8px; font-weight: 850; }
|
|
.modal-contact-row strong { display: block; margin-top: 1px; overflow-wrap: anywhere; font-size: 10.5px; }
|
|
.copy-contact { min-width: 54px; height: 27px; padding: 0 8px; border: 1px solid var(--blue); color: var(--blue); background: #fff; text-transform: uppercase; font-size: 8px; font-weight: 900; cursor: pointer; transition: .2s; }
|
|
.copy-contact:hover, .copy-contact.copied { color: #fff; background: var(--blue); }
|
|
.copy-status { min-height: 15px; margin: 10px 0 0; color: var(--blue); font-size: 10px; }
|
|
.lightbox { width: min(94vw, 1100px); padding: 0; border: 0; background: transparent; overflow: visible; }
|
|
.lightbox::backdrop { background: rgb(0 0 0 / 90%); }
|
|
.lightbox img { max-height: 84vh; object-fit: contain; }
|
|
.lightbox button { position: absolute; right: 0; top: -47px; width: 42px; height: 42px; border: 1px solid #fff; border-radius: 50%; color: #fff; background: transparent; font-size: 26px; cursor: pointer; }
|
|
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
|
|
.reveal.visible { opacity: 1; transform: none; }
|
|
|
|
@media (max-width: 1050px) {
|
|
.nav { gap: 17px; }
|
|
.nav a { font-size: 9px; }
|
|
.site-header { padding-inline: 3vw; gap: 20px; }
|
|
.court-counts { grid-template-columns: repeat(3, 1fr); }
|
|
.count-note { display: none; }
|
|
.court-count:last-of-type { border-right: 0; }
|
|
.community-grid { grid-template-columns: 1fr 1fr; }
|
|
.timeline-track { grid-template-columns: 1fr 1fr; gap: 0 30px; }
|
|
.timeline-track::before { display: none; }
|
|
.timeline-track article { padding-top: 45px; border-top: 1px solid var(--line); }
|
|
.timeline-track article::before { top: -9px; }
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.announcement { height: 28px; font-size: 8px; }
|
|
.site-header { height: 67px; padding: 0 20px; }
|
|
.menu-toggle { display: block; margin-left: auto; }
|
|
.header-actions { display: none; }
|
|
.nav { display: none; position: absolute; left: 0; top: 67px; width: 100%; padding: 25px 20px 30px; flex-direction: column; align-items: flex-start; gap: 18px; background: #fff; box-shadow: 0 16px 25px rgb(0 0 0 / 12%); }
|
|
.nav.open { display: flex; }
|
|
.nav a { font-size: 13px; }
|
|
.nav .language-mobile { display: block; color: var(--blue); font-size: 13px; }
|
|
.hero { min-height: 0; display: flex; flex-direction: column; background: #fff; }
|
|
.hero-copy { padding: 70px 22px 40px; }
|
|
.hero-lede { font-size: 16px; }
|
|
.hero-image { min-height: 420px; }
|
|
.hero-image::before { background: linear-gradient(180deg, #fff 0, transparent 20%); }
|
|
.hero-stamp { width: 92px; height: 92px; right: 18px; bottom: 18px; }
|
|
.court-counts { min-height: 0; grid-template-columns: 1fr; padding: 20px 22px; }
|
|
.court-count { height: 86px; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
|
|
.section { padding: 80px 22px; }
|
|
.section-heading { display: block; }
|
|
.section-heading h2, .amenities h2, .booking-flow h2, .academy h2, .location h2, .contact h2 { font-size: 48px; }
|
|
.intro { grid-template-columns: 1fr; }
|
|
.venue-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 330px 180px; }
|
|
.gallery-main { grid-column: 1 / -1; grid-row: auto; }
|
|
.interior-intro { grid-template-columns: 1fr; gap: 18px; margin-top: 45px; }
|
|
.interior-gallery { grid-template-columns: 1fr; }
|
|
.interior-item { height: 260px; }
|
|
.sport-card { grid-template-columns: 1fr; }
|
|
.sport-card:nth-child(even) .sport-image { order: 0; }
|
|
.sport-content { padding: 38px 26px; }
|
|
.amenities, .location, .contact { grid-template-columns: 1fr; }
|
|
.amenities-image, .location-image { min-height: 420px; }
|
|
.amenities-content, .location-copy { padding: 70px 22px; }
|
|
.plan-layout { grid-template-columns: 1fr; gap: 25px; }
|
|
.plan-tabs { display: grid; grid-template-columns: 1fr 1fr; }
|
|
.plan-tab { grid-template-columns: 1fr; }
|
|
.plan-visual { padding: 12px; }
|
|
.plan-visual img { height: 65vw; }
|
|
.booking-flow { padding: 80px 22px; }
|
|
.booking-title { display: block; }
|
|
.steps { grid-template-columns: 1fr; margin-top: 40px; }
|
|
.steps li { min-height: 0; padding: 16px 0; flex-direction: row; border-left: 0; border-top: 1px solid rgb(255 255 255 / 30%); }
|
|
.steps span { font-size: 25px; }
|
|
.academy { padding: 80px 22px 0; grid-template-columns: 1fr; background: #fff; }
|
|
.academy-copy { padding: 0 0 65px; }
|
|
.coach-card { min-height: 520px; }
|
|
.coach-image { height: 520px; }
|
|
.academy-philosophy { margin-inline: -22px; grid-template-columns: 1fr 1fr; }
|
|
.community-grid { grid-template-columns: 1fr; }
|
|
.community-grid article { min-height: 220px; }
|
|
.community-grid h3 { margin-top: 35px; }
|
|
.timeline-track { grid-template-columns: 1fr; }
|
|
.timeline-track article { padding: 42px 0 35px; }
|
|
.contact { padding: 80px 22px; gap: 50px; }
|
|
.contact-direct { padding: 25px 20px; }
|
|
footer { grid-template-columns: 1fr 1fr; padding: 60px 22px 25px; gap: 40px; }
|
|
footer > div:first-child, .footer-note { grid-column: 1 / -1; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
h1 { font-size: 56px; }
|
|
.hero-actions .button { width: 100%; }
|
|
.hero-image { min-height: 330px; }
|
|
.venue-gallery { display: block; }
|
|
.gallery-item { height: 240px; margin-bottom: 8px; width: 100%; }
|
|
.interior-gallery { display: block; }
|
|
.amenity-list, .programmes, .interest-form { grid-template-columns: 1fr; }
|
|
.interest-form label:nth-child(3) { grid-column: auto; }
|
|
.plan-tabs { grid-template-columns: 1fr; }
|
|
.academy-philosophy { grid-template-columns: 1fr; }
|
|
.academy-philosophy span { border-bottom: 1px solid #34373c; }
|
|
.contact-modal { width: min(92vw, 380px); max-height: 86vh; padding: 24px 16px 20px; }
|
|
.contact-modal h2 { padding-right: 28px; font-size: 34px; }
|
|
.modal-contact-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; }
|
|
.copy-contact { min-width: 56px; padding-inline: 8px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation: none !important; transition: none !important; }
|
|
.reveal { opacity: 1; transform: none; }
|
|
.hero-copy > *, .hero-image { opacity: 1; transform: none; }
|
|
}
|